JS(JavaScript)でおすすめのフレームワークを紹介
はじめに
普段みなさんがWebサイトやショップサイトを見ていると、メニューにカーソルを持っていった際にサブメニューが表示されたり、画像が自動的にスライドされて切り替わったり、ページの一部分の情報が自動更新される等の挙動が行われます。これらは全てJavaScriptを利用した機能であることがほとんどです。またお問い合わせ・申し込みフォームの入力チェックやショッピングカートを利用したことがある人は多いと思いますが、これらにもJavaScriptが使われています。このようにJavaScriptは身近に触れる機会の多い機能を構成しているプログラミング言語でとても便利ですが、このJavaScriptでの開発を簡単にしているフレームワークという仕組みがあります。この記事では、JavaScript(以降はJSとします)の言語の特徴を紹介した上で、便利なフレームワークについて紹介していきます。なお合わせて、JSのプラットフォームとして有名なNode.jpで利用されるフレームワークについても紹介します。これからJSを勉強しようと思っている方、JSはすでに知っているもののフレームワークについて詳しく知りたいという方はぜひご覧ください。
JSはどんなプログラミング言語？
JSはWebサイトやアプリケーション、ゲーム等を開発する際に利用されるプログラミング言語の一つで、1995年にリリースされました。当初はLiveScriptという名称の言語として当時広く利用されていたブラウザ「Netcpape」に実装されましたが、その後Internet ExplorerやOpera、FireFox、Chrome、Edgeと世界中のコンピュータで幅広く利用されるブラウザのほとんどで動作可能となりました。かつてはユーザー環境で利用されているブラウザ等の環境に依存するということで利用範囲は限られていましたが、次第に便利な言語ということが認知され始め、現在はWebにおけるフロントエンドの開発における大部分で利用されています。
このフロントエンドというのはユーザー側のことを表していて、対義語となるのがサーバーサイドもしくはバックエンドとなります。ブラウザはユーザー側で利用するツールとなり、JSはそのブラウザ上で動作するため、フロントエンドで動作する言語として扱われます。しかしJSは2022年時点で30年弱と長い間利用され続けている言語となっているため、多くのライブラリやフレームワーク、プラットフォーム(実行環境)が登場しており、フロントエンドだけでは止まらない言語となっています。JSをフロントエンドだけではなくバックエンドでも動作可能な言語とした有名なプラットフォームとしてはNode.jsがあります。Node.jsをインストールすることで「node.exe」が利用できるようになり、JSにてネットワーク通信を行う等のOSへのアクセスが必要となるプログラムの構築も可能となります。
冒頭でも紹介しましたが、JSを利用すると普段Webサイトでよく目にするカーソルを合わせた際のサブメニューの表示、画像のスライドやページの一部更新といった動作が実現できます。他にポップアップウィンドウの表示や画像の拡大、タイマーの設定、フォームの入力チェック、ショッピングカートにもJSが利用されていることがあります。GoogleマップもJSが利用されている代表的なサービスの一つです。またJSの特徴として良く紹介されるのが「非同期処理」というものですが、これは簡単に表すと、ある処理の終了を待たずに次の処理を実行できるということになります。JSは非同期処理であるために、時間のかかる処理が先に発生していたとしてもフリーズを起こすことなく、別の部分の処理を完了させることが可能となっています。
最後に言語としてのJSの特徴を紹介します。JSは主にHTMLやCSSと合わせて利用されます。HTMLの中にタグで囲ったJSのプログラムを組み込むと動作可能といった簡単な仕組みですが、これはJSがブラウザ上で動作可能な言語であるためです。インターネットが広く普及する前のホームページはHTMLとCSSのみで構成されたほぼ動きのない静的なものでしたが、JSが登場してから動的なサイトの構築が可能になり、現在みなさんが普段見ているようなWebサイトの作成が可能となりました。
またJSはプログラミング言語の中でもスクリプト言語、あるいはインタプリタ言語という分類をされます。プログラミング言語は大きく2つに分類が可能で、コンパイラ言語とインタプリタ言語があります。コンパイラ言語は、あらかじめ人間によって記述されたコードがコンピュータ側で理解できるようにコンパイル(翻訳)された上で実行される種類の言語となり、JavaやC、C++、C#、Go言語等が該当します。対するインタプリタ言語は、コンパイルと実行が同時に行われる言語となり、代表的なものにはJSやPython、Ruby等があります。スクリプト言語はあくまで言語の使用を表す呼称であり、コンパイラ、インタプリタといった分類とは本来全く異なる分類であるものの、JSのようにインタプリタ言語の多くがスクリプト言語であるため、同義のように扱われることが多いです。今回これら分類の仕方についての詳細は省きますが、JSはインタプリタ言語かつスクリプト言語であるということだけ覚えておきましょう。これら特徴を持つため、JSは特別な開発環境を構築する必要がなく、記述すれば即実行が可能であり、シンプルな記述なのでプログラミング初心者でも習得しやすい言語となっています。なおHTMLはやや特殊で、XML等と共にマークアップ言語と呼ばれる種類であり、CSSはスタイルシート言語と呼ばれます。
なお、Javaはコンパイラ言語であるのに対してJSはインタプリタ言語であることを前述したように、両者は名称が似通っていますが全く異なる特徴を持った言語で、利用される場面も異なることにご注意ください。Javaは大規模システムや組み込み系、ゲーム等においてサーバーサイドで利用される言語で、サン・マイクロシステムズによって1995年に開発・リリースされました。リリースが同時期であったり、一時期サン・マイクロシステムズとJSの開発元であるネットスケープが業務提携していたこともあり「JavaScript」という名称が付けられたと言われています。
フレームワークを利用するメリットは？ライブラリとの違いは？
フレームワークと似ている仕組みとしてライブラリがあり、この二つはプログラミングを勉強したばかりであると区別が付きにくいところがあることでしょう。そのためこの違いについて解説した上で、フレームワークを利用した場合のメリットについても紹介します。
端的に2つの違いを表すとフレームワークは「型」であり、ライブラリは「部品」となります。乗り物を例に取ると、自転車、乗用車、トラック、ショベルカーといった車の種類がフレームワークに当たり、タイヤ、エンジン、ギア、ボディ等がライブラリとなります。中にはどちらとも言えるものも存在しますが、基本的には上記の違いで区別されます。なおこれらの違いを調べていくと、プログラム上における扱いの違いについてわかりやすい説明があったので紹介しておきます。ライブラリはあくまでコードの中の一部であり主導権はコード側にあるのに対して、フレームワークは、フレームワーク側が主導権を持ち、その中にコードがあるという関係性になります。
続いてフレームワークを利用するメリットですが、これはJSだけではなく、その他言語でも同様のことが言えるので覚えておきましょう。一つ目は開発のスピードアップができるということです。フレームワークは開発したいプログラムの型が出来上がっているため、プログラマーは開発するシステムにフィットする状態にするため少しの変更や追加をするだけで完成できるようになっています。そのため開発のスピードを上げることができます。2つ目はプログラマーが変わっても引き継ぎしやすいという点です。プログラマーがフレームワーク等を利用せずに一からコーディングをすると、熟練度や性格によってどうしても癖が出てきます。その点、フレームワークを使うと型が決まっているのでコードの内容にムラが出づらくなります。3つ目はバグが発生しにくくなるという点です。フレームワークは多くの場合、開発側でバグが改修されています。そのフレームワークを利用して開発することでバグを減らせるというメリットがあります。なお各フレームワークには特徴があるため、新たなフレームワークを利用する際には学習が必要になること、また開発例の少ないシステムには向いていないというデメリットがあることも同時に覚えておきましょう。
JSのフレームワークを紹介
JSのフレームワークはたくさんありますが、今回は特に人気があって良く使われているものに絞って5つ紹介します。
React.js
ライブラリで紹介されることもあるReactは、2015年にFacebookによって開発されたオープンソースの無料フレームワークです。Webアプリケーションの構築に適していて、一度習得すれば幅広いシステム開発に利用でき、管理や再利用性にも優れていると言われています。また動作も速く、ページ移動をせずに処理が可能なSPA(シングルページアプリケーション)の構築にも向いています。
jQuery
jQueryもライブラリとして紹介されることもありますが、2006年にリリースされて以来長く使われているフレームワークの一つです。JSのコードを簡略化できる目的で開発され、ブラウザに依存しにくいというメリットがあります。現在はJSがほとんどのブラウザで利用できるようになっていると言っても、どうしてもユーザー環境に依存する部分があり、ブラウザによって意図した動作と異なる部分が出てきます。しかしjQueryを利用することでその影響を最小限に留められる可能性があります。またJSの大きな特徴である非同期処理を実現できるAjax(Asynchronous JavaScript+XML)も利用できることから人気のフレームワークとなっています。
AngularJS
2009年にGoogleによって開発されたフレームワークで、Webアプリケーションに適しています。データバインディングという変更箇所を自動的に反映してくれる仕組みを双方向に行える機能を持っており、通常必要となるコードを省略できるため、AngularJSを利用することでコードの量を少なく済ませることができます。型が定まっていてルールが多いので柔軟性が少ないというデメリットはありますが、小規模アプリケーションの開発には向いていて、AngularJSが得意とする機能であれば、その他フレームワークで開発するよりスピーディーに行えます。
Vue.js
ファイルサイズが軽量で、レンダリング(様々な情報を演算して可視化する仕組み)が高速に行え、かつ自由度の高いフレームワークなので、中規模の開発を中心に様々なアプリケーションの開発で利用可能となっています。また、基本的に新た強いフレームワークを利用する時はそれなりの勉強が必要となりますが、Vue.jsは比較的簡単に習得できると言われています。なおアプリケーション設計における有名な概念であるMVCの派生系となるMVVM（Model-View-ViewModel）を採用しているため、MVCを学んでいる方はより使いやすいフレームワークとなることでしょう。
Hyperapp
1kbという超軽量ということが非常にわかりやすい特徴となっているフレームワークで、シンプルな構造であるため習得もしやすいと言われています。なおそのシンプルさを特徴付けるものとしてメソッドの少なさが挙げられます。Hyperappで提供されているメソッドはたった2種類(app( )とh( ))で、それらを使うだけで様々なことが実現可能なフレームワークとなっています。しかしながら他のフレームワークのようにインターネット上の情報が充実していると言いづらいため、不明点が出てきた場合は根気よく自己解決するか、自分で情報を探し続ける必要がある点には注意が必要です。
Node.jpのフレームワークを紹介
最後に、JSを活用できる幅を広げたプラットフォーム「Node.jp」上で利用されることの多いフレームワークを3つ紹介します。なお本来はすでに挙げたReactやAngular等も含まれますが、これらは省きます。
Next.js
Reactをサーバーサイドで利用できるよう、機能の拡張をするために利用されるフレームワークとして有名です。また同時にReactの機能改善も実現しています。スピードの向上やSEOのクローリング対策が行えるため多くの企業で採用されています。
Express.js
Node.jpで利用されるフレームワークとしては歴史が古く、2010年にSinatraというRubyのフレームワークの影響を受けながら開発されました。現在も人気のフレームワークであるため、日本語の情報も多くあり、利用しやすいフレームワークと言えます。APIの開発やSPAの構築、Web、モバイルアプリケーションの開発に適していて、「Koa.js」という後継のフレームワーク も出ています。
Sails.js
Rubyの開発においてRuby on Railsを利用されていたプログラマーにおすすめのフレームワークで、Webアプリはもちろん、チャット、マルチプレーヤーのゲーム等、リアルタイムな通信が必要となるサービスの開発向いています。なおSails.jsもMVCを採用しており、開発を始めるまでの手間も省けるフレームワークです。
まとめ
今回紹介したフレームワークはほんの一部で、既存のフレームワークの中にも便利なものはまだたくさんあります。またPHPやJava、C言語等と並んでJSの需要は依然として高い状況なので、これからも便利なフレームワークが次々とリリースされる可能性が大いにあります。すでにJSのプログラマーである方はもちろん、今後フロントエンドを開発するエンジニア・プログラマーを目指そうと思っている方は、ぜひJSの動向にアンテナを張って、常にフレームワークを含めた新しい技術に関する情報を取り入れて唯一無二の技術者を目指してみてはいかがでしょうか。