なんとなく React とかいうやつを試したくなって、とりあえず Hello World って表示するだけのものでも作るか…と思ったのだけど、まったく前提知識がないものだから完成するのにめっちゃ時間がかかった、という話でも書いておく。多少脚色はある。
いきなりつまづく
まずは react と react-dom ってのがいるらしいんで入れるぞ、最近 npm にも慣れてきたしこれくらいは簡単…と、とりあえず適当なディレクトリ作って npm init -y してから
$ npm install --save react react-dom
とかやるんだけど、これがエラーが出てインストールできない訳だ。やる前に Node.js のバージョンを v6.10.0 に上げたのだがその辺が原因? とか思ったけど、前のバージョンに下げても同じだった1ので、そういう訳でもないらしい。何回試しても同じエラーが出るので仕方なくググると、最初に出てきたのがこれ。
…はい、作ったディレクトリ名が “react” でした。涙 なので package.json のプロジェクト名も “react” になってたというオチ。適当に名前変えてもう一度やったらすんなり入った。
これだけでたぶん 1 時間くらい潰した。
えーと他にいるものは
がんばって調べる。JSX とかいうのでコード書くらしい、それをブラウザで動く JavaScript に変換するのに babel ってのがいるらしい、その babel ってやつで変換する作業をするには webpack（これはちょっと分かる）などを使うといいらしい、んでそのためには何と何を入れれば…と、ここまで理解するのにもかなりの時間を要する。
まあ全部まとめるとこういうことだろう、たぶん。
$ npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react
ファイルとか設定とか
ここまでの準備だけで 1 時間半をゆうに超えてたはずだが、コードを書くまでにはもう少し道のりががが。まずは先に必要なファイルを作っておくことに。
$ mkdir src dist
$ touch src/app.js dist/index.html
dist/index.html の内容。ちなみに自分がローカルで試すデモの HTML ファイルはだいたいこういう最小限なのが多いんだけど、ライブリロード系のいくつか2は body 要素のタグの有無をチェックしてて、その終了タグの直前や開始タグの直後にスニペットを挿入する仕様になってるので、そういうのはこれだと動かないのでちょっと困る。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>React Test</title>
<div id="app"></div>
<script src="app-bundle.js"></script>
npm scripts を追加しておく。とりあえず試すだけなのでこれだけでよかろう。
{
"scripts": {
"start": "webpack-dev-server"
}
}
設定。まあ webpack.config.js はなんとなく分かるけど、他に .babelrc ってのも書かないといけないんだな。とりあえず見よう見まねで書く。
{
"presets": ["react", "es2015"]
}
で、あとは webpack.config.js 書いて app.js に簡単なコード3書いて npm start で動作確認や…だったのだけど、entry を相対パスで書いてなかったり、必要のない publicPath を無意識に設定してたり、output.filename を [name]-bundle.js にしてしまって出力されるファイルが main-bundle.js だったり、要するに自分の凡ミスなんだが、それでさらに時間をロスするはめに。涙
まあ、その辺は都度修正して、最終的な webpack.config.js はこうなった。
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app-bundle.js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist')
}
};
なお、ここに到達するまでに 2 時間以上過ぎた模様。
さあ React するぞ
という訳で、まずは本家のウェブサイトを見てみる。下の方になんかコードが書いてあるが、いきなり class とか出てくる。まずはそこから理解しないといけないのか…と思い、class 構文に関する色々なページを読んでみたのだけど、途中でなんか本筋から外れて寄り道してる気がしたので、なんとなく分かったところで強制終了。これでまた時間を浪費。
もう一度最初に戻ってみる。何をしようとしているのかは少し分かるようになったけど、class の方にも ReactDOM の方にも render ってのがあって、なんで 2 つあるのかがよく分からない。ていうかまずその React とか ReactDOM はどこから来たんだよ。涙
もうちょっとこう、ステップバイステップ形式で書かれてるものはないん? と思って、とりあえず Take the Tutorial ってのがあるので覗いてみる。出てきたのは Tic Tac Toe アプリの作り方…いや違うねん、オレが今必要としているのはこんな大層なのじゃなくてだな。
こういう時は基本に戻ってドキュメントから読むのだ。おお、冒頭からそれっぽいコードが出てきたぞ。最初からこっちを見ておくべきだった。とりあえず Next をクリックして読み進めていくんだけど、JSX の話だとかコンポーネントの話に進んでいき、いや理解する上では必要だけど今はそうじゃなくてだね、という気分に徐々になってくる。
…と、このあたりでナビゲーションに Installation という項目があるのに気が付く。Docs から最初にここへ飛ばないもんだから、すっかり読み飛ばしていた。読んでいくと Installing React あたりから、ちゃんとインストール方法から Hello World コードまで書いてあるやないか。くっそだまされた（違
とりあえず、Hello World with ES6 and JSX にあるコードを app.js に書いて npm start して、やっと Hello World することができましたとさ。
疲れた
そんな訳で、トータル 3 時間弱に及ぶ React との戦いが終わった。まとめると、結局は自分の情報の探し方がダメだとか、無駄な寄り道が多すぎだということで完結しそうな話だ。涙 普通に公式ドキュメントから始めて順に進めていれば、きっとここまで時間はかからなかったのではと思う。
まあでも設定ファイル書くとか、ディレクトリやファイルの構成とかは考えないといけない訳で、それを思うと数 10 分でって訳にはいかないよなあ…と思ったのだけど、全部作業が終わったあとで、こんなものがあることに気が付くなど。
(ノ｀Д´)ノ彡┻━┻