フロントエンドフレームワークとは

はじめに

先日の記事ではシングルページアプリケーションの根幹となる技術を紹介しましたが、根幹となる技術は他にもたくさんあります。そして今回紹介するフロントエンドフレームワークもシングルページアプリケーションにとってなくてはならない存在です。

今回はフロントエンドフレームワークとは何なのかについて解説しようと思います。
今回は図がなく、文字だけの解説になってしまいますので、わかりにくいところもあると思います。
質問などございましたらお気軽に私のTwitterまでどうぞ。

フロントエンドフレームワークとは

フロントエンドフレームワークはJavaScriptのフレームワークなのですが、JavaScriptという言語は元々Webページにちょっとした動きを加える程度の言語でした。それがAjaxやjQuery、Thin Server Architectureやシングルページアプリケーションの登場を経て、フロントエンドを一手に担うWebアプリ開発にとってのキーマンとなる言語に成長したのです。

そうなるとJavaScriptを使って大規模で複雑なアプリケーションのフロントエンドを書く必要が出てくるのですが、UIが大規模に複雑になってくるとユーザーの入力、Ajaxでのサーバー通信、UIの状態管理などを行うのがきつくなってきます。

この問題を解決するのがフロントエンドフレームワークというわけです。
フロントエンドフレームワークは主に以下のような機能を提供します。

・コンポーネント化
・画面遷移などのルーティング
・Ajax関係のユーティリティ
・データバインディング

この中でとりわけ重要なコンポーネント化とデータバインディングについてこの記事では解説しようと思います。

コンポーネント化

ざっくりした理解をするなら、コンポーネントとは独自定義のタグのようなものです。
そのタグを記述すると対応するテンプレートや処理ロジックを呼び出すことができます。つまり再利用する可能性のあるUI部品をタグに紐づけて使用することができるようになります。
この独自定義のタグ=コンポーネントを組み合わせてアプリケーションを構築するのがフロントエンドフレームワークを使った開発となります。

これによって、コードの再利用性が高まり、さらにコンポーネントひとつひとつは小さな機能を担当することになるので、テスタビリティが高まり、メンテナンス性も高まるといいことづくめです。

データバインディング

UIには状態というものがあります。例えば、テキストボックスに入力された文字やプルダウンで何が選ばれているか、チェックボックスがチェックされているかどうかなどがこれにあたります。
従来のフロントエンド開発、例えばjQueryを使った開発などはこのUIの状態を参照したり変更したりする際には、相当するUIのDOMを操作して実現していました。ちょっとしたアプリケーションの開発であれば、この方法でも特に問題は発生しないかもしれません。

しかし、シングルページアプリケーションのような複雑なUI表現が必要とされる場合は別です。Ajaxで新たなデータを処理した場合、それに応じて変更する必要のあるDOMの現在の状態を参照して、次の状態はどうあるべきかを判断して、そのとおりにDOMを操作して変更を反映するという流れを踏むことになりますが、こと複雑なアプリケーションではそのデータの種類、それに応じたUI変更のパターンは計り知れないものになります。このデータを処理するときはまずこのUIを変更して、その次はあのUIを…とDOMの操作も複雑化し、ソースコードも複雑化します。設計・開発も大変ですし、バグりやすく、メンテナンス性も悪い、保守コストの高いアプリケーションが出来上がってしまいます。この問題を解決するのがデータバインディングという仕組みです。

データバインディングはUIから状態を切り離し、JavaScript側にデータとして保持します。そしてテンプレート(HTML)側にはそのUIの状態をJavaScript側のどのデータと紐付けるかを記述しておきます。
これによってプログラマーはUIを変更する必要があるとき、DOMを意識する必要がなくなり、単純なデータの変更を行うだけでよくなります。
実際にデータをUIの状態として反映するのはフレームワーク側が最適化してやってくれます。
これによって以下のようなメリットを享受することができます。

・セレクタなどを考慮してDOM操作で状態の取得・管理をする煩雑さから解放される

DOM操作をするとき、jQueryだったら$(‘#test’)、素のJavaScriptではdocument.getElementById(‘test’)やdocument.querySelector(‘#test’)のようにセレクタでどのUIに関して操作するのか指定するのですが、この指定もUIが複雑化すると難しくなってくるものです。特にフロントエンドフレームワーク登場前の世界ではコンポーネントの概念もなく、idやclass属性の競合に注意する必要もありましたからなおさらですね。
フロントエンドフレームワークを使えば、予めテンプレートの各UIにJavaScript側のどのデータをバインディングするかを記述しておけば、HTML構造やセレクタについて考える必要がなくなり、この煩雑さから解放されるのです。

・UIの状態はJavaScript側で保持するので、現在の状態がわかりやすい

特に非同期処理とDOM操作が組み合わさると現在のUIの状態を把握しづらく、バグが発生してもデバッグしづらいのですが、データバインディングではJavaScriptの何らかの値や配列の要素を変更するという形でUIの更新を行えるので、現在のUIの状態が把握しやすく、デバッグもしやすいのです

・DOM操作という比較的コストの高い処理についてプログラマーが考える必要がなくなる

DOM操作というのはもはや職人芸のようなものになっていると私は考えています。jQueryなどでもDOM操作をして仕様どおりの動きを実現するのは熟練者でなくても可能なのですが、細かなパフォーマンス・チューニングを行おうとすると難易度が跳ね上がります。

フロントエンドフレームワークを使えば、実際にDOMを操作しないといけないところはフレームワーク側でやってくれる上、変更差分を見て、操作が最小限になるよう最適化もしてくれます。

主なフロントエンドフレームワークについて

フロントエンドフレームワークは数年の間雄割拠の時代が続き、多くのフレームワークが生まれは消えていきましたが、2019年2月時点ではほぼ３強といっていい状況となっています。

・React
・Angular
・Vue.js

次回以降でこの3フレームワークについて、比較も行いながら解説したいと思います。

おわりに

今回はフロントエンドフレームワークとは何なのか、シングルページアプリケーションのためになぜ必要なのかについて解説しました。
フロントエンドフレームワークを扱える開発者の需要は高く、習得する価値のある技術だと思います。

次回以降で具体的なフレームワークの解説を行いますので、また読んでいただければと思います。
それではここまで読んでいただき、ありがとうございました！

感想やご意見・質問等ございましたら、私のTwitterまでお気軽にどうぞ。