JavaScriptフレームワークの超基本

Webサイト・アプリの開発現場で「React」や「Vue.js」などのJavaScriptフレームワークが注目されています。しかし、それぞれにどのようなメリットとデメリットがあるのか、選ぶための指針が何かについて知らない人も多いはず。JavaScriptベースのWebアプリやシステム開発に特化した株式会社ピクセルグリッドの中村享介さんと杉浦有右嗣さんに、基本的な考え方や現在のトレンドについてお聞きしました。

 

教えてくれたのは…

 

今さら聞けない素朴な疑問?
JavaScriptフレームワークやライブラリって何？

JavaScriptはWebサイトやアプリに動きを与えるためのプログラミング言語で、HTMLやCSSと共に現在のWebの基礎となる技術です。フレームワークは枠組みを意味しますので、JavaScriptを使いやすくするための「工具箱」のようなものであり、ライブラリはスパナやドライバーなどの「工具セット」に例えるとイメージが捉えやすくなるかもしれません。

もっとも、このフレームワークとライブラリという言葉自体に厳密な定義はないため、文脈によっては同じような意味合いで使われることもあります。重要なことは、適切な種類のJavaScriptフレームワークやライブラリを用いることで、Webアプリやシステム開発に一定の秩序や効率性がもたらされることです。

こうした技術の選定や提案についてはWebエンジニアの意見をよく聞いてから検討することが不可欠で、社内で議論をするためにも主要なJavaScriptのフレームワークやライブラリの特徴について把握しておくことをおすすめします。次ページ以降で各技術について詳しく解説します！

 

今さら聞けない素朴な疑問?
主なフレームワークには何があるの？

ここでは主にフロントエンド開発で用いられる代表的なJavaScriptフレームワーク・ライブラリを紹介します。一般的にはWebアプリやWebサイトのパーツを構築するための「UIフレームワーク」を指し、React、Vue.jsなどがよく知られています。また、フロントエンド技術者向けのトレンド調査「State of Frontend 2022」では、「Svelte」などの存在感も増しています。これらのUIフレームワークを使うことで、HTMLとCSS、JavaScriptをコンポーネントの単位で管理したり、JavaScriptでパーツに動きを与えたりさまざまな機能を付与できます。
State of Frontend 2022　https://tsh.io/state-of-frontend/

 

主要なUIフレームワーク（編集部調べ）

Webアプリやモバイルアプリ開発で注目を集めるUIフレームワーク

React https://ja.reactjs.org/

ReactはFacebook（現Meta）が開発したフレームワークで、同社はUI構築のライブラリと呼んでいます。情報が変化した部分を気にせず画面に反映できる「仮想DOM」をいち早く搭載したことで知られています。

細かく分けられたパーツを組み合わせて複雑なUIを構築できる「コンポーネント指向」もReact発の開発手法で、汎用性の高さから開発者も多く、SPA（Single Page Application）から大規模なWebシステムまで広く用いられています。また、Reactから派生したクロスプラットフォーム開発ライブラリの「React Native」はモバイルアプリ開発などで採用されています。

 

初心者でも取り組みやすいUIフレームワーク

Vue.js https://jp.vuejs.org/

Reactと並び人気の高いUIフレームワークで、HTML+CSS+JavaScriptの知識が活かせるのが特徴です。仮想DOMやコンポーネント指向など他のUIフレームワークと設計思想での共通点があるほか、機能ごとに1つのvueファイルにまとめられるなど、開発効率の高さも利点です。

国内ではSPAや小規模なWebサービスで用いられているケースが多いですが、他のライブラリなどを併用することで多くのケースに対応できます。日本語の情報も比較的充実しているため、JavaScriptまたはTypeScriptの初学者でも取り組みやすいのもメリットです。

 

独自のアプローチで軽量化と高速化を実現

Svelte https://svelte.jp/

2016年に登場した比較的新しいUIフレームワークで、仮想DOMを用いるReactやVue.jsとは異なり、コンパイル時にJavaScriptファイルを生成するアプローチで表示の高速化や実行時のファイル軽量化を図っているのが大きな特徴です。

また、HTML、CSS、JavaScriptを単一のファイルに記述するVue.jsに近い感覚でコンパクトに記述できるといったメリットもあります。

大規模開発用のエコシステムが揃っていない影響で、国内での採用事例は現状では比較的少ない傾向ですが、世界的には注目を集めているUIフレームワークの1つです。

 

WebフレームワークとUIフレームワーク

UIフレームワークで構成されたコンポーネントなどを用いて、WebアプリやWebサイト全体を構築するためのフレームワークもあります。これを一般的に「Webフレームワーク」または「Webアプリケーションフレームワーク」と呼ぶことがあります。

WebフレームワークはそれぞれのUIフレームワークをベースにした仕組みを持ち、例えば、サーバサイドレンダリング（SSR）や静的サイトジェネレータ（SSG）などの機能により、UIフレームワークだけでは実現できない課題を解決します。また、Webフレームワークは開発用のサーバ機能を内蔵しているので、ローカル環境でWebアプリなどを開発する際にも便利に使えます。

開発対象がシングルページのWebアプリケーション（SPA）であれ、複数ページで構成されるWebサービスであれ、Webサイト全体を生成できるのがWebフレームワークの大きな特徴です。これはReactやVue.jsといった個別のパーツのViewを生成できるUIフレームワーク（ライブラリ）とは役割が違う点を理解しておきましょう。

 

WebフレームワークとUIフレームワークの関係

 

主要なWebフレームワークと対応するUIフレームワーク

 

 

 

今さら聞けない素朴な疑問?
何を基準にフレームワークを選べばいいの？

数多くのWeb開発のフレームワークが登場してきた背景には、WebサイトやWebアプリに求められる要求が時代とともに変化し、機能が高度化・複雑化してきた歴史的な流れと関係しています。フロントエンド開発で広く用いられているJavaScriptフレームワークの歴史を大まかにおさらいすると、JavaScriptの利用価値が最初に大きく注目されたのはJavaScriptに非同期通信とXMLを組み合わせた「Ajax」という開発手法が2005年に登場たのがきっかけと言われています。

その同時期にはAjaxによる開発を効率化するための最初期のライブラリとして「jQuery」が登場しました。CSSの動的な変更やアニメーション的な表現を実装できることでWebのフロントエンド開発の興隆に貢献したjQueryですが、一方でリッチなWebコンテンツ制作においてはAdobe Flashが盛んに用いられる時期がしばらく続きました。

この頃からiPhoneやAndroidのスマートフォンが普及し始め、プロプライエタリ（特定の企業などが独占的な権利を持つ）なライセンスを持つFlashをAppleがWebブラウザで採用しないことを表明したことなどによりFlashは衰退し始めました。同時に、主要ブラウザのHTML5+CSS3+JavaScriptを中心としたWeb標準技術への対応が進み、フロントエンド開発は多様なデバイスを前提として、より複雑で高度な実装を求められるようになります。

そして、Webアプリ開発がしづらいといった問題を解決するために登場したのが、Reactを筆頭とするモダンなUIフレームワークです。Reactが画期的だったのは「仮想DOM」の導入で、それ以降のUIフレームワークにも大きな影響を与えました。

WebフレームワークやUIフレームワークが乱立する状況は2016年頃から現在に至るまで続いていて、サーバサイドの処理も利用して全体的なパフォーマンスを向上・効率化するアプローチが登場するなど開発手法の高度化が進んでいます。

この先も新たな技術や設計思想の登場で、フレームワーク・ライブラリの種類や機能が増え続けていく可能性は高いと言えるでしょう。これらの技術選定においては、まず、案件の規模や目的に適したフレームワーク・ライブラリであるかどうか、採用するWeb技術が古すぎないかどうか、新しい技術でも動作が安定しているかどうかなどを総合的に判断する必要があります。

開発者コミュニティの活発さや知名度の高さもフレームワーク・ライブラリを選択する上で参考になります。プロジェクトの課題を解決できるツールであるかどうかの見極めが重要と言えるでしょう。