付録: 参考リンク集

ここでは本編で取り上げられなかったJavaScriptの周辺ツールやライブラリなどをいくつか紹介します。これらは時流に左右されて古くなりやすい情報であるため、本編からは独立した付録としてまとめています。

開発を補助するツール

JavaScriptを使った開発に役立つツールをいくつか紹介します。

トランスパイラー

トランスパイラーとはソースコードからソースコードへ変換（Transpile）する機能を持つツールです。ここでは、アプリケーション開発でも利用されることが多いJavaScriptのソースコードに変換するトランスパイラーを紹介します。

Babel

Babelは、ECMAScriptの新しい構文を古いECMAScriptの構文に変換することを主な機能にしたトランスパイラーです。たとえば、Internet Explorerなど古いブラウザはECMAScript 2015をサポートしていないため新しい構文をパースできません。 BabelでES2015の構文をES5でエミュレートするコードへ変換することで、古い構文しかサポートしていない実行環境でも動かせます。

また、「ECMAScript」の章でも紹介したように、最新のプロポーザルの機能を試すツールとしても利用されています。

TypeScript

TypeScriptは、JavaScriptに静的型づけの構文を追加した言語とトランスパイラーです。 TypeScript言語には型注釈などの構文が用意されており、JavaScriptのコードに対して型注釈をつけて静的な型チェックができます。また、TypeScriptのコードは型に関する構文などを取り除いたJavaScriptのコードに変換できます。

モジュールバンドラー

モジュールバンドラーとは、JavaScriptのモジュール依存関係を解決し、複数のモジュールを1つのJavaScriptファイルに結合するツールのことです。モジュールバンドラーは起点となるモジュールが依存するモジュールを次々にたどり、適切な順序になるように結合（バンドル）します。

NPMによって多くのJavaScriptライブラリがNode.js向けに配布されていますが、これらはほぼすべてCommonJSモジュールです。 CommonJSモジュールはNode.jsでの実行を想定したものであったため、そのままではウェブブラウザ上で動作しません。そのため、CommonJSモジュールをブラウザでも実行できるようにモジュールの依存関係を解決したりファイルを結合する目的でモジュールバンドラーと呼ばれるツールが登場しました。

webpack

webpackは、JavaScriptアプリケーションの作成に適したモジュールバンドラーです。 webpackは、CommonJSモジュールやECMAScriptモジュールの依存関係を解決し、アプリケーション向けに最適化しながらモジュールを結合します。 JavaScriptのモジュール以外にも、画像やCSSなどのリソースを読み込む仕組みが用意されており、さまざまな種類のファイルを扱えます。また、webpackにはプラグインで拡張できる仕組みが用意されており、柔軟な変換が可能です。

Rollup

Rollupは、JavaScriptライブラリの作成に適したモジュールバンドラーです。 Rollupは、ECMAScriptモジュールを主に扱い、モジュールの依存関係を解決し、ライブラリ向けに最適化しながらモジュールを結合します。 CommonJS形式やECMAScriptモジュール形式などの複数の形式のファイルを生成するといったライブラリ作成に向いた設定が柔軟にできます。またRollupも、webpackと同様にプラグインで拡張でき、柔軟な変換が可能です。

コーディングスタイルの統一

複数人での開発においては、改行の位置やインデントの幅など、ソースコードのフォーマットを統一します。なぜなら、異なったスタイルのコードはレビューに余計な時間がかかってしまうからです。また、使うべきでない古いイディオムやバグを生みやすい危険なコードの混入を防ぎ、品質を保つことも重要です。

これらのコーディングスタイルの統一は、一貫性を持って持続的に行うことが重要です。そのため、ツールを使って自動化することが推奨されます。

Prettier

PrettierはJavaScriptをはじめとする多くの言語に対応した汎用的なコードフォーマッターです。設定ファイルがなくても利用できるため、導入しやすいのが大きな特徴です。

ESLint

ESLintはJavaScriptファイル用のLintツールです。 Lint とは、ソースコードファイルを静的解析して不適切なコードやコーディングスタイルに合わないコードを検知する仕組みのことです。 Lintを使うことで、チーム内でのコーディングスタイルを機械的に統一できます。

コードエディター

JavaScriptやHTML、CSSなどのコーディングに適したエディターを選ぶことで、開発の生産性を高められます。

VSCode

VSCodeはMicrosoft社がオープンソースで開発している無料のコードエディターです。 JavaScriptによってプラグインを書くことができ、さまざまな機能を追加できます。

ブラウザの開発者ツール

多くのブラウザは開発者向けの組み込みツールを提供しており、本編で紹介したコンソールもその一部です。そのほかにもJavaScriptコードをステップ実行できるデバッガーや、HTTPの通信ログなど、ブラウザごとにさまざまな機能があります。

パフォーマンスの改善

ウェブサイトやウェブアプリケーションのパフォーマンスを計測、改善するためのツールを紹介します。

PageSpeed Insights

PageSpeed InsightsはGoogleが提供するウェブパフォーマンス計測ツールです。計測したいページのURLを入力すると読み込みにかかっている時間や、改善できる項目を提示してくれます。

WebPagetest

WebPagetestは、ブラウザを利用したウェブパフォーマンス計測ツールです。さまざまな条件下のブラウザでウェブサイトにアクセスし、パフォーマンスを計測できます。 BSDライセンスの下でオープンソース化されており、任意のサーバーにインストールして実行することもできます。

Lighthouse

LighthouseはGoogleが提供するウェブページの分析ツールです。ウェブパフォーマンスだけでなく、アクセシビリティやSEOなどの観点からも分析し、そのスコアを表示します。 Chromeブラウザの開発者ツールとして組み込まれていますが、npmでパッケージをインストールすればCLIとしても実行できます。

JavaScriptの実行プラットフォーム

JavaScriptはウェブサイトを作るためだけの言語ではありません。いまでは多くのプラットフォームを超えた共通言語として、JavaScriptやその周辺のエコシステムが発展しています。 JavaScriptを使ったプログラムを実行するためのいくつかのプラットフォームについて紹介します。

ウェブサイトを公開する

ウェブサイトやウェブアプリケーションをインターネットに公開するためには、どこかのウェブサーバーでホスティング（公開）する必要があります。ここではホスティングを機能として提供し、簡単にウェブサイトを公開できるいくつかの ホスティングサービス を紹介します。

GitHub Pages

GitHub Pagesは、GitHubが提供する無料のホスティングサービスです。 GitHubのリポジトリをウェブページとして公開して、リポジトリ内に配置したHTMLやCSS、JavaScriptなどの静的ファイルを配信できます。

Firebase Hosting

Firebase Hostingは、GoogleのFirebaseプラットフォームが提供するホスティングサービスです。 CLIを使ったシンプルなデプロイと、小規模の利用なら無料で利用できることが特徴です。

Netlify

Netlifyも無料で利用できるホスティングサービスです。 GitHubやBitBucketのようなGitリポジトリサービスと連携していて、リモートリポジトリにpushするだけで自動的にデプロイできるのが特徴です。

Node.jsをサーバーレスに実行する

AWS LambdaやGoogle Cloud FunctionsのようなFunction as a Service（FaaS）と呼ばれる実行プラットフォームがあります。 FaaSではNode.jsのサーバーを用意しなくても関数単位でNode.jsのスクリプトを実行できます。 FaaSにJavaScriptの関数をデプロイすると、クラウド上で管理されているNode.jsサーバーにホストされ、それぞれの関数にエンドポイントが割り当てられます。

AWS Lambda

AWS LambdaはAmazon Web Services上で提供されるサーバーレスNode.js実行環境です。

Google Cloud Functions

Google Cloud FunctionsはGoogle Cloud Platform上で提供されるサーバーレスNode.js実行環境です。

デスクトップアプリケーションを作る

JavaScriptを使ってWindowsやmacOS、Linuxなどのデスクトップ環境で動作するGUIアプリケーションを作ることもできます。

Electron

ElectronはGitHub社によって開発されているオープンソースのデスクトップアプリケーションフレームワークです。 HTMLやCSS、JavaScriptを使ったウェブアプリケーションをChromiumブラウザと一緒にパッケージ化して配布可能な実行ファイルを作成できます。

NW.js

NW.jsはIntel社によって開発されているオープンソースのデスクトップアプリケーションフレームワークです。 Electronと同様にChromiumブラウザをベースにしたアプリケーションを開発できます。 NW.jsはブラウザの中からNode.jsの開発エコシステムを直接利用できるようにしているのが特徴です。