JavaScript ツールチェーンの不完全なガイド

概要
静的型チェック
コードスタイルチェック（Linter）
パッケージマネージャー
モジュールローダー
梱包ツール
タスク管理ツール（タスクランナー）
翻訳者
ビルドツール
デバッグツール
ノードプロセスマネージャー
プロジェクトの足場

概要

JavaScript 言語がますます強力になるにつれて、それをサポートする開発ツールも急成長しています。今日のフロントエンド Web プロジェクトは、単に HTML ページをいくつか書いて CSS と JS を追加するだけのものではありません。実際のプロジェクトでは、いくつかのフレームワークやサードパーティのライブラリの使用、および対応するスキャフォールディング、依存関係パッケージの管理、プリコンパイル、ビルドパッケージ化、圧縮とマージなどのツールが必要になる場合があります。これらのタスクを完全に手作業で完了することはほぼ不可能です。

科学技術は主要な生産力であり、道具はその現れの一つです。仕事をうまくやり遂げたいなら、まず道具を磨かなければなりません。道具は人間の力を解放したのですから、私たちは道具を受け入れるべきです。この記事では、JavaScript に関する一連のツールをまとめ、一般的なプロジェクトに必要なツールについて説明します。

静的型チェック

JavaScript 自体は動的なスクリプト言語であり、弱い型付けになっています。つまり、コンパイル時にデータ型のチェックは行われず、型は実行時にのみ決定されます。利点は、柔軟性が高く、学習が容易で、必要なコードが少なくなることです。デメリットも明らかで、特に大規模なプロジェクトでは、注意しないとバグが発生しやすくなります。開発仕様がなく、開発者が自由に操作できる場合、メンテナンスは大変なことになります。この欠点を補うために、JavaScript に翻訳できる独自の型システムを持つ言語がいくつか登場しました。

Flow: Facebook が開発した、OCaml で書かれた JavaScript の静的型チェックシステム。型システム、型注釈をサポートし、ライブラリを定義でき、コードリントなどを提供します。 Vue.js 2.x は Flow で書かれています。ただし、Vue 3.0 では別の静的型付け言語である TypeScript が使用されます。

TypeScript: TypeScript は Microsoft によって開発された言語で、JavaScript のスーパーセットであり、JavaScript にコンパイルできます。 TypeScript はますます人気が高まっており、多数のプロジェクトで認知されるようになりました。

コードスタイルチェック（Linter）

JavaScript 動的言語の特性上、記述が柔軟すぎるため、複数の人が共同作業するプロジェクトではコードスタイルが異なってしまうことが多く、保守や拡張に多くの問題が生じます。さらに、一部の言語機能はバグが発生しやすいため、一般的にベストプラクティスでは推奨されません。したがって、コードリンティングツールが役立ちます。コードの記述形式をチェックするだけでなく、未定義の変数を参照するなどの低レベルのエラーもチェックできます。

これまで、JSLint、JSHint、StandardJS、JSCS など、さまざまな Lint ツールがありました。現在は統一化の傾向があり、基本的に誰もが ESLint を使用しています。

Lint ツールを初めて使用する場合、制限が多すぎて警告やエラーが表示されることが多いため、慣れないかもしれません。しかし、長期的には、JavaScript プロジェクトに Linter を導入する必要があります。

パッケージマネージャー

JavaScript が繁栄できる主な理由は、テクノロジーエコシステムが非常に繁栄しており、さまざまなサードパーティライブラリが存在するためです。このような膨大なサードパーティライブラリのコレクションでは、サードパーティパッケージのホスティング、バージョン管理、ダウンロードとインストール、依存関係管理を担当する管理プラットフォームが必然的に必要になります。

npm: 最も人気のある JavaScript パッケージマネージャー。 Node.js をベースに、Web サイトや CLI などを含む上記パッケージの総数は 100 万を超え、基本的に JavaScript プロジェクトに必要なすべての側面をカバーしています。

Yarn: 2016 年に Facebook によってリリースされたパッケージマネージャー。npm レジストリと互換性があり、CLI の速度、セキュリティ、決定論に重点を置いています。

Bower: npm は node 環境でのパッケージ管理のみをサポートしていたため、かつては非常に人気があり、フロントエンドの JavaScript パッケージの管理に使用されていました。 npm と yarn はノードとブラウザの両方のパッケージ管理をサポートしているため、bower は徐々に歴史の中に消えていきました。

pnpm: ハードリンクを通じて、モジュールの特定のバージョンのコピーが 1 つだけハードディスクに保存されます。ハードリンクは複数のプロジェクト間で共有できるため、ハードディスクの容量を大幅に節約し、モジュールのインストールを高速化できます。

モジュールローダー

JavaScript の初期の頃は、言語レベルのモジュール化のサポートがなかったため、大規模プロジェクトの依存関係管理が非常に不便でした。変数名の競合、グローバル変数の汚染、モジュールの読み込み順序などの問題がより顕著になります。 CommonJS Modules (CJS)、Asynchronous Module Definition (AMD)、Universal Module Definition (UMD) など、さまざまなモジュール化スキームが存在します。 2015 年以降、ES6 は言語レベルでのモジュール化、つまり ECMAScript モジュール (ESM) をサポートしています。

上記の一般的な JavaScript モジュール形式に加えて、System.register またはグローバルモジュール、および JSON モジュール、CSS モジュール、Web Assembly などの JavaScript 以外のモジュールもあります。

モジュールローダーは、同期、非同期、静的、動的など、前述のさまざまな種類のモジュールコードを読み込んで処理するツールです。通常、モジュールは別のファイルに配置され、いくつかのディレクティブを介してインポートされます。プロジェクトに数十または数百のモジュールがある場合、それらのモジュールがロードされ実行される順序をどのように保証するかが問題になります。心配しないでください。モジュールローダーが依存関係を処理します。

RequireJS: AMD モジュールの読み込みを実装します。主にブラウザ側で使用され、Node でも使用できます。

SystemJS: ブラウザと Node.js 用の、JavaScript 以外のモジュールも含め、あらゆるタイプの JavaScript モジュールをロードできる動的モジュールローダーです。

StealJS: ESM、ADM、CJS 形式のモジュールをロードできます。

ES モジュールローダー: ブラウザーによって実装され、Node.js で --experimental-modules フラグを使用して利用できるモジュールローダー。

上記のモジュールローダーは実行時にコードをロードして実行します。ビルドツール内のさまざまなローダーと混同しないでください。これらのローダーは、ビルド時に前処理を実行し、一部の形式変換のみを行うツールです。

梱包ツール

実際の運用プロジェクトでは、通常、ソースコードをサーバーに直接公開することはありません。代わりに、さまざまなモジュールと静的リソースがいくつかのツールを通じて統合され、最終的に生成されるコードはソースコードとはまったく異なる可能性があります。パッケージングツールはそのためにあるのです。より一般的なパッケージングツールは次のとおりです。

Webpack: 最も人気のあるバンドラーと言え、ほとんどのプロジェクトでほぼ標準的な構成となっています。認識できるのは JavaScript と JSON ファイルのみですが、そのアーキテクチャ設計により無限の可能性が提供されます。さまざまなローダーを介してあらゆる種類のリソースを処理でき、プラグインを介してパッケージ化結果を最適化し、リソース管理を実行したり、環境変数を挿入したりすることができます。ビルドターゲットは、ブラウザ、Node.js、Web ワーカー、Electron などのプラットフォームに基づいてカスタマイズすることもできます。

Rollup: ライブラリとアプリケーションの出力をサポートする優れたパッケージャーです。最大のセールスポイントは、ES モジュールをデフォルトでサポートし、ツリーシェイキング機能を非常に早い段階で実装していることです。プラグインやフック機能も備えており、比較的カスタマイズ性が高いです。

Parcel: ツール界の新星であり、「ゼロ構成* バンドラー」として知られています。Webpack の面倒な構成に悩まされたことがあるなら、興味をそそられるかもしれません。

Browserify: Node.js パッケージをブラウザーで実行できるように変換することに特化した、より限定されたバンドラーです。 Node.js と同じモジュールシステムを使用します。一部のモジュールは Node プラットフォームでのみ使用され、変換することでブラウザーで使用できるようになります。純粋な JavaScript モジュールのみを処理でき、通常は Gulp と組み合わせて使用されます。

Metro: エントリファイルとさまざまな構成を使用して、すべてのコードと依存関係を含む単一の JavaScript ファイルを作成する React Native 固有のパッケージャー。

タスク管理ツール（タスクランナー）

タスクランナーは、次のようなプロジェクトに必要なさまざまな繰り返しアクションを自動化します。

CSS プリプロセッサ (Less、Sass)
CSS は新しい属性プレフィックスを自動的に追加します (Autoprefixer)
画像を最適化する
JavaScript ファイルを結合して圧縮する
ファイルの変更を監視し、タスクを自動的に実行する

より主流のタスクマネージャーは Grunt と Gulp であり、Webpack もその 1 つです。

Grunt: 洗練された構成と豊富なプラグインを通じて多くの複雑なタスクを完了できるコマンドラインツール。

Gulp: Grunt とは異なり、Gulp はストリーミングパイプラインを使用して複数のタスクを結合します。タスク間の一時的な結果はメモリに保存されるため、実行効率が大幅に向上します。

Webpack: また君だよ、Webpack。タスク管理は、Webpack の強力な機能の一部にすぎません。ビルドのさまざまな段階でカスタマイズされたタスクを実行するために、さまざまなプラグインが使用されます。

上記のタスクマネージャーが過剰だと思われる場合は、bash スクリプト、npm スクリプト、または Makefile を使用して、実際の状況に応じて簡単なタスク管理を実装することもできます。

翻訳者

JavaScript トランスパイラの役割は、JavaScript 以外の言語 (TypeScript、CoffeeScript、LiveScript など) または異なるバージョンの JavaScript (ES6、ES7、ES8 など) を、ターゲットプラットフォームの要件 (互換性、変数の難読化、厳密モードなど) を満たす同等のコードに変換することです。

ほとんどのトランスパイラは、ソースコードを処理してコードの最適化を実行するときに、抽象構文ツリー (AST) を中間形式として使用します。 AST はソースコードを段階的に分割し、メタデータを含むツリー構造に解析します。

コード --(解析)-->AST--(変換)-->AST--(生成)-->コード

Babel は現在主流の JavaScript トランスパイラです。そのツールチェーンシステムは主に、ES6 以降の JavaScript バージョンをブラウザーと下位互換性のあるコードに変換するために使用されます。 Babel は、構文の変換、ターゲットプラットフォームに欠けている機能のサポート、ソースコードの変換などを行うことができます。

Babel を使用すると、ターゲットブラウザーがサポートするかどうかを気にすることなく、新しい言語機能をできるだけ早く使用できます。

ビルドツール

構築は実際には、モジュールのパッケージ化、ソースコードの翻訳、タスク管理などの複数のステップを含む包括的な概念です。 Make、Gradle、Ant、Maven、Rake、MSBuild など、他の言語やプラットフォーム向けのさまざまなビルドツールがあります。その中でも、Make は最も一般的な汎用ビルドツールであり、通常は C 言語で使用されますが、JavaScript プロジェクトのビルドにも使用できます。

JavaScript ツールチェーンの場合、ビルドターゲットは npm パッケージ、Web サイト、Node サーバー、RN アプリ、Electron アプリなどになります。一部のタスクは特殊なツールで実行できますが、構築は複雑なプロセスであり、多くの場合、複数のツールを組み合わせて使用する必要があります。

たとえば、Build では Buck、Bazel、Lerna などのツールを使用して複数のモジュールを同時に管理し、増分ビルド (効率を向上するために変更されたモジュールのみを再構築する) を実装できます。タスク管理には Grunt や Gulp が使用され、モジュールのバンドルには Webpack、Rollup、Parcel、Browserify などが使用されます。

デバッグツール

デバッガーは、Node.js およびブラウザーで実行中のコードを追跡および表示できるため、開発プロセス中に不可欠です。通常、ブレークポイント、シングルステップ実行、変数の監視、メモリと CPU の使用状況の表示などの機能を提供します。

Chrome DevTools: Chrome ブラウザに付属する開発者ツールは、現在利用可能なブラウザ開発ツールの中で最高のものです (疑いの余地はありません)。その機能は非常に強力で、その用途は非常に多いため、それについて本が一冊書けるほどです。

node-inspector: Node.js コードをデバッグするための初期のツール。Node.js には DevTools に基づく組み込みデバッガーがあるため、現在ではほとんど使用されていません。

VS Code: Node.js デバッガーが組み込まれたもう 1 つの優れたデバッグツール。TypeScript や JavaScript に変換できる他の言語もデバッグできます。

ノードプロセスマネージャー

Node プロセスマネージャーは、実行中の Node アプリケーションを管理するために使用されます。高可用性、自動再起動、ファイル監視、パフォーマンスとリソースの監視、クラスタリング機能を提供します。

Forever: 名前が示すように、その機能は Node.js プログラムを永久に実行し続けることです。これは、小規模な Node.js アプリケーションに便利なシンプルなコマンドラインツールです。

PM2: 負荷分散、自動再起動、ログ記録、監視、クラスター管理機能が組み込まれた、実稼働環境向けの Node.js プロセス管理ツール。

StrongLoop Process Manager (Strong-PM): PM2 と同様に、本番環境での Node.js プロセス管理にも使用でき、マルチホスト展開機能を備えています。

さらに、SystemD は Linux システムのデフォルトのプロセスマネージャーであり、Node.js アプリケーションをサービスとして実行するために使用できます。

プロジェクトの足場

プロジェクトの複雑さが増すにつれて、新しいプロジェクトを作成する手順はますます面倒になり、多くの構成作業を繰り返す必要がある場合があります。この時点で、プロジェクトの足場が必要になります。多くのフレームワークはスキャフォールディングツールを提供しています。たとえば、Vue.js には Vue CLI、Angular には Angular CLI、React には create-react-app などがあります。汎用の足場もあり、Yeoman が最も人気があります。