JavaScript のおすすめフレームワーク5選

ミツオカ

「プログラミング」は学校での教育必修化が決定したりと、今後、更に需要が増えていくことが予測されますね！

にゃんこ師匠

プログラミング言語はたくさん存在するが、その中でも、今とても熱いのが「JavaScript」じゃな

ミツオカ

サイト制作はもちろん、身近なところでは、『Google Map』（JavaScript を使用した Ajax という技術で表示）」や、スマホアプリの開発など、様々な場面で活躍していますね！

にゃんこ師匠

そんな、JavaScript じゃが、使用する上で、ライブラリやフレームワークの使用は必須と言っても過言ではない！

ミツオカ

現在では、Webアプリケーションの作成が複雑になっているので、特に、フレームワークを利用して効率的な作業を進めることは重要ですねー

にゃんこ師匠

今回は、そんな JavaScript の「おすすめのフレームワーク５選」を紹介していくぞ！

AngularJS

JavaScript のフレームワークを語る上で外せないのが、Google が開発した「AngularJS」です。

JavaScript の最も有名なフレームワークの一つで、企業でも多くのWebアプリケーションが「AngularJS」で作られています。

安定した「Googleのサポート」があると言うだけでも価値があります。

公式でも「MVW フレームワーク（Model-View-Whatever）」と定義しており、その名前の通り、何でもできると言っても過言ではない優れた機能性が特徴です。

また、商用での利用も可能となっています。

にゃんこ師匠

AngularJS の欠点をあえて挙げるなら、ゲーム制作や Web アプリのような、高速性が求められたデータ量の多いアプリケーションに、やや弱いところじゃな

ミツオカ

何でもできるほど優れているといっても、万能というわけではないのですねー

AngularJS を試してみよう！

CLI ツールのインストール

AngularJS には、CLI ツールが用意されています。

そのため、そちらを利用して簡単に AngularJS を試してみたいと思います。

まずは、以下のコマンドを実行して CLI ツールをインストールしてください。

1npm install -g @angular/cli

途中、匿名で使用データの共有を聞かれるので、共有したくない場合は N を選択してください。

AnguralJS プロジェクトの作成

CLI ツールのインストールが完了したら、続いて、AngularJS プロジェクトを生成します。

以下のコマンドを実行してください。

1ng new angular-trial

途中、いくつか使用する機能などを聞かれますが、とりあえず試すだけであれば、デフォルトのものを選択してください。

もちろん、使ってみたい機能があれば追加しても ＯＫ です。

AngularJS アプリの起動

作成される angular-trial ディレクトリに移動して、以下のコマンドを実行しアプリを起動してください。

1ng serve --open

デフォルトだと http://localhost:4200 でアプリが起動し、以下のようなページが表示されます。

いろいろ試してみたい場合は、src/app ディレクトリのファイルをさわってみてください。

オススメ本

Angular Webアプリ開発 スタートブック

　

React（

「React」も、AngularJS と同じくらい人気のある JavaScript のフレームワークです！

Facebook のソフトウェアエンジニアが開発した、HTML コンポーネントフレームワークです。

React は、「Facebook」や「Yahoo」、「Instagram」といった知名度の高いもの他、世界トップクラスの動画配信サービスとして日に日に有名になってきている「Netflix」など、新しいコンテンツにも使われています。

非常に信頼性の高いフレームワークであり、特にボタン、テキストボックスなどを用いる Web アプリケーションや、動きのあるアプリケーション開発に向いています。

快適な高速動作で、保守性の高いコードが書けるのが特徴です。

にゃんこ師匠

ただ、開発環境（Node.js のインストールなど）を作るのが少し面倒だったりもするのじゃ

ミツオカ

逆にそれさえ乗り越えれば、開発は快適に進むのですね！

React を試してみよう！

React プロジェクトの作成

React にも、プロジェクト生成用のコマンドが用意されているので、そちらを利用して React を試してみたいと思います。

以下のコマンドを実行してプロジェクトを作成してください。

1npx create-react-app react-trial

React アプリの起動

生成される react-trial ディレクトリに移動して、以下のコマンドを実行しアプリを起動してください。

1npm start

デフォルトでは、 http://localhost:3000 でアプリが起動し、以下のようなページが表示されます。

いろいろ試してみたい場合は、src/App.js ファイルあたりを触ってみてください！

オススメ本

React.js&Next.js超入門

　

Vue.js

「Vue.js」は、2013年に開発がスタートした JavaScript フレームワークです。

AngularJS、React よりもシンプルで自由度が高いフレームワークで、学習しやすいというが最大の特徴と言えます。

注目度が非常に高い JavaScript フレームワークで、日本語のドキュメントが充実しているのも特徴です。

にゃんこ師匠

そんな学習効率の高さから、「Vue.js」を導入している企業はどんどん増えてきているな！

ミツオカ

Vue.js は、画面遷移が少ない「SPA（シングルページアプリケーション）」で使われることが多いのも特徴の一つですね！

Vue.js を試してみよう！

CLI ツールのインストール

Vue.js にも、CLI ツールが用意されています。

AngularJS や React と同様に、Vue.js も簡単に試してみたいと思います。

まずは、以下のコマンドを実行して CLI ツールをインストールしてください。

1npm install -g @vue/cli

途中、プリセットの選択がありますが、今回は簡単に試すだけなので default を選択してください。

Vue.js プロジェクトの作成

CLI ツールのインストールが完了したら、以下のコマンドを実行してプロジェクトを作成してください。

1vue create vue-trial

Vue.js アプリの起動

作成された vue-trial ディレクトリに移動して、以下のコマンドを実行し、アプリを起動してください。

1npm run serve

デフォルトの場合は http://localhost:8080 でアプリが起動し、以下のようなページが表示されます。

いろいろ試してみたい場合は、src/App.vue や src/components/HellowWorld.vue あたりを触ってみてください。

今日の一冊

これからはじめるVue.js実践入門

　

Backbone.js

MVC フレームワークが必須と言える現在の開発環境で、AngularJS などの有名なフレームワークの中に埋もれずに、一定の人気があるのが「Backbone.js」です。

「Jeremy Ashkenas（ジェレミー・アシュカナス）」によって作られた JavaScript フレームワークで、軽量で制約の少ないのが特徴です。

Backbone という名前の通り、フルスタックな AngularJS とは違って、あくまで骨組み的な機能性のフレームワークで、「Underscore.js」、「jQuery」などと併用するのが定番です。

にゃんこ師匠

覚えることはそれほど多くないので、JavaScript フレームワークの入門として取り入れてみるのもアリかもな！

ミツオカ

なるほど！一回試してみます！

オススメ本

入門Backbone.js

　

Knockout.js（ノックアウトジェイエス）

「Backbone.js よりも高機能なものを、かと言って AngularJS ほどの高機能を求めていない」といった場合には「Knockout.js」もおすすめです。

Vue.js と同じく「MVVM」を採用している JavaScript フレームワークで、HTML と JavaScript との分離が簡単に行えるのが特徴です。

シンプルで学習しやすく、バインディング作成など作業に必要な機能は揃っています。

にゃんこ師匠

2010年リリースと、比較的古い JavaScript フレームワークじゃ

ミツオカ

でも、いま現在も高い人気を誇っていますね！

オススメ本

Knockout.js: Building Dynamic Client-Side Web Applications

　

サンプルコード

記事中で紹介した 「AngularJS」「React」「Vue.js」のお試しプロジェクトを、以下の GitHub リポジトリにまとめてあります。

【rightcode/js-framework-trial】
https://github.com/rightcode/js-framework-trial

簡単にAngularJS、React、Vue.js を試してみたい場合は、上記のリポジトリをクローンして試してみてください。

AngularJS を試す場合

angular-trial ディレクトリへ移動して、npm install を実行し、npm パッケージをインストールしてください。

npm パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。

1ng serve --open

記事中での解説と同様に、デフォルトでは http://localhost:4200 でアプリが起動します。

React を試す場合

react-trial ディレクトリへ移動して、npm install を実行し、npm パッケージをインストールしてください。

npm パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。

1npm start

デフォルトでは http://localhost:3000 でアプリが起動します。

Vue.jsを試す場合

vue-trial ディレクトリへ移動して、npm install を実行し、npm パッケージをインストールしてください。

npm パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。

1npm run serve

デフォルトでは http://localhost:8080 でアプリが起動します。

さいごに

いかがでしたでしょうか？

今日は、JavaScript のおすすめフレームワーク5選をお届けしました。

案件にピッタリのフレームワークを見つけていただければ幸いです！

こちらの記事もオススメ！

2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

にゃんこ師匠

JavaScript の「おすすめのフレームワーク５選」を紹介したが、どうじゃったかの

ミツオカ

一口に JavaScript のフレームワークと言っても、サイト制作だったり、アプリの開発だったりと、使用するフレームワークは人によって様々なのですねー

にゃんこ師匠

今回紹介したフレームワークの中に気になるものがあれば、ぜひ試してみるのじゃ！