Git

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

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」にしておきます。

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 コマンド

npm init

name: (react_get_start)
version: (1.0.0)
description: react getting start project
entry point: (index.js)
test command:
git repository: https://github.com/pppiroto/react_get_start.git
keywords: react
author: pppiroto@gmail.com
license: (ISC)
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 用のプラグインをインストールする

npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-es2015

(2) .babelrc

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

{
    "presets":["es2015"]
}

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) インストール

npm install -g webpack
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 を使うと、変換されたソースコードと、元のソースコードの対応関係を保持してくれるので、デバッグ時に、問題個所を特定するのに非常に便利です。

module.exports = {
    // ビルド起点ファイル
    entry: './src/app.js',
    // 出力ファイルの設定
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    // ソースマップをファイル内に出力させる場合、以下
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/, // 対象ファイル
                loader: 'babel-loader', // 使用するLoader
                exclude: /node_modules/, // 除外ディレクトリ
                query: {
                    presets:['es2015']
                }
            }
        ]
    }
};

3.3 ここまで

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

4.動作確認

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

4.1 index.html

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Reac Get Start</title>
    </head>
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

4.2 ./src/app.js

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

var helloMessage = document.createTextNode("HELLO!");
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

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

4.4 ビルド

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

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

PS C:\workspaces\vscode\react\react_get_start> npm run build

> react_get_start@1.0.0 build C:\workspaces\vscode\react\react_get_start
> webpack --progress

Hash: 89a751461c2d2e2d0b1e
Version: webpack 3.5.4
Time: 2047ms
    Asset     Size  Chunks             Chunk Names
bundle.js  6.39 kB       0  [emitted]  main
   [0] ./src/app.js 109 bytes {0} [built]

4.5 HTTP Server

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

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

(1) インストール

npm　install -g http-server

(2) npmの設定

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

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

4.6 実行

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

npm run start

起動しました！

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

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

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

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

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

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

5.2 ./src/lib/util.js

util.jsの中身は適当に。

export function message() {
    return "Hello!";
}

5.3 実行

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

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

npm run watch
npm run start

起動されました。

試しに、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

node_modules/

5.4.2 git init

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

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

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

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

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

git のブランチを確認し、

git branch
* master

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

git push react_get_start master

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

6.React

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

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

6.1 準備

(1) インストール

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

npm install --save react react-dom

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

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

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

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

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

(3) Babelの設定

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

{
    "presets":["react","es2015"]
}

(4) wabpack.config.js の設定

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

    module: {
        loaders: [
            {
                test: /\.js$/, // 対象ファイル
                loader: 'babel-loader', // 使用するLoader
                exclude: /node_modules/, // 除外ディレクトリ
                query: {
                    presets:['react','es2015']
                }
            }
        ]
    }

6.2 コード

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

6.2.1 index.html

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

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Reac Get Start</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

6.2.2 ./src/app.js

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

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

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

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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
      <div>
          hello! React!
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

6.2.3 実行

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

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

6.2.4 デバッグ

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

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

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

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

Follow me!

@pppiroto

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

コメントを残すコメントをキャンセル

Universal Windows Platform

2017年8月6日

React

2017年8月16日

1.準備

1.1 Node.js

(1) Node.js

(2) npm

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

1.2 Visual Studio Code

1.3 Git

1.3.1 Git をインストール

1.3.2 Githubにリポジトリを作成

2.プロジェクトの作成

2.1 プロジェクト準備

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

3.JavaScript環境

3.1 Babel

(1) インストール

(2) .babelrc

3.2 Webpack

(1) インストール

(2) webpack.config.js

3.3 ここまで

4.動作確認

4.1 index.html

4.2 ./src/app.js

4.3 Webpackの設定

4.4 ビルド

4.5 HTTP Server

(1) インストール

(2) npmの設定

4.6 実行

5.ES2015

5.1 ./src/app.js

5.2 ./src/lib/util.js

5.3 実行

5.4 Git

5.4.1 .gitignore

5.4.2 git init

6.React

6.1 準備

(1) インストール

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

(3) Babelの設定

(4) wabpack.config.js の設定

6.2 コード

6.2.1 index.html

6.2.2 ./src/app.js

6.2.3 実行

6.2.4 デバッグ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル