気になるReactをキャッチアップ！Macで手軽に開発環境をつくろう！

[Ateam Lifestyle x cyma Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ateam-lifestyle-cyma)の7日目は、株式会社エイチームライフスタイルでWebエンジニアをしている@turkeyzawaが担当します。

## はじめに
ここ最近、エイチームライフスタイルではフロントエンドにReactの導入を進めようという動きが活発になってきています。そこで、まずはReactを動かすための開発環境の構築から始められるように手順をまとめました。
また、この記事はWebデザイナーや非エンジニアの方々にも読んでいただけるよう、なるべくゼロベースからの手順をまとめています。分かりづらい箇所があればコメントでどんどんご指摘ください。

これからReactを使い始めようとしているあなたへ、この記事が少しでも助けになれますように:dizzy:

### こんな方にオススメ
- 普段の仕事やプライベートでMacを使っている方
- Reactの開発を始めたい方
- 基本的なHTML/CSS/JavaScriptの知識がある方
- Terminalでコマンドを実行できる方

### ゴール
自身のMac上でReactを使ってフロントエンドの開発が始められるようになっている

### 環境
下記環境で動作を確認しています。

```bash
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.1
BuildVersion:   18B75
```

## 事前準備
ここからは開発に必要なツールを準備していきます。既にインストールされている方は適宜読み飛ばしてください。
また、本稿では**`$`**から始まる行を**実行するコマンド**、それ以外をコマンドの実行結果として記載しています。そのため、Terminalでは`$`から始まる行の`$`以降のみを実行してください。

### brew
Macで利用できるメジャーなパッケージマネージャです。
この記事ではMacユーザを想定しているため`brew`を使用します。既にとてもわかり易い記事がありますので、インストール方法は割愛させていただきます。リンク先を参考にインストールしてください。

- [macOSにHomebrewをインストール](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)

### node
JavaScriptをマシン上で動かすために必要な実行環境です。ここでは`nodebrew`を使用してインストールします。
#### nodebrewとは？
nodebrewとはnodeの複数のバージョンを管理してくれるツールです。
nodeのバージョンを上げたいときや、プロジェクトによって使用しているバージョンが違う時など、バージョンを切り替えて使いたい場合とても便利です。
以下のコマンドを実行してください。

```bash

$ curl -L git.io/nodebrew | perl - setup
```

次に、nodebrewを使い始めるために以下のコマンドをTerminalで実行してください。
bash以外のシェルを使用している方は適宜読み替えてください。

```bash
$ echo 'PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bashrc
```

以下のコマンドでインストールされたかどうか確認ができます。

```bash:確認
$ nodebrew help
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
~~~ 略 ~~~
```

無事nodebrewがインストールされました。

では実際にnodebrewを使ってnodeをインストールしましょう。ここでは安定版を使用します。
以下のコマンドを実行してください。

```bash
$ nodebrew install stable
```

正常にインストールされたかを確認します。現在(2018/12/7)は`v10.14.1`がインストールされますが、バージョンが違っていても大丈夫です。

```bash
$ nodebrew ls
v10.14.1
```

インストールされたnodeを使い始めるために以下のコマンドを実行してください。

```bash
$ nodebrew use stable
use v10.14.1
```

以下のコマンドでバージョンが表示されれば無事インストール完了です。

```sh
$ node --version
v10.14.1
```

### yarn
nodeやJavaScriptから利用できるライブラリを管理してくれるパッケージマネージャです。
以前は`npm`を使ってグローバルな[^1]パッケージとしてインストールしていましたが、今は`brew`でインストールする方法に変わっています。
以下のコマンドを実行してください。

[^1]: npmやyarnでは、ライブラリのインストール先にグローバルかローカルを選択することができます。グローバルにインストールされたライブラリは、brewなどでインストールされたコマンドと同じようにTerminalなどで使用できるようになります。対して、ローカルにインストールされたライブラリはそのプロジェクト内でしか使用できません。

```bash
brew install yarn --without-node
```

nodeはすでに上記でインストールしているため`--without-node`オプションをつけてインストールします。
以下のコマンドでバージョンが表示されれば無事インストール完了です。

```bash
yarn --version
1.12.3
```

## Getting Started
ここからは実際にReactの開発環境を構築していきます。

### 名前は聞いたことある！ けれどよくわからないツール達
<img width="750" alt="webpack.png" src="https://qiita-image-store.s3.amazonaws.com/0/316805/c9fe0585-fbd6-2c82-6abd-3b1d04b2afb1.png">
<img width="750" alt="babel.png" src="https://qiita-image-store.s3.amazonaws.com/0/316805/b2fa9030-828f-e0aa-c505-24bf7e797b64.png">
webpackやbabelなど、名前だけは知ってる！という方は多いのではないでしょうか。Reactやここ最近のモダンなフレームワークなどを導入したい時は必ずと言っていいほどこれらのツールが絡んできます。
ただ、これらのツールを自分でセットアップして動く状態にするためには、ある程度のツールの知識が求められます。
Reactを使ってみたいだけなのにツールの使い方を覚える必要がある、この事実が非エンジニアにとってReactの勉強などの妨げになってきたのではと思います。

そこで、今回の開発環境の構築ではFacebookが公開している`create-react-app`というツールを使ってReactの環境を構築していきます。

### create-react-app とは
`create-react-app` とは、Facebookが公開しているReactの環境を構築するためのツールです。

- [facebook/create-react-app](https://github.com/facebook/create-react-app)

実際に使ってみましょう。以下のコマンドを実行してください。

```bash
$ yarn create react-app sample-app
yarn create v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Installed "create-react-app@2.1.1" with binaries:
      - create-react-app

Creating a new React app in {PATH_TO_YOUR_APP}.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

~~~ 中略 ~~~

Success! Created sample-app at {PATH_TO_YOUR_APP}
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample-app
  yarn start

Happy hacking!
✨  Done in 36.98s.
```

たったこれだけです。このコマンドを実行するだけで、前述したwebpackやbabelなど、必要なツールをセットアップしてくれた状態で環境をつくってくれます。

作成された環境のディレクトリは以下のようになっています。

```bash
.
├── README.md
├── package.json
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock
```

### 開発環境を立ち上げる
さっそく作成された開発環境を動かしてみましょう。以下のコマンドを実行してください。

```bash
$ cd sample-app
$ yarn start
```

ブラウザ上で新しいタブが自動的に開かれ、以下のような画面が表示されているはずです。
<img width="750" alt="Screen Shot 2018-12-05 at 0.23.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/316805/e791cb90-a3d3-86cb-b5a2-84bd28c5eb92.png">

### 編集してみる
無事に開発環境が立ち上がったのでサンプルページにある通り、動作確認もかねて`src/App.js`を編集し、保存してみましょう。

```diff:src/App.js
@@ -8,8 +8,8 @@ class App extends Component {
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
+          <p className="App-awesometext">
+            Hello World!
           </p>
           <a
             className="App-link"
```

保存した後にブラウザを見に行くと......

<img width="750" alt="Screen Shot 2018-12-05 at 0.24.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/316805/f31c4472-95d0-c676-264e-11662050478d.png">

おや......?
スタイルも編集してみましょう。

```diff:src/App.css
@@ -7,6 +7,10 @@
   height: 40vmin;
 }

+.App-awesometext {
+  color: greenyellow;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
```

<img width="750" alt="Screen Shot 2018-12-05 at 0.40.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/316805/1aa21b39-4dd8-4cc1-9247-b7897fe93e92.png">

ブラウザを更新していないにもかかわらず変更が反映されているではありませんか。
![Qiita_React_dev_env.gif](https://qiita-image-store.s3.amazonaws.com/0/316805/2ab34187-1c5e-c716-bf0c-16a6f27b537a.gif)

このように、`create-react-app`で作成された環境ではJavaScriptやCSSを編集した後に、わざわざブラウザを更新しなくてもすぐに変更が反映されるため、とてもスピーディに開発を進めることができます。

このような便利機能は `create-react-app` を使わずに開発環境を構築する場合は自分で設定しないといけません。ですが、**Hot Module Replacement** という機能が予め `create-react-app` によって設定されているため実現できています。

その他にも test や production環境へリリースする時に使用する build、eslintなど様々な機能が予め設定されていますので、興味のある方はぜひ調べてみてください。

- [React初心者が環境構築でつまづかないためのCreate React Appの始め方](https://www.webprofessional.jp/create-react-app/)

## まとめ
Reactの開発環境をつくりたいときは

```bash
$ yarn create react-app {YOUR_APP_NAME}
```

して

```bash
$ cd {YOUR_APP_NAME}
$ yarn start
```

しましょう。

## おわりに
かなりのボリュームとなってしまいましたが、最後まで読んでいただきありがとうございます。
おそらく今あなたの目の前には、あなただけが好きに使える、あなただけのReactの開発環境が構築できているかと思います。今まで試したかったけれどできなかったことなどを思う存分発散していただければと思います。

無茶をして環境を壊してしまっても大丈夫です。この記事のまとめを参考にしていただければ、数コマンドでまた新しい環境をつくることができます。

開発環境はつくれたけれどこの後どう勉強を進めれば良いかわからない、そういった方向けのReact入門記事なども投稿していきたいと考えています。

この記事をきっかけに、「Reactを使ってみようかな！」と一人でも多くの方に思っていただければ幸いです:dizzy:


[Ateam Lifestyle x cyma Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ateam-lifestyle-cyma) の8日目は、 @okkuyamaが　React　についてもっと踏み込んだ内容を書きます。ご期待ください！

## 参考リンク
- [macOSにHomebrewをインストール](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)
- [yarnのインストール](https://yarnpkg.com/lang/ja/docs/install/#mac-stable)
- [React初心者が環境構築でつまづかないためのCreate React Appの始め方](https://www.webprofessional.jp/create-react-app/)

---
エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/