【2020年度版】JavaScript のおすすめフレームワーク5選
2021.12.20
JavaScript のおすすめフレームワーク5選
ミツオカ
にゃんこ師匠ミツオカにゃんこ師匠ミツオカにゃんこ師匠AngularJS（アンギュラージェイエス）
JavaScript のフレームワークを語る上で外せないのが、Google が開発した「AngularJS」です。
JavaScript の最も有名なフレームワークの一つで、企業でも多くのWebアプリケーションが「AngularJS」で作られています。
安定した「Googleのサポート」があると言うだけでも価値があります。
公式でも「MVW フレームワーク（Model-View-Whatever）」と定義しており、その名前の通り、何でもできると言っても過言ではない優れた機能性が特徴です。
また、商用での利用も可能となっています。
にゃんこ師匠ミツオカAngularJS を試してみよう！
CLI ツールのインストール
AngularJS には、CLI ツールが用意されています。
そのため、そちらを利用して簡単に AngularJS を試してみたいと思います。
まずは、以下のコマンドを実行して CLI ツールをインストールしてください。
1 | npm install -g @angular/cli |
途中、匿名で使用データの共有を聞かれるので、共有したくない場合は N を選択してください。
AnguralJS プロジェクトの作成
CLI ツールのインストールが完了したら、続いて、AngularJS プロジェクトを生成します。
以下のコマンドを実行してください。
1 | ng new angular-trial |
途中、いくつか使用する機能などを聞かれますが、とりあえず試すだけであれば、デフォルトのものを選択してください。
もちろん、使ってみたい機能があれば追加しても ＯＫ です。
AngularJS アプリの起動
作成される angular-trial ディレクトリに移動して、以下のコマンドを実行しアプリを起動してください。
1 | ng serve --open |
デフォルトだと http://localhost:4200 でアプリが起動し、以下のようなページが表示されます。
いろいろ試してみたい場合は、 src/app ディレクトリのファイルをさわってみてください。
オススメ本
React（リアクト）
「React」も、AngularJS と同じくらい人気のある JavaScript のフレームワークです！
Facebook のソフトウェアエンジニアが開発した、HTML コンポーネントフレームワークです。
React は、「Facebook」や「Yahoo」、「Instagram」といった知名度の高いもの他、世界トップクラスの動画配信サービスとして日に日に有名になってきている「Netflix」など、新しいコンテンツにも使われています。
非常に信頼性の高いフレームワークであり、特にボタン、テキストボックスなどを用いる Web アプリケーションや、動きのあるアプリケーション開発に向いています。
快適な高速動作で、保守性の高いコードが書けるのが特徴です。
にゃんこ師匠ミツオカReact を試してみよう！
React プロジェクトの作成
React にも、プロジェクト生成用のコマンドが用意されているので、そちらを利用して React を試してみたいと思います。
以下のコマンドを実行してプロジェクトを作成してください。
1 | npx create-react-app react-trial |
React アプリの起動
生成される react-trial ディレクトリに移動して、以下のコマンドを実行しアプリを起動してください。
1 | npm start |
デフォルトでは、 http://localhost:3000 でアプリが起動し、以下のようなページが表示されます。
いろいろ試してみたい場合は、 src/App.js ファイルあたりを触ってみてください！
オススメ本
Vue.js（ビュージェイエス）
「Vue.js」は、2013年に開発がスタートした JavaScript フレームワークです。
AngularJS、React よりもシンプルで自由度が高いフレームワークで、学習しやすいというが最大の特徴と言えます。
注目度が非常に高い JavaScript フレームワークで、日本語のドキュメントが充実しているのも特徴です。
にゃんこ師匠ミツオカVue.js を試してみよう！
CLI ツールのインストール
Vue.js にも、CLI ツールが用意されています。
AngularJS や React と同様に、Vue.js も簡単に試してみたいと思います。
まずは、以下のコマンドを実行して CLI ツールをインストールしてください。
1 | npm install -g @vue/cli |
途中、プリセットの選択がありますが、今回は簡単に試すだけなので default を選択してください。
Vue.js プロジェクトの作成
CLI ツールのインストールが完了したら、以下のコマンドを実行してプロジェクトを作成してください。
1 | vue create vue-trial |
Vue.js アプリの起動
作成された vue-trial ディレクトリに移動して、以下のコマンドを実行し、アプリを起動してください。
1 | npm run serve |
デフォルトの場合は http://localhost:8080 でアプリが起動し、以下のようなページが表示されます。
いろいろ試してみたい場合は、 src/App.vue や src/components/HellowWorld.vue あたりを触ってみてください。
今日の一冊
Backbone.js（バックボーンジェイエス）
MVC フレームワークが必須と言える現在の開発環境で、AngularJS などの有名なフレームワークの中に埋もれずに、一定の人気があるのが「Backbone.js」です。
「Jeremy Ashkenas（ジェレミー・アシュカナス）」によって作られた JavaScript フレームワークで、軽量で制約の少ないのが特徴です。
Backbone という名前の通り、フルスタックな AngularJS とは違って、あくまで骨組み的な機能性のフレームワークで、「Underscore.js」、「jQuery」などと併用するのが定番です。
にゃんこ師匠ミツオカオススメ本
Knockout.js（ノックアウトジェイエス）
「Backbone.js よりも高機能なものを、かと言って AngularJS ほどの高機能を求めていない」といった場合には「Knockout.js」もおすすめです。
Vue.js と同じく「MVVM」を採用している JavaScript フレームワークで、HTML と JavaScript との分離が簡単に行えるのが特徴です。
シンプルで学習しやすく、バインディング作成など作業に必要な機能は揃っています。
にゃんこ師匠ミツオカオススメ本
サンプルコード
記事中で紹介した 「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 パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。
1 | ng serve --open |
記事中での解説と同様に、デフォルトでは http://localhost:4200 でアプリが起動します。
React を試す場合
react-trial ディレクトリへ移動して、 npm install を実行し、npm パッケージをインストールしてください。
npm パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。
1 | npm start |
デフォルトでは http://localhost:3000 でアプリが起動します。
Vue.jsを試す場合
vue-trial ディレクトリへ移動して、 npm install を実行し、npm パッケージをインストールしてください。
npm パッケージのインストールが完了したら、以下のコマンドを実行して、アプリを起動してください。
1 | npm run serve |
デフォルトでは http://localhost:8080 でアプリが起動します。
さいごに
いかがでしたでしょうか？
今日は、JavaScript のおすすめフレームワーク5選をお届けしました。
案件にピッタリのフレームワークを見つけていただければ幸いです！
こちらの記事もオススメ！
にゃんこ師匠ミツオカにゃんこ師匠書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
