Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07

序文

這一篇會針對三個名詞做一些解釋，這些名詞是建立 React 專案，需要會的工具，包含了：

1. バベルとは何か？
2. Webpackとは？
3. Npmとは？

もちろん、主な焦点はこれらのツールを使うというコンセプトだが、Yarn用のNpmなど、他にも選べるツールはある。

バベルとは何か？

前回の投稿では、JSXはツールでコンパイルする必要があることを述べ、このシリーズの以前の投稿では、JavaScript ES6の構文についても触れた。

実際、場合によってはES6もコンパイルする必要があり、コンパイルにはBabelパッケージが使われる。

まず、JavaScriptは直感的なプログラミング言語であり、ブラウザはプログラミング構文をコンパイルすることなく実行できることを説明しよう。

しかし、すべてのブラウザが最新の構文をサポートしているわけではない。

ES6やJSX構文を含む最新の構文を、ブラウザが実行できるように古いバージョンのJavaScriptに変換する。

フロントエンド開発の観点から、Babelは不可欠なツールだ。その主な機能は、最新バージョンのJavaScript構文、特にECMAScript 6（ES6）構文を、ブラウザが理解し実行できる古いバージョンのJavaScriptに変換することだ。

ES6は、アロー関数、テンプレート文字列、分解された値など、多くの強力な機能を導入しているが、ブラウザのサポートに違いがあるため、クロスブラウザの互換性を確保するためには、コンパイルにBabelを使用する必要がある。

Babelは、Reactコンポーネントの構造を記述するJavaScript構文拡張であるJSXを使用するReactアプリケーションを開発する際のコンパイルにも必要だ。これはJavaScriptでHTMLのようなマークアップを書くことを可能にするが、ブラウザはJSXを直接実行できないため、純粋なJavaScriptに変換するためにBabelが必要になる。

Webpackとは？

コンパイル・ツールとしてのBabelについて話した後は、「Webpack」と呼ばれるモジュラー・パッケージング・ツールについても話す必要がある。

ご想像の通り、大規模なプロジェクトには多くの種類のファイルが存在します。 JavaScript以外にも、CSS、LESS、SCSS、JSX...など、さまざまな種類のファイルがあるかもしれません。

これらのファイルが様々なフォルダに散らばっているため、それらを処理するための統合ツールが必要となる。そのため、すべてのファイルを統合するWebpackのようなModule Bundlerが作られた。

モジュール化されたパッケージング・ツールの利点は、すべてのファイルをモジュール化できることに加えて、パフォーマンスが向上することだ。

ここでも、より詳細に説明するために、より多くのスペースを費やす、Webpackはモジュラーパッケージングツールであり、その主な機能は、1つまたは複数の最終的なファイルに統合されたJavaScript、CSS、LESS、SCSS、JSXなど、様々なファイルをプロジェクト化することです。このようなモジュラーパッケージングは、開発効率を向上させるのに役立ちます、特に大規模なプロジェクトでは、我々は、コードの再利用とテストの利便性を達成するために、モジュール化された機能を分割することができます。

Webpackは単なるパッケージングツールにとどまらず、コードを複数のブロックに分割し、必要なときだけ読み込むことでページの読み込みを高速化するコード分割など、多くの強力な機能を提供しています。一方、モジュール化はWebpackのコアコンセプトであり、大きな機能を小さなファイルや関数に分割することで、保守やテストを容易にする方法でコードを構造化することができます。

さらに、Webpackは、異なるモジュールや場所のファイルを単一のファイルにパッケージ化することでパフォーマンスを最適化し、ブラウザのロード時間を短縮してアプリケーションのパフォーマンスを向上させることができます。

webpackの機能紹介

コード分割

コードをブロックに分割し、特定のブロックを使う必要があるときにロードする。

モジュール化

モジュール化は非常に重要な概念で、大きな関数を小さなファイルや関数に分解し、それを再利用やテストのために小さなファイルにモジュール化する。

パフォーマンスの最適化

モジュールと散在ファイルは1つのファイルにパッケージ化されるため、関数を使用して読み込む際のロード時間が大幅に短縮される。

最新の文法を使用

Webpackのパッケージングツールは、Babelを含むいくつかのツールと統合することができるので、WebpackとBabelを統合することで、JSX、ES6などを含む最新の構文を使用することができます。

BabelとWebpackを統合する利点は、ES6やJSXを含むJavaScript構文の最新バージョンを使用し、ビルド時にブラウザで実行可能なバージョンに変換できることです。この統合により、開発者は最新技術をフルに活用しながら、幅広いブラウザで確実にアプリケーションを実行できるようになります。

Npmとは？

上記ですでに2つのツールを紹介したが、これらのツールやコードはどこでダウンロードできるのだろうか？フロントエンド開発者にとって、Node.jsには自動的にnpmがインストールされている。

npmは世界最大のソフトウェアレジストリである。 あらゆる大陸のオープンソース開発者がソフトウェアパッケージの共有や借用にnpmを利用し、多くの企業が個人開発の管理にnpmを利用している。

npmの正式名称はNode Package Managerで、Nodeの中でnpm cliツールを使ってパッケージをインストールしたり管理したりできる。

例えば、Reactスイートを使いたい場合、ターミナルでコマンドを入力するだけで、npmがレジストリ内のreactフロントエンド・フレームワークを自動的に見つけ、node_modulesフォルダにダウンロードしてくれる。

引用

Reactホワイトペーパーキャンペーン08-Babel Webpack Npm

リアクト・ヴァナキュラー・スポーツ・シリーズ

React JSX - Reactホワイトペーパーキャンペーン06

Reactの仕組み - リアクト用語キャンペーン 05

JavaScriptの高度な関数 - React Vernacular キャンペーン 04

JavaScript非同期待ち - React Whitepaper キャンペーン03

JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

JavaScript ES6 - Reactホワイトペーパーキャンペーン01

補足

ありがとう。 Sam Huang 読者の皆さんは、ぜひサムのコーナーで詳細をご覧いただきたい！

記事中のbabelの言及について補足すると、Babel自体は確かに（公式サイトが謳っているように）コンパイラなのだが、下位互換の部分を指しているのであれば、トランスパイラを使った方が正確かもしれない。ES6には構文糖である文法がたくさんあり、それをbabelでES5の構文に変換することで、より互換性が高くなる「可能性が高い」のだ。

となると、直接翻訳やコンパイルは、どちらかというと言語と実行環境の関係が重要で、いわゆる純粋な直接翻訳言語はあまり存在しない（パフォーマンスと柔軟性の両方を考慮するため、JITなどの技術を導入するのが一般的）。