React.js実装プロセス解説：Webpack・Babelの環境構築からJSX記法までの基礎ステップ
前回はReact.jsの基礎概念について解説しました。今回は、実際にReact.jsを動かすための環境構築と、実装の基礎的な仕組みについて、初心者なりに学びながら実装した過程をまとめました。
Vitalify Asia Team
React.js実装のメリット：仮想DOMとSPA
React.jsの最も優れている点は、「仮想DOM（Virtual DOM）を用いて、ページ全体をリロードせずに必要なDOM（部品）だけを書き換えることができる」ことです。
例えば、Facebookのタイムラインを想像してください。
- 誰かが投稿すれば、真ん中のコンテンツ領域だけが更新される。
- 友達が「いいね」を押せば、右側の通知領域だけが更新される。
このように、コンポーネント（部品）ごとに状態を管理し、個別に書き換えることができるため、React.jsはSPA（シングルページアプリケーション）の構築に非常に適しています。さらに、状態管理ライブラリ（Reduxなど）を組み合わせることで、複雑なアプリケーションでもデータの流れを一方通行に保ち、保守性を高めることができます。
開発環境の準備（WebpackとBabelの役割）
初心者が最初につまずくポイントですが、React.js（JSX）のコードは、そのままHTMLファイルに書いてもブラウザは認識してくれません。（最初は見よう見まねでJSファイルに書いて「なぜ反映されないのか？」と疑問でした…）。
ブラウザで動かすためには、コードを変換（トランスパイル）し、一つにまとめるバンドル作業が必要です。そのために「Webpack」と「Babel」を使用します。何が裏側で動いているのかロジックを理解するため、ターミナルを使った基礎的な手順を追ってみます。
手順の概要
- プロジェクトディレクトリを作成し、
package.jsonを初期化する。 - HTMLとJSのエントリファイルを作成する。
npmを使用して、reactとreact-domをインストールする。
※Webpackとは？
モジュールバンドラーと呼ばれるツールです。複数のJavaScriptファイルやCSS、画像などを、ブラウザで読み込みやすいように「1つのファイル（または少数のファイル）」にガッチャンコしてまとめる役割を持ちます。
webpackをインストールする。.babelrcファイルを作成し、Babelの設定を行う。
※Babelとは？
ブラウザがまだ完全にサポートしていない次世代のJavaScript（ES6以降）や、React特有の「JSX」記法を、古いブラウザでも実行できる標準的なJavaScript（ES5）に変換（トランスパイル）してくれるツールです。
※Babel単体ではファイルを1つにまとめる機能がないため、Webpackとセットで使います。うーん。少し頭が混乱してきましたね。とりあえず次に行きましょう。
webpack.config.jsを作成し、Babelのローダー設定を記述する。- 開発中のコード変更を検知してブラウザを自動リロードさせるための設定（
webpack-dev-server等）を行う。
もっと簡単な方法：Create React App
上記のような複雑な環境構築（設定ファイルの記述）を一つ一つ行うのは骨が折れます。「めんどくさいな…」と思ったら、公式が提供しているビルドツール『Create React App』を使用するのが現在のベストプラクティスです。（最初からこの方法でやりたかった…笑）
ターミナルで以下のコマンドを叩くだけで、Webpack、Babel、ESLintなどがすべて最適化された状態で搭載されたReact環境が一瞬で構築されます。
npx create-react-app my-app
cd my-app
npm startこれだけで、ローカルサーバーが立ち上がり、自動リロード環境が整います。ターミナルの使い方も着々と覚えてきました。
JSX記法とは？
実際にコードを書く前に、Reactの最大の特徴である「JSX」について押さえておきましょう。
JSXとは、「JavaScriptのコードの中に、HTMLのようなタグを直接書けるようにした拡張構文」です。一見するとHTMLに見えますが、内部的にはJavaScriptのオブジェクトを生成する関数（React.createElement）のシンタックスシュガーです。
JSXを使わずに純粋なJavaScriptだけで複雑なDOMツリーを構築しようとすると、記述が非常に冗長で読みにくくなります。JSXを使うことで、UIの構造を視覚的に分かりやすく記述できるのです。階層の深いリストやテーブルを表示するケースを考えると、どちらが保守しやすいかは明白です。
この「JSX」をブラウザが理解できる純粋なJavaScriptに変換するために、先ほどの「Babel」が存在しているわけですね。（なんとなく実装の流れを理解できました。JSX難しい...）。
まとめ
環境構築から簡単なSPAの挙動までを実装してみることで、React.jsのエコシステム（BabelやWebpackの役割）がなぜ必要なのかを体感することができました。
バイタリフィアジアでは、React.jsやVue.jsといったモダンなJavaScriptフレームワークを用いたフロントエンド開発（SPA構築）を多数手掛けております。ベトナムでのアジャイル・スクラム開発を活用した新規Webサービス立ち上げや、既存システムのリファクタリングをご検討の際は、ぜひお気軽にご相談ください。
