JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。
その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。
しかし、心配はご無用です。今回の記事では、合計40のJavaScriptライブラリとフレームワークを、その特徴、利点、使用例とともにまとめました。それぞれのライブラリやフレームワークについて理解を深め、判断にお役立て下さい。
JavaScriptライブラリとは
JavaScriptライブラリには、ウェブページやJSベースのアプリケーションで使えるさまざまな関数、メソッド、オブジェクトが一種の部品として用意されています。WordPressサイトもライブラリを使って構築することができます。
ライブラリは、好きな本を気軽に手に取り読むことのできる図書館（図書館＝英語で「library」）のようなもの。優れた作家の書籍を読み、新しい視点やアイデアを学び、それを自らの作品に活用することができます。
これと同じように、JavaScriptのライブラリには、開発者が利用できるコードや関数が豊富にあります。ある開発者がコードを書けば、他の開発者は同じコードを再利用して（スライドショー作成など）あらゆる機能を実装できます。ゼロから記述する代わりに、コードの使い回しができるようになるのです。これにより、開発にかかる時間や手間を大幅に削減できます。
JavaScriptライブラリの肝は助け合いとも言えるでしょう。用途に応じて、何十ものライブラリを見つけることができます。手間の削減だけでなく、開発プロセス全体の簡素化も促進されます。
JavaScriptライブラリの使用方法
アプリでJavaScriptライブラリを使用するには、<head>要素に<script>を追加し、ライブラリのソースパスまたはURLを参照するsrc属性を使用します。
詳細については、使用するJavaScriptライブラリのドキュメントを読み、そこに記載されている手順に従ってください。
JavaScriptライブラリの用途
先に述べたように、JavaScriptのライブラリは特定の機能を実行するために使用します。約83のライブラリがあり、それぞれが何らかの目的のために作られています。
JavaScriptのライブラリは、例えば以下のような用途で使用できます。
-
地図やチャートでのデータ可視化
アプリケーションにおけるデータの可視化は、管理パネル、ダッシュボード、パフォーマンス情報といったデータを明確に表示する上で重要です。
データをチャートや地図で表示することで、効果的に分析し、情報に基づいた事業上の意思決定を行うことができます。
例：Chart.js、Apexcharts、Algolia Places
-
DOMの操作
DOM（Document Object Model）は、ウェブページ（ドキュメント）をオブジェクト（ノードを用いたツリー構造）で表現するもので、JavaScriptを使ってこれを操作することができます。コンテンツ、スタイル、構造を変更するのに有用です。
例：jQuery、Umbrella JS
-
データ処理
現代社会では、あらゆる事業で日々膨大な量のデータが扱われており、適切な処理・管理の手法を確保することが必要不可欠です。JavaScriptライブラリを使用することで、双方向性を持たせながら、ドキュメントの内容に沿ってデータを容易に扱うことができます。
例：D3.js
-
データベース
データの読み取り、作成、削除、編集、並べ替えを行うには、効果的なデータベース管理が欠かせません。また、高度なクエリの使用、テーブルの自動作成、データの同期と検証など、さまざまな機能も必要になります。
例：TaffyDB、ActiveRecord.js
-
フォーム
JSライブラリを使って、入力内容の検証、同期、処理、条件分岐、入力欄のコントロール、レイアウトの変換など、フォームの機能を拡張することができます。
例：wForms、LiveValidation、Validanguage、qForms
-
アニメーション
ウェブページをインタラクティブで魅力的なものにするために、アニメーションを活用することができます。JavaScript ライブラリを使えば、マイクロインタラクションやアニメーションを簡単に実装できます。
例：Anime.js、JSTweener
-
画像エフェクト
JSライブラリを使って、画像にエフェクトをかけ、目立たせることができます。効果には、ぼかし、明るさ、エンボス、シャープ、グレースケール、彩度、色相、コントラスト調整、反転、反射、などがあります。
例：ImageFX、Reflection.js
-
フォント
コンテンツの種類に応じて、好きなフォントを組み込んで、ウェブページをより魅力的にすることができます。
例：typeface.js
-
数式・文字列
数式、日付、時刻、文字列を追加するのには手間がかかります。例えば、日付には多くの書式、スラッシュ、ドットの類いが介在し、複雑になりがちです。行列やベクトルに関しても同じことが言えます。
JavaScriptのライブラリを使って、そんな複雑な処理を簡略化し、さらにURLの操作や取り扱いを簡単にこなすことができます。
例：Date.js、Sylvester、JavaScript URL
-
ユーザーインターフェースとその構成要素
ウェブページのレスポンシブ化、動的化、DOM操作数の削減、ページスピードの向上など、優れたユーザー体験の確保に利用することができます。
例：ReactJS、Glimmer.jsなど
その他にも、JavaScriptライブラリの用途は以下の通りです。
- 特殊なダイアログボックスの作成
- キーボードショートカットの作成
- プラットフォームの切り替え
- 丸みを帯びた角の作成
- データ取得/AJAXの操作
- ページレイアウトの整列
- ナビゲーションやルーティングの作成
- ログの記録とデバッグ
- その他多数
人気のJavaScriptライブラリ
それでは、人気のJavaScriptライブラリをご紹介します。
jQuery
jQueryは、高速、軽量、豊富な機能を持つ、歴史あるJavaScriptライブラリです。2006年にJohn Resig（ジョン・レシグ）氏がBarCamp NYCで開発したもので、MITライセンス下でフリーかつオープンソースのソフトウェアとして公開されています。
これを使うことで、HTMLドキュメントの扱いやトラバース、アニメーション、イベント処理、Ajax操作がシンプルになります。
W3Techsによると、全サイトの77.6%がjQueryを使用している（2021年2月23日現在）とのことです。
特徴・メリット
- 使いやすく、ミニマルなAPI
- スタイルプロパティの操作と要素の検索にCSS3セレクタを使用
- 軽量で、gzipと圧縮に必要となるのはわずか30kbであり、AMDモジュールもサポート
- 構文がCSSと似ているため、初心者でも簡単に習得可
- プラグインによる拡張性の高さ
- ChromeやFirefoxなどのマルチブラウザに対応したAPIで汎用性がある
使用例
- CSSセレクタによるDOM操作（要素名とその属性─classやid等─など特定の条件を使用してDOM内のノードを選択できる）
- Sizzle（オープンソースのマルチブラウザ対応セレクタエンジン）を使用したDOM内の要素選択
- エフェクト、イベント、アニメーションの作成
- JSONの解析
- Ajaxアプリケーションの開発
- 機能の検出
- Promise、Deferredオブジェクトによる非同期処理の制御
React.js
React.js（ReactJSまたはReactとも呼ばれる）は、オープンソースのフロントエンドJavaScriptライブラリです。2013年にMeta（※当時の名称はFacebook）でソフトウェアエンジニアとして働くJordan Walke氏により開発されました。
現在はMITライセンスを取得していますが、当初はApache License 2.0で公開されていました。Reactは、インタラクティブなUI制作を苦もなく行えるよう設計されています。
アプリにおける個々の状態に対して、シンプルなビューを用意するだけで、データの変更に応じて、適切なコンポーネントが効率的にレンダリング、更新される仕組みです。
特徴・メリット
- ReactのUIを構成するのはコンポーネントやエンティティであり、React DOMライブラリを用いることで、DOMの特定の要素に対し描画を行う
- 仮想DOMを使用（データ構造でメモリ内キャッシュを作成、差分を計算し、ブラウザの表示DOMを効率的に更新）
- この選択的なレンダリングにより、アプリのパフォーマンスが向上し、ページレイアウト、CSSスタイル、フルページレンダリングの再計算にかかる開発者の労力も軽減可
- renderやcomponentDidMountなどのライフサイクルメソッドを使用し、エンティティライフタイムにおける特定の時点でのコード実行を許可
- JSとHTMLの両方を組み合わせたJavaScript XML（JSX）をサポート（ネストした要素、属性、JS式、条件文によるコンポーネントのレンダリングを支援）
使用例
- モバイルアプリケーションやシングルページアプリケーションを開発する際のベースとなる
- DOMに状態を描画し、それを管理
- ウェブアプリケーションやインタラクティブなサイトを開発する際に、効率的にユーザーインターフェースを構築できる
- デバッグとテストが簡単になる
補足として、Facebook、Instagram、WhatsappがReactを使用しています。
D3.js
Data-Driven Documents (D3) またはD3.jsは、データに基づく文書操作に使用できるJSライブラリです。2011年にBSDライセンスで公開されました。
特徴・メリット
- ウェブ標準を重視したものであり、単一のフレームワークに制限されることなく、モダンブラウザの機能が利用できる
- 強力なデータビジュアライゼーション機能
- HTML、CSS、SVGをサポート
- データ駆動型のアプローチを採用し、それを応用しDOMを操作
- D3.jsは高速であると同時に、アニメーションやインタラクションを支える動的な動作やデータセットを数多くサポート
- オーバーヘッドを削減し、高いフレームレートでの複雑なグラフィック実行を可能にする
使用例
- インタラクティブかつ動的なデータの可視化を実現
- データをDOMにバインドし、データ駆動型の変換を実行（例えば、数値の配列からHTMLテーブルを生成し、D3.jsを使ってSVGを利用した棒グラフや3Dサーフェスプロットを作成することができる）
- その機能的なコードにより、膨大な数のモジュールで再利用可能
- D3には、宣言的アプローチによるスタイルや属性の変更、ノードの追加、ソート、削除、テキストやHTMLコンテンツの変更など、ノードに働きかけるモードが豊富に存在
- アニメーションによる遷移の作成、イベントを通じた複雑な遷移のシーケンス、CSS 3による遷移の実行など
Underscore.js
Underscoreは、典型的なプログラミング処理を支える機能を搭載したJavaScriptユーティリティライブラリです。2009年にJeremy Askenas氏によって開発され、MITライセンス下にてリリースされました。現在では、Lodashがこれの上位互換とみなされる傾向にあります。
特徴・メリット
- Prototype.js（別の人気ユーティリティライブラリ）と機能の類似点があるものの、Underscoreは、関数型プログラミングの設計になっている
- 100以上の関数があり、操作するデータ型によって4種類に分類される
-
- オブジェクト
- 配列
- オブジェクトと配列の両方
- その他の関数
- Underscoreは、Chrome、Firefox、Edgeなどに対応しています。
使用例
フィルタ、地図などの支援に加え、バインディング、クイックインデックス、JavaScriptテンプレート、品質テストなどの専門的な機能もサポートしています。
Lodash
Lodashも数値、配列、文字列、オブジェクトなどを簡単に扱えるようにするJSユーティリティライブラリです。2013年にリリースされ、Underscore.jsのような関数型プログラミングの設計も採用されています。
特徴・メリット
- 保守性の高い、簡潔なJavaScriptコードを書くことができる
- 数学演算、バインド、スロットル（throttle）、装飾、制約、デバウンス（debounce）など、一般的な処理を簡素化
- トリミング、キャメルケース、大文字などの文字列の処理がシンプルになる
- 配列の作成、変更、圧縮、ソート
- その他、コレクション、オブジェクト、シーケンスに対する操作
使用例
Lodashのモジュラーメソッドは、次のような場合に有用です。
- 配列、文字列、オブジェクトのイテレーション
- 関数の合成
- 値の操作とテスト
Algolia Places
Algolia Placesは、サイトでの住所の自動入力を助けるJavaScriptライブラリです。非常に高速で高い精度を誇り、サイトのユーザーエクスペリエンス向上に貢献します。Algolia Placesは、OpenStreetMapのオープンソースデータベースを活用し、世界中の地名を網羅しています。
例えば、商品ページのコンバージョンを高めるのに使用できます。
特徴・メリット
- 複数の欄を同時に入力することで、決済の流れを簡素化
- 国や都市のセレクタを簡単に使用可能
- リアルタイムで地図上にリンク候補を表示し、結果を素早く確認
- 入力ミスに対応し、その都度結果を返す
- 全てのクエリを最も近いサーバーに自動でルーティングし、数ミリ秒以内に結果を提供
使用例
- 特定の場所を表示するために地図を組み込むことができる
- フォームを効率的に利用することが可能に
Anime.js
サイトやアプリケーションにアニメーションを追加できるライブラリをお探しなら、Anime.jsが優れた選択肢です。2019年にリリースされ、高性能でありながらシンプルなAPIで軽量化が実現しています。
特徴・メリット
- Anime.jsは、DOM属性、CSSプロパティ、SVG、CSS transform、JSオブジェクトを使用し機能
- Chrome、Safari、Firefox、Operaなど、幅広いブラウザで動作
- ソースコードを簡単に解読、使用できる
- オーバーラップ（重ね合わせ）やスタッガー（動きのばらつき）など、複雑なアニメーションも簡単に実装可能
使用例
- Anime.jsのスタッガーをプロパティやタイミングに使用できる
- 1つのHTML要素に複数のタイミングを同時に設定し、多層のCSS transformationを実装
- Anime.jsのコールバックとコントロール関数を使い、同期的にイベントを再生、一時停止、トリガー、リバース、コントロール
Animate On Scroll（AOS）
Animate On Scrollは、シングルページにおけるパララックス（視差）効果の実装に利用できます。このJSライブラリはオープンソースとして公開されています。ページをスクロールすることで動的に様相の変化する今時のアニメーションを採用する際に便利です。
フェード効果やアンカーを設定するなどして、操作していて楽しいデザインのサイトを作ることができます。
特徴・メリット
- 要素の位置を検出し、ビューポートでの表示に際し特定のクラスを適用
- アニメーションを簡単に追加できるだけでなく、ビューポート上でアニメーションを変更することも可能
- スマートフォン、タブレット、パソコンなど、様々な端末でシームレスに動作
- 純粋なJavaScriptで書かれており依存関係なし
使用例
- 別の要素の位置に応じて特定の要素に動きをつける
- 画面の位置に応じて要素を動かす
- スマートフォンで要素のアニメーションを無効化
- フェード、フリップ、スライド、ズーム、アンカー配置など、多岐にわたるアニメーションの操作が可能
Bideo.js
サイトの背景全面に動画を組み込みたいなら、Bideo.jsをお試しください。
特徴・メリット
- このJavaScriptライブラリを使えば、手軽に動画を設定可能
- さまざまな比率やサイズの画面で美しくスムーズに動作
- 使用ブラウザに応じて動画のサイズを変更可能
- CSS/HTMLで簡単に実装できる
使用例
レスポンシブな動画をサイトの背景に追加するのに便利です。
Chart.js
ウェブサイトやプロジェクトがデータ分析分野に関連するものである。
そして、統計データの表示が必須。
そんな場合には、Chart.jsがおすすめです。
Chart.jsはデザイナー、開発者から高い人気を誇ります。柔軟かつシンプルで、美しいチャートやグラフを簡単に実装することが可能です。MITライセンスのオープンソースライブラリとなっています。
特徴・メリット
- シンプルに見栄えの良いチャートやグラフを追加できる
- レスポンシブなウェブページに仕上がる
- 読み込み付加が少なく、学習と実装も簡単
- 8種類のチャート
- 初心者向き
- アニメーション機能でインタラクティブなページに
使用例
- 各種データセットが混在していても、明確な視覚的表現が可能
- 複雑なデータを対数、日付、時間、またはその他単位でプロット
Cleave.js
Cleave.jsは、テキストコンテンツのフォーマットの定義に使える興味深いライブラリです。入力可能なデータの形式を制御することで、入力フィールドの使いやすさや精度のアップに貢献します。
これを採用すれば、テキストのフォーマットのためにパターンをマスクしたり、正規表現を書いたりする必要がなくなります。
特徴・メリット
- フォーム入力を助ける一貫したデータで使いやすさを向上
- クレジットカード番号、電話番号、日付、時間、数字に対してそれぞれ異なるフォーマットタイプを実行可
- カスタムブロック、プレフィックス（接頭辞）、デリミタ（区切り文字）を設定
- ReactJSコンポーネントなどをサポート
使用例
- CSSセレクタで複数のDOM要素にcleave.jsを実装
- 特定の生の値（処理前の値）を更新する
- テキストフィールドのリファレンスを取得する
- Redux Formと組み合わせてVue.js、jQuery、Playgroundで使用
Choreographer.js
Chreographer.jsを使うと、複雑なCSSに効果的なアニメーションを付加することができます。さらに独自の関数を追加して、CSS以外のアニメーションに使うことも可能です。
このJavaScriptライブラリを使用するには、npmでパッケージをインストールするか、スクリプトファイルを追加してください。
特徴・メリット
- animationクラスで個々のアニメーションデータを管理
- animationConfigオブジェクトで各アニメーションインスタンスを設定
- 2つの組み込みアニメーション関数changeとscaleがある
- scale：ノードのスタイルプロパティに連続的な測定値を組み合わせる
- change：スタイルプロパティを削除したり追加したりするのに使用
使用例
- インスタントスクロールアニメーションを実装
- マウスの動きに合わせたアニメーションを作成
Glimmer
2017年にリリースされたGlimmerは、軽量で高速なUIコンポーネントが特徴です。強力なEmber CLIを使用し、コンポーネントとしてEmberJSと連携することが可能です。
特徴・メリット
- Glimmerは高速なDOMレンダリングエンジンで、レンダリングと更新における驚異的なパフォーマンスを発揮する
- また、汎用性が高いため、コードを書き換えることなく既存の技術スタックと一緒に動作させることができる
使用例
- スタンドアロンコンポーネントとして使用することも、既存のアプリケーションにウェブコンポーネントとして追加することも可
- DOMレンダリング
- 静的コンテンツと動的コンテンツを区別するのに有用
- Emberの機能をより軽量にするのにGlimmerを使用するのが効果的
Granim.js
Granim.jsは、流動的でインタラクティブなグラデーションアニメーションを作成するのに便利なJSライブラリです。カラフルな背景で、サイトにアクセントをつけるのに活用できます。
特徴・メリット
- グラデーションは、画像を覆ったり、単体で動作するようにしたり、画像マスクの下でスライドしたりと、様々な用途に使用できる
- グラデーションの方向をパーセンテージやピクセル値でカスタマイズ
- グラデーションの方向は、斜め、上下、左右、放射状、または独自の設定で操作できる
- 状態を変化させるアニメーションの時間をミリ秒（ms）単位で設定
- グラデーションの色と位置をカスタマイズ
- キャンバスの位置、ソース、スケーリングなどに基づき画像をカスタマイズ
- その他、コールバック設定、イベント作成、グラデーション制御のメソッドあり
使用例
- 2色、3つのグラデーションを使用した基本的なグラデーションアニメーションを作成
- 3色、2つのグラデーションを使用した複雑なグラデーションアニメーションを作成
- 1つの背景画像、2つの色、1つのブレンドモードでグラデーションアニメーションを作成
- 1つの画像マスクを使用して、特定の形状の下でグラデーションアニメーションを作成
- イベントに反応するグラデーションアニメーションを作成
fullPage.js
オープンソースのJSライブラリであるfullPage.jsを使えば、全画面スクロールやシングルページのウェブサイトを簡単に作成することができます。使い方は簡単で、サイトセクション内にスライダーを実装することもできます。
特徴・メリット
- 幅広いカスタマイズと設定オプション
- react-fullpage、angular-fullpage、vue-fullpageなど、各種JavaScriptフレームワークをサポート
- 縦・横スクロールが可能
- さまざまなサイズの画面やマルチブラウザにフィットするレスポンシブデザイン
- ページ読み込み時の自動スクロール実装
- 動画や画像の遅延読み込み
使用例
- 多くの拡張機能を使用して、デフォルトの機能を改善
- 全画面スクロール型のサイトを作る
- シングルページのウェブサイトを構築
Leaflet
Leafletは、インタラクティブな地図をサイトに組み込むことのできる、便利なJavaScriptライブラリです。オープンソース、モバイルフレンドリーで、サイズは約39kbとなっています。MapPress Maps for WordPressプラグインは、このLeafletを使ってインタラクティブな地図を実装しています。
特徴・メリット
- モバイルハードウェアアクセラレーションやCSS機能などのパフォーマンス性能強化策
- タイル、ポップアップ、マーカー、ベクターレイヤー、GeoJSON、画像オーバーレイなど
- ドラッグパン、ピンチズーム、キーボードナビゲーション、イベントなど
- レイヤースイッチャー、アトリビュート、スケール、ズームボタンなどの地図制御
- Chrome、Safari、Firefox、Edgeなどのブラウザをサポート
- OOP機能、HTMLおよび画像ベースのマーカー、CSS 3コントロール、ポップアップ
使用例
ズームとパン、スマートポリゴン/ポリラインレンダリング、モジュールビルド、タップディレイモバイルアニメーションといった機能をサイトの地図に追加することができます。
Multiple.js
Multiple.jsは、JavaScriptの座標処理なしでの、CSSやHTMLを使用した様々な要素での背景画像の共有を可能にします。
その結果、ユーザーによるインタラクションを促進する見事な視覚効果を作り出すことができます。
特徴・メリット
- 複数の背景をサポート
- グラデーションや不透明度を設定
- 様々な端末やウェブブラウザに対応
使用例
- 背景画像を共有し使用
Moment.js
Moment.jsは、複数のタイムゾーン、APIコール、言語などで作業する際に、時間と日付を効率的に管理するのに利用できます。
日付や時刻を検証、解析、フォーマット、操作することで、効率化を図ることができます。
特徴・メリット
- 多くの国際言語をサポート
- オブジェクトの変更
- エポックシフト、ネイティブなDateオブジェクトの取得など、複数の内部特性を持つ
- パーサーを正しく使用するために、厳密モード、日付フォーマット、寛容モードなどのガイドラインがある
使用例
- 公開中の記事に時刻を表示する
- 世界中の人に向けて各地の言語で情報を表示する
Masonry
Masonryは、JSグリッドレイアウトライブラリです。このライブラリは、垂直方向のスペースの大きさに基づいて、グリッド要素を適切な位置に配置するのに利用できます。人気のフォトギャラリー系WordPressプラグインでも広く使用されています。
このレイアウトを例えるなら、石を重ねて壁をつくるようなものです。
特徴・メリット
- Masonryのグリッドレイアウトは、列をベースとし、行の高さは固定されない
- 不要な隙間をなくすことで、ウェブページのスペースを最適化
- レイアウト構造を崩すことなく、要素の並べ替えやフィルタリングが可能
- アニメーション効果
- ダイナミックな要素でレイアウトを自動調整し、最適な構造を実現
使用例
- 画像の大きさが異なる画像でギャラリーを作成
- ブログの最新記事を、要約の長さが変わっても一貫性を保ちながら、複数のカラムで表示
- 画像、デザイン、プロジェクトなど、ポートフォリオアイテムを表現
Omniscient
Omniscient.jsは、Reactコンポーネントを抽象化し、イミュータブルデータを取り込んだ素早いトップダウン方式レンダリングを実現するJSライブラリです。
このライブラリは、最適化が施され、興味深い機能を提供するもので、プロジェクトをシームレスに構築するのに活用できます。
特徴・メリット
- ステートレスなReactコンポーネントを記憶
- ユーザーインターフェース思いの関数型プログラミング
- トップダウンを用いたコンポーネントレンダリング
- Immutable.jsによるイミュータブルデータのサポート
- mixinを用い、共有機能を持つ小型かつ組み合わせ可能なコンポーネントを実現
使用例
- コンポーネントのキーを提供
- ヘルパー関数やコンストラクションを使った親コードへのトークバック
- コンポーネントのオーバーライド
- フィルタリングとデバッグ
Parsley
プロジェクトでのフォームの実装にはこちらのライブラリが便利です。
Parsleyは、より具体的にはフォームを検証するのに使える、簡単かつ強力なJSライブラリです。
特徴・メリット
- 直感的なDOM APIにより、JSを記述することなくHTMLタグから直接入力情報を取得
- フォームの修正事項を動的に検出することによる動的なフォーム検証
- 12以上の組み込みバリデータ、Ajaxバリデータ、その他の拡張機能
- Parsleyのデフォルトの動作をオーバーライドし、UIやUXにフォーカスした使いやすさを確保することも可能
- フリー、オープンソース、そして多くのブラウザで動作する信頼性の高さ
使用例
- シンプルなフォームの作成
- 複雑なバリデーションの実施
- 多段階のフォームを作成
- 複数の入力を検証
- PromiseやAjaxリクエストの処理
- 入力のスタイル変更で優れたフローティング形式のエラーラベルを作成する
Popper.js
Popper.jsを使うことで、ポップオーバー、ドロップダウン、ツールチップ、その他ボタン近くに表示するコンテクスト要素を簡単に配置できるようになります。
ポップオーバーの実装、他のサイト要素への紐付けに対応し、どのような画面サイズでもシームレスな動作が期待できます。
特徴・メリット
- 約3kbの軽量なライブラリ
- スクロールコンテナ内をスクロールしても、ツールチップが参照要素に留まる
- 高度な設定が可能
- AngularやReactのような堅牢なライブラリを使用しUIを記述（統合がシームレス）
使用例
- ツールチップを一から作る
- 各要素をスムーズに配置する
Three.js
Three.jsは、3Dデザインのレベルを引き上げるライブラリです。モダンブラウザでのシーンの描画にはWebGLが、そしてIE10以下では、他のCSS3、CSS2、SVHレンダラーが使用されます。
特徴・メリット
- Chrome 9+、Opera 15+、Firefox 4+、IE 11、Edge、Safari 5.1対応
- 型付き配列、Blob、Promise、URL API、Fetchなど、JSの機能をサポート
- さまざまなジオメトリック、オブジェクト、ライト、シャドウ、ローダー、マテリアル、数学要素、テクスチャなどを作成できる
使用例
- 幾何学的な立方体、球体などを作成
- カメラやシーンを作成
Screenfull.js
プロジェクトでのフルスクリーン要素実装には、Screenfull.jsが便利です。このJavaScriptライブラリは、クロスブラウザに対応した効率的な動作が特徴で、開発中にこの点で困ることはないでしょう。
特徴・メリット
- ページや要素をフルスクリーン表示
- スマートフォンでナビゲーションUIを隠す
- jQueryとAngularを使ったフルスクリーン要素の追加
- フルスクリーンの修正、エラー検出など
使用例
- ウェブページにフルスクリーン要素を追加する
- ドキュメントでのScreenfull.jsインポート
- フルスクリーンモードの終了と切り替え
- イベントの処理
Polymer
GoogleによるオープンソースのJavaScriptライブラリPolymerは、コンポーネントを使用したウェブアプリケーションの構築に使用されています。
特徴・メリット
- 独自の要素を簡単に作成できる
- 算出プロパティ
- データバインディング（一方通行と双方向の両方をサポート）
- ジェスチャーイベント
使用例
- JS、CSS、HTTPを使った独自のウェブコンポーネントでインタラクティブなウェブアプリを作成
- YouTube、Google Earth、Playなど、有名なサイトやサービスで利用されている
Voca
Voca誕生の背後には、JavaScriptの文字列を扱う際の手間を削減という目的があります。大文字/小文字の変更、pad、trim、truncateなど、文字列の操作を簡単にする便利な関数が用意されています。
特徴・メリット
- モジュール構造により、ライブラリ全体または個々の関数の読み込みが速く、アプリのビルドが軽減される
- 文字列の切り出し、フォーマット、操作、クエリ、エスケープなど
- 依存関係なし
使用例
- Node.js、Webpack、Rollup、Browserifyなど、複数の環境でVocaを利用することができる
- タイトルケース（英語のタイトルによく使用される）、キャメルケース、ケバブケース、スネークケース、大文字、小文字への変換
- 先頭の文字を大文字や小文字に変換
- 対象をラップするチェーンオブジェクトを作成し、暗黙的/明示的なチェーンシーケンスを可能にする
- 文字数のカウント、文字列の書式設定など、その他の操作
JavaScriptフレームワークとは
JavaScriptフレームワークは、開発者による独自の要件に合わせたコードの操作を可能にするアプリケーションフレームワークです。
ウェブアプリケーションの開発は、家を建てることに似ています。建材を使ってゼロからすべてを作るという選択肢もあります。しかし、これには時間がかかり、費用がかさむこともあるでしょう。
しかし、レンガのような既製品の材料を使い、建築様式に基づいて組み立てれば、建設は早くなり、費用と手間の削減になります。
アプリケーションの開発も同じです。すべてのコードをゼロから書くのではなく、アプリケーションのアーキテクチャに基づいた資材として機能する、あらかじめ書かれたコードを使用することができます。フレームワークを使うことで、ウェブサイトのデザインに素早く対応し、JavaScriptを簡単に扱うことができます。
JavaScriptフレームワークの使用方法
JavaScriptフレームワークを使用するには、使用予定のJSフレームワークのドキュメントを読み、その手順に従ってください。
JavaScriptフレームワークは何に使われるのか
- ウェブサイトの構築
- フロントエンドアプリの開発
- バックエンドアプリの開発
- ハイブリッドアプリの開発
- ECアプリケーション
- Node.jsなどのモジュール式スクリプトの構築
- DOMの手動での更新
- テンプレートと双方向バインディングを使った反復タスクの自動化
- テレビゲームの開発
- 画像カルーセルの作成
- コードのテストとデバッグ
- モジュールのバンドル
人気のJavaScriptフレームワーク
AngularJS
Googleが提供するAngularJSは、2010年にリリースされたオープンソースのJavaScriptフレームワークです。ウェブアプリを作成する際に使用できるフロントエンドJSフレームワークとして知られています。
MVCやMVVMのクライアントサイドアーキテクチャに対応しており、ウェブアプリケーションの開発やテストを簡素化するために作られました。
特徴・メリット
- 双方向のデータバインディングをサポート
- HTMLコードへの挿入にディレクティブを使用し、アプリに優れた機能を付加
- 静的なドキュメントを素早く簡単に宣言できる
- その環境は読みやすく、表現力が豊かで、開発スピード高速化が期待できる
- 優れた拡張性とカスタマイズ性で作業ができる
- テストがしやすく依存性注入もサポート
使用例
- ECアプリケーションの開発
- 天気予報のリアルタイムデータアプリの開発
- 例：PlayStation 3のYouTubeアプリ
注）GoogleはAngularJSのアクティブな開発を中止しました。主にセキュリティの問題を修正するために2021年12月31日までサポートが延長され、その後、Googleによるサポートが終了しています。
Bootstrap
フロントエンド開発における非常に人気の高いオープンソースツールキットです。Bootstrapを使用して、高速でモバイル対応のサイトをすばやく設計できます。
このフレームワークは2011年にリリースされ、開発者が例えばクライアントの要望に合わせて各要素を調整できるよう、優れた柔軟性を備えています。
特徴・メリット
- レスポンシブなグリッドシステム
- 強力なJSプラグイン
- 豊富な組み込みコンポーネント、Sass変数、ミックスイン（mixin）
- コンポーネントと連動するオープンソースSVGアイコンが組み込まれており、CSSでスタイル付けできる
- 見た目の整った有料テーマあり
- 新しいBootstrapのバージョンへの更新の際に大量のバグに悩まされることがない
使用例
- フォーム、ボタン、タイポグラフィ、ナビゲーション、ドロップダウン、テーブル、モーダルなどのCSSまたはHTMLベースのデザインテンプレートを作成
- 画像、カルーセル、アイコンなど
Aurelia
2016年にリリースされたAureliaは、シンプルで邪魔にならない、強力なオープンソースのフロントエンドJSフレームワークです。レスポンシブなモバイル、デスクトップ、ブラウザアプリケーションを構築することができます。
設定ではなく慣例（「設定より規約」）でウェブの仕様を整えることに注力し、フレームワークによる介入を少なくしているのが特徴です。
特徴・メリット
- Aureliaは、高いパフォーマンスを発揮し、DOMの一括更新を効率的に実行できる
- 複雑なUIでも一貫したスケーラブルなパフォーマンスを実現
- 状態管理、検証、国際化などの豊富なエコシステムを搭載
- リアクティブなバインディングを可能にし、高いパフォーマンスで自動的に状態を同期
- シンプルな単体テスト
- カスタム要素の作成、属性の追加、テンプレート生成の管理など、比類ない拡張性
- 高度なクライアントサイドルーティング、UIコンポジションなどの先進的な機能
使用例
- アプリケーションを開発
- サーバーサイドレンダリングを使用
- 双方向のデータバインディング
Vue.js
Vue.jsは、Evan You（エヴァン・ヨー）氏がGoogle在籍時の2014年に開発したフレームワークです。ユーザーインターフェース構築に強い「プログレッシブ」なJavaScriptフレームワークとして知られています。
Vue.jsはコアから段階的に採用できる仕様で、様々なユースケースに応じてフレームワークとライブラリの間を簡単にスケールすることが可能です。
特徴・メリット
- ES5準拠のブラウザをサポート
- コアライブラリは親しみやすく、ビュー（view）レイヤーにフォーカス
- また、1ページ（SPA）アプリに関連する複雑さの管理に役立つ他の便利なライブラリもサポート
- 高速な仮想DOM、20 kb min+gzipランタイム（最適化が少なく済む）
使用例
- モーダルの表示、Ajaxを使ったフォームの挿入など、反応性をあまり必要としない小さなプロジェクトに最適
- また、VuexとRouterコンポーネントを使用して、大規模なシングルページのアプリケーションに使用することもできる
- イベントの作成、クラスのバインディング、要素のコンテンツの更新など
Ember.js
Ember.jsは生産効率を高めるオープンソースのJSフレームワークです。リッチなUIを持ち、複数デバイス間での動作を意識したウェブアプリケーションを構築するのに使えます。
2011年にリリースされ、当時はSproutCore 2.0という名称でした。
特徴・メリット
- スケーラブルなユーザーインターフェースアーキテクチャ
- 「バッテリー同梱」（注釈：「機能するのに必要な要素が全て揃っている」の意）の観点から、アプリ構築をすぐに開始できる
- Ember CLIがEmberアプリのバックボーンとして機能（コードジェネレータで新たなエンティティ作成が捗る）
- 自動リロード、リビルド、テスト ランナーを備えた開発環境を内蔵
- クラス最高のルータ（クエリパラメータとURLセグメントを使用したデータロード）
- データアクセスライブラリEmber Dataで、複数のソースを同時に処理し、モデルの更新を維持管理
使用例
- モダンなインタラクティブウェブアプリを構築する
- DigitalOcean、Square、Accentureなどで使用されている
Node.js
Node.jsは、2009年に誕生したChromeのJS V8 Engineをベースにしたサーバーサイド、オープンソースのJavaScriptフレームワークです。ブラウザ外でJSコードを実行することができます。
Node.jsは、スケーラブルで高速、かつ信頼性の高いネットワークベースのサーバーサイドアプリケーションを開発できる設計です。
特徴・メリット
- コード実行速度が速い
- イベント駆動型アーキテクチャにより、非同期I/Oを実現
- パッケージング、スレッド処理、ループの形成など、Javaと同様の特性
- シングルスレッドモデル
- 処理時間の大幅な短縮により、動画やオーディオのバッファリングという問題を解消
使用例
- サーバーサイドアプリケーションの開発
- リアルタイムのウェブアプリケーションの作成
- 通信プログラム
- ブラウザゲームの開発
- 企業での利用例：GoDaddy、LinkedIn、Netflix、PayPal、AWS、IBMなど
Backbone.js
2010年に誕生した軽量JSフレームワークBackbone.jsは、MVP（Model View Presenter）アーキテクチャをベースにしています。
RESTfulなJSONインターフェースを誇り、クライアントサイドのウェブアプリケーション構築に利用することができます。カスタムイベントやKey-Value紐付けのモデル、効率的APIを搭載したコレクション、宣言的なイベントハンドリングを用いたビューで、ウェブアプリケーション構成を担います。
特徴・メリット
- 無料かつオープンソースで、100以上の拡張機能が利用可能
- 少ないコードで優れたデザインを実現
- 構造化されており、整理しながらのアプリ開発が可能
- コードがシンプルで、学習やメンテナンスが簡単
- jQueryへの依存度が低く、Underscore.jsへの依存度が高い
使用例
- シンプルなページのアプリケーションを開発
- フロントエンドのJS機能を円滑に
- クライアントサイドのモバイル、ウェブアプリケーションの整理
Next.js
Next.jsは、Reactを土台に使い2016年にリリースされたJavaScriptフレームワークです。静的サイトの作成やサーバーサイドレンダリングなどが可能になります。
特徴・メリット
- インスタントビルドを利用した画像の自動最適化
- ドメインとサブドメインのルーティングと言語検出を自動で実施
- リアルタイム分析（訪問者やページごとのデータを表示）
- 自動でのバンドルとコンパイル
- リクエスト時（サーバーサイドレンダリング/SSR）またはビルド時（静的サイトジェネレータ/SSG）にページをプリレンダリング
- TypeScript、ファイルシステムルーティング、APIルート、CSS、コード分割、バンドル等をサポート
使用例
- プロダクションレディなフレームワークで、静的および動的なJAMstackサイトを作成できる
- サーバーサイドレンダリング
Mocha
どんなアプリケーションでも、デプロイ前にテストを実施する必要があります。これを行うのがMochaまたは Mocha.js です。
Mochaは機能豊富なオープンソースのJSテストフレームワークで、Node.js上とブラウザ上で動作します。
特徴・メリット
- 非同期テストを楽しく、楽にする
- Node.jsのテストを同時に実行することができる
- 非TTYストリームの自動検出とカラーリングのオフ
- テスト時間を報告
- 時間のかかったテストを表示
- スイートとテストケースのメタ生成
- 複数のブラウザ、設定ファイル、ノードデバッガ、ソースマップ、Growlなどに対応
使用例
- アプリケーションの監査を行う
- 関数を用いて一定の順序で関数を実行し、テスト結果をログに記録する
- 各テストが別々に実行されるように、テストしたソフトウェアの状態をクリーニング
Ionic
2013年にリリースされたIonicは、質の高いハイブリッドモバイルアプリ構築に便利なオープンソースのJavaScriptフレームワークです。最新のリリースでは、Vue.js、Angular、Reactなど、好みのUIフレームワークを選択することができます。CSS、Sass、HTML5を使用してアプリケーションを構築します。
特徴・メリット
- Cordova、Capacitorプラグインを活用して、GPS、カメラ、懐中電灯などのホストOSの機能にアクセスできる
- タイポグラフィ、モバイルコンポーネント、インタラクティブパラダイム、美しいテーマ、カスタムコンポーネントが含まれる
- オブジェクト作成用のCLIを提供
- プッシュ通知、アプリアイコン、ネイティブバイナリ、スプラッシュスクリーンの作成が可能
使用例
- ハイブリッドモバイルアプリの構築
- フロントエンドUIフレームワークの構築
- 魅力的なインタラクションの作成
Webix
Webixの使いやすいフレームワークは、軽いコードを使用したリッチなUI開発に有用です。データテーブル、ツリー、スプレッドシートなど102種類のユーザーインターフェースウィジェットに加え、機能豊富なHTML5/CSS JSコントロールも搭載されています。
特徴・メリット
- 使いやすいJSファイル管理機能
- ビルトインのウィジェットやUIコントロールの利用による時間短縮
- 理解しやすいコード
- クロスプラットフォームとブラウザのサポート
- 他のJavaScriptライブラリやフレームワークとのシームレスな統合
- ウィジェットのレンダリングや、ツリー、リストなどの大きなデータセットでも高速なパフォーマンスを発揮
- GDPRとHIPAAに準拠し、無制限の拡張性とアクセシビリティを実現
使用例
- UIの開発
- クロスプラットフォームなウェブアプリケーションの開発
Gatsby
Gatsbyは、Reactを使った高速サイト/アプリ開発に利用できる、オープンソースで無料のフロントエンドJSフレームワークです。詳しい情報はGitHubで確認できます。
特徴・メリット
- 自動コード分割、インラインスタイル、画像最適化、遅延読み込みなどのサイト最適化で高いパフォーマンスを発揮
- サーバーレスレンダリングにより、ビルド時にHTMLを作成（サーバーやDDoS攻撃、悪意のあるリクエストといった脅威を回避）
- 高いウェブアクセシビリティ
- 2,000以上のプラグイン、テーマ、レシピ
使用例
- フロントエンドアプリとウェブサイトの開発
- 静的サイト
- サーバーサイドレンダリング
- AirbnbやNikeの「Just Do It」プロジェクトで使用されている
Meteor.js
Meteorは2012年にリリースされたオープンソースのJSフレームワークです。モバイル、デスクトップ、ウェブに対応したフルスタックアプリケーションをシームレスに構築することができる。
特徴・メリット
- MongoDB、React、Cordovaなどのツールやフレームワークを統合し、高機能なアプリケーションを実現
- あらゆるデバイスでアプリケーションを構築できる
- APMによるアプリのパフォーマンス表示
- リアルタイムブラウザ再読み込み
- オープンソースのIsomorphic Development ecosystem (IDevE) により、ゼロからの開発が容易
使用例
- ラピッドプロトタイピング
- クロスプラットフォームなアプリ
- Meteorで構築されたサイト：Pathable、Maestro、Chatraなど
MithrilJS
この記事の他の項目ほど有名ではありませんが、Mithrilはクライアントサイドアプリケーション開発を助ける、高度なJSフレームワークです。gzipで10kb以下と軽量、そして高速で、XHRとルーティングユーティリティを備えています。
特徴・利点
- 純粋なJSフレームワーク
- ポリフィルなしですべての主要なブラウザをサポート
- Vnodeデータ構造の作成
- 複雑なUIを管理する宣言的API
使用例
- シングルページアプリ
- VimeoやNikeなどのサイトで使用されている
Express.JS
Express.jsは、ウェブアプリケーション開発に便利なバックエンドJSフレームワークです。2010年にMITのもと、無償のオープンソースソフトウェアとして公開されました。
高速でミニマルなNode.jsのウェブフレームワークで、便利な機能を多数搭載しています。
特徴・メリット
- スケーラブルで軽量
- ミドルウェア設定で、HTTPレスポンスを受信
- ルーティングテーブルにより、URLやHTTPメソッドに応じたアクションが可能
- 動的HTMLページのレンダリングに対応
使用例
- Nodeベースのアプリケーションを素早く開発
- REST APIの作成
知っておくと便利なJavaScriptツール
-
Slick
Slickは、カルーセルに使えるJSツールです。レスポンシブ対応で、コンテナでの拡張が可能です。CSS3対応、スワイプ、マウスドラッグ、フルアクセシビリティ、無限ループ、自動再生、読み込み遅延など、様々な機能を搭載しています。
-
Babel
Babelは、無料のオープンソースJSコンパイラです。新しいJS機能を変換して古いJS標準を実行するのに使えます。古いバージョンでサポートされていない構文の変換にも使用できます。特定のJS環境で欠落している機能をサポートするポリフィルの役割を果たします。
-
iziModal
iziModalは、jQuery と連動する、エレガントで軽量、柔軟でレスポンシブなモーダルプラグインです。ユーザーに何かを知らせたり、ポップアップモーダルを使って情報を求めたりするのに便利です。使い方は簡単で、多くのカスタマイズが可能です。
-
ESLint
ESLintを使えば、簡単にJSコードのバグを発見、修正することができます。コードを統計的に分析し、構文エラーやコマンドラインにおけるスタイルの問題などを素早く発見し、自動で修正してくれます。
-
Shave
Shaveは、HTML要素内のテキストを切り詰めることのできる、依存関係を伴わないJSプラグインです。要素内にきれいに収まるように高さの最大値を設定できます。また、切り詰めた文字は<span>要素の中に目に見えないかたちで保存されるので、消失してしまうことはありません。
-
Webpack
Webpackは、モダンアプリケーション向けのプラグインで、JSモジュールのバンドルに力を発揮します。コードをきれいに保ちながら、合理的にアセットをバンドルできます。
JavaScriptライブラリとフレームワークの連携方法
JavaScriptライブラリとフレームワークの違いは、その制御の流れにあります。つまり逆転しているとお考えください。
JSライブラリでは、親コードがライブラリの関数を呼び出します。
JSフレームワークでは、フレームワーク自身がコードを呼び出し、特定の方法で使用します。アプリケーション全体の設計を定義するものです。
簡単に言えば、JavaScriptライブラリは、特定のアプリの機能だと考えればよいでしょう。それに対して、フレームワークはその骨格であり、APIはそれらをまとめる役割を果たします。
一般的に、JSフレームワークで開発を始め、JSライブラリとAPIを活用しながらアプリの完成を目指す流れになります。
まとめ
JavaScriptのライブラリやフレームワークは、ウェブサイトやアプリの開発を加速させる上で非常に効果的です。そして、ウェブ開発者であれば、プロジェクトに適した選択肢選びに時間をかけることが重要です。Kinstaをご利用であれば、コントロールパネル「MyKinsta」に標準搭載されているコード圧縮機能をご利用いただけます。クリックするだけで簡単にCSSとJavaScriptの自動圧縮を有効化可能です。
ライブラリやフレームワークは多種多様で、それぞれに長所と短所があります。だからこそ、ウェブサイトやアプリケーションの要件や目標に基づいて、選択することが重要です。
今回ご紹介したJavaScriptライブラリとフレームワークが、皆さんのプロジェクトを後押しできることを願っています。
コメントを残す