React / Vue / Angular / RiotそしてIonic

箸にも棒にもかからないような話ですが。

フロントエンドやっていると、「結局どのライブラリ使うのがいいの？」って質問はどこかでだれかに聞かれます。ぶっちゃけなんだっていいでしょとしか思わんのですが。

ただ、どういう時に何を使おうかなという気分になるかなというのを整理した結果、多分こういう判断基準が自分にとってはちょうどいいかなと思いました。

「雑に書きたいか、きっちり書きたいか」

「jQueryは使いたくないけど、ES NextやTypeScriptでがっつり書きたいわけじゃないんよね」というケースと、「かっちりやらないとこれいずれエラい目に合うよな・・・」というケースがあると思ってます。だいたい個人プロジェクトや軽い受託案件だと前者なケースが多い印象です。そして会社が運営するSaaSとかだと、後者の気持ちで行かないと１年前の自分に切れる事態がそのうち発生します。

で、それぞれちょっとだけ触った感想として「雑に扱っていいランキング」はこうなるかなという風に思っています。

• [雑に書ける]
• Riot
• Vue
• React
• Angular
• Ionic
• [きっちり書く]

Vueを使っている人がすごく日本では多い印象ですが、個人的にはRiotの方が雑にかけていいような気がするなぁという気持ちです。だってこんな感じで書けますし。

<todo>
  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []

    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

ほぼHTMLを書く感じですね。WordPressやDrupalなどのCMSにウィジェットとして組み込みたい場合など、「コンポーネントを作りたいねん」というケースにはRiotが一番かなと思います。ただしFluxの実装が欲しくなった時などに参考になる事例などが多くないこともあり、大規模なSPAで使うとjQueryのように混沌としたコードになりやすい印象があり、実際会社のSaaSで使っていた時は、結局縦横無尽にstateが更新されて非常につらい実装が生まれました。

「雑に書ける＝手早く他に影響を与えずに実装できる」でもあり、「雑に書ける＝規模が大きくなるとつらい目に遭いやすい」ということかなと思っています。

反対にAngularやIonicはRiotのようなウィジェット・コンポーネントだけで使うことを想定していない作りになっていると思っていまして、使うならほぼJAM StackというかSPAを作ることになるでしょう。その代わりにTypeScriptが標準であり、テストやリントについてもCLIから実行が可能というAll In One感はチームで開発するにはとても便利です。問題はjQueryとPHPで頑張っていた人たちにとってTypeScriptとAngular、さらにIonicだとCordovaなども覚える必要があるのは結構しんどさがあって、Riot / Vue / ReactなどでSPAをやってみた人が「やっぱTypeScript欲しいよなぁ」という気持ちになってたどり着くケースというのも少なくないかなと思っています。逆に初めからAngular / Ionicに行った人はVue / RiotはともかくReactには行かないのかなぁという個人的印象もあります。

ReactはRiot  / Vueほど縦横無尽にDOMをいじれない（というかそんなことしたら速攻でぶっ壊れる）のでSPA入門にはちょうどいいかなという気もします。ただしjQuery同様サードパーティのエクステンションを組み合わせて使う組み方になる分、そこに闇というか人によって使いやすい・使いにくいがわかれるのかなと思います。JSXについては個人の趣味嗜好でしょう。DOMの変更についてはReactのライフサイクルにのる必要がある分Riot / Vueよりは雑に書けない部分がありますが、エクステンションを雑に追加・変更できる分そこに相性やメンバーがどれを常用しているかなどの問題が出てくるなぁという印象です。

VueはVuexやNuxtありきになってきているのかなぁという気もして、SPAやSSG的な使い方が増えているのかなという印象があります。RiotとReactをメインで使っていることと、Nuxtを必要とする案件を今のところ請けたことがないこともあり、正直チュートリアルの次に進むモチベーションがあまり湧いていません。

で、結局？

「雑に書きたいなら書けるライブラリを、違うなら固いライブラリを使えばいいんじゃない？」というのが今の所の自分の結論です。

長期に渡って複数人でメンテする必要があるなら、TypeScriptやJest / Mochaを入れたくなりますし、であればAngularかIonicでがっつり作っていくのは悪い手ではないでしょう。ただしどのライブラリも触ったことがない状態であれば、Reactで多少の雑さに目をつぶりながらさっさと作って、FlowtypeやTypeScriptを後から少しずつ入れていくというやり方も無しではないでしょう。

反対に時間をかけたくない案件にTypeScriptできっちり書いたりReactの環境を準備したりするのは費用対効果が高くないなぁという印象がありますので、VueやRiotでサクッと作って納品してしまう方が良い気もしています。「動的なフォームを１つ作りたい」とか「動的な検索フォームが欲しい」くらいであれば、多少雑に書いたとしても半年〜１年くらい経っても30分くらいコード読み直したら把握できるでしょう。