開発環境を準備する面倒くささから、個人ベースではずっと React 書いてこなかったのですが、やっぱ個人でも書かないとろくすっぽ覚えないので、Mac 上の開発環境を一発で準備するスクリプトを書きました。
日本人開発者が増えること、並びに日本語情報が増えることを期待して、ここに公開します。
不具合、改善案の提案は大歓迎です。どうぞよろしくお願いします。
出来ること
- git のインストール (を促す)
- nodenv のインストール
- node-build プラグインの追加
- nodenv-update プラグインの追加
- nodenv 自身の更新
- 指定したバージョンの node のインストール
- create-react-app のインストール
- create-react-app の実行
- 日本語でのメッセージ出力 (日本人開発者を増やしたい！)
特徴
すでにインストール済み/作成済みの項目は、それを検知してスキップするため、何度実行しても問題になることはありません。
スクリプト
以下で公開してます。
https://github.com/otchy210/bin/blob/master/react-setup.sh
全文コピー
#/bin/bash
msg() {
echo $'\e[32m[react-setup]\e[0m' "$@"
}
if ! type git > /dev/null 2>&1; then
msg "git が入ってないので入れてから戻ってきて下さい。"
msg "ここだけは GUI が避けられない模様。"
open "https://www.google.co.jp/search?q=git+mac+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB"
exit 1
fi
NODE_VERSION=$1
DIRECTORY=$2
if [ ! "$NODE_VERSION" ]; then
msg "使用する node のバーションを一つ目の引数で指定して下さい。"
open "https://nodejs.org/ja/download/releases/"
ERROR=1
elif [ ! $(echo $NODE_VERSION | grep -e "^\d\+\.\d\+\.\d\+$") ]; then
msg "node のバージョンのフォーマットが不正です。"
ERROR=1
fi
if [ ! "$DIRECTORY" ]; then
msg "作成するディレクトリを二つ目の引数で指定して下さい。"
ERROR=1
fi
if [ $3 ]; then
msg "三つ目以降の引数は無効です。"
ERROR=1
fi
if [ "$ERROR" ]; then
msg "例えば以下のようにします。"
msg "$0 6.11.1 my-react-app"
exit 1
fi
if [ -d $DIRECTORY ]; then
msg "ディレクトリ $DIRECTORY はすでに存在します。"
msg "新しいディレクトリを指定して下さい。"
ERROR=1
fi
if [ "$ERROR" ]; then
exit 1
fi
if [ ! -d ~/.nodenv ]; then
msg "nodenv を ~/.nodenv 以下にインストールします。"
git clone git://github.com/nodenv/nodenv.git ~/.nodenv
if [ ! -f ~/.bash_profile ]; then
msg "~/.bash_profile が無いので作成します。"
touch ~/.bash_profile
fi
msg "~/.bash_profile に nodeenv のパスを追加して読み込みます。"
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
fi
if [ ! -d ~/.nodenv/plugins/node-build ]; then
msg "nodenv に node-build プラグインを追加します。"
git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
source ~/.bash_profile
fi
if [ ! -d ~/.nodenv/plugins/nodenv-update ]; then
msg "nodenv に nodenv-update プラグインを追加します。"
git clone https://github.com/nodenv/nodenv-update.git ~/.nodenv/plugins/nodenv-update
source ~/.bash_profile
fi
msg "nodenv を最新バージョンにアップデートします。"
nodenv update
if [ ! $(nodenv versions --bare | grep -e "^$NODE_VERSION$") ]; then
msg "node v$NODE_VERSION を ~/.nodenv/versions 以下にインストールします。"
nodenv install $NODE_VERSION
fi
msg "デフォルトの node のバージョンを v$NODE_VERSION にします。"
nodenv global $NODE_VERSION
if [ ! $(npm ls -g --parseable create-react-app) ]; then
msg "create-react-app をインストールします。"
npm install -g create-react-app
fi
msg "$DIRECTORY 以下に React アプリを作成します。"
msg "必要なパッケージをインストールするため、数分間程度の時間がかかる場合があります。"
~/.nodenv/versions/$NODE_VERSION/bin/create-react-app $DIRECTORY
msg "新しい React アプリが $DIRECTORY に作成されました。"
msg ""
msg "この新しいディレクトリ以下で、いくつかのコマンドを実行することが出来ます。"
msg " npm start -> 開発用サーバの起動"
msg " npm run build -> 本番サーバ向けに静的ファイルをバンドル"
msg " npm test -> テスト実行サーバの起動"
msg " npm run eject -> create-react-app で管理されている依存関係や設定ファイルをコピーします。これにより Webpack や Babel の設定が編集可能になりますが、後から元に戻すことは出来ません。"
msg ""
msg "下記のコマンドで開発用サーバを起動すると、http://localhost:3000/ で作成したアプリが確認出来ます。"
msg "その後 $DIRECTORY/src/App.js を編集して保存すると、ブラウザが自動的にリロードし、変更が反映されます。"
msg " cd $DIRECTORY"
msg " npm start"
msg "ハッピーハッキング！"
exit
謝辞
Qiita はすっかり開発者の情報公開プラットフォームとして定着しましたね。皆さんの情報を参考にさせていただきました。
- コマンド有無のチェックについて
- 色つきの echo について
- noenv のインストールについて
- create-react-app のインストールについて