2020年にJavaScriptフレームワークをちゃんとはじめるために。

結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。

ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。

JavaScriptフレームワークの簡易比較

有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。

で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。

・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。
・ Reactは、JavaScriptの中にHTMLを書きます。
・ Vueは、HTMLにJavaScriptを書きます。

「もっと本質的なことを」という気持ちもわかりますが、ここらへんが結構大切で、まずフレームワークを選定しようと思ったら3つのプロジェクトをつくって（どれもCLIコマンドで自動的にスタータープロジェクトを作成することができます）、自分の好みはどれかというのをみるのが一番おすすめです。

80点がとれるAngular

Angularのポジション感を掴むのには、以下の記事がおすすめです。

Angularでの開発を快適に進めるために知っておきたいこと - Qiita

すごく簡単にいってしまうと「覚えることが少ないとはいえないけど、ルールが決まってるからはじめからそれなりのコードは書ける」ようなフレームワークです。使っているうちに自然とイマドキな技術や開発手法を学ぶことができるので学習用教材としても優れてるなぁと思う今日このごろです。

React, VueがJavaScriptをそのまま書くことに対して、AngularはJavaScriptの拡張言語であるTypeScriptがデフォルトなので昔は「TypeScriptを覚えるのがハードルが高い」などといわれてたのですが、今ではReactやVueもTypeScriptを導入する流れがきてます。

Angularにまつわる誤解

で以下のように紹介されています。

Angularは57.8%が使っていて、今後はもう使いたくない人は35.8%にもなります。

完全に誤解で、Angularにはその前身となるAngularJSがあります。この調査は、そのAngularJSもAngularに含めていて（※別物のパッケージです）、つまりは「10年前にAngularJSを使ってて、もう使いたくない人」もカウントしてます・・・。調査したチームは「調査の正確性より毎年の連続性を大切にする」と言ってて、そもそも正確性を欠いた調査です。

特化型ライブラリのReact

Reactは実はフレームワークではなく、ライブラリです。公式サイトにも明快に書かれています。

A JavaScript library for building user interfaces

AngularやVueは開発に必要なパッケージが一通り揃ってるフレームワークなのですが、Reactはあくまでライブラリ集なので、JavaScriptの中にHTMLを書くインターフェイス構築用の本体以外に、ルーティングをしたければルータを選んで追加し、HTTP通信をしたければHTTP通信用のライブラリを選定、追加する形になります。

公式が「おすすめスターターキット」のようなものを用意していますが、基本姿勢がライブラリであるということはReactを理解する上で重要です。「Angularは80点がとれる」と紹介しましたが、Reactは不要なものを削ぎ落とし、開発目的に一致するライブラリを選定してチームの文化をつくることで100点を目指すことができると思っています。

ちなみにデータビジュアライゼーション界隈においては https://github.com/uber/react-vis があるのでReact推しらしいです。

シンプルなフレームワークVue

3つの中で一番はじめやすいのはVueでしょう。既存のプロジェクトでScriptタグでVueを呼び出すだけで使い始めることができます。

ですので、「jQueryをVueに置き換える」ぐらいのライト利用からはじめることができるので、初心者を中心にして人気のあるフレームワークです。Single Page Application以外をつくるならVue一択かなと思います。

Angularで「イマドキな技術や開発手法を学ぶことができる」と書きましたが、そういう意味だと「0からはじめて、今日からいきなりコードを書ける」のがVueかなと思います。

まとめ

技術選定で参考にできないなと思ってるのが、GitHubのStarの数であったり、DL数です。

GitHubのStar数は、新しくでたOSSより古くからあるOSSの方がStarは多くなります。DL数は短期的には話題になったOSSや、レガシーで多くの現場で使われてるOSSの方が多くなりがちです。

人気選定ではなく技術選定を行うわけですので、実際にさわって自分自身にあってるものを選ぶことができればと思っています。また、それぞれのフレームワークの知識を深めるのに、以下の記事は2019年年末の最新の知見ばかりですのでぜひご活用ください。

Angular Advent Calendar 2019 - Qiita

React Advent Calendar 2019 - Qiita

Vue Advent Calendar 2019 - Qiita

それでは、また。