Facebook投稿支援アプリにReact/Vueは必要か (5)？

Facebook投稿支援アプリにReact/Vueは必要か (5)？

WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、シンプルにHTMLとJavascript、jQuery、React、そしてVueを利用して実装してみました。プログラムでやっている事はほぼ同じで、サンプルにしたアプリもシンプルな物なので、大きな差はないというのがこれまでの結果です。

この記事では、どういうケースにReactやVueの真価が発揮できるのかを考えてみました。

シンプルなHTMLで実現出来る場合は大きな差はない！

はっきり言えるのは、シンプルなHTMLで十分なアプリの場合は殆ど差が出ないと言えます。 画面の基本構成が決まっている固定のフォームだけで実現できる場合、多少Javascriptのプログラムの書き方が変わりますが、HTMLの部分は殆ど代わりがなく、jQuery/React/Vueの方がHTMLの部分とJavascriptのインターフェースが上手く設計されているため、コードが幾分シンプルで見やすくなる事がメリットです。 それ以外の部分では、Javascript部分は、UIのボタンが押されるなどのイベントの処理とデータの処理でやることがほぼ同じ処理になるので差が出ないということです。

Webアプリやサービスの実装でVueを利用する場合は、Reactと同様にnpmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。Vueの場合、「Vue CLI」と呼ばれるプロジェクト管理用のパッケージがあって、これを利用するとUIも利用できるので便利です。 このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。

HTMLとJavascriptできればフレームワークの習得は簡単！

逆に言うと、HTMLとJavascriptの基本ができていれば、jQueryだけではなく、ReactやVueも比較的簡単にマスターできるということでもあります。

当然と言えば当然ですが、いずれのフレームワークも基本はJavascriptとHTMLをベースに作られているので、HTMLとJavasceiptが使いこなせれば学習する上では大きな障害はないということです。

ReactやVueの真価が発揮できるのは？

差がないのであれば、ReactやVueで全ての開発を行ってしまえば、シンプルな案件から複雑な案件まで同じ実装で統一できます。

ただ、プログラムの要素より、HTMLでページをデザインする要素が大きい場合、個々のDOM（Document Object Model)の操作を行いやすいjQueryの方が便利な場合が多いと思います。

ReactやVueの真価が発揮できるケースとしては、

データの数がわからない情報を表などに表示したり、ページを処理内容によって頻繁に切り替える場合などは、ReactやVueを利用した方が圧倒的に効率よく開発ができます。

ReactやVueの場合、データが変わった部分のみを書き換えるなど画面の書き換えも上手く管理してくれるので、ページの書き換えが、ページ全体を書き換える場合より高速に行える場合が多くなるので快適にアプリやサービスを利用できるという大きなメリットがあります。

通常のHTMLとJavascriptでシンプルに作る場合、画面の切り替えは別のWebページとして作成したり、データのエントリー数がわからない場合は予め固定のテーブルを作って置いてそのテープルの行数分のデータを埋めて置いて、添え以上のデータを参照したい場合は、「次のページ」とか、「前のページに戻る」ようなボタンをつけて固定のテープル枠でデータを表示するようにすれば、シンプルはHTMLでも十分に作成できます。

しかし、ReactやVueの場合、可変長のデータを動的に表示するのも簡単にできるので一気にデータを表示したい場合などは便利です。

フレームワークを使った方が良いのか？

さて、ここでこの企画の最初の疑問「VueやReactのフレームワークは必要か？」という点に戻って考えてみると、WebアプリやWebサービスの開発を目指す場合、使えた方が有利というのは間違いありません。特に、企業や案件で要求される開発の多くはある程度規模が大きく複雑な物が多いので、ReactかVueが使えたほうが有利です。

上でも触れていますが、アプリやサービス開発より、Webサイトのデザインが主体の場合はjQueryの方が個々のDOM操作が出来るので便利かもしれません。

ただし、ReactやVueのフレームワークを利用する場合、今回試したようなCDN(Contents Delivery Network)をHTMLで読み込んで利用するよりは、npmでパッケージを管理して開発した方が圧倒的に便利です。

この企画のまとめとして、次回はnpmを使ったReactとVueの例を紹介する予定です。

まとめ

今回、比較のため同じアプリ「Facebook投稿支援アプリ」を例に、Facebook投稿の際の「空改行」を投稿時に有効にして文章の体裁を整えられるようにしたアプリを、敢えて４つの方法で実装してみました。

結果は、今回のような一つのフォームで済むシンプルなアプリの場合、HTMLとJavascript、jQuery、React、Vueで大きな違いはありませんでした。違いは、HTMLとJavascriptの関係を上手く連携できるようにしている点ぐらいでした。

しかし、現実のWeb開発では仕様の要求も複雑になるので、ReactやVueを利用したほうが開発が効率的に進むのは間違いありません。HTMLとJavascriptの基本をマスターしたらぜひ勉強されることをお勧めします。

次回は、CDN(Contents Delivery Network)ではなく、npmを利用してReactやVueを利用する例について紹介します。