地方エンジニアの日記

山口県でエンジニアをしています。元々都会の方で1年ほどWEB系のエンジニアをしていました。都会と比べると、学びの場を自分から作っていかないとなかなか難しいと感じています。

今度こそローカル環境で実行させるReact

ReactをJSXを用いてコードを作成するまでは良かったのですが、「ここからどうやって実行するの?」とつまりました。 以前の記事( Reactの環境を構築する (エラーにハマって未解決) - 地方エンジニアの日記 )は、詰まってからもがいたのですが、力つきました。笑

問題は、.jsxを.jsに変換した後にも、node_modulesからimportしている部分があることです。

// index.js
import ReactDOM from 'react-dom';

このコードの部分でエラーがおきます。では、どうすればhtmlで実行できるのか、そこが今回の記事の主題です。

対策その1: node_modules以下のファイルを直指定して読み込む

<script src="node_modules/react/dist/react.min.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>

上記のように読み込めば、import自体必要なくなります。

対策その2: webpackを利用する

そもそもなぜこの問題が発生しているのか、それを知るには、モジュールという概念を知る必要があります。モジュールとは、1ファイル(一つのコードのまとまり)のことです。1ファイルは独立しているので、他のファイルに影響を与えることはありません。スコープの概念ですね。

外部のファイルを利用したい時には、「外部のファイルを使います!」と宣言する必要があります。それが、最初のコードで記述した、import文です。

これにより、外部との衝突などを考える必要性が大きく減りましたが、各ブラウザがこのモジュールに対応しているわけではありません。なので、モジュールを利用しているものを、モジュールを利用していないものに変換してあげる必要があります。そう、webpackの出番です。

webpackの基本的な役割は、ファイルに書かれたimport文をもとにそれぞれのファイルを束ねること(つなぎ合わせる)です。束ねることで、import文なしで、コードが実行できるようになります。(よくbundle.jsというファイル名を見かけませんか?bundleには束ねる、括るという意味があります。)

大きな流れは以下のような感じです。

複数のjsxファイル => (babel: JSXからJSにトランスパイル) => 複数のjsファイル => (webpack: モジュール解決) => bundle.js

babelとwebpackがそれぞれの役割を果たすことにより、jsxをjsに変換し、モジュールに分割していたものを1ファイルにまとめることができます。

手順を覚えていないので、私のgithubリポジトリのpackage.jsonを参考にしていただければと思います。

github.com


ブログ継続日数 17日目 諸事情により前回の投稿から2週間近く空いてしまった。。。またちょっと空くかもしれない。