SPAのライブラリ/フレームワークとしてはデファクトスタンダードとなった感があるReact。
（最近だとVue.jsの話題もよく見ますね）
まあ今更感はありますが、Reactの素振りをまとめていきます。
Angularを使っているときにTypeScriptいいなと感じたので、今回React+TypeScriptの構成で考えていきたいと思います。
環境構築
Node.jsのインストールは済んでいるものとし、以下の環境で実行・検証しています。
- OS： OSX 10.11.6(El Capitan)
- node： v6.10.0
- npm： 5.4.1
フロントエンドはスクラッチで環境を作るとなるとツールチェインの学習コストが重いですが、
今回はCLIツール create-react-app（https://github.com/facebookincubator/create-react-app）の力を借ります。
create-react-appはほぼ初期設定なしでReactの開発環境を構築してくれるツールです。
ツールの充実で入り口が広くなっているのはありがたい限りです。
さて、まずはグローバル環境にツールをインストールします。
$ npm install -g create-react-app
プロジェクト生成
ボイラープレートを用いたプロジェクトを生成します。
$ create-react-app my-sample --scripts-version=react-scripts-ts
my-sampleがプロジェクト名です。
–scripts-version=react-scripts-tsはオプションです。このオプションをつけることでTypeScriptに対応した環境を構築してくれます。JS(ES201x)で開発したい場合は必要ありません。
実行
プロジェクトディレクトリに移動し、アプリを開発モードで実行します。
$ cd my-sample $ npm start
Nodeサーバーの起動、アプリのビルド、実行といった一連の処理を行ってくれます。
http://localhost:3000/をブラウザで開くとアプリが確認できます。
構成を確認する
create-react-appによって作られたプロジェクトは以下のディレクトリ構成をしています。
. ├── README.md ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ └── registerServiceWorker.ts ├── tree.txt ├── tsconfig.json ├── tsconfig.test.json └── tslint.json
public/index.htmlがReactコンポーネントを表示するための土台となります。
src/index.tsxがアプリの起点、src/App.tsxがルートコンポーネントを宣言しています。
ここで見慣れない拡張子.tsxについて補足しておきます。
Reactはコンポーネントの定義において、HTMLのような見た目のJSXという構文を使って記述することができます。
JSXを使うファイルの拡張子が.jsxです。拡張子.tsxはそのTypeScript版だと思って貰えばOKです。
さてApp.tsxを次のように微変更してみます。
...
class App extends React.Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Hello React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
);
}
}
export default App;
ファイルを保存することでlivereloadにより変更内容が反映されるのがわかるかと思います。
ビルド
プロダクトとしてビルドしたい場合は以下のコマンドを実行します。
$ npm run build
my-sample/buildフォルダにプロダクトが最適化された状態で生成されます。
あとはこれをサーバーにデプロイしてあげましょう。
ejectについて
今回はバンドルツールやビルドツールなどの各種設定をデフォルトのまま使っていますが、開発に慣れてくると標準設定では満足できない場合があるでしょう。その場合は次のコマンドを実行することで各種設定ファイルをプロジェクト配下に吐き出し、設定をいじることが可能になります。
$ npm run eject
ただしこのコマンドを実行すると元に戻せないので注意してください。
まとめ
create-react-appを用いたReact+TypeScriptの環境構築を紹介しました。
まだスタートに立っただけですね。次回からReactのコンポーネント作成などを行っていきます。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
