Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@otchy

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

More than 3 years have passed since last update.

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

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
otchy
1979 年 2 月 10 日生まれ / 仕事: Web システム開発 / 好きなもの: IT 全般、科学分野 / 座右の銘: 明日は明日の風が吹く / 好きな言葉: ハードルは高ければ高いほどくぐりやすい

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?