Ateam Lifestyle x cyma Advent Calendar 2018の7日目は、株式会社エイチームライフスタイルでWebエンジニアをしている@turkeyzawaが担当します。
はじめに
ここ最近、エイチームライフスタイルではフロントエンドにReactの導入を進めようという動きが活発になってきています。そこで、まずはReactを動かすための開発環境の構築から始められるように手順をまとめました。
また、この記事はWebデザイナーや非エンジニアの方々にも読んでいただけるよう、なるべくゼロベースからの手順をまとめています。分かりづらい箇所があればコメントでどんどんご指摘ください。
これからReactを使い始めようとしているあなたへ、この記事が少しでも助けになれますように
こんな方にオススメ
- 普段の仕事やプライベートでMacを使っている方
- Reactの開発を始めたい方
- 基本的なHTML/CSS/JavaScriptの知識がある方
- Terminalでコマンドを実行できる方
ゴール
自身のMac上でReactを使ってフロントエンドの開発が始められるようになっている
環境
下記環境で動作を確認しています。
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.1
BuildVersion: 18B75
事前準備
ここからは開発に必要なツールを準備していきます。既にインストールされている方は適宜読み飛ばしてください。
また、本稿では**$から始まる行を実行するコマンド**、それ以外をコマンドの実行結果として記載しています。そのため、Terminalでは$から始まる行の$以降のみを実行してください。
brew
Macで利用できるメジャーなパッケージマネージャです。
この記事ではMacユーザを想定しているためbrewを使用します。既にとてもわかり易い記事がありますので、インストール方法は割愛させていただきます。リンク先を参考にインストールしてください。
node
JavaScriptをマシン上で動かすために必要な実行環境です。ここではnodebrewを使用してインストールします。
nodebrewとは？
nodebrewとはnodeの複数のバージョンを管理してくれるツールです。
nodeのバージョンを上げたいときや、プロジェクトによって使用しているバージョンが違う時など、バージョンを切り替えて使いたい場合とても便利です。
以下のコマンドを実行してください。
$ curl -L git.io/nodebrew | perl - setup
次に、nodebrewを使い始めるために以下のコマンドをTerminalで実行してください。
bash以外のシェルを使用している方は適宜読み替えてください。
$ echo 'PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bashrc
以下のコマンドでインストールされたかどうか確認ができます。
$ 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をインストールしましょう。ここでは安定版を使用します。
以下のコマンドを実行してください。
$ nodebrew install stable
正常にインストールされたかを確認します。現在(2018/12/7)はv10.14.1がインストールされますが、バージョンが違っていても大丈夫です。
$ nodebrew ls
v10.14.1
インストールされたnodeを使い始めるために以下のコマンドを実行してください。
$ nodebrew use stable
use v10.14.1
以下のコマンドでバージョンが表示されれば無事インストール完了です。
$ node --version
v10.14.1
yarn
nodeやJavaScriptから利用できるライブラリを管理してくれるパッケージマネージャです。
以前はnpmを使ってグローバルな1パッケージとしてインストールしていましたが、今はbrewでインストールする方法に変わっています。
以下のコマンドを実行してください。
brew install yarn --without-node
nodeはすでに上記でインストールしているため--without-nodeオプションをつけてインストールします。
以下のコマンドでバージョンが表示されれば無事インストール完了です。
yarn --version
1.12.3
Getting Started
ここからは実際にReactの開発環境を構築していきます。
名前は聞いたことある！ けれどよくわからないツール達
webpackやbabelなど、名前だけは知ってる！という方は多いのではないでしょうか。Reactやここ最近のモダンなフレームワークなどを導入したい時は必ずと言っていいほどこれらのツールが絡んできます。
ただ、これらのツールを自分でセットアップして動く状態にするためには、ある程度のツールの知識が求められます。
Reactを使ってみたいだけなのにツールの使い方を覚える必要がある、この事実が非エンジニアにとってReactの勉強などの妨げになってきたのではと思います。
そこで、今回の開発環境の構築ではFacebookが公開しているcreate-react-appというツールを使ってReactの環境を構築していきます。
create-react-app とは
create-react-app とは、Facebookが公開しているReactの環境を構築するためのツールです。
実際に使ってみましょう。以下のコマンドを実行してください。
$ 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など、必要なツールをセットアップしてくれた状態で環境をつくってくれます。
作成された環境のディレクトリは以下のようになっています。
.
├── 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
開発環境を立ち上げる
さっそく作成された開発環境を動かしてみましょう。以下のコマンドを実行してください。
$ cd sample-app
$ yarn start
ブラウザ上で新しいタブが自動的に開かれ、以下のような画面が表示されているはずです。
編集してみる
無事に開発環境が立ち上がったのでサンプルページにある通り、動作確認もかねて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"
保存した後にブラウザを見に行くと......
おや......?
スタイルも編集してみましょう。
@@ -7,6 +7,10 @@
height: 40vmin;
}
+.App-awesometext {
+ color: greenyellow;
+}
+
.App-header {
background-color: #282c34;
min-height: 100vh;
ブラウザを更新していないにもかかわらず変更が反映されているではありませんか。
このように、create-react-appで作成された環境ではJavaScriptやCSSを編集した後に、わざわざブラウザを更新しなくてもすぐに変更が反映されるため、とてもスピーディに開発を進めることができます。
このような便利機能は create-react-app を使わずに開発環境を構築する場合は自分で設定しないといけません。ですが、Hot Module Replacement という機能が予め create-react-app によって設定されているため実現できています。
その他にも test や production環境へリリースする時に使用する build、eslintなど様々な機能が予め設定されていますので、興味のある方はぜひ調べてみてください。
まとめ
Reactの開発環境をつくりたいときは
$ yarn create react-app {YOUR_APP_NAME}
して
$ cd {YOUR_APP_NAME}
$ yarn start
しましょう。
おわりに
かなりのボリュームとなってしまいましたが、最後まで読んでいただきありがとうございます。
おそらく今あなたの目の前には、あなただけが好きに使える、あなただけのReactの開発環境が構築できているかと思います。今まで試したかったけれどできなかったことなどを思う存分発散していただければと思います。
無茶をして環境を壊してしまっても大丈夫です。この記事のまとめを参考にしていただければ、数コマンドでまた新しい環境をつくることができます。
開発環境はつくれたけれどこの後どう勉強を進めれば良いかわからない、そういった方向けのReact入門記事なども投稿していきたいと考えています。
この記事をきっかけに、「Reactを使ってみようかな！」と一人でも多くの方に思っていただければ幸いです
Ateam Lifestyle x cyma Advent Calendar 2018 の8日目は、 @okkuyamaが React についてもっと踏み込んだ内容を書きます。ご期待ください！
参考リンク
エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/
-
npmやyarnでは、ライブラリのインストール先にグローバルかローカルを選択することができます。グローバルにインストールされたライブラリは、brewなどでインストールされたコマンドと同じようにTerminalなどで使用できるようになります。対して、ローカルにインストールされたライブラリはそのプロジェクト内でしか使用できません。 ↩