宗教戦争！

そうです！プログラミングの世界では宗教戦争の世界です！笑。

Editorと言えば、

Vimなのか、Emacsじゃないのか

Atomなのか、Sublimeなのか, VSCodeなのか

精選！プログラマー秘宝Editor（2018）

ウェブアプリケーションでいうと、PHPのウェブアプリケーションフレームワークなのか、Ruby on Railsなのか

この記事で話すJavaScriptのフレームワークももちろん例外ないです！

（これから、明示的な説明がない限り、この記事ではJavaScriptフレームワークというのはフロントエンド用のJavaScriptフレームワークと言います。）

Angular.jsなのか、React.jsなのか、Vue.jsなのか

（１つお断りですが、私は、限られている時間とリソースの中で、可能な限り調べていますが、決して３つのフレームワークあるいはライブラリーに精通して、隅々まで全部把握しきている訳ではなく、仮にマスターしたとしても、JavaScriptフレームワークのエコシステムがものすごいスピードで進化していますので、少し時間が立つと、色々内容が変わってしまいます。なので、私の現段階の体験や理解の内容が多かったりします。その前提でご参考程度でお読みいただければと思います。）

（もちろん、他のJavaScriptフレームワークもいっぱいあります：Ember.js Riot.js, Knockout.js, Polymer.js etc.それぞれ性質が微妙に違ったりもします。フレームワークよりのものがあれば、ライブラリー寄りのものもあります。）

今日は、2018年です。そろそろファイナルアンサーを出したいと思います！（というより、ファイナルアンサーを出していただくための、参考材料を少し私的にご提供できればと思います。もちろん、全て正しい、あるいは絶対だというものではなく、あくまでも私の角度から見た一面にすぎません。）

一体、JavaScriptのフレームワークはどれがいいのか？

特に、これから、JavaScriptフレームワークを選定するIT担当者や、CTOにとって

どういった理由で、選ぶのかがとても重要で

いったん選んだら、しばらくそのフレームワークの上で、実装を展開しなければなりませんし

途中で切り替えるのが膨大はコストがかかりますし、そもそも納品日もありますから、そんな簡単に舵を切ることはできないはずです。

なので、選定の段階では、じっくり吟味したいですね。

この記事では、その選定の際に、少しでも有益な情報を提供できたらと思います。

また、この記事も、書いたら終わりではなく、常に最新の情報、知見を盛り込んで、内容の鮮度を更新していきたいと思います。（この記事というよりは、このブログサイト全体がそういうポリシーで運用しています。全ての記事を定期的に更新しています。）

知らないと始まらない

まずそれぞれのフレームワークを見て行きましょう。

JavaScript界隈ですと、最近のトレンドにすごく感心しているはずです。

数年前のウェブアプリケーション開発と言えば、PHP言語で開発するものあるいは、Ruby On Railsというウェブアプリケーションフレームワークで開発するものが多かったです。（もちろん、今も大きいなシェアになっています。）

JavaScriptと言えば、よく耳にするのはjQueryだという時代も過去になっています！（厳密に言えばライブラリーで、他のJavaScriptフレームワークと同じカテゴリーではありませんが、ここで比較のために、取り上げます。）

代わりに、モダーンな今風のセクシーなウェブアプリケーションフレームワークは何と言ってもJavaScriptでしょう！

合言葉はSPA(Single Page Application)です！笑（SEOに弱いのを置いといて。。。）

実は、

大体のことはみんな知っているはずですが、比較のために一回整理して行きましょう。

Angular.js

Angularと言っても、Angular.js(1.x)系 https://angularjs.org/

とその後の2.x系があります。https://angular.io/

記述の仕方も変更があったり、色々変わったことが多く、まるで別のフレームワークになっているようだという意見もあります。

Angularという言葉を聞くときに、それは1.x系なのか、2.x系なのかをご留意ください。

私が、JavaScriptフレームワークの中で一番最初に覚えた・たっぷり使ったものです。最初にAngular.js(1.x)を使ってウェブアプリ開発するのが楽しくて、喜びの連続でした！双方向データバインディングが感動でした！

双方向データバインディングとは、データの変更があればUIの表示を更新し、UIの変更があればデータの更新を自動的に行う機能を指します。

つまり、わざわざ、更新のロジックを書かなくてもいいです。今は当たり前ですが、同時最初にウェブの開発でこれができるのは魔法のように見えました！笑。

• 開発の主体：Google及びコミュニティー。他にPolymer、Dart言語などもありますが、この記事では割愛します。
• 開始：2009年。私が触ったのは2014年ごろ
• github星の数：58,385(v1.x) 35,584(v2.x-6.x)(2018/04/28)
• データバインディング：データ←→HTMLの双方向
• 学習コスト：大（v1.xとv2.x-互換性がないため、さらにアップグレードのハードルも高くなっています。もちろん今から勉強するなら、v1.x系をやる必要がないかもしれません。）
• Nativeアプリフレームワーク（スマホアプリ）：Ionic(React Nativeに比べると発展途上でまだ歴史が浅いです。)
• サーバーサイドレンダリング：Angular Universal（v2.x-系から）
• メリット：フルスタックなのでライブラリを調べたり追加しなくても最初から機能全部入って、ほとんどことは実現できます。
• デメリット：新言語TypeScipt学習コスト高いです。理解するものが多いです。

React.js

Facebookが相当注力しているJavaScriptのフレームワークです！

• 開発主体はFacebook及びコミュニティ。
• 開始：2011年、私が触ったのは、2016年ごろ
• github星の数：94,595(2018/04/28)
• データバインディング：データ→HTMLの片方向(逆はイベントを拾いsetState()が必要)
• 学習コスト：中、Angularほどではないですね。
• Nativeアプリフレームワーク（スマホアプリ）：React Nativeが最も有名で弊社もこれを使っています！
• サーバーサイドレンダリング：Next.js
• メリット：Angularより導入コストが低く、スモールスタートが可能、本体はView特化のライブラリなので手軽に導入できます。
• デメリット：JSX記法だとJSの中にHTMLを書くことになっており、慣れの問題だがこれを嫌がる人が多いです。私は、割としばらくやって見たら、慣れました。

React Nativeとは何か？

Vue.js

アリババのが採用しているJavaScriptフレームワークです。

軽量で、APIがAngular.js(1.x)から影響を受けたものが多いです。双方向データバインディングのところがAngular.js(1.x)と似ています。Angular.js(1.x)に馴れ親しんだ私にとっては、Vue.jsもとっつきやすいです。

• 開発主体：元GoogleのAngularJS開発チームだったEvan Youさん及びコミュニティ
• 開始：2014年（最近ですね。）最近気になって、触り始まった。
• github星の数:92,484(2018/04/28)ほぼReactと互角ですね。
• データバインディング：データ←→HTMLの双方向（Angularと同じですね。）
• 学習コスト：中ぐらいですが、Angularを触ったことがあれば、少し手取り早くなりますね。（はい、私です。）
• Nativeアプリフレームワーク（スマホアプリ）：Weex(発展途上)
• サーバーサイドレンダリング：Nuxt.js（私がこれに注目しています！）2018年9月21日 nuxt.js 2.0.0が出ました！
• メリット：軽量、学習コストが低いです。
• デメリット：大企業がバックアップしていなくて、ややサポート体制には不安が残ります。とはいってもとても人気なフレームワークで、Laravelがスポンサーになっています。

https://risingstars.js.org/2017/ja/#section-framework

vueの人気ぶりがすごいですね。大企業がバックアップしていなくてもこんなにコミュニティーの支持と人気を得られましたね。

結論

なかなか、どれが一番だということは言えませんが、皆さんのプロジェクトの状況に合わせて

お選びいただければと思います。

どれが一番優れているとか、どれが一番人気とかいうよりは

どれが一番今度のプロジェクトの適しているかが一番の重要なポイントかと思います。

プログラミング言語やフレームワークに私は特にこだわりがなく、どの言語も、どのフレームワークも、ユースケースに合えば、バリューの提供ができると思います。

JavaScriptフレームワークに限らず、世のかなの全てのものがどれも、一長一短があります。

短所ばかりのものもなければ、長所ばかりのものもありません。

【糞言語】

何か1つのプログラミング言語を極めると、他の言語の長所や短所が見えてきます。
同時に「短所しか無い言語」は存在しないと気付く筈です。

言い換えると、特定の言語を「糞だ！」と言い放つ者は、「たった1つの言語すら極めれなかった自分」を誤魔化しているに過ぎないのです。

＼^o^／

— がたろう TTLでCPUを作る爺（コンパイラやOSも手作りです） (@duo6750) 2018年8月8日

適材適所で選びましょう。

（私個人的には勉強のために、vue.jsをこれから試してみたいと思います。）

弊社のところでは、一部React.js、ReactNativeがっつりやっております。 Angular.js(1.x)も使っています。

余談ですが、React Nativeで開発しているアプリは、こちらで公開しています。

https://hojokinreach.com/landing/

また、弊社が制作している数多くのサービスとウェブサイトがAngular.js（1.x）で書いています。

最近、SEOの重要性を痛感しまして、一部のサービスを学習を兼ねて、書き直そうかなと考えております。

（社内システムや、管理画面、などSEOの関係ない応用としては、最高に書きやすいフレームワークです！）

その時の、候補として、vue.jsをベースにしたNuxt.js にしようかなと考えております。

nuxt.js簡単に試せる！（ページを作るまで）超簡単手順

JavaScriptの世界の素晴らしさとサーバーサイドレンダーリングのパワーを手に入れたら、最高じゃないですか！笑。

特に私個人にとって、Angular.js（1.x）の双方向バインディングの「感覚」がそのまま「使える」のが大きいなメリットですね。

あと、軽量のところも注目しています。

今後、nuxt.jsを使った感想とかもここで皆さんと共有して行きたいと思います。

では、また！

Happy JavaScripting!

[amazonjs asin=”4863542453″ locale=”JP” title=”基礎から学ぶ Vue.js”]

[amazonjs asin=”B01MUS2RP9″ locale=”JP” title=”JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書”]

[amazonjs asin=”4774191302″ locale=”JP” title=”Angularアプリケーションプログラミング”]

node.js＋express.jsサーバーのmongooseで、async/awaitを使えるようにする！簡単確実！