前のパートに戻る 完了して次のパートへ  

  0-2 開発環境の準備(Mac)

Homebrew のインストール


Homebrew とは Mac におけるパッケージ管理ツールです。ruby の gem、node の npm、python の pip と思ってもらえると大丈夫です。

https://brew.sh/index_jaに詳細な説明が書いていますが、要は brew コマンドを使えるようになれば大丈夫なので以下のコマンドを実行してください。

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

Node.js のインストール


Node.jsとは、javascript の実行環境です。javascript でのサーバー開発やフロントエンドのトランスパイル等に利用されます。この公式サイトからもダウンロードできるのですが、公式サイトからインストールするとあとあと面倒なこと(主に権限周り)になることがあるので、brew でのインストールすることをお勧めします。

$ brew install node
$ node -v
v12.10.0

上記のようにバージョンが表示されればインストール完了です。

git のインストール


開発環境の準備で git を使用するので用意してください。

$ git --version

git が入っていない場合はこの記事を参考にすると簡単にインストールできると思います。

実際に自分の github のリポジトリで管理したい場合は他の記事を参考に頑張ってみてください。github のアカウントを作成して git の CLI からアクセスできるようになっていれば ok です。

プロジェクトのフォーク


すぐに教材での学習を始められるように、GitHub に環境構築済みのプロジェクトを用意しました。

https://github.com/Dragon-taro/techpit-form/tree/pre

このプロジェクトをフォークしてご自身のパソコンに clone してから作業してください。(フォークせずに上記の リポジトリから直接う clone することもできますが、github に push することができなくなってしまうのでフォークすることをおすすめいたします。)

# cloneしたいディレクトリまで移動
# 筆者は `~/src/react/`というディレクトリの下においています。
$ cd /path/to/app

# フォークしたリポジトリをclone
# cloneするためのURLはgithubのclone済みのリポジトリから参照できます。
$ git clone https://github.com/[your_github_id]/techpit-form.git

この教材のコードは動作確認済みのため学習の際のコードが間違っていない限りは動きますが、何度やっても動かず何時間も無駄にしてしまったときはそのときのコードをご自身のリポジトリに push してそのリポジトリの URL を添えてご質問いただきますとスムーズです。そうでない場合は時間がかかってしまう可能性があるのでご了承ください。

プロジェクトのセットアップ


続いてプロジェクトをセットアップしていきます。

# 先ほどcloneしたところまで移動
$ cd /path/to/app

# front/配下をセットアップ
$ cd front

# 依存ライブラリのインストール
$ yarn install

# devサーバーの起動
# 起動すると終了するまでshellが実行され続けます
# Ctrl-Cで終了
$ yarn start

$ yarn startを実行したときに、port 8000 がすでに使われていると空いている port を使うかどうかを聞かれます。そのときはyを入力して Enter を押せば ok です。

サーバーが起動すると自動的にブラウザが開いてページが表示されます。

このように hello と表示されていたら完了です。

これは開発サーバーで build やファイルのホスティングを全部やってくれます。変更があった際はブラウザの画面をリロードするだけで ok です。

server/に関しては、4 章で使うので今は何もしなくて ok です。

Redux Dev Tool のインストール


Redux Dev Toolというものをインストールします。それぞれのブラウザの store で入手できるので、インストールしておいてください。この教材では、chrome での方法を紹介します。

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljdよりインストールしてださい。

開発者ツールに redux というのが追加されていたら完了です。

VSCode のインストール(オプション)


特に使っているエディタがない場合は VSCode をインストールしましょう。これも brew でインストールできます。

$ brew cask install visual-studio-code

react を書くだけであれば基本的に拡張機能を入れなくても快適にコーディングできます。

議論

0 質問

このコースの評価は?