はじめまして。アーキテクトの堀内です。
R&Dでecbeingに関するプロダクト開発全般を担当しています。
最近業務で担当したフロントエンド周りについてお伝えしたいと思います。
はじめに
普段はフロントで表示するコンテンツをサーバーサイドで生成することが多いのですが
今回はAPIでデータを取得してフロントエンドでレンダリングする形での実装になりました。
そのフレームワークとして Vue.js を採用することにしたのですが、採用に至った理由を書いていこうと思います。
ご承知のようにフロントエンドのフレームワークはいろいろありますので、選定の参考にしていただければと思います。
フロントエンドフレームワーク
ひとくちにフロンドエンドフレームワークといってもいくつかの選択肢があります。
今回の選定でも、よく知られている代表的な３つのフレームワーク（Angular、React、Vue.js）を候補にあげました。
この中から今回の要件には Vue.js が適していると判断しました。
選定する際の判断基準について
主に以下の基準にて、今回の要件との比較判断を行いました。
まず、今回のプロダクトにおける要件を洗い出します。
| 選定基準 | 今回の要件 |
|
学習 コスト |
小 |
| 開発規模 | 小 |
|
テンプレート構文 |
標準のHTML 構成に近い |
|
テンプレートリソース |
外部管理 |
|
公式 サポート |
日本語でリファレンス充実 |
|
流行 知名度 ※国内 |
世の中に浸透している コミュニティが活性している |
|
ブラウザ サポート |
２世代前～最新のiOS、Android |
それぞれのフレームワークにおける今回の要件を比較した結果、Vue.js が最も親和性の高いものと判断しました。
| 選定基準 | Angular | React | Vue.js |
|
学習 コスト |
大 | 中 | 小 |
| 開発規模 | 大 | 小～大 | 小～中 |
|
テンプレート構文 |
独自構文 | JSX |
HTMLベース 独自構文 |
|
テンプレートリソース |
カプセル化 外部参照 |
カプセル化 |
カプセル化 外部参照 |
|
公式 サポート |
利用ガイド 日本語 |
利用ガイド 日本語 |
利用ガイド 日本語 |
|
流行 知名度 ※国内 |
〇 | ◎ | ◎ |
|
ブラウザ サポート |
ES 6, ES 7 polyfillあり |
ES 5 polyfillあり |
ES 5 polyfillあり |
学習コスト
やはりこの観点は外せません。
当社では、プロダクト開発を担当するR&D部門と、プロダクトをカスタマイズしてお客様へ導入するソリューション部門とに別れています。
今はプロダクトとして開発を進めていますが、プロダクトが完成して出荷されるとソリューション部門へ引き渡されカスタマイズ開発を実施して、お客様へ導入されることになります。
このため、カスタマイズ担当の多くのエンジニアができるだけ早期にキャッチアップできるフレームワークが望ましいです。
Angular や React は、専用の制御構文や JSX の習得が必要となります。
Vue.js は、HTMLタグの attribute の形式で制御構文を記述するため比較的習得が容易です。
それぞれの業務に特化した部門がいずれも比較的スムーズに導入できるライブラリということで、学習コストの低い Vue.js に軍配が上がりました。
開発規模
今回開発する機能は、検索フォームと API で取得したデータを一覧表示するだけの比較的簡単なフロント画面でした。
そのため、状態管理もそこまで必要とせずコンポーネントも極々少数な状況の中で、前述の学習コストとの兼ね合いもあり、Vue.js に軍配があがりました。
テンプレート構文、リソース管理
これは HTMLテンプレート（コンテンツ）の話です。
フロントエンドフレームワークで描画をする際の HTMLテンプレート（React でのrender、Vue での template 部分）ですが、この領域に極力独自仕様が組み込まれていないライブラリを採用したい意図と、HTMLテンプレートを外部リソースとして分離しておきたい意図がありました。
単純な HTML + CSS のみの構成に近ければ、一目見たときのタグの構成も理解しやすいですし、デザイン適用の際もフレームワークの知識を極力排除できるようになるためです。
テンプレート分離はコンポーネント化の思想から少し外れてしまうのですが、デザイン担当者に HTMLテンプレート部分を任せる場面があります。
これらもあり、ここでも HTML + CSS の形式に親和性の高い Vue.js が有利と判断しました。
公式リファレンスやサポート
こちらはどのライブラリも充実していますので、不足という観点での切り捨て基準にはなりませんでした。
流行、知名度
その時の流行や知名度も検討材料のひとつして確認します。
Github での活性具合も参考にしています。
今回のライブラリは３大フレームワークというだけあり、この点は問題ありませんでした。
ブラウザサポート
製品として導入するためブラウザのサポートバージョンも重要な観点になります。
今回はスマートフォンアプリの webview で利用する機能のため問題はありませんでした。
まとめ
今回は小規模な機能であり、工程のことなる担当者ごとの学習コストの削減という点も考慮し Vue.js を採用しました。規模が大きければある程度の学習コストを受け入れつつ React 採用もアリだったと思います。
次回は｢実戦編｣として、実際に開発をしてつまずいた点や対応内容などをお話ししたいと思いますので、ご期待ください。
おまけ
jQuery。
はい、弊社でも大変お世話になっています。
今回のプロダクトでは、パフォーマンスを良くしたかったので Vue.js 以外のところも含め脱 jQuery で進めました。
jQuery が出始めた頃はネイティブで記述するのは面倒な記憶がありましたが（単に当時知識不足だった可能性も・・・）
今ではそもそも CSS で解決できたり、MDN など分かりやすい参考ページもあるのでなかなか便利な世の中になりましたね。
～ecbeingでは、技術選定から実装まで担当できるフロントエンドエンジニアを大募集中です！～
