PR

JavaScriptのライブラリ3つの特徴や使い方を解説

JavaScript

今回はJavaScriptを用いたアプリケーション開発でよく利用されている、3つのライブラリの使用用途、特徴、使い方をご紹介しています。またJavaScriptのライブラリに加えてフレームワークについても使用用途、特徴、使い方をご紹介します。

  1. ライブラリとは
  2. フレームワークとは
  3. JavaScriptでライブラリやフレームワークを使うメリット
  4. ライブラリとフレームワークとの違い
  5. JavaScriptのおすすめのライブラリの特徴から使い方までを解説
  6. おすすめライブラリ（１）Node.js
    1. Node.jsの使用用途
    2. Node.jsの特徴
      1. 高速なJavaScriptエンジン
      2. ノンブロッキングI/O
      3. イベントループ
    3. Node.jsの使い方
      1. Node.jsのインストール
      2. スクリプトファイルの作成
      3. スクリプトファイルの実行
  7. おすすめライブラリ（2）jQuery
    1. jQueryの使用用途
    2. jQueryの特徴
      1. 短いコードで書ける
      2. ブラウザ別の処理を書く必要がない
      3. プラグインの数が多い
    3. jQueryの使い方
  8. おすすめライブラリ（3）React
    1. Reactの使用用途
    2. Reactの特徴
      1. HTML風コードが書ける
      2. jQueryと共存できる
      3. 規模が大きくなっても管理しやすい
    3. Reactの使い方
  9. おすすめフレームワーク（1）Vue.js
    1. Vue.jsの使用用途
    2. Vue.jsの特徴
      1. プログレッシブフレームワーク
      2. フレームワーク独自の取り決めが少ない
      3. データバインディング
    3. Vue.jsの使い方
      1. VueDevtools
      2. vue-cli
  10. おすすめフレームワーク（2）AngularJS
    1. AngularJSの使用用途
    2. AngularJSの特徴
      1. HTMLベースのテンプレート構文
      2. 双方向データバインディング
      3. DI(DependencyInjection)によるモジュール管理
      4. ルーティング機能
      5. 非同期通信のサポート
    3. AngularJSの使い方
  11. おすすめフレームワーク（3）Nuxt.js
    1. Nuxt.jsの使用用途
    2. Nuxt.jsの特徴
      1. サーバーサイドレンダリング
      2. 静的ファイルの生成
    3. Nuxt.jsの使い方
      1. Nuxt.jsスターターキットパッケージの実行
      2. プロジェクトの実行
  12. ライブラリを活用してJavaScript開発をハッピーに

ライブラリとは

JavaScriptにおけるライブラリとは、よく使われる機能や効果を再利用しやすいようにまとめられた関数群です。

例えば作成したWebページに写真のスライドショー機能を追加する場合に、ライブラリにあるスライドショー機能を組み込めば、1からコーディングするより効率的に目的が達成できます。

（注）記事内のコード例でタグ文字（＜＞）は２バイト文字を使用しています。そのままコピーしても動きませんのでご注意ください。

フレームワークとは

JavaScriptにおけるフレームワークとは、ライブラリの機能だけでなく一定の設計思想に基づいて、アプリケーションのひな型まで用意されているアプリケーション群です。ひな型に固有の処理のコーディングを追加するだけでアプリケーションが完成します。

汎用的な部分はあらかじめ用意されているので、フレームワークを適用するプロジェクトの固有の機能に注力できます。

JavaScriptでライブラリやフレームワークを使うメリット

JavaScriptのライブラリやフレームワークを利用することにより、コーディング量も減りテスト対象も絞り込めるので全体の開発効率を上げることができます。

またフレームワークにはコーディング規約などの決まりごとがあるので、複数人で開発してもJavaScriptのコーディングスタイルが合わせやすいのもメリットです。

ライブラリとフレームワークとの違い

JavaScriptのライブラリとフレームワークの違いは、ライブラリはコードの再利用が目的であり、フレームワークは設計も含めた再利用が目的であるという点です。

ライブラリは全体を動かすロジックはなく、部品の集まりですので全体の設計は自分で行う必要があります。フレームワークは骨組みがあり基本設計ができていて、そこに肉付けしていくイメージです。

JavaScriptのおすすめのライブラリの特徴から使い方までを解説

ここからはJavaScriptのおすすめのライブラリとフレームワークについて、3つずつご紹介します。それぞれのライブラリあるいはフレームワークについて、どういう分野で使用されているかという使用用途、特徴および使用方法についてご紹介します。

興味のあるライブラリあるいはフレームワークがあればそれぞれの公式サイトがあるので覗いてみてください。

おすすめライブラリ（１）Node.js

ライブラリの1つ目はNode.jsです。Node.jsはJavaScriptでコーディングされたソースコードを、サーバーサイドで実行できるようにする実行環境と、サーバサイドでの処理に必要なモジュール群が収められているライブラリから構成されています。

サーバーサイドでJavaScriptのソースコードを実行できるということは、JavaScriptでフロントサイドのアプリケーションを作成していた技術者が、PHPやJavaなどの言語を新たに勉強せずにサーバサイドのコードが書けるということです。

Node.jsの使用用途

Node.jsは元々はサーバーサイドでJavaScriptを実行できるようにする目的で開発されましたが、最近はフロントエンドでの開発でも使用されることがあります。

後ほどご紹介するフレームワークにも、使用するためにはNode.jsを必要とするものがあります。

Node.jsの特徴

大量のアクセスを実行できるように以下の3点の技術が採用されています。

高速なJavaScriptエンジン

GoogleがChromeブラウザ用に開発した「GoogleV8JavaScriptEngine」を採用していて、JavaScriptの実行速度が高いです。

ノンブロッキングI/O

いくらJavaScriptの実行速度が高速でもデーターベースやファイルへの入出力で時間がかかると、そこがボトルネックとなってしまいます。Node.jsではデーターベースやファイルへの入出力で時間がかかる場合は、処理を待たずに次の処理へ移ることができます。これがノンブロッキングI/Oです。

ノンブロッキングI/Oでの処理結果を受け取る仕組みが必要ですが、それが次にご紹介するイベントループです。

イベントループ

Node.jsではデーターベースやファイルへの入出力結果はイベントとして扱い、イベントをループ監視しています。これがイベントループです。

Node.jsの使い方

Node.jsを使うためには、Node.jsのインストール、実行したいスクリプトファイルの作成、スクリプトファイルの実行という3ステップが必要です。

Node.jsのインストール

Node.jsは実行環境を含むため、実行する環境にインストールする必要があります。Node.jsは頻繁にバージョンアップが行われていますので、nvm（NodeVersionManager）というバージョン管理ツールからインストールすることをおすすめします。

WindowsとMacOS向けには、それぞれnvmのインストーラーが用意されています。Linuxの場合はGitからインストールするのが一般的です。

スクリプトファイルの作成

スクリプトファイルにサーバー動作なども含めて記述します。下記に簡単なWebサーバーとして動作するスクリプトの例をご紹介します。

//（sample.js）
var http = require('http');
var server = http.createServer();
server.on('request', function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello Node.js World\n');
res.end();
});
server.listen(80);
console.log('Server started');

server.onの部分がイベントループの部分です。

スクリプトファイルの実行

スクリプトファイルを作成して保存したら、コマンドプロンプトからコマンドを入力して実行します。

node sample.js

作成したスクリプトファイルを実行すると、クライアント側からアクセスできるようになります。

おすすめライブラリ（2）jQuery

ライブラリの2つ目はjQueryです。jQueryはJavaScriptを少ない記述で容易にコーディングできるように設計されたライブラリです。

jQueryの使用用途

jQueryは、HTMLドキュメント内の要素の走査および操作・イベント処理・アニメーション・Ajaxといった処理を、純粋なJavaScriptと比べて少ない記述で実現できるライブラリとなっています。そのためWebページに動きを加える場面で広く活用されているライブラリです。

jQueryの特徴

jQueryの特徴を3点ご紹介します。

短いコードで書ける

JavaScriptのコードを隠して、jQuery専用の記述をするように設計されているため短いコードで書けるようになっています。

基本形は以下のようになります。

$(function(){
$(セレクタ).メソッド(パラメータ)
});

「セレクタ」で指定した対象に対して「メソッド」と「パラメータ」で記述した処理を実行するという形式です。

イベント処理は次のようになります。

$(function(){
$(セレクタ).on(イベント内容,function(){
イベント発生時に実行する処理内容
});
});

「セレクタ」で指定した対象に「イベント内容」が発生したら、「イベント発生時に実行する処理内容」を実行するという形式です。

$()はjQuery()と書いても動きます。WordPressでjQueryを使用する場合は、jQueryのライブラリが最初から内蔵されていて、jQuery()と書かないと動きません。

ブラウザ別の処理を書く必要がない

JavaScriptのブラウザごとの非互換部分は、jQuery内部で吸収しているのでどのブラウザでもjQueryの記述は1つで済みます。ブラウザの違いを気にせずにコーディングに集中できます。

プラグインの数が多い

jQuery単独では実現が難しいWebページの動きも、特定の目的に特化したプラグインを追加することで実現が可能となります。そのようなjQuery用のプラグインが無償のものから有償のものまで豊富にあります。

同じような機能のものがいくつもあったりもするので、選ぶのが大変ということもあります。

jQueryの使い方

HTMLファイルにscriptタグを1行追加する方法で利用できるようになります。

＜script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"＞＜/script＞

プラグインも同様の記述を追加すれば利用可能ですが、プラグイン専用のcssが必要な場合もあります。またプラグイン自体をダウンロードし、自分のサイト内に配置しないと使えないものもありますので注意が必要です。

おすすめライブラリ（3）React

ライブラリの3つ目はReactです。ReactはFacebookとReactのコミュニティによって開発されている、ユーザインタフェースを構築するためのJavaScriptライブラリです。MVCデザインパターンのうち、view層のみに焦点を当てています。

Reactの使用用途

ReactはシングルページアプリケーションのUI部品を作るのに向いています。シングルページアプリケーション（SPA）とは、単一のページで構成されているWebアプリケーションです。

ページ遷移を行うことなく、ページ内の表示内容の変更を必要な部分だけ行います。ブラウザを使用しないデスクトップアプリケーションのようなUIを表現できます。

Reactの特徴

Reactの特徴を3つご紹介します。

HTML風コードが書ける

コードの中にPHPのようなHTML埋め込み構文を使用できます。

return (
＜div id="message"＞
Hello, world.
＜/div＞
);

上記のようなコードはJavaScriptではシンタックスエラーとなるため、ReactのコードはJavaScriptのコードに変換されてから実行されます。

変換はJSXTransformer.jsによる自動変換とJSXコマンドによる手動変換の2つの方法があります。ある程度規模が大きくなると自動変換では時間がかかるようになるため、このようなケースでは手動変換が推奨されます。

jQueryと共存できる

ReactはjQueryと共存可能な数少ないライブラリの一つです。ReactはjQueryのようなアニメーションが得意ではありません。jQueryと共存できるので、表現のしかたに凝ったりする場合は、jQueryを利用するといった使い方も可能です。

規模が大きくなっても管理しやすい

Reactは規模が大きくなっても管理しやすいように設計されているライブラリです。状態を持つコンポーネントを極力少なくし、ステートレスなコンポーネントを組み合わせて構築するというのが基本的な考え方です。

Reactの使い方

Reactを読む込む記述をHTMLファイルに追加するだけで使用できるようになります。

＜script src="http://fb.me/react-0.13.3.js"＞＜/script＞
＜script src="http://fb.me/JSXTransformer-0.13.3.js"＞＜/script＞

2行目の記述は、JSXTransformer.jsによる自動変換を行う場合に必要です。

おすすめフレームワーク（1）Vue.js

フレームワークの1つ目はVue.jsです。Vue.jsはJavaScriptでユーザーインターフェイスを構築するためのフレームワークです。

Vue.jsの使用用途

Vue.jsはWebアプリケーションのフロントエンド側の開発に使用されています。

Vue.jsの特徴

Vue.jsの特徴は、学習コストが少ないということです。中核となるライブラリは、MVCデザインパターンのうち、view層のみに焦点を当てています。公式ガイドの日本語訳が充実しているのもポイントです。

以下に主な特徴3点をご紹介します。

プログレッシブフレームワーク

Vue.jsはモノリシックフレームワークとは異なり、少しずつ導入できるように設計されているため、既存のシステムにも適用可能です。

モノリシックフレームワークとは、フレームワークが一枚岩のように一体となっていて、システム全体をフレームワーク上に構築する必要があり、最初からフレームワークを適用して開発を進めることが前提となっています。

フレームワーク独自の取り決めが少ない

Vue.jsはフレームワーク独自の取り決めが少ないので、HTMLとJavaScriptの知識があれば、公式ガイドを読むだけで一日もかからずにアプリケーションの構築を始めることができるようになります。

Vue.jsではHTML ベースのテンプレート構文を使用して、VueインスタンスのデータとビューのDOMを宣言的に対応させることができます。

データバインディング

Vue.jsでは、テンプレート構文でデータとビューが対応付けられていると、データの値に応じてビューの値も自動的に更新されます。

＜div id="app-1"＞
{{ msg }}
＜/div＞
var app1 = new Vue({
el: '#app-1',
data: {
msg: 'Hello Vue.js'
}
})

上記の例ではビューであるid=app-1のdivタグ内のmsgと、Vueインスタンスのデータmsgが対応していてデータmsgの値が変わるとビューのmsg部分も自動的に更新されます。

Vue.jsの使い方

Vue.jsを使う方法は、HTMLファイルにscriptタグを1行追加するだけです。

コンソールの警告が含まれている開発バージョンなら

＜script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"＞＜/script＞

サイズと速度のために最適化された本番バージョンなら

＜script src="https://cdn.jsdelivr.net/npm/vue"＞＜/script＞

となります。さらにあると便利なツールや大規模開発向けのインストール方法をご紹介します。

VueDevtools

ブラウザにVueDevtoolsをインストールすることで、Vueアプリケーションをよりユーザフレンドリーな形で調査・デバッグが可能となります。Chrome版とFireFox版が用意されています。

vue-cli

JavaScriptの大規模開発においては、モジュール化・ビルド・ソースコードの静的構文チェック・単体テスト・E2Eテストなどのアプリケーション開発環境が必要となってきます。

Vue.js向けのアプリケーション開発環境をセットアップする公式のコマンドラインツールがvue-cliです。

先に紹介したNode.js および関連するビルドツールに関する知識があることが前提となっていますので、それらの経験がない場合は、はじめにご紹介したscriptタグで読み込む方法をおすすめします。

おすすめフレームワーク（2）AngularJS

フレームワークの2つ目はAngularJSです。AngularJSはGoogleとAngularJSのコミュニティによって開発されている、JavaScriptのみで書かれたWebアプリケーションフレームワークです。Vue.jsなどとは異なりフルスタックなフレームワークです。

AngularJSのバージョンは本記事執筆時点で1.7.8です。1.Xの開発は継続されていますが、アーキテクチャーを一新した2.Xが2016年9月にリリースされ、こちらは名称もAngularJSからAngularに変更となっています。

言語もJavaScriptではなくTypeScriptを使用する前提となっています。1.X系と2.X系の互換性はありません。

AngularJSの使用用途

AngularJSはフロントエンドのWebアプリケーションフレームワークです。シングルページアプリケーションを開発する際に直面する課題を解決する、さまざまな機能が備わったフレームワークです。

AngularJSの特徴

AngularJSの主な特徴5つをご紹介します。

HTMLベースのテンプレート構文

テンプレート言語にHTMLを使用し、AngularJS独自の拡張構文やカスタム属性が用意されています。カスタム属性と拡張構文を使うことで、テンプレート内で制御構造・UIコンポーネント・ロジックなどを記述することができます。

双方向データバインディング

HTMLのINPUTフィールドをバインドすると入力された値を他の場所に表示するようなDOM操作のための処理を記述する必要がなくなります。

Vue.jsと同様の機能ですが「双方向」であるところが、Vue.jsとは異なります。Vue.jsは単一コンポーネント内なら双方向データバインディング可能ですが、コンポーネントをまたがる場合は単方向となります。

DI(DependencyInjection)によるモジュール管理

モジュール内のオブジェクト間の依存関係を、ソースプログラムから排除し外部の設定ファイルに定義することができます。

オブジェクト間の依存関係とは、固定した他のモジュールの定数・変数・インスタンスを、モジュール内で直接記述して使用している場合に、そのモジュールは記述している他のモジュールの定数・変数・インスタンスに依存しているということになります。

例えば、モジュールAの単体テストを行いたい場合に、モジュールBに依存しているとモジュールBの実体がないとテストできないので、単体テストがやりづらくなります。DIをすることで依存関係が薄れて単体テストがしやすくなります。

ルーティング機能

SPAにおけるルーティングとは、URLに応じて、変更が必要なコンテンツのみ書き換え、疑似的にページ遷移を起こすことです。

URLの変更なしに部分的なコンテンツのみ書き換えだけを行うと、URLをキーとして動作する解析ツールや検索botが期待している動作を行えません。AngularJSではルーティングを行うライブラリが用意されていて、モジュールに実装することでルーティングを行えます。

非同期通信のサポート

サーバーとのデータ送受信に使用するためのモジュールが用意されているので、簡単に非同期通信が実装できます。

JavaScriptだけでもAjaxという機能を使えば、非同期通信が実現できます。Ajaxの中でXMLHttpRequestがサーバーとhttp通信を行うAPIとなっています。AngularJSでは$httpというモジュールがあり、XMLHttpRequestのラッパーです。

JavaScriptのXMLHttpRequestではかなり煩雑な手順を踏む必要がありますが、$httpを使用すれば非同期通信が簡単に実装できます。

AngularJSの使い方

AngularJSを使う方法は、HTMLファイルにscriptタグを1行追加するだけです。

＜script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"＞＜/script＞

おすすめフレームワーク（3）Nuxt.js

フレームワークの3つ目はNuxt.jsです。Nuxt.jsは先にご紹介した、Vue.jsアプリケーションを構築するためのフレームワークです。Nuxt.jsには以下のパッケージが含まれています。

パッケージ名説明
Vue2Vue本体です
Vue-RouterVueアプリケーションのルーティングを管理するパッケージです
VuexVue版のFlux（アプリケーションの状態管理のしくみ）です
VueServerRendererVueアプリケーションをサーバーサイドレンダリングするためのパッケージです
Vue-MetaVueアプリケーションのメタ情報を管理するパッケージです
webpack（内部で使用）JavaScriptのソースコードをまとめるバンドラーです
vue-loader（内部で使用）VueコンポーネントをプレーンなJavaScriptに変換します
babel-loader（内部で使用）JavaScriptのコンパイラ

Nuxt.jsの使用用途

Vue.jsは少しずつ導入できるように設計されているため、既存のシステムにも適用可能とご紹介しました。それに対してNuxt.jsは、はじめからVue.jsを使ってWebアプリケーションを構築するために必要なものが揃ったフレームワークです。

Nuxt.jsの特徴

Nuxt.jsの特徴を2点ご紹介します。

サーバーサイドレンダリング

サーバーサイドレンダリングとは、通常クライアント側のブラウザが行っているDOMの生成と操作を、サーバー側で描画（サーバーのディスプレイに表示するのではなくHTML文字列として生成）したものをクライアント側のブラウザに送信する仕組みです。

利点は回線スピードやデバイスの性能が低い場合に、コンテンツの再生時間が短縮されます。また完全に描画されたページを送信するのでSEO対策にもなります。

サーバーサイドレンダリングを使用しないモードも用意されています。

静的ファイルの生成

アプリケーションをビルドする際に静的なHTMLファイルとして出力することができます。「netlify」のようなホスティングサービスへホストしたいときに便利です。

Nuxt.jsの使い方

Nuxt.jsを使用するためには、先にご紹介したNode.jsが必要です。インストール方法はいくつかありますがcreate-nuxt-appというスターターキットを使用する方法をご紹介します。

Nuxt.jsスターターキットパッケージの実行

パッケージマネージャーであるnpmまたはyarnを使用して、Nuxt.jsのスターターキットパッケージを実行することによりプロジェクトを作成します。

npmはNode.jsに含まれるパッケージマネージャーで、スターターキットパッケージを実行するにはバージョン5.2.0からバンドルされているnpxを使用します。yarnはnpm互換のパッケージマネージャーで、スターターキットを実行するにはcreateコマンドを使用します。

npxなら
npx create-nuxt-app ＜プロジェクト名＞
yarnなら
yarn create nuxt-app ＜プロジェクト名＞

実行するといくつか質問が表示され全ての回答が終わると、全ての依存関係にあるパッケージなどがインストールされます。

プロジェクトの実行

プロジェクトが作成できたらパッケージマネージャーで下記のコマンドを実行します。
npmの場合は、npm run dev
yarnの場合は、yarn run dev
実行後にブラウザでhttp://localhost:3000/を開き、アプリケーションの画面が表示されればインストール成功です。

ライブラリを活用してJavaScript開発をハッピーに

ここまでJavaScriptによるWebアプリケーション開発で利用されている、ライブラリとフレームワークについてご紹介しました。

JavaScriptによるWebアプリケーション開発においてライブラリあるいはフレームワークは必ず利用されているものといって良いでしょう。

ライブラリあるいはフレームワークは、日々開発が進められてバージョンアップも頻繁です。時にはメジャーバージョンアップにより、下位互換性がなくなる場合もあるので注意が必要です。

すでに利用していたり、これから利用しようと検討しているライブラリやフレームワークについては、できるだけ新しい情報を収集して利用することをおすすめします。

ライブラリやフレームワークをうまく活用すれば、開発効率が上がるのは間違いないので、気に入ったものがあればぜひ利用してみてください。

タイトルとURLをコピーしました