購入直後の Mac から一発で React 開発環境を準備するスクリプト

開発環境を準備する面倒くささから、個人ベースではずっと　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 はすっかり開発者の情報公開プラットフォームとして定着しましたね。皆さんの情報を参考にさせていただきました。

• コマンド有無のチェックについて
  • http://qiita.com/kawaz/items/1b61ee2dd4d1acc7cc94 by @kawaz
• 色つきの echo について
  • http://qiita.com/k_ui/items/9a194634af9f522bfad6 by @k_ui
• noenv のインストールについて
  • http://qiita.com/1000ch/items/41ea7caffe8c42c5211c by @1000ch
• create-react-app のインストールについて
  • http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614 by @chibicode