【初級者向け】Reactの開発環境の構築

1 はじめに
2 Reactとは
3 環境構築
4 Reactアプリの作成
- 4.1 コードの修正
5 おまけ
- 5.1 create-react-appは何がよいのか
- 5.2 create-react-appで生成されるファイル
6 さいごに
7 参考

はじめに

いままで、フロントエンドに関してはあまり勉強してきませんでしたが、近々、業務でReactを使う予定があるので勉強を始めています。

今回はReactの開発環境をMac上に構築する方法について書いてみようと思います（参考までに、OSはSierraです）

Reactとは

ReactはUIを構築するためのJavaScriptライブラリです。FacebookがOSSとして公開しています。

Reactの特徴として「Declarative」、「Component-Based」、「Learn Once, Write Anyway」という3つのキーワードがあります。

Declarative

Reactでは、Declarative（宣言的）にComponentを組み合わせてViewを構築します。宣言的という言葉の通り、ある状態に対してのあるべき姿を宣言するように定義します。

あるイベントに対する処理を命令的に記述した例と宣言的に記述した例は下記のとおりです。

 // ----------命令的に記述した例---------- // elに対する変化を書いている button.on(‘click’, () => el.append(child)); // ----------宣言的に記述した例---------- // render関数は、渡されたstateに対するあるべき表示を定義している render = state => { el.innerHTML = state.map(child => `<div>${child}</div>`).join(‘’); }; // 状態を更新して、render関数に渡す button.on(‘click’, () => { state.push(child); render(state); };

// ----------命令的に記述した例----------

// elに対する変化を書いている

button.on(‘click’, () => el.append(child));

// ----------宣言的に記述した例----------

// render関数は、渡されたstateに対するあるべき表示を定義している

render = state => {

el.innerHTML = state.map(child => `<div>${child}</div>`).join(‘’);

};

// 状態を更新して、render関数に渡す

button.on(‘click’, () => {

state.push(child);

render(state);

};

宣言的に記述した例では、初期表示の場合でもイベントによる更新でも、render関数は受け取ったstateに応じてViewを構築するだけです。

Component-Based

Reactはコンポーネント志向という思想で設計されています。Webページは一般的にヘッダー、メニュー、リストなどの様々なパーツで構成されています。ReactではこれらのパーツをComponentとして扱います。そして、様々なComponentを組み合わせてUIを構築します。

Componentは、 View = Component(State) のような、Viewを作る関数として考えることができます。 Componentが返す View は、ReactElementのツリーとなります。作成したReactElementのツリーは、ReactDOMによってDOMへと反映されます。更新時は、更新前のReactElementのツリーと比較して、差分だけがDOMに反映されます。これがVIRTUAL DOM（仮想DOM）と呼ばれる部分です。

Learn Once, Write Anyway

「Learn Once, Write Anywhere（一度学べば、どこでも書ける）」は、ReactにとってDOMは react-dom によるただの1つの環境であることを表しています。 react-native などを使うことで、「同じReactの考え方」でiOSやAndroidのような、DOM以外の環境をターゲットにしたアプリケーションを開発できます。

Reactのメリット、デメリット

前述の通り、Reactは仮想DOMを採用しています。一般的にDOMの更新には時間がかかりますが、これによりレンダリングする前後の状態を比較して最小限変更のみをDOMに適応するため、高速にレンダリングすることができます。Reactの仮想DOMについては詳しくはこちらを御覧ください。

他にもコンポーネントの再利用が容易であるなどのメリットがあります。

反面、デメリットとしては、トランスパイルが前提のため導入に手間がかかったり、JQueryなどと比べて学習コストが高い点があげられます。

環境構築

それでは、Reactアプリケーションを開発する環境を整えていきましょう。まずはじめにNode.jsをインストールします。

Node.jsのインストール

Homebrewを使ってNode.jsをインストールします。ターミナル上で下記のコマンドを実行してnodebrewをセットアップしてください。

 # nodebrewのセットアップ $ brew install nodebrew $ /usr/local/opt/nodebrew/bin/nodebrew setup $ source ~/.bash_profile

# nodebrewのセットアップ

$ brew install nodebrew

$ /usr/local/opt/nodebrew/bin/nodebrew setup

$ source ~/.bash_profile

続いて、Node.jsをインストールします。

 # Node.jsのインストール $ nodebrew install latest $ nodebrew use latest # バージョンの確認 $ node -v v10.10.0

# Node.jsのインストール

$ nodebrew install latest

$ nodebrew use latest

# バージョンの確認

$ node -v

v10.10.0

Yarnのインストール

次にYarnをインストールします。Yarnはnpmより高速に動作するJavaScriptのパッケージマネージャです。Yarnについては詳しくはこちらをご覧ください。

Node.jsと同様にHomebrewを使ってインストールします。ターミナル上で下記のコマンドを実行してください。

 $ brew install yarn

1	$ brew install yarn

create-react-appのインストール

create-react-appはReactの雛形を簡単に作ることができるコマンドラインツールです。Facebookがこちらで公開しています。

ターミナル上で下記のコマンドを実行してください。

 $ yarn global add create-react-app

1	$ yarn global add create-react-app

Reactアプリの作成

それでは、実際にReactアプリを作ってみます。ターミナル上で下記のコマンドを実行してReactアプリの雛形を作ります。

 $ create-react-app react-sample-01

1	$ create-react-app react-sample-01

その後、作成したディレクトリ内で $yarn start を実行するとReactアプリケーションが実行されます。以下の画像のような画面が表示されれば成功です。

コードの修正

少しページを修正してWelcome to Reactの文字を変えてみましょう。App.jsを下記のように修正します。

 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">ようこそReactへ</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App;

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

<h1 className="App-title">ようこそReactへ</h1>

</header>

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

export default App;

すると、即座にページが更新されます。

おまけ

create-react-appは何がよいのか

前提として、ReactはJSXやES6を使うことが推奨されています。しかし、これらを使うにはBabelやWebPack、ESLintなどのツールが必要不可欠なので、どのパッケージを入れたら良いのか悩んだり、依存管理が面倒になるなどの問題があります。

そこで、create-react-appを実行するとReactアプリケーションに必要なファイルやディレクトリの生成やWebpack、Babelなどを設定してくれます。

create-react-appで生成されるファイル

create-react-appを実行後のディレクトリ構成は下記のとおりです。

 $ tree -I 'node_modules' . ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock

$ tree -I 'node_modules'

├── README.md

├── package.json

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

├── src

│ ├── App.css

│ ├── App.js

│ ├── App.test.js

│ ├── index.css

│ ├── index.js

│ ├── logo.svg

│ └── registerServiceWorker.js

└── yarn.lock

それぞれのファイルの役割は下記のとおりです。

manifest.json	スタートページのURL、アイコン情報、背景色などの設定
App.css	タイトルやロゴなどページ全般のスタイルの定義
App.js	Reactの各コンポーネントの定義
App.test.js	テストコードのサンプル
index.css	bodyに関わるスタイルの定義
index.js	index.htmlにReactのコンポーネントをレンダリングする
logo.svg	スタートページに表示されているロゴ
registerServiceWorker.js	assetsをキャッシュする

さいごに

React特徴や開発環境の構築などについて紹介しました。Reactを使って開発を行っていくためにはES6について知っておいたほうが良いと思いますので、よろしければこちらもご覧ください。

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30