はじめに
株式会社アドグローブ Web&アプリ事業部の大森・北山です。
皆さんが新規プロジェクトで環境を決める際、フロントエンドの実装はどのフレームワークを取り入れますでしょうか？
システムに合ったものにする、シェア率で決める、好みで決める...など、さまざまな判断基準があると思います。
本記事では、同じ機能でも実装方法はフレームワークごとにどう違うんだろう？自分に合った
フレームワークってどれだろう？という疑問を解消すべく、それぞれのフレームワークでの実装方法を比較してみました。
皆さんのフロントエンドの実装方針を決定する際の一助となれば幸いです。
比較するフレームワーク
今回比較するフレームワークは以下となります。
- Vue
- React
- Angular
比較する前に、社内での使用率をご紹介したいと思います。
Vueが7割強と圧倒的に多いですね。
世界のフレームワークの使用率がReactが1位なのを考えると、社内での使用率と大きく差が出ているところが気になる点ではありますが…
本記事で実際に比較する機能のご紹介をさせていただこうと思います。
今回比較する機能は以下となります。
- データバインディング
- リストレンダリング
それでは実際に比較していきたいと思います。
データバインディング
データバインディングとは、データもしくは要素の変更を同期的あるいは、非同期的にもう一方に反映させる機能のことを言います。
今回は例として、入力されたテキストボックスの値が非同期で描画されます。
Vue, React, Angularの順で実装方法を見ていきたいと思います。
Vue
Vueでは双方向データバインディングという方法でデータバインディングを行っています。
v-modelで名前を指定されたテキストボックスに入力された内容が、そのまま下のpタグ内に反映されています。
以下がVueのデモコードになります。
See the Pen Vue Data Binding by Hikky-Lamb (@hikaru-k) on CodePen.
React
Reactでは単方向データバインディング(データフロー)という方法でデータバインディングを行います。
今回の例ではonChangeによって発火し、pタグ内に反映させることができます。
以下がReactのデモコードになります。
See the Pen React Data Binding by Hikky-Lamb (@hikaru-k) on CodePen.
Angular
Angularでも双方向データバインディングでデータバインディングを行っております。
Vueと同様に、ng-modelで名前を指定されたテキストボックスに入力された内容が、pタグ内に反映されます。
以下がAngularのデモコードになります。
See the Pen Angular Data Binding by Hikky-Lamb (@hikaru-k) on CodePen.
寸評
データバインディングにおいては、Vue、Angularがひときわ可読性に優れているように感じます。
Reactはいささか、JS(今回の場合Babel)のコードの量が多いように感じます。
リストレンダリング
リストレンダリングとは、名前の通り配列化されたアイテムをリスト状にレンダリングすることを言います。
Vue
Vueではv-forディレクティブを使用して簡単に実装できます。
v-forに配列(frameworks)を指定し、一個一個のアイテム(value)として取り出します。
以下がVueのデモコードになります。
See the Pen Vue List rendering by Hikky-Lamb (@hikaru-k) on CodePen.
React
Reactではmap関数を使用して、リストレンダリングを実装できます。
ただ、Reactでは独自のディレクティブなどはなくJavaScriptの機能を使用しています。
以下がReactのデモコードになります。
See the Pen React List rendering by Hikky-Lamb (@hikaru-k) on CodePen.
Angular
Angularではng-repeatディレクティブを使用してリストレンダリングを実装できます。
Vueと同じく、ng-repeatに配列を渡し、一個一個のアイテムとして抽出します。
以下がAngularのデモコードになります。
See the Pen Angular List rendering by Hikky-Lamb (@hikaru-k) on CodePen.
寸評
リストレンダリングでも、VueとAngularがパッと見わかりやすい構造になっているように感じます。
ReactはHTML要素をscript内で書いているため、多少ごちゃっとした雰囲気を感じます。
まとめ
この2つの機能だけでこの3つのフレームワークに優劣をつけることはできませんが、
自身で書いてみた感想としては、やはりVueはコーディングしやすかったです。
Angularが思いのほか書きやすく、Reactはなかなか慣れない感じもしました。
もちろん、これ以外にもコンポーネントやルーティング、ライブラリなどさまざまな要素が選定の要因となります。
これを機にもっと学んでみるのも楽しそうです。
