1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. 【2020年度版】JavaScript のおすすめフレームワーク5選

【2020年度版】JavaScript のおすすめフレームワーク5選

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

ミツオカミツオカ
「プログラミング」は学校での教育必修化が決定したりと、今後、更に需要が増えていくことが予測されますね!
にゃんこ師匠にゃんこ師匠
プログラミング言語はたくさん存在するが、その中でも、今とても熱いのが「JavaScript」じゃな
ミツオカミツオカ
サイト制作はもちろん、身近なところでは、『Google Map』(JavaScript を使用した Ajax という技術で表示)」や、スマホアプリの開発など、様々な場面で活躍していますね!
にゃんこ師匠にゃんこ師匠
そんな、JavaScript じゃが、使用する上で、ライブラリやフレームワークの使用は必須と言っても過言ではない!
ミツオカミツオカ
現在では、Webアプリケーションの作成が複雑になっているので、特に、フレームワークを利用して効率的な作業を進めることは重要ですねー
にゃんこ師匠にゃんこ師匠
今回は、そんな JavaScript の「おすすめのフレームワーク5選」を紹介していくぞ!

AngularJSアンギュラージェイエス

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

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

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

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

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

にゃんこ師匠にゃんこ師匠
AngularJS の欠点をあえて挙げるなら、ゲーム制作や Web アプリのような、高速性が求められたデータ量の多いアプリケーションに、やや弱いところじゃな
ミツオカミツオカ
何でもできるほど優れているといっても、万能というわけではないのですねー

AngularJS を試してみよう!

CLI ツールのインストール

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

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

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

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

AnguralJS プロジェクトの作成

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

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

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

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

AngularJS アプリの起動

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

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

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

オススメ本

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

 

React(リアクト)

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

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

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

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

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

にゃんこ師匠にゃんこ師匠
ただ、開発環境(Node.js のインストールなど)を作るのが少し面倒だったりもするのじゃ
ミツオカミツオカ
逆にそれさえ乗り越えれば、開発は快適に進むのですね!

React を試してみよう!

React プロジェクトの作成

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

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

React アプリの起動

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

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

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

オススメ本

React.js&Next.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 ツールをインストールしてください。

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

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

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

Vue.js アプリの起動

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

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

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

今日の一冊

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

 

Backbone.jsバックボーンジェイエス

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

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

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

にゃんこ師匠にゃんこ師匠
覚えることはそれほど多くないので、JavaScript フレームワークの入門として取り入れてみるのもアリかもな!
ミツオカミツオカ
なるほど!一回試してみます!

オススメ本

入門Backbone.js
入門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
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 パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。

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

React を試す場合

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

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

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

Vue.jsを試す場合

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

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

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

さいごに

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

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

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

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

にゃんこ師匠にゃんこ師匠
JavaScript の「おすすめのフレームワーク5選」を紹介したが、どうじゃったかの
ミツオカミツオカ
一口に JavaScript のフレームワークと言っても、サイト制作だったり、アプリの開発だったりと、使用するフレームワークは人によって様々なのですねー
にゃんこ師匠にゃんこ師匠
今回紹介したフレームワークの中に気になるものがあれば、ぜひ試してみるのじゃ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア