FizzBuzzボタンを作りながらReact Hooksを学ぶ 第0回

FizzBuzz ボタンを作りながら React Hooks を学んでいきます。
目次はこちら。

と、その前に React の開発に必要な環境設定を行います。

環境設定 Mac 編

以下のツールをインストールした後で、React のアプリを作成するためのスクリプトをダウンロードします。

1. Homebrew
2. Node.js
3. jq
4. VS Code

ツールのインストール

Homebrew をインストールします。

Homebrewのインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

anyenv および nodenv 経由で Node.js をインストールします。

anyenvのインストール

$ brew install anyenv
$ anyenv init
$ cat << 'EOS' >> ~/.bash_profile
eval "$(anyenv init -)"
EOS
$ exec $SHELL -l
$ anyenv install --init
$ exec $SHELL -l

nodenvのインストール

$ anyenv install nodenv
$ exec $SHELL -l

Node.jsのインストール

# 12 系のうち、最新のものをインストール
$ node=$(nodenv install -list | grep ' 12' | tail -1)
$ echo ${node}
$ nodenv install ${node}
$ nodenv global ${node}

何かと便利なツール jq をインストールします。

jqのインストール

$ brew install jq

VS Code とその拡張機能（Japanese Language Pack、
ESLint extension）をインストールします。

VS_Codeのインストール

$ brew cask install visual-studio-code
$ code --install-extension MS-CEINTL.vscode-language-pack-ja
$ code --install-extension dbaeumer.vscode-eslint

スクリプトのダウンロード

React のアプリは Create React App を使って作るのが簡単ですが、さらにいくつかの設定をすると開発が楽になります。
Create React App 実行後に独自の設定を行うスクリプトを用意しましたので、ダウンロードしてください。

create-react-app-ts.shのダウンロード

$ curl -L 'https://drive.google.com/uc?export=download&id=1fvVpPCXM_lvGPQ-7dKxZn_RkWJT5vgiZ' > ~/create-react-app-ts.sh
$ chmod +x ~/create-react-app-ts.sh

create-react-app-ts.sh では Create React App を使って TypeScript 用の React アプリを作成した後で、以下の設定を行っています。

1. eslint-config-airbnb（Airbnb が作成したソースコード検証のルール）を設定する。
2. Prettier（ソースコード整形ツール）を設定する。
3. VS Code でファイル保存時にソースコードの検証、整形が実行されるように設定する。

create-react-app-ts.sh は以下のように引数にアプリ名を指定して実行します。
実行すると指定したアプリ名のフォルダが作成されますので、そこに移動して npm start を実行すると、React が起動します。

Reactアプリの作成

$ ~/create-react-app-ts.sh fizz-buzz
...

Reactアプリの起動

$ cd fizz-buzz
$ npm start