2017年8月15日 / 最終更新日 : 2017年8月15日 矢木 浩人 Git

React 開発の全体像を把握しつつ開発環境を整える

  • そろそろ、JavaScriptのフレームワークが、ReactかAngularに収束してきたかな？と思っている。
  • なので、Reactで簡単にアプリでも作って全体像を把握しておこうかと思っている。
  • アプリ作るならまずチュートリアルだなと、公式サイトのチュートリアルを写経しようと思っている(もしくはした)。
  • Reactがやろうとしていることはわかるが、公式チュートリアルだけでは、全然足りないと感じている。
  • 調べればわかるだろうが、体系的にまとまっていないので、面倒くさい。
  • ややこしい環境問題が解決されているであろう、create_react_app を試すものの、どういう仕組みかわけがわからない。

そうです、そんな自分が、結局少しづつしらべるしかないなと、あきらめて調べた結果を、次回以降に覚えておくためのメモです。

実は、以下の本が非常にわかりやすくまとまっていたのだけれど、自分が試していたころは、まだ発売前だった。残念。React自体はいいけど、環境含めてなにから手を付けていいかよくわからない方か購入されてもいいのではないでしょうかね。

Reactを動かすところまでの環境含め、自分の理解を2、3時間でできるところまで、参照先を含めてまとめます。

環境は、Windows ですが、基本的にどんな環境でも、大枠は変わらないかと思います。

1.準備

1.1 Node.js

https://nodejs.org/ja/

(1) Node.js

ブラウザではなくサーバーサイドで動くJavaScript環境で、Chromと同じエンジンで動作する。

Reactでアプリを作るにあたって、アプリケーションサーバーとしてNode.jsを用いる必要があるわけではなく、むしろ、次に説明する、npm を使い倒したい。

(2) npm

npmは、JavaScript用のパッケージマネージャー、Pythonでのpipとか、.NET での NuGetとか、パッケージのバージョンなどの構成を管理してくれる。Node.js環境での、デフォルトパッケージマネージャーで、Node.js に同梱されています。

https://www.npmjs.com/

(3) Node.js 、npm のダウンロードとインストール

ということで、Node.js をダウンロードして、インストールすると、同時にnpmもインストールされるので、ここ からダウンロードして、ウィザードに従ってインストールします。

1.2 Visual Studio Code

最近、Visual Studio Codeの具合がよいので、開発環境を寄せていっています。

https://code.visualstudio.com/

からダウンロードして、こちらもウィザードに従いインストールします。別にサクラエディタでも大丈夫です。

1.3 Git

https://git-scm.com/

Git考え方がややこしいですが、以下のサイトがよくまとまってて参考になります。

まぁややこしいといっても、そら、リポジトリが分散していれば制御は複雑になりますよね。

ただ、構成管理自体に、リモート(サーバー上の)リポジトリを必要としないのはやっぱり便利。

http://qiita.com/satoshi1335/items/ead109412430a078feaa

1.3.1 Git をインストール

ここからダウンロードして、これも適当にインストールします。

1.3.2 Githubにリポジトリを作成

作成したアプリを、Gitリポジトリに上げられるように、Githubにリモートリポジトリを作成しておきます。別にしなくてもよいです。

名前を「react_get_start」にしておきます。

github

https://github.com/pppiroto/react_get_start.git

2.プロジェクトの作成

大枠準備ができたので、プロジェクトを作成していきます。

2.1 プロジェクト準備

  • エクスプローラーで、プロジェクト用に適当なフォルダ「react_get_start」を作成
  • 作成したフォルダを右クリックし、Visual Studio Code で開くを選択
  • Visual Studio Code が立ち上がったら、Ctrl+@ でターミナルウィンドウを開く。以降、コマンドは開いたターミナルウィンドウに打ち込みます。

2.2 npm init でプロジェクトの初期設定を行う

npm は、パッケージマネージャーですが、自分で作成するプロジェクトの管理もできます。

プロジェクトのルートディレクトリで、npm init を実行し、質問に答えるとプロジェクトの設定ファイルが、package.json という名前で作成されます。

すべてデフォルト値(Enter キーで次へと送り続ける)で問題ない。

最後に、yes とこたえることで、作成したプロジェクトに対して、npm の設定ファイルが作成されます。

npm CLI コマンド

  1. npm init
  2.  
  3. name: (react_get_start)
  4. version: (1.0.0)
  5. description: react getting start project
  6. entry point: (index.js)
  7. test command:
  8. git repository: https://github.com/pppiroto/react_get_start.git
  9. keywords: react
  10. author: pppiroto@gmail.com
  11. license: (ISC)
  12. Is this ok? (yes) yes

3.JavaScript環境

  • Babelを使って、ECMAScript 2015(ES6) の文法を未対応のブラウザでも使えるようにコンパイル(トランスパイル)する。
  • Webpack を使って、複数モジュールを1つにまとめる。

なんで、こんなことをするかの経緯については、以下が分かりやすい。

http://qiita.com/megane42/items/2ab6ffd866c3f2fda066

3.1 Babel

Babelは、ECMAScript2015(ES6) や ES7などで書かれたソースコードを、一般的なブラウザが対応している、ECMAScript5 に変換するコンパイラ(トランスパイラ)。さらに、React の JSX で書かれたソースの変換にも対応。

https://html5experts.jp/kyo_ago/16979/

(1) インストール

npmをつかって、パッケージをインストール。

npm install でインストール、プロジェクトをまたいで共通で使用する場合には、-g,-global をオプションを付けてインストール(下例のWebpackはそうしています)。付与しないと、ローカルプロジェクトのフォルダ、node_modules に依存関係を含めインストールされます。

–save-dev オプションを付けると、package.json の devDependencies に追記され、開発用の依存関係を定義することができます。実行時の依存関係なら、–save。

詳しくは、

http://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95

https://mae.chab.in/archives/2547

あたりを。まずは、ES2015 用のプラグインをインストールする

  1. npm install --save-dev babel-loader babel-core
  2. npm install --save-dev babel-preset-es2015

(2) .babelrc

プロジェクトのルートに、.babelrc というファイルを置いて、ES2015 preset が常に適用されるようにしておく。

  1. {
  2.     "presets":["es2015"]
  3. }

3.2 Webpack

WebpackやBroserifyは、モジュールの依存関係を解決して、一つにまとめたファイルを生成してくれます。

https://app.codegrid.net/entry/browserify-1

http://qiita.com/soarflat/items/28bf799f7e0335b68186

https://mae.chab.in/archives/2547

(1) インストール

  1. npm install -g webpack
  2. npm install --save-dev webpack

(2) webpack.config.js

プロジェクトのルートに、webpack.config.js を配置し、以下のような設定を記述します。

指定内容は、コメントの通り。

./src/app.js ファイルからたどって、バンドル結果を /dist/bundle.js にまとめます。

対象のファイルは、.js、上記でインストールしたbabel-loader を使用、ES2015を適用します。

inline-source-map を使うと、変換されたソースコードと、元のソースコードの対応関係を保持してくれるので、デバッグ時に、問題個所を特定するのに非常に便利です。

  1. module.exports = {
  2.     // ビルド起点ファイル
  3.     entry: './src/app.js',
  4.     // 出力ファイルの設定
  5.     output: {
  6.         path: __dirname + '/dist',
  7.         filename: 'bundle.js'
  8.     },
  9.     // ソースマップをファイル内に出力させる場合、以下
  10.     devtool: 'inline-source-map',
  11.     module: {
  12.         loaders: [
  13.             {
  14.                 test: /\.js$/, // 対象ファイル
  15.                 loader: 'babel-loader', // 使用するLoader
  16.                 exclude: /node_modules/, // 除外ディレクトリ
  17.                 query: {
  18.                     presets:['es2015']
  19.                 }
  20.             }
  21.         ]
  22.     }
  23. };

3.3 ここまで

ここまで構成した、Visual Studio Code のキャプチャです。

initial_project

4.動作確認

一旦簡単なプログラムを作成して、動作確認してみます。

4.1 index.html

呼び出されるhtmlファイルを作成。上記で、Webpackにより生成される予定の、./dist/bundle.js をロードするよう指定します。

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Reac Get Start</title>
  6.     </head>
  7.     <body>
  8.         <script src="./dist/bundle.js"></script>
  9.     </body>
  10. </html>

4.2 ./src/app.js

アプリケーションの本体。とりあえず、body 要素の下にテキストを放り込んでみます。

  1. var helloMessage = document.createTextNode("HELLO!");
  2. document.body.appendChild(helloMessage);

4.3 Webpackの設定

npm を使ってWebpackを実行するために,package.jsonのscriptsに以下のwatch、buildの記述を追加します。

watchは、ファイルの変更を監視し、即時に変換することを、Webpackに指示します。

build は、Webpackを実行させます。–progress オプションを付与することで、処理過程のログを表示します。

https://github.com/webpack/docs/wiki/cli

  1.   "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "watch": "webpack --watch --progress",
  4.     "build": "webpack --progress"
  5.   },

4.4 ビルド

では、実際にWebpackを実行してみます。npm run build をターミナルに打ち込みます。

エラーが出なければ、変換終了。/dist/bundle.js が生成されるので確認してみましょう。

  1. PS C:\workspaces\vscode\react\react_get_start> npm run build
  2.  
  3. > react_get_start@1.0.0 build C:\workspaces\vscode\react\react_get_start
  4. > webpack --progress
  5.  
  6. Hash: 89a751461c2d2e2d0b1e
  7. Version: webpack 3.5.4
  8. Time: 2047ms
  9.     Asset     Size  Chunks             Chunk Names
  10. bundle.js  6.39 kB       0  [emitted]  main
  11.    [0] ./src/app.js 109 bytes {0} [built]

4.5 HTTP Server

さて、変換できたものの、Webサーバーがないと動作確認ができないため、インストールします。

他でも使用するため、-g でインストールしてみます。

(1) インストール

  1. npm　install -g http-server

(2) npmの設定

Webpackと同様、npm から起動するように、scriptを構成します。start の部分。-o とすることで、ブラウザまで起動します。便利。

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "watch": "webpack --watch --progress",
  4.     "build": "webpack --progress",
  5.     "start": "http-server -o"
  6.   },

4.6 実行

ということで、実行してみます。

  1. npm run start

起動しました！

のは、いいんですが、なんか大変。JavaScriptの開発も敷居があがったなぁとつくづく感じます。

開発者側の視点だけで、考えると、RIAで、Flashとか、Silverlightでやってたほうが幸せだったんじゃないかとつくづく思いますね。すぐ陳腐化しちゃうだろうしなぁとか。

WebAssembly とかが使えるようになってくるとよくなってくるんでしょうか？

first_app

5.ES2015

少し試しに、ES2015の文法を使うように書き換えて試してみます。

ES2015 含め、JavaScriptの文法などは、

https://developer.mozilla.org/ja/docs/Web/JavaScript

見るとわかりいいです。

5.1 ./src/app.js

ということで、現在どのブラウザでも実装されていない、ES2015の import を使用してみます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

es2015_import

lib ディレクトリに、util.js を作成して、それをimport してみます。

  1. import { message } from './lib/util.js'
  2. var helloMessage = document.createTextNode(message());
  3. document.body.appendChild(helloMessage);

5.2 ./src/lib/util.js

util.jsの中身は適当に。

  1. export function message() {
  2.     return "Hello!";
  3. }

5.3 実行

Visual Studio Code のターミナルウィンドウの＋ボタンを押すことで、ターミナルを2つ起動し、一つは、Webpackの変更監視、一つはHTTPサーバーを起動させます。

vscode_2terminals

それぞれのターミナルで、以下を実行

  • npm run watch
  • npm run start

es2015_app

起動されました。

試しに、util.js のメッセージ内容を変更すると、直ちに反映されるのが確認できます。

https://developer.mozilla.org/ja/docs/Web/JavaScript

5.4 Git

このあたりで、一旦、Githubにプロジェクトを上げてみたいと思います。

5.4.1 .gitignore

.gitignore で構成管理対象外のファイルを指定します。

npm でインストールしたモジュール群は、構成を変えることはないため、対象外と指定します。

.gitignore の記述方法とか、

http://qiita.com/anqooqie/items/110957797b3d5280c44f

  1. node_modules/

5.4.2 git init

ターミナルでローカルのgitリポジトリの作成と、コミットを実施。

最初の、メールアドレスなどは、リモートリポジトリに上げるときに必要になってくるので指定しておきます。

再掲しますが、gitについては、以下が分かりやすい。

http://qiita.com/satoshi1335/items/ead109412430a078feaa

  1. git config --global user.email "pppiroto@gmail.com"
  2. git config --global user.name "pppiroto"
  3. git init
  4. git remote add react_get_start https://github.com/pppiroto/react_get_start.git
  5. git add --all
  6. git commit -m "bable,webpackを使った初期プロジェクト"

git のブランチを確認し、

  1. git branch
  2. * master

Githubのリモートリポジトリにプッシュします。

  1. git push react_get_start master

Github上に登録されたことが確認できました。

github_push

6.React

さて、ようやく本題のReactです。React自体については、公式チュートリアルを見るとわかりやすいですが、これまでの環境構築の作業を踏まえて、Reactを動くようにします。

https://facebook.github.io/react/tutorial/tutorial.html

6.1 準備

(1) インストール

npm を使用して、React 関連のモジュールをインストールします。

  1. npm install --save react react-dom

(2) React用Presetのインストール

Babelで、ES2015を変換できるようにしましたが、同様に、React の JSXを変換するための presetもインストールします。

JSXについては、このあたりを見てください。

http://qiita.com/koba04/items/039b9c974df284766f64

  1. npm install --save-dev babel-preset-react

(3) Babelの設定

ES2015同様、React の設定を、.babelrc に追記します。

  1. {
  2.     "presets":["react","es2015"]
  3. }

(4) wabpack.config.js の設定

こちらにも、追記 query の部分

  1.     module: {
  2.         loaders: [
  3.             {
  4.                 test: /\.js$/, // 対象ファイル
  5.                 loader: 'babel-loader', // 使用するLoader
  6.                 exclude: /node_modules/, // 除外ディレクトリ
  7.                 query: {
  8.                     presets:['react','es2015']
  9.                 }
  10.             }
  11.         ]
  12.     }

6.2 コード

では、Reactのコードを書いてみます。

6.2.1 index.html

上記で作成したindex.html に1行追記します。<div id=”root”></div> の部分。

このdiv 要素以下に、React のコンポーネントが展開されます。

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Reac Get Start</title>
  6.     </head>
  7.     <body>
  8.         <div id="root"></div>
  9.         <script src="./dist/bundle.js"></script>
  10.     </body>
  11. </html>

6.2.2 ./src/app.js

app.js をReact用に変更します。先ほどの、適当な util.js は取っ払ってしまってください。

以下が、JSXで記述したReactのソースになります。

App というコンポーネントを定義し、div 要素の配下に展開しています。

Appコンポーネントは、hello! React!を描画するだけです。

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. class App extends Component {
  5.   render() {
  6.     return (
  7.       <div>
  8.           hello! React!
  9.       </div>
  10.     );
  11.   }
  12. }
  13.  
  14. ReactDOM.render(
  15.     <App />,
  16.     document.getElementById('root')
  17. );

6.2.3 実行

同様に、npm run watch と npm run start で立ち上げます。

first_react_app

React を使用したアプリケーションの動作が確認できました。

6.2.4 デバッグ

ここまで、デフォルトで立ち上がるブラウザ、Edgeで動作を確認してきましたが、Chrome拡張機能 の React Developer Tools を入れておくと、Reactのデバッグがはかどります。

https://www.typea.info/blog/index.php/2017/06/04/react

react_dev_tools

react_debug

これで、React のチュートリアルレベルのアプリケーションを作成するため(試すだけならここまで不要だけれど)の土台が整いました。

これから、React-Router とか Redux とかを組み込んで、アプリケーションとして使えるようにしていく必要があります、、、Angular のほうがいいのかしら？とか、自分が作る程度の規模のアプリなら、jQueryで十分ではないかなど、いろいろ考えつつ、もう少しReactを掘り下げていこうかと思います。

  1. React 開発の全体像を把握しつつ開発環境を整える
  2. React の単純なサンプルに React Router を適用する
  3. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する
  4. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む
  5. React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する

Follow me!

カテゴリー
Git、Node.js、React、Visual Studio Code

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Universal Windows Platform

前の記事

UWP 非同期メソッドのユニットテスト
2017年8月6日
React

次の記事

React の単純なサンプルに React Router を適用する
2017年8月16日