こんばんわ、hisayukiです
最近JSFrameworkを調べる機会が多いので、昨今のJSFramework事情を色々とまとめてみました！
尚、僕はAngular派なので多少偏った意見になってるかもしれないのですｗ
三代Framework＋α
大体、よく聞くFrameworkは3つですね、みんな大好きReact、Vue、Angularです。
あと、1つ最近気になったFrameworkがあるので、1つづつ書いていこうと思います。
Angular
全員が８０点を目指せる
Google製のFullStackFrameworkで、コーディングはTypeScriptがデフォルトになります。
初学者向きかと言われたらそうでもない、でもルールが決まってるのでチーム内統制が取りやすい。
覚えることは結構あるけど、チーム内でやればルールが決まっている分フォローもしやすい。
このあたりはFullStackFrameworkの利点でチーム開発では使いやすいんじゃないかなっておもいます。
実際僕はJSFrameworkの入りはVue.jsではなくAngularでした。
Frameworkがある程度の開発ルールを定めてくれているため、雑派な書き方をしたら動かないというわかりやすい結果を出してくれます。
それにFullStackなのでルーティング、データバインディング、HTTP通信、Validation、Component志向などなど、必要なものが一括で入ってます。
個人的にはイチオシ
人気としてはイマイチ
特徴としては他のJSFrameworkと違い、HTMLとCSSとtsファイルが全て別れている。
加えてComponentとServiceも別れているため、ごちゃごちゃしないあたりが好き。
あとデフォルトTypeScriptなのも点数高いです。
型のない生のJSとか無理
※個人の意見です
ただ、規模感大きくなるとファイル数が多くなるので、トランスパイル後のjsファイルが大きくなりがち
SPAにすると初期ページのLoadが遅くなるので、一工夫必要です💦
デメリットはFullStackFrameworkなので、カスタマイズ製は低めです。
Angular関連Libraryは追加できますが柔軟性は低いです。
React
プロフェッショナルが100点を目指せる
まず、FrameworkではなくLibraryなのがReact。
Facebook製で日本でも海外でも人気があり、世界シェアではトップです。
こちらはAngularと違いJSの中に吐き出すHTMLを書くスタイル。
そのためすべてJSで書く感じになっています。
TypeScriptにも対応しており、型付き言語での構築も可能です。
参入ハードルがわりと高めです
だからこそ世界シェアでは好まれてるというのはあるかもしれないですが・・・
利用者のターゲットが“開発者”なんですよね、なので覚えることが多いです。
また公式がカバーしている範囲が狭く、追加のLibraryの開発もコミュニティがメインで動いてたりします。
最近は公式からcreate-react-appというスターターキットでひな形が作れるようになったことで、多少難易度下がったみたいですね。
AngularみたいなFullStackFrameworkやVueのようなライトな使い方が出来るFrameworkと違い、必要なLibraryを自由に選択することができるのがReactの特徴です。
同時に技術者のスキルレベルに非常に左右されます。
自由に選べるということは何を使えば実現出来るのかを開発者が知っている必要があります。
そのためプロフェッショナルが集まればJSのパフォーマンスを極限まで出せる反面、チーム内能力にムラがあると開発が困難になると思います。
加えてLibrary間の互換性なども利用者サイドで考慮する必要があります。
開発環境としてはChrome拡張もありますし、SSRをするためのFrameworkとしてNext.jsがあります。
最近はReduxよりもReact Hooksが人気があるみたいですね。
Vue
Easyで初学者を巻き込める
今までのJSをVueに切り替えるって感じくらいのライトな感じでスタートできます。
使って見るだけなら、ScriptタグでCDNから呼び出すだけですぐ使えます。
スタートガイドがわかりやすく、とりあえず初めるだけなら1時間くらいでいけるんじゃないかな・・・
ともかく参入のハードルが低い
HTMLの中にJSを書いてくスタイルでHTML＋CSS＋JQueryからのフロントエンドエンジニアが参入しやすいです。
開発をサポートしてくれるNuxt.jsというFrameworkが有名で、加えてChrome拡張も用意されており画面上でのデバッグ機能を強化してくれます。
入り口がライトなぶん、大規模には向かないかというとそうでもないです。
Vueの特徴はライトな利用から大規模開発での利用まで、スケールアップ・スケールダウンが可能です。
そのなかでTypeScriptへの対応も可能で、非常に完成度の高いFrameworkです。
ただし、能力差が非常にでやすい
Reactも同じですがVue.js使えます！って人の能力差が激しいです。
もしかしたらある程度書ける人じゃないと参入できないReactよりも振り幅は激しいかもしれないです。
簡単に参入できることに大向きを置いていますが、他のFrameworkでもやれることまで適用していった結果、八方美人感が出てます。
しかも、ライトユーザーが多少雑派に書いたとしてもVueがいい感じにしちゃうんです。
これだと、書いた本人が間違いに気づかないままになるケース出てきます。
そのため同一チーム内での統制は非常に取りづらいため、開発ルールを制定しないと行けないです。
もちろん、同等能力でのチームならそこまで苦労しないかもですが・・・
ルールがないと、規模が大きくなるに連れて秘伝のタレになりかねないですね。
Svelte
コード量が少ない爆速のFramework
最も新しいFrameworkで、ともかくコーディング量が少ないFrameworkです。
Vue同様にHTMLの中にJSを書いてくスタイルでスマートに書けるようになっています。
Svelteは速く、軽いです。
ベンチマークでReactの35倍、Vueの50倍、ちょっと早いとかのレベルではないです。
残念ながらTypescriptはまだ対応されていませんが、SSRFrameworkのSapperもあるためSPAもSSRもどちらも行けそうです。
まだまだ、最近なので日本語情報が少ないですがこれから期待できるFrameworkだと思ってます❗
まとめ
今回、この記事を書くためにVueやReactのことを調べてどういった場合に使えるかってのが理解できたのでよかったです。
用途、チーム内スキル、規模感含めてそれぞれの用途にあって選びましょって感じです。
また、SPAで作るのかSSRをしたいのかでも用途が変わりそう。
前のプロジェクトではフロントで凝ったことをするつもりがなかったのでAngularを選定しました。
なんだかんだ、FullStackでまかなえるなら楽は楽なんですよね・・・
個人的にはSvelteに期待してるので、次開発する機会ではやってみたいと思います！！
参考サイト
コメント