ついんてっく

双子のエンジニア(兄:web、弟：インフラ)が気になること、今やってるプロジェクトとかについて書きます。ぶっちゃけ１人でやって続かなかったから監視体制を置いたのが強いサボりん坊や

30分でやるReactの環境を１から構築して自走するまで

環境構築は一人では難しい！

先日、友人にReactの学習を自走できるように、環境構築 + 進め方を話しました。 話してる中、どれから始めたらいいのか、何がわからないのかがわからない。という内容があり、 フロントエンドの複雑化とともに最初の一歩がふみ出しにくくなっていると感じました。

環境構築 〜 自走できるまでを記載したいと思います。(Mac OS用)

どの方法が自走しやすいか

github.com

を使う手もありますが、 恐らく、実務ではindex.htmlにurlを指定することは少ないでしょう。 現場ではReact + Redux(Flux)という組み合わせが多いと思ってます。(うちだけ？)そのためのフォルダ構成を最初から学んでおくと、React -> Reduxの学習に移りやすく、自走がしやすいと思います。

ただし、そのようなReact + Reduxの環境を１から構築(webpackや必要なmoduleをインストール)するのはとてもハードルが高いです。 そして、必死に覚えたところで、環境構築はリーダークラスの仕事だったり、すでに構築済みのところにアサインされるケースがほとんどのため、直近で直面するタスクでもないと思ってます。

そのため、僕は、githubの良いexampleを持ってきて、コーディングしながらLife cycleやstate propsなどReactの特徴を覚えていく。が一番実践的で良いと思ってます。

環境の環境を整える

npm install githubのリポジトリを見ると当然のように出てきます。 npmとは何でしょうか？node製のパッケージマネージャのことなのですが、今やフロントエンドはこれに頼りっぱなしです。 packge管理だけでなく、scriptからのbuildまでも担当します。 そのため、現状npmなしでフロントエンドの構築はほぼ不可能と言って良いでしょう。

qiita.com

nodebrewをインストールする。

npmを使用するために便利なのがnodebrewです。 nodeの管理マネージャでnodeとnpmのversion管理、インストールをしてくれます。

npm -v
で確認ができない場合、下でインストールしてください。

これはhomebrewでインストールします。 僕の時はhomebrewで入れたと思いますが、OS Xからは直で入れたほうがいいみたい。

1.nodebreをインストールする。

$ curl -L git.io/nodebrew | perl - setup
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:04 --:--:--     0
100 23754  100 23754    0     0   4354      0  0:00:05  0:00:05 --:--:--  4354
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

2.パスを通す sudo vim ~/.bash_profile i を押してインサート状態にする export PATH=$HOME/.nodebrew/current/bin:$PATH を挿入して、esc + :wq を押して上書き保存

3.パスを反映させる source ~/.bash_profile

4.確認 nodebrew -v で確認できればOKです。

5.nodeをinstallする 特別な理由がない限りbinaryでインストール nodebrew install-binary v5.7.0

6.インストールしたversionを使用する。 nodebrew use v5.7.0

7.npm、 nodeを確認

node -v
npm -v

サンプルリポジトリをインストールする

Reactのチュートリアル的なものはたくさんありますが、僕は本家よりreduxのexampleがおすすめだと思っています。
①実践向けのフォルダ構成でありながら、規模が小さい
②reduxのことを意識した作り方ができる(とはいえ最初は意識する必要ない)
③拡張しやすい

todosを立ち上げる

1.reduxをインストールします。今回はexamplesのtodosを使用します。

cd ~/Desktop/
git clone git@github.com:reactjs/redux.git
cd /redux/examples/todos

※ gitが入ってない場合でもzip形式でダウンロードできます。

f:id:twins_tech:20161002113649p:plain

f:id:twins_tech:20161002105214p:plain

最初のフォルダ状態です。(少しいじったのでatomのpackgeのせいで色が変わってますが気にしないでください。) package.json(npmの設計書)が作られている状態なので、簡単に環境構築ができる状態です。

2.node_modulesをインストールする npm insatll

package.jsonに基づき、dependencies、devDependenciesに記述されたpackageをインストールします。 node_modulesがrootにできているのがわかると思います。 React + Reduxを使うために基本的な依存関係が入っています。今は、こんなもんか。と思っておくだけで良いでしょう。

f:id:twins_tech:20161002111044p:plain

3.ローカルサーバーを立ち上げる npm start

package.jsonに記載されている、react-scripts startが走り、
いろいろよしなにしてくれて、

http://localhost:3000/

が立ち上がります。下の画面が見れればOKです。さぁ、これで自走する準備が整いました。

f:id:twins_tech:20161002111504p:plain

自走しよう

フォルダ構成を確認

├── public
│   └── index.html
└── src
    ├── actions
    │   ├── index.js
    │   └── index.spec.js
    ├── components
    │   ├── App.js    
    │   ├── Footer.js
    │   ├── Link.js
    │   ├── Todo.js
    │   └── TodoList.js
    ├── containers
    │   ├── AddTodo.js
    │   ├── FilterLink.js
    │   └── VisibleTodoList.js
    ├── index.js
    └── reducers
        ├── index.js
        ├── todos.js
        ├── todos.spec.js
        └── visibilityFilter.js

自走するには、自分でComponentを作成し、追加していくのが良いと思います。 ReactはViewのフレームワークで、Componentという部品を作り、それを積み上げてフロントエンドを作ります。

このtodosでは、 public/index.htmlがエントリポイントとなり
src/index.jsがindex.htmlのrootにポイントしています。
さらにsrc/index.jsはsrc/components/App.jsを呼び出しています。

実際に、見えるのはApp.jsなのでここに独自のComponentを作成するのが良いでしょう。

Componentを追加

1.src/compoentns/で新規ファイル Test.jsを作成します。 2.Test.jsにComponentを作成します。（僕はES6の書き方が好きなので、そちらで記述しますので、todosとは少し書き方が違います。) ただし、混在もできますし、最終的にはbabelでコンパイルするので、特に気にしなくて良いでしょう。

React を宣言 import React, { PropTypes } from 'react'

classを作る。Componentをextendsすることで、Reactのmethodを使用できるようになる(お作法)

class Test extends React.Component {

}

renderを作る。React classには必ず一つのrenderが必要で、これが画面に表示されるDOMになる。

class Test extends React.Component {
   render(){
      return(
        <div>test</div>
      )
   }
}

importできるようにexportする。

import React, { PropTypes } from 'react'

class Test extends React.Component {
   render(){
      return(
        <div>test</div>
      )
   }
}

export default Test;

App.jsに取り込む

App.jsに以下のように取り込みます。 DOMのように<タグ></タグ>で記載出来ます。ただし、1ラインの場合は <タグ />と書くのがReactの綺麗な書き方のようです。

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
import Test from './Test'  　<- 追加

const App = () => (
  <div>
    <Test />　<- 追加
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

実は、react-scriptsのおかげで自動更新されます(めっちゃ便利。これもこのexamplesが良い理由の一つ) 下のようにtestが表示されていれば無事Componentの追加が出来ました。

f:id:twins_tech:20161002114557p:plain

styleを当てる

DOMにはstyleを当てることが出来ます。 Reactにはcssのclassはありませんが、styleに直接記入することで同じことが出来ます。 JSXの記載方法なので、background-color -> backgroundColorと少し書き方が違うの注意がいります。 下のclass ライクに指定することもできますし、sytle={{color:'blue', fontSize:30}} も同義です。 styleが当たったことがわかると思います。また、styleはほとんどのcssが使えます。

import React, { PropTypes } from 'react'

class Test extends React.Component {

  render(){
    return (
      <div style={styles.text} >test</div>
    );
  }
}

// 追加
const styles = {
  text: {
    fontSize: 30,
    color: 'blue',
  },
}

export default Test;

なぜ、このような形なのか詳しく知りたい方はこちらがオススメ

qiita.com

Eventを追加する

Reactは基本的なイベントハンドラをサポートしています。 例えば、onClickを追加します。 onClickに紐付いたalertが表示されます。イベントのトリがでstateの変更やactionを飛ばしたりします。

import React, { PropTypes } from 'react'

class Test extends React.Component {

  render(){
    return (
      <div style={styles.text} onClick={this.onClick}>test</div>
    );
  }

  onClick(){
    alert('onClick');
  }
}

const styles = {
  text: {
    fontSize: 30,
    color: 'blue',
  },
}

export default Test;

I/Fとしてpropsを使う

親からのparameterで表示内容を変えたい。その場合はどうするか。propsを使用します。 propsはパラメータみたいなもので、親から子に好きな値を渡します。

App.jsのTestにname=""を追加してあげて、

const App = () => (
  <div>
    <Test name="props test" />
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)
import React, { PropTypes } from 'react'

class Test extends React.Component {

  render(){
    return (
      <div style={styles.text} onClick={this.onClick}>{this.props.name}</div>
    );
  }

  onClick(){
    alert('onClick');
  }
}

const styles = {
  text: {
    fontSize: 30,
    color: 'blue',
  },
}

export default Test;

良いReact ライフを！

駆け足ですが、ここまでくれば、あとは調べながらという状態になったと思います。 Qiitaにもたくさんの記事が上がってるので、改めて言及するまでもないです。 他に、見ておくべきと思うキーワードを紹介して、終わりにしたいと思います。

・一人React.js Advent Calendar 2014

koba04さんが記載してくれた、初級者から上級者まで目を通しておくと良いカレンダーです。2014年版ですが、非常にわかりやすくまとまっておりロードマップのようにも使えます。

・状態を管理するstate

状態を管理するobjectで、stateが変更されるとrenderが走ります。 僕は、React componentに直接記載するのはローカルstate、redux等で扱うのをglobal stateと認識しています。

qiita.com

・Reactの思想に則ったLifeCycle

初期処理や後始末をしてくれます。 感覚的によく使うのはComponentDidMomentとcomponentWillReceiveProps(nextProps)です。

qiita.com

・使い勝手抜群、material-ui

google製のmaterial design思想をReactに落とし込んだmoduleです。使い勝手が素晴らしく良く、propsとして、イベントやプロパティを渡し、積み上げていくだけで、それなりのアプリができてしまいます。

www.material-ui.com