JavaScript

【チュートリアル付】JavaScriptのフレームワーク・ライブラリまとめ

「WEBサイトを作りたいのでJavaScriptを学習した！」という方のうち、意識の高い方であれば新たな技術を学びたいと考えることもあるでしょう。そこでおすすめなのが、JavaScriptのフレームワークやライブラリーの学習です。今回は、そんなJavaScriptのフレームワーク、ライブラリを分野別で紹介していきます。

※今回はJavaScriptの関連記事なので、TypeScriptに依存している、あるいは公式サイトにてTypeScriptでの利用が推奨されているフレームワーク・ライブラリ（Angular等）は省いています。あらかじめご了承ください。

1．WEB制作

JavaScriptは、本来WEB制作の分野で活躍しているプログラミング言語です。当然ながら、WEB制作において利用できるライブラリ・フレームワークが数多く存在します。

数えきれないほどに大量にあるため、ここでは現在トレンドになっているライブラリ・フレームワークを中心に紹介していきます。

現在のトレンドは、以下の4つです。

• React
• Next.js
• Vue.js
• Nuxt.js

それぞれのライブラリ・フレームワークの詳細を見ていきましょう。

React

Reactは、WEBサイトのUI部品（フォームやメニューなど）を追加・管理できるJavaScriptライブラリです。

Meta社（旧Facebook社）によって開発されたライブラリで、CDNリンクで実装でき、かつ通常のプログラムに部分的に導入できるなど、とても柔軟に取り扱えるのが最大の魅力でしょう。

Meta社のエンジニアが開発しただけあり、オブジェクトの概念を用いてスマートにコードを記述できるのも人気の理由です。

また、JavaScriptでHTMLタグを用いた要素の構造を表す際、Reactが公開される以前は文字列としてタグの記述をしたり、いくつも関数を繰り返して作ったりする必要がありましたが、Reactの場合はJSX記法を利用することにより、HTMLタグをJavaScriptのコードにそのまま記述できます。

素のJavaScriptやjQueryで普段要素を追加している方にとっては、これだけでも革新的な技術に値するのではないでしょうか。

【Reactについて】
Reactとは？
CDNの実装

【チュートリアル】
Reactのチュートリアルは、公式リファレンスにて完全日本語訳されたものが公開されています。
Reactチュートリアル

Next.js

Next.jsは、Reactをベースに設計されたJavaScript（Node.js）のフレームワークです。

基本的な特徴はReactとほとんど変わりませんが、明確な違いとも言えるのが”サーバサイドでのレンダリングに対応可能”という点。

「サーバサイドでのレンダリング？？」となった方もいるかもしれませんね。

例えばWEBアプリケーションを作りたいと思ったとき、React単体ではフロントエンドの開発しかできません。少し難しい話になりますが、WEBサイトをネットワーク上で公開し、表示させたい場合は、サーバからindex.htmlなどのファイルを読み込む必要があります。

つまり、React単体では、WEBサービスやWEBアプリケーションを作ることはできず、PHPやRubyといったサーバサイドの言語を利用しなければならないということです。

一方でNext.jsの場合、Node.jsという実行環境上で動作するため、そういったサーバサイド言語の役割を担うことができます。したがって、いちいちPHPやRubyを使わずとも、直にReactを用いたWEBページの表示が行えるわけです。

サーバサイドレンダリング（SSR）については、以下の記事がよくまとめられているので、良ければ読んでみてください。

SSRが必要な理由/Ragate

WEBアプリケーションを作成する場合は、ほとんどNext.jsだけで開発できるようになるので、大規模なシステムの開発では開発コストの削減に繋がります。

【チュートリアル】
Next.jsの公式チュートリアルは日本語訳されてはいないものの、画像を用いて言語関係なく理解できるよう配慮されているので、普段英語のリファレンスを読まない方でも何となく理解できると思います。
Next.jsチュートリアル

Vue.js

Vue.jsは、DOM要素のデータをJavaScript上でオブジェクトとして管理できるフレームワークです。

従来のjQueryなどを用いたDOM操作は、一度対象となるDOM要素を取得し、変更したい値を指定した上でJavaScriptから値を代入する必要がありました。

Vue.jsの場合、属性値やインナHTMLの一部のデータをVue.jsのデータとリンクさせられるため、いちいち対象となるDOM要素を取得せずとも、JavaScript側でオブジェクトのデータを更新すれば、リアルタイムにDOM要素の情報を書き換えられるのです。
要するに、DOM操作が非常に簡単になるということですね。

Reactと用途が似ているため、比較対象として挙げられることも少なくありません。Reactとの違いとしては、

• 手軽に実装できる
• 一部分からシステム全体まで様々な規模に対応可能
• Json形式でコードを記述

などが挙げられますが、正直な話、Reactと得られる恩恵に大きな差はありません。

ただ、コードの記述は全く異なる形式になるので、人によってはReactよりVue.jsの方が使いやすいということもあるでしょう。

【チュートリアル】
Vue.jsは、Reactと同様に高品質な日本語訳がされた公式ガイドが存在します。解説も丁寧なので、このガイドを頼るだけでもVue.jsの大部分はマスター可能です。
Vue.jsチュートリアル

Nuxt.js

Nuxt.jsは、Vue.jsをベースに設計されたJavaScript（Node.js）のフレームワークです。

ネーミングで気づいているとは思いますが、前述したNext.jsのVue.js版（ではないけど）となっています。
基本的な特徴や実現可能なこともNext.jsとそれほど差異はないので、ReactとVue.jsのどちらが好きかによって使い分けるのが良いかもしれません。

JavaScriptに限らず、プログラミング言語には宗派が存在しており、「記述が違うだけで中身は変わらない」現象が起きがちです。どちらを使う方が良いとか、そういったことを客観的に説明するのは難しいものがあります。

【チュートリアル】
Nuxt.jsの公式リファレンスにて、スタートガイドが用意されているので、それを掲載しておきます。ただし、Next.jsに比べるとサイトのコミュニティ色が強いので、少し学習には不向きかもしれません。
Nuxt.jsチュートリアル

2．サーバサイド開発

JavaScriptは本来フロントエンド分野の開発に用いられることがほとんどでしたが、昨今ではフレームワークを用いることで、サーバサイド開発にも重宝されています。

実は前述したNext.jsなども含まれるのですが、その辺りを言い出しているとキリがないので、ここでは「Node.js」などの定番環境で実装できるフレームワークとして、以下の2つを紹介します。

• Express.js

• Socket.io

Express.js

Express.jsは、ディレクトリのルーティングなどサーバサイドの処理を簡易化してくれる便利なフレームワークです。

ルーティングなどよくわからない単語が出てきていると思いますが、初心者向けに説明するのは困難なので、「便利なもの」と思っておいてください。Node.js版のjQueryのようなイメージが近いかもしれません。

細かく知りたい方は、ひとまずNode.jsのことについて勉強してみるのがおすすめです。ルーティングなど各種用語についてある程度理解できると思います。

Expressは非常に古株のフレームワークでありながら、汎用性と扱いやすさが評価されており、今でもなお開発現場ではよく利用されています。後続としてKoa.jsというフレームワークも登場しているのですが、それでもなおExpress.jsを使い続ける開発チームは多いです。

【チュートリアル】
Express.jsは、日本語訳された丁寧なガイドがあるのも魅力。あくまでも初心者向けに、インストールから実際のチュートリアルまでキレイに説明してくれるので、Express.jsの学習はこのチュートリアルだけで十分でしょう。
Express.jsチュートリアル

Socket.io

Socket.ioは、Node.jsを通じてソケット通信を手軽に実装できるJavaScriptフレームワークです。

ソケット通信とは、簡単に言えばユーザとサーバを結ぶ通信手段のことを指します。
一般的にWEBページはユーザがページを更新したり、何かしらサーバに対して通信を試みない限りは、ユーザに対して何もアクションを起こしません。

一方、ソケット通信を扱えば、ユーザとサーバがリアルタイムに通信を行えるようになり、サーバからユーザに対して能動的にデータを送れるようになります。

例えば、Slackのメッセージシステムなどを思い出してみてください。他の人がメッセージを入力しているとき、ページを更新していないにも関わらず、「○○が入力中…」という表記が出ますよね。あれがソケット通信です。

ソケット通信があれば、リアルタイムに進行する対戦ゲームや、リアルタイムチャットアプリなどが自由に作れるわけですね。

本来ソケット通信は少し上級者向けというか、初心者にとっては実装が絶望的なレベルなのですが、Socket.ioを使えば、初心者でも簡単にソケット通信を実装できるようになります。Slackのようなチャットアプリなどを作りたい方には、とてもおすすめのフレームワークです。

【チュートリアル】
Socket.ioは、全文英語ながらコードで細かく内容を伝えてくれる、非常にわかりやすく丁寧な公式チュートリアルがあります。なぜかダークテーマが用意されていたり、サイトのデザインも少し面白いものになっていますよ。
Socket.ioチュートリアル

3．HTMLゲーム開発

JavaScriptはWEBブラウザゲーム（HTMLゲーム）の分野でも大活躍しており、一時話題だった艦隊これくしょんや、今でも話題となるゴッドフィールドなどのゲームは、全てJavaScriptでバックエンドのプログラムを構築しています。

当然のことながら、そんなHTMLゲームの開発を手助けする技術も多方面から公開されているため、初心者の方でも複雑なゲームの処理を手軽に実装できます。

HTMLゲームの開発に長けたライブラリ・フレームワークとして、代表的なものが以下の2つです。

• enchant.js
• Phaser

enchant.js

enchant.jsは、株式会社UEIによって製作された日本製のJavaScriptフレームワークです。

ゲーム向けのフレームワークがブルーオーシャンなためか、日本製の技術が代表格に上り詰めているのは嬉しいですね。

Unityで制作したかのような、完成度の高いHTMLゲームを簡単に作ることができることから、日本ではゲーム開発の定番フレームワークとなっています。

しかし、ディベロッパーである株式会社UEIは2020年をもって解散しており、現在はほぼ完全に開発が止まっている状態です。
UEIが突然の解散

いずれ時代遅れになる可能性は否めませんが、完成度自体は非常に高いので、今後数年間はゲーム開発の礎として利用され続けるでしょう。

【チュートリアル】
前述のとおり、製作チームが解散し、公式サイトが閉鎖されてしまっていることから、現在公式チュートリアルと呼べるものは存在していません。Githubのリポジトリを見れば何とかならないこともないですが、ここではよりわかりやすく解説されている日本のブログ記事を掲載しておきます。
enchant.jsチュートリアル

Phaser

Phaserは、ゲーム開発に必要な画像、音声などの機能を全て簡単実装できるJavaScriptフレームワークです。

先述したenchant.jsと違い、2022年現在でも定期的にアップデートが続けられており、今後の機能アップデートにも大いに期待できます。enchant.jsは日本で人気がある一方、Phaserはワールドワイドでトップクラスのシェアを誇っているため、ゲーム開発分野においては他のフレームワークよりも遥かに人気が高いです。

Phaserは頻繁なアップデートがされていることから、古いバージョンと最新バージョンの機能差が大きく、一部機能がすぐに非推奨なものになることがあります。現在の最新バージョンはPhaser3なので、学習する際もこれに該当するリファレンスを読むようにしましょう。

【チュートリアル】
Phaserには当然ながら公式サイトのガイドがあるのですが、日本語訳には未対応な上、英語が読めない方にとっては少し難読と言えます。したがって、ここでは当該チュートリアルを日本語で簡単に解説しているQiitaの記事を掲載しておきます。
Phaser3チュートリアル

4．AI開発・機械学習

AI開発や機械学習と言えばプログラミング言語のPythonで行うのが代表的ですが、実はJavaScriptでもライブラリ・フレームワークの力を借りれば、効率的な機械学習プログラムを組むことができます。

Pythonは作ったプログラムをWEBサービスに利用するまでに少し手間がかかりますが、JavaScriptで開発すれば、作ったものをそのままWEBサービスなどに即座に応用できます。そのため、WEB制作をしている方はJavaScriptでのAI開発・機械学習を学んでみるのもおすすめです。

ただ、この分野に関してはPythonがどう考えても主流なので、それほどライブラリ・フレームワークの種類が豊富にあるわけではありません。基本的には、以下の2つのどちらかが開発に利用されています。

• TensorFlow.js
• Brain.js

TensorFlow.js

TensorFlow.jsは、ブラウザで機能する機械学習プログラムを作成できるJavaScriptライブラリです。

Google社が開発した「TensorFlow」というソフトウェア（言語ではない）のJavaScriptライブラリ版で、「JavaScriptでAI・機械学習を応用したWEBサービスを作りたい！」というニーズに対応したバージョンとなっています。

画像認識はもちろんのこと、ニューラルネットワークを活用した楽曲制作の機械学習プログラムを組めるなど、TensorFlow.jsだけで大半の開発作業を行えるのが魅力です。

【チュートリアル】
TensorFlow.jsはGoogle社が提供しているだけあり、公式リファレンスの情報量が豊富です。チュートリアルもばっちり日本語化されているので、学習する際は公式リファレンスを存分に活用してみてください。
Tensor.jsチュートリアル

Brain.js

Brains.jsは、ニューラルネットワークを中心としたJavaScriptライブラリです。

GPUを使用して処理を高速化できるなど、特徴はあるのですが、大部分ではTensorFlow.jsに劣っている感が否めません。また、海外では人気がある一方、日本ではBrain.jsが使われる場面がほとんどなく、日本語のリファレンスが整っていないため、日本人にとっては学習コストが高いというデメリットがあります。
ひとまずはTensorFlow.jsを学んでみて、興味があればBrain.jsについて学習する、というようなフローがおすすめです。

【チュートリアル】
英語ではありますが、一応Brain.jsの公式リファレンスからチュートリアルが提供されています。環境構築からガイドされているので、内容が理解できるのであれば難なく学習できるかもしれません。
Brain.jsチュートリアル

5．アプリケーション開発

JavaScriptは、WEBのみでなく、OS上で動作するネイティブアプリ、いわゆる”アプリケーション開発”の分野でも幅を利かせています。

しかし、だからといって色々な技術が使われているかというと、そうでもありません。市場のシェアを見ると、1つだけ群を抜いて利用されているフレームワークがあります。

それが、React-Nativeです。

最後は、アプリケーション開発でほぼ1強とも言えるReact-Nativeについてご紹介します。

React-Native

React-Nativeは、その名の通りReactをネイティブアプリの開発用に機能変更したフレームワークです。

ReactはWEBサービスのUI部品実装を手助けしてくれるライブラリとして高いシェアを誇っており、それに乗じる形でこちらも年々トレンドに名乗りを上げてきています。

React-Nativeの何が凄いのかというと、作れるアプリケーションの幅が異常に広いところです。

ネイティブアプリを動かす環境と言えば、

• PC（Windowsなど）
• iPhone, iPad（iOS）
• AndroidOS

などがありますが、何とReact-Nativeを使えば、これらの環境に共通して対応するマルチなアプリケーションを開発できます。通常はJavaやSwiftなどのプログラミング言語を使い分けるところを、なんとフレームワーク1つで実現してしまうわけですね。

JavaScriptとReactさえ理解できればアプリ開発に挑戦できるということですから、当然ながら学習コストや人材の登用・育成コストなど、あらゆる開発コストを大幅に削減することができます。そのため、国内外問わず、多くの企業で大規模開発に採用されるといった実績も豊富です。

ReactとReact-Nativeを使いこなせれば、IT人材としての価値に拍がつくことでしょう。

【チュートリアル】
Reactは日本語訳されたチュートリアルがあるものの、React-Nativeには現状日本語訳された公式チュートリアルがありません。ここでは英語の公式チュートリアルを掲載しておきますが、日本語で解説しているブログも多いので、学習に詰まったらそれらのサイトで調べてみてください。
React-Nativeチュートリアル

まとめ

今回はできる限り定番のフレームワーク・ライブラリを紹介してきましたが、JavaScriptには更に色々な関連技術が存在します。ひとまずJavaScriptの学習を終えた方はここで紹介した技術を学習し、その後新しい技術を自分で探してみるのがおすすめです。