2019/05/30

なぜフロントエンドフレームワークが必要なのか

この記事ではフロントエンドフレームワークを使ったことがない人に、なぜフロントエンドフレームワークを使うのかという説明を行います。 テクノロジーの目的や背景を初めに頭で理解してから、手を動かすという方法はテクノロジーの理解に対して良い効果があると考えているからです。実際、現在では知らなくても良いことも含みますが、焦らず寄り道をしながら学んでいきましょう。

undraw javascript frameworks x21l

SPAが一般的になった

昔はレンダリングされたHTMLのDOMを少し操作するためにJavaScriptを利用することが多かったのですが、 ブラウザの進化によりブラウザでデスクトップアプリケーション並みの表現が可能になりました。 具体的には2014年にHTML5が勧告され、ブラウザの履歴を操作する機能の使用が可能になり、XHRと それを利用してSPA(Single Page Application)と呼ばれるタイプのアーキテクチャがメジャーになってきています。

図としては下記のようになります。

出展: http://www.tothenew.com/blog/optimization-of-angularjs-single-page-applications-for-web-crawlers/ SPAのアーキテクチャ図

SPAにすることで、読み込み時間の短縮を筆頭にUXの向上が期待できます。

開発側にも大きな変化がありました。

昔ながらの方法ではJavaではJSP、RubyではERBと言ったようなテンプレートエンジンを利用して動的に生成したHTMLを返し、そのHTMLをベースにJavaScriptを用いてDOMを操作していました。

それが、SPAにすることでサーバーサイドはリクエストを受け取り、データを返すというシンプルなものになり、 クライアントサイドはデータを元にJavaScriptで画面を組み立てていくようになりました。

実際に、SPAのサイトとそうでないものを見比べていただければわかりますが、 一般的なSPAのサイトはHTMLに空のdivタグしかありません。サーバーサイドは初回のアクセスで空のHTMLを返し、そのHTMLに対してJavaScriptが要素を組み立てていきます。 なので、レンダリングされたHTMLのDOMを少し操作するという領域を超えて、 データをもとに画面を組み立てていくため、SPAとそうでない場合と比べると、JavaScriptのコード量はもちろん、複雑性が増しました。

DOMの操作は難しい

飾り付けの域を超えたJavaScriptでは、状態を持ったDOMをJavaScriptで命令的に操作することの難しさや、DOM操作のパフォーマンスの悪さなどの問題に直面します。 保守性の面においても、複数人での開発やある程度の規模の開発では不可能といってもいいほど難易度が高いです。

その複雑な問題を克服するためにフロントエンドのフレームワークがあります。 フロントエンドのフレームワークでは人間の仕事のレベルを超えてしまったDOM操作を私たちの代わりに行ってくれます。 なので、画面を作るという行為に対してDOMの操作のための複雑さは隠してくれますが、何もかもをやってくれる魔法という訳ではありません。「JavaScriptを使った基本的なプログラミング力」は引き続き必要になってきます。

幸い、他のフレームワークに比べてReactはとてもシンプルです。暗記はあまり必要なく、先ほど言った「JavaScriptを使った基本的なプログラミング力」が他のフレームワークに比べてさらに発揮できます。むしろそれさえあれば様々なWebアプリが作れるようになると感じています。

適材適所

最後にDOM操作について少しだけ補足しておきます。 フロントエンドフレームワークはデータを元に画面を組み立てる様な動的なWebアプリほど適していますが、情報提供が主な目的のWebサイトではフロントエンドフレームワークを使うまでもありません。今でもサーバーサイドでレンダリングしたHTMLにjQueryでDOMを触って飾り付けという手法でいいと思います。実際そっちのほうがパフォーマンス的にも優れているでしょう。作ろうとしているものが「Webサイト」なのか「Webアプリ」なのか理解していますか? WebサイトとWebアプリの違いについてはこちらの記事で簡単にまとめています。 ブラウザで起こることの全てをフロントエンドフレームワークで解決できるわけではなく、適材適所というわけです。とにかく派手なランディングページやホームページが作りたいならjQueryプラグインモリモリでDOMをゴリゴリ触って「パララックスエフェクト」とか使用して作ったほうがフロントエンドフレームワークを使うよりもかっこいいものが作れるかもしれません。

仕事内容や、自分がやりたいことよってはフロントエンドフレームワークが不要な人ももちろん居ます。 流行っているから学習するというのと、必要だから学習するではモチベーションが異なりますし、もう一度自分が何がしたいのか振り返り、高いモチベーションで学習を進めていきましょう。

それではまた次回

...

Share