フレームワーク
良いブログがあったので、こちらでお勉強。
ポピュラーなのは、Vue.js、Angular、Reactの3つらしい。
たしかに、ググるとたいていExtJSは除外されているっぽいので、自分も除外。
すべてオープンコミュニティにより開発されたものかと思ってたけど、ReactはFacebook、AngularはGoogleで開発されたものなのね…。知らんかったΣ（・□・；）
メリット・デメリット
- メリット
ページを切り替える際に読み込みが発生しないので、デスクトップアプリケーションのような快適な操作性をユーザに提供可能。
プッシュ通知やWebアプリをPCにインストールするといった様々な先進的なWeb技術を利用可能
- デメリット
サイトを始めて開くときやページをリフレッシュする際のロード時間が長い。
個人的には、プッシュ通知を利用可能というのが、機能の幅をかなり広げられそうなので学習しておきたいなと思った。
フレームワーク3種の特徴
- React
UIに特化したフレームワーク。
デフォルトでは最小限の機能しか持たない。
サードパーティ製のアドオンを使うことにより高機能なWebアプリケーションを作成することが可能。
公式サイトではフレームワークではなくライブラリと呼んでいる。
ビューとロジックはひとつのファイルに記述。
コンポーネントはJSXと呼ばれるJavaScriptを拡張した構文で記述することも可能。
世界中で使われているため、サードパーティ製のアドオンやライブラリの数も非常に多く、これらを使用すれば素早く高品質でデザイン性に優れたWebアプリを作成可能。
React Nativeを使用すればスマーフォンのアプリ（Android、iOS）も作成可能。
- Angular
欧米ではReactと同じレベルで広く普及しているが、日本ではあまり採用されていない。
フルスタックフレームワークであり、Webアプリケーションの開発に必要となるルーティング、ユニットテストなどの機能がパッケージに包含されている。
機能が多くマスターするのに必要となる学習コストは高くなるが、追加でアドオンなどを使用するケースは少なくなるので、互換性に気を使いながらライブラリを探す手間は省ける。
AngularJSはAngularの前身にあたるフレームワークであり、動作原理やHTMLの構文など多くの部分で違いがあるため全く別のフレームワークだと考えるべし。
- Vue.js
元Googleの開発者Evan You氏により開発されたフレームワーク。
開発コンセプトの部分でAngularJSからインスピレーションを受けているが、特性としてはバーチャルDOMの使用、ビューへのフォーカスといった部分でAngularよりもReactに近い。
必要な機能だけ追加していくというミニマリスティックなコンセプト。
学習コストが低いとされており、Webサイトの開発に必要な知識を備えていればすぐにVue.jsを使ったプロジェクトに参画可能。
2020年に発表されたVue 3より大幅に変更されている。Vue 2は2023年一杯(明日まで)でサポート終了。
パフォーマンス
いずれも問題なし。差異もほとんど無し。
学習コスト
Vue.js ＞ React ＞ Angular
それなりの規模のプロジェクトを作成するなら追加のライブラリが必要となるので、その分の学習コストはプラスで掛かる。
先進的なWebアプリケーションを開発したいのであれば、WebRTCやServiceWorkerなどの技術を使いこなさないといけないため、そのための技術勉強のための時間やプロトタイプ作成のための時間はプラスで掛かる。
将来性
JavaScriptを使ったWebアプリケーションという観点では、今後市場が大きくなるのは確実でありこの先10年程度は衰えることが無いと思われる。
ReactはFacebook、AngularはGoogleにより開発されていることからこの2つのフレームワークは今後も継続してアップデートされていくのは確実だと思われる。Vue.jsは今後のコミュニティ次第だが、注目度の高さからすぐに廃れるということは無いと思われる。
フレームワークの選択
導入する場合は、以下の基準になりそう。
- プロジェクトの規模の大きさにより Angular ＞ React ＞ Vue.js。
- 機能重視ならAngular、機能・デザインのどちらも重視するならReact、デザイン重視ならVue.js。
- 開発メンバがJavascriptでフロントエンド開発やってきたメンバならReact、Vue.js、デスクトップアプリをオブジェクト指向プログラム言語で開発してきたメンバなら静的型付け言語の特徴を持つTypeScriptを利用するAngular。
学習する場合は、とりあえずReactが無難。すでに多くの企業で使われており、UdemyやYouTube上の学習教材が豊富で、サードパーティ製のライブラリも充実しており、StackOverflowでの質問数も多いから。
StackOverflow、最近別プロジェクトで問題になったなぁ…。SPAはJavascriptだけで動くから、精通していないと起こりやすいんだろうなぁ…。
というわけで、まずはVue.jsの基本をチュートリアル使って学習してみよう。（えっ？Reactじゃないの？（笑））
ビルド？
その前に、*.vueファイルとやらをクライアントに配置して動作するのか？簡単なプログラムをデプロイし、動くところを確認したいと思いました。
で、調べてみると、昨今のフロントエンドアプリケーション開発では、ビルドが必要らしい…。（えっ？マジ？？）※ビルド＝エンジニアが書いたコードをブラウザで読み込んで動く形に変換すること
近頃のフロントエンドアプリケーションというのは、HTMLとJavaScriptを手書きで作成し、それをFTPでアップロードして動かすというスタイルでは開発しないらしい。（えーーーーーーっ？）
というわけで、まずビルド方法を調べているが、新たな技術要素が芋づる式に出てきていて、ハードルが高そう…。
続きはまた今度…。
コメント