概要

今回は、JavaScriptのライブラリであるReactの環境構築を行なったので、メモ程度ですが情報を共有しときます。
環境構築はcreate-react-appコマンドを使います。

目次

• 開発環境
• Reactの環境構築をする手順
  • 1. Homebrewのインストール
  • 2. nodebrewのインストール
  • 3. Node.jsをインストールする
  • 4. npmをインストールする
  • 5. create-react-appを実行する
• エディタで開く
• ブラウザに表示する
• まとめ

開発環境

開発環境は以下の通りです。

• macOS Catalina
• Homebrew 2.4.0
• nodebrew 1.0.1
• Node.js v14.4.0
• zsh
• VScode

Reactの環境構築をする手順

今回、create-react-appを使って環境構築をしていきます。
Create React AppはReactの環境構築ツールで、コマンド1つでReactに必要な環境を構築することができます。

create-react-appで環境構築するには、「Node.js」と「npm」が必要です。
また、これらをインストールするには、「Homebrew」と「nodebrew」が必要なので、順番にインストールしていきます。

手順は以下の通りです。

1. Homebrewをインストールする
2. nodebrewをインストールする
3. Node.jsをインストールする
4. npmをインストールする
5. create-react-appを実行する

1つずつクリアしていきましょう。

1. Homebrewのインストール

「Homebrew」とはmacOSまたはLinux用のパッケージマネージャーです。

Homebrewの公式サイトはこちらです。

Homebrewの公式サイトのホームページにあるコマンドをターミナルに貼り付けて実行します。

実行するとインストールが始まりますので、しばらく待ちます。

インストールが完了したら、以下のコマンドを実行してHomebrewのバージョンを確認してみましょう。このコマンドは、Homebrewのバージョンを確認するコマンドです。

% brew -v

今回は、バージョン2.4.0がインストールされています。
このように、Homebrewのバージョンを確認することができたら、インストールは正常に完了しています。

2. nodebrewのインストール

「nodebrew」とはNode.jsのバージョン管理システムで、Homebrewでインストールすることができます。
nodebrewはnodeをインストールするために使います。

ターミナルで以下のコマンドを実行します。

% brew install nodebrew

しばらく待ちます。

Homebrewをインストールした際と同様に、nodebrewのバージョンを確認します。
以下のコマンドを実行しましょう。

% nodebrew -v

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

3. Node.jsをインストールする

「Node.js」とは、簡単にいうとサーバーサイドで動くJavaScriptのことです。

Node.jsをインストールしていきます。
まず、インストール可能なNode.jsのバージョンを確認します。以下のコマンドを実行してください。

% nodebrew ls-remote

コマンドを実行すると、次の画像のようにインストールすることができるNode.jsのバージョンが一覧で表示されます。この中から、好きなバージョンを選んでインストールすることができます。

create-react-appに必要なNode.jsのバージョンは8.1.0以上なので、インストールするバージョンはこれより新しいバージョンであれば問題ありません。

では、インストールしていきます。
以下のコマンドを実行します。

% nodebrew  install stable

このコマンドでは、Node.jsの安定バージョンをインストールすることができます。stableが、安定バージョンという意味です。

stableの部分をlatestにすると最新バージョンをインストールすることができます。
最新バージョンはバグなどが起きやすいので、基本的には安定バージョンのインストールで大丈夫です。

インストールしたNode.jsを確認します。以下のコマンドを実行しましょう。

% nodebrew ls

コマンドを実行すると。画像のように現在インストール済みのNode.jsのバージョンが表示されます。ぼくがインストールしているバージョンはv14.4.0です。
初めて使う方「current: noneとなっているはずです。

以下のコマンドでNode.jsを使えるようにしましょう。バージョンの部分は自分のPCにインストールされているバージョンを入力してください。

% nodebrew use v14.4.0

コマンド実行後、もう一度nodebrew lsのコマンドを実行すると、currentの部分が変更されているはずです。

次にパスを通します。
以下のコマンドを実行してください。(以下のコマンドはshellがzshの場合ですので、気をつけてください)

% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

% source ~/.zshrc

ここまでやるとNode.jsが使えるようになっているはずです。
以下のコマンドで確認してみましょう。

% node -v

先ほどcurrentに設定したバージョンが表示されれば、Node.jsのインストールは完了です。

4. npmをインストールする

npmをインストールしていきます。npmとは、Node Package Managerの略で、Node.jsのパッケージを管理するものです。
パッケージとは、Node.jsの便利な機能をまとめたものです。これを簡単に管理できるのがnpmになります。

とは言っても、実はNode.jsをインストールした時点でnpmも一緒にインストールされています。
以下のコマンドで確認してみましょう。

% npm -v

このように、バージョンが表示されればOKです。

ここまでで、create-react-appを使う準備は整いました。
では、create-react-appしていきましょう！

5. create-react-appを実行する

まず、cdコマンドで自身の開発環境に移動してください。移動したフォルダの直下に開発フォルダが作られます。

移動した先で以下のコマンドを実行します。

% npx create-react-app 開発フォルダ名

npxというコマンドでcreate-react-appを呼び出しています。npxを使うことでMacのローカルファイルにcreate-react-appをインストールすることなく使用できます。
create-react-appの後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名をpracticeとしました。

コマンドを実行して、しばらく待ちます。

npxというコマンドでcreate-react-appを呼び出しています。npxを使うことでMacのローカルファイルにcreate-react-appをインストールすることなく使用できます。
create-react-appの後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名を「practice」としました。

コマンドを実行して、しばらく待ちます。

処理が完了したら環境構築は終了です！
作成したフォルダ内でReactを使う準備ができています。

この後は、実際にブラウザに表示させるまでをやってみたいと思います。

エディタで開く

以下のコマンドを実行してエディタで作ったフォルダを開きます。(ぼくはVScodeをエディタとして使っています)

% code practice

エディタで開くとsrcフォルダやpublicフォルダなど色々なフォルダとファイルが自動的に作成されています。

画像はsrcフォルダ内のApp.jsファイルを開いています。

ブラウザに表示する

エディタ内でターミナルを起動し、作業を続けます。

以下のコマンドを実行して、buildフォルダを作成します。コマンドを実行する際は、必ず開発フォルダに移動してから実行してください。

% npm run build

コマンドを実行すると、画像のようにbuildフォルダが作成されます。
このフォルダの中にあるindex.htmlが実際にブラウザに公開するファイルです。

npm run buildではsrcフォルダとpublicフォルダの中のファイルを一つにまとめてbuildディレクトリに出力しています。

buildフォルダが作成できたら、以下のコマンドを実行します。

% npm start

このコマンドを実行するとブラウザが立ち上がり、create-react-appで作成した初期の画面が表示されます。

npm startではローカルサーバーを起動してReactアプリを確認することができるようになります。

Reactでは、srcフォルダ内のApp.jsファイルを書き換えていくことでアプリケーションの中身が変わっていきます。

まとめ

今回はcreate-react-appを使ってReactの環境構築をしました。
1コマンドでReact開発環境を超カンタンに構築できたと思います。

Reactの公式ドキュメントによると、

「Create React AppはReactを学習するのに最適な環境であり、Reactで新しいシングルページアプリケーションを作成するのに最も良い方法です」
引用 : React公式ドキュメント

と書かれています。

Reactは、現在人気がある言語なのでぜひ勉強してみてください！

最後まで読んでいただいてありがとうございました。ではまた。

Big Surを導入するためにクリーン

毎年OSのバージョンアップをするんだが、大体セキュリティの問題で何か起きる。
そして不明な容量圧迫。

結果として、バージョンアップのたびにクリーンするのが定例となってしまった。

よって、前回同様、Big Surに合わせて手順を変えつつメモしていくよ。

セットアップが終わったらやるOSの環境設定

Dockの整理

毎度毎度いらないアプリがDockにプリインされているので、軒並み外していく。

私は一旦ここまで削ります。

トラックパッドの設定

トラックパッドの設定は以下に設定。
※この辺りは人によって好みが違いますので、
使いやすいようにメンテしましょう。

調べる＆データ検出
→３本指でタップ
タップでクリック
→１本指でタップ
Mission Control
→４本指で上にスワイプ

アクセシビリティの設定

アクセシビリティから「ポインタコントロール」を選択し、
「トラックパッドオプション」を選ぶ。

ここでドラッグを有効にし。「３本指のドラッグ」を選択すると、３本指でウィンドウをドラッグできるようになります。

Xcodeのインストール

AppStoreからXcodeをインストールします。

インストールが終了したら、一度起動しておきましょう。

zshのカスタマイズ

作業はまず、Launchpadよりターミナルを実行するところからスタートします。
(その他のグループに入っています。）

ひとまずお気に入りのzshカスタマイズがあるのでそれを利用。

% curl https://gist.githubusercontent.com/mollifier/4979906/raw/43d1c77344dd59fa119ca5b75e7a54e01e668710/zshrc_useful.sh -o .zshrc

zshに関するディレクトリの設定が弱く(775)なってしまっているので、適当な権限(755)に変更して実行する

% chmod 755/usr/local/share/zsh/site-functions
% chmod 755 /usr/local/share/zsh
% source .zshrc

Homebrewのセットアップ

公式に従って以下のコマンドを実行。

なお、Xcodeのインストールが終わっていないとCommandLineToolのインストールが促されますので、従ってインストールを実施します。

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

実行確認

% brew doctor

「Big Surには対応してないよ」という警告は出ますが一旦無視して進めます。
それ以外のエラーが出なければOKです。

brew caskのインストール

brew caskを導入することで、ストアアプリなどのGUIアプリケーションをインストールできるようになります。

brew caskをインストールするために、何かしらのコマンドを実行。

% brew cask list

なお、実行するとbrew list --caskを使えと言われますので、
以降はそれを使うようにします。

AntiVirusのインストール

% brew cask install Avira-antivirus

各ツールのインストール

ブラウザ

Google Chrome

% brew cask install google-chrome

開発ツール

必要な開発ツールを揃えていきます。

Git

% brew install git
% brew cask install sourcetree

Docker

% brew cask install docker

Visual Studio Code

% brew cask install 

拡張機能を一気にインストール

% curl https://raw.githubusercontent.com/hikaruright/install-extensions-for-vscode/master/install-minimum.sh | sh

Emacs(Optional)

宗教戦争が起きないために入れておく。
周囲に過激派がいなければスキップ推奨。

% brew cask install emacs

IntelliJ(Optional)

JavaやKotlinを利用する場合に実行

% brew cask install intellij-idea-ce

Cocoapods(Optional)

iOS開発をする場合に実行

% brew cask install cocoa pods

その他

Alfred

% brew cask install Alfred

Spotlightを無効化し、Alfredのみに変更。

Alfredを起動し、Command + Spaceで起動するようにする。

iTerm2

高機能なターミナルアプリをインストールして使用します。

% brew cask install iterm2

General -> Window より、「Native full Screen Windows」を外す。

Profiles -> Windowより、画面の表示設定を変更。
また、Transparencyを変更し、大体30~40%くらいにすると幸せになれる。

項目名	設定値
Style	Full Screen
Screen	Screen with Cursor
Space	All Spaces

Keys -> Hotkeyの設定を変更し、ホットキーでターミナルが出るようにする。

Double-tap key で Optionを選択すると、
Option連打でターミナルが起動するようになります。

Generalに戻り、「Only Restore Hotkey Window」に変更。

この状態で、Option連打するとターミナルが起動することを確認。

CheatSheet

Command長押しでヘルプを出してくれるツール

brew cask install cheatsheet

Cyberduck

FTP/SFTPツール

brew cask install cyberduck

The Unarchiver

ファイルの圧縮/解凍ツール

brew cask install the-unarchiver

コミュニケーション系ツール

Slack

% brew cask install slack

Discord

% brew cask install discord

Zoom

最近話題のZoom。zoomではなくzoomusなので注意。

% brew cask install zoomus

Figma

% brew cask install figma

その他、便利なツールをApp Storeからダウンロード

Remote Desktop Client

Macだけで済ませるなら不要だが、Windowsへリモートをする場合に必要。
AppStoreからインストール

Drag Queen

ドラッグファイルの一時保管ができるアプリ。
AppStoreからインストール

Bandwidth+

APごとの通信状況を確認できるアプリ。
AppStoreからインストール

Skitch

スクリーンショットに枠や矢印を入れるために使用。
AppStoreからインストール

さいごに

ほとんどの開発環境はdevcontainerに移行したため、
前回からPythonなどの開発環境に関するものは一旦抜いています。

devcontainerの設定についてはこちらを参照してください。