Skip to content

Instantly share code, notes, and snippets.

@manabuyasuda

manabuyasuda/mac-environment.md

Created September 5, 2017 03:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manabuyasuda/8d68689ae274cee8946f5cc771312431 to your computer and use it in GitHub Desktop.
Save manabuyasuda/8d68689ae274cee8946f5cc771312431 to your computer and use it in GitHub Desktop.
Download ZIP
Macの開発環境構築の手順
Raw
mac-environment.md

Mac環境構築

最終更新日：2017.9.5

  1. 不可視ファイルを表示させる
  2. nodebrewのインストール
  3. Homebrewのインストール
  4. Gitのインストール
  5. Source Treeのインストール
  6. Gulpの動作確認
  7. Yarnのインストールと使いかた

今後の追加予定

  • SourcetreeとGitHubの連携設定（ssh公開鍵）

使うもの

  • ターミナル.app（もしくはiTerm2などのコマンドラインアプリ）

不可視ファイルを表示させる

ドットからはじまる不可視ファイルはデフォルトでは非表示になっているので、表示するように設定をします。

不可視ファイルとは

不可視ファイルとはシステム側で使用しているファイルのことで、一般的なユーザーが変更できないようにするため、デフォルトでは非表示になっています。

macOS Sierraの手順

macOS Sierraの場合はcommand + shift + .で表示非表示を切り替えることができます。

macOS Sierra以前の手順

macOS Sierra以前のOSを使っている場合は、ターミナルを開いて以下のコマンドを実行します。

defaults write com.apple.finder AppleShowAllFiles -boolean true

以下のコマンドでFinderを再起動すると、ドットからはじめるファイルが見えるようになります。

killall Finder

nodebrew

Node.jsのバージョン管理をするために、Macではnodebrew（ノードブリュー）を使います。

1.nodebrewをインストールする

以下のコマンドを実行してインストールします（インストールのためのコマンドはドキュメントのコードをコピペしてください）。

curl -L git.io/nodebrew | perl - setup

このように表示されたらインストール完了です。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0
100 23752  100 23752    0     0   8928      0  0:00:02  0:00:02 --:--:--  8928
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

2.nodebrewのパスを通す

nodebrewのインストールはできましたが、パスを通す必要があります。
手順としては、.bash_profileというファイルを作成してexport PATH=$HOME/.nodebrew/current/bin:$PATHというコードを保存します。.bash_profileはMacintosh HD/ユーザ/yasuda/.bash_profileの場所に作成します。
以下の手順にしたがってください。

以下のコマンドでホームディレクトリ（Macintosh HD/ユーザ/ユーザ名）に移動します。cdは「Change Directory」の略です。

cd

以下のコマンドを実行して/Users/yasudaなどと表示されたらOKです。pwdは「Print Working Directory」の略です。

pwd

以下のコマンドでユーザ名以下にある不可視ファイルも含めたファイルを表示させて.bash_profileがあるか確認できます。.nodebrewは先ほどインストールしたので表示されているはずです。

ls -a

.bash_profileというファイルがない場合は以下のコマンドで作成します。touchコマンドは同じ名前のファイルがない場合、ファイルを新規作成することができます。

touch .bash_profile

.bash_profileをテキストエディタで開きます。

open .bash_profile

.bash_profileに以下のコードをペーストします。

export PATH=$HOME/.nodebrew/current/bin:$PATH

nodebrewのヘルプ一覧は以下のコマンドで確認できるので、実行してください。

nodebrew help

一覧が出たらnodebrewが正しくいインストールされています。

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

次にNode.jsのインストールと、使うバージョンを指定していきます。

listコマンドでインストールしているバージョンを確認できます。まだ設定していないのでcurrent: noneなどと表示されます。

nodebrew list

Node.jsの安定版をインストールします。

nodebrew install-binary stable

Node.jsの最新版をインストールします。

nodebrew install-binary latest

listコマンドでインストールしているバージョンを確認しましょう。

nodebrew list

どのバージョンを使うのか指定します。バージョンはnodebrew listで出てきたものをコピペしてください（下記のv4.2.4は例です）。

nodebrew use v4.2.4

もういちどnodebrew listを実行してcurrent:のバージョンが指定したバージョンと同じであればOKです。

v4.2.4
v7.7.4
v7.10.0

current: v4.2.4

さいごにNode.jsのバージョンも確認しておきましょう。先ほどのcurrent:と同じバージョンであればOKです。

node -v

Homebrew

Homebrew（ホームブリュー）はMacの環境構築に必要なパッケージをコマンドラインからインストールしたり、バージョンの管理などができるツールです。

1.Homebrewをインストールする

以下のコマンドを実行して、Homebrewをインストールします（インストールのためのコマンドはドキュメントを確認してください）。

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

enterを押すとMacのパスワードを求められるので入力します。

バージョンの確認をします。

brew -v

このようにバージョンが表示されます。

Homebrew 0.9.5 (git revision 9107; last commit 2016-01-19)

2.動作確認をする

Homebrewが正常に動くがどうか確認するために、以下のコマンドを実行します。

brew doctor

Your system is ready to brew.と表示されたら問題なしです。

警告（Warning:）は直さなくても動作するので、余裕があれば対応します。Error:が出たら対応する必要があります。ヒントが表示されるので参考にします。

  • Homebrewではインストールに成功すると、ビールの絵文字🍺が出ます。
  • Homebrewでインストールしているものはbrew listで確認できます。
  • インストールしているツールが最新版でない場合はbrew update && brew install [ツール名のように実行して、Homebrewとツールを最新版にします。

3.Xcodeをインストールする

※OSによっては不要な場合もあるようです。macOS Sierraは必要ありませんでした。

Xcode（エックスコード）はアプリを作るためのツールです。

brew doctorコマンドでXcodeのインストールを促されたら、Mac App Storeで「Xcode」を検索して、インストールしてください。
OSのバージョンによってはインストールできるXcodeのバージョンがMac App Storeにない場合もあります。Appleの開発者向けページかstackoverflowにあるリンクからダウンロードしてください。

以下のコマンドを実行して「Command Line Tools」というものもインストールしておきます。

xcode-select --install

Git

Git（ギット）はソースコードの変更履歴を管理・追跡するバージョン管理ツールです。
基本的にはコマンドを入力する必要がありますが、GitHub（ギットハブ）やBacklog（バックログ）のようなGitを使ったウェブサービスやSourceTree（ソースツリー）のようなアプリを使って操作することが多いです。

Gitをインストールする

Homebrewを使ってGitをインストールします。

brew install git

Homebrewでインストールされているか確認することができます。

brew list

バージョンの確認をします。

git --version

Gitを最新バージョンにするには以下のコマンドを実行します。

brew update && brew upgrade git

Source Treeのインストール

こちらの記事の手順でOK。

手順としては、

  1. Source Treeをダウンロード
  2. Source Treeをインストール
  3. Atlassianのアカウントを作成
  4. Atlassianのアカウントを認証
  5. GitHubなどの連携はしないのでSkip Setup

GitHubと連携する場合はssh認証鍵の設定が必要です。
※後日追加予定。

Gulpの動作確認

Gulp環境の動作を確認するため、以下のリポジトリをダウンロードして実際に動かしてみます。

website-template

[Clone ot download]ボタンをクリック、[Download ZIP]を選択します。

ZIPファイルを解凍して、フォルダ（website-itemplate-master）を任意のディレクトリに移動します。

フォルダのパスをcommand + Cでコピー、cdコマンドの後にペーストして実行します。

cd コピーしたパス

packege.jsonに設定されているパッケージをすべてインストールします。

npm install

以下のコマンドを実行するとGulpが実行され、PugやSassのコンパイル、ブラウザが立ち上がりプレビュー表示などが自動で処理されます。

npm start

Yarnのインストールと使いかた

Yarn（ヤーン）はnpm（エヌピーエム、 Node Package Manager）と併用するツールで、以下のようなメリットがあります。

  • npmのパッケージのバージョンを厳密に固定できる
  • パッケージの依存関係を確認して、問題があった場合は警告してくれる
  • 初回のインストール時間を短縮できる（パッケージの重複をなくしてくれる）

人気のあるライブラリなどが採用し始めているので、余裕があればYarnもインストールしておきましょう。

1.Yarnのインストールをする

npm install -g yarn

/Users/yasuda/.nodebrew/node/v7.10.0/bin/yarnのように、現在使用中のバージョンのnodebrew配下にyarnがインストールされます。

2.Yarnのパスを通す

.bash_profile内に以下を追記してパスを通します（なくても通る）。

export PATH="$PATH:`yarn global bin`"

バージョンの確認をします。

yarn --version

Yarnのヘルプを表示します。

yarn -h

3.yarn.lockファイルの作成

既存プロジェクトでpackage.jsonがある場合は、以下のコマンドでyarn.lockファイルが作成されます。

yarn

package.jsonがない場合は以下のコマンドです。

yarn init

開発用のパッケージのインストール（npmのnpm install --save-devと互換）は以下のようにコマンドを実行します。

yarn add --dev [package名]

パッケージのバージョンを指定してのインストールは以下のようにコマンドを実行します。

yarn add --dev [package名]@[バージョン]

パッケージのバージョンは以下のコマンドで確認できます。

npm info [package name>] versions

プロジェクトに必要なパッケージのインストール（npmのnpm install --saveと互換）は以下のコマンドを実行します。

yarn add [package名]

互換性のないパッケージがあるとエラーがでます。

error csswring@5.1.1: The engine "node" is incompatible with this module. Expected version ">=5.0.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

パッケージを変更して、再度yarnを実行するとyarn.lockファイルの作成ができました。

[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 159.99s.

Error: ENOENT: no such file or directory,のように特定のパッケージが読み込めない場合は、パッケージのアップグレードで直ることもあります。

yarn upgrade [パッケージ名]

4.Yarnを導入済みのプロジェクトの始めかた

yarn.lockのパッケージをインストールするには以下のコマンドを実行します。npm installと同じ要領です。

yarn install

package.jsonのscriptを実行する場合は、以下のコマンドを実行します。npm startと同じ要領です。

yarn start

npm run [スクリプト名]のように実行したい場合は以下のコマンドを実行します。

yarn run [スクリプト名]

Homebrewの警告を直したメモ

Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry and just ignore them. Thanks!

Warning: The /usr/local is not writable.

You should probably change the ownership and permissions of /usr/local
back to your user account.
  sudo chown -R $(whoami) /usr/local

Warning: The /usr/local directory is not writable.
Even if this directory was writable when you installed Homebrew, other
software may change permissions on this directory. Some versions of the
"InstantOn" component of Airfoil are known to do this.

You should probably change the ownership and permissions of /usr/local
back to your user account.
  sudo chown -R $(whoami):admin /usr/local

Warning: Unbrewed dylibs were found in /usr/local/lib.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected dylibs:
    /usr/local/lib/libqmi_api.dylib

Warning: Unbrewed header files were found in /usr/local/include.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected header files:
    /usr/local/include/node/ares.h
    /usr/local/include/node/ares_version.h
    /usr/local/include/node/nameser.h
    /usr/local/include/node/node.h
    /usr/local/include/node/node_buffer.h
    /usr/local/include/node/node_internals.h
    /usr/local/include/node/node_object_wrap.h
    /usr/local/include/node/node_version.h
    /usr/local/include/node/openssl/opensslconf.h
    /usr/local/include/node/pthread-fixes.h
    /usr/local/include/node/stdint-msvc2008.h
    /usr/local/include/node/tree.h
    /usr/local/include/node/uv-bsd.h
    /usr/local/include/node/uv-darwin.h
    /usr/local/include/node/uv-errno.h
    /usr/local/include/node/uv-linux.h
    /usr/local/include/node/uv-sunos.h
    /usr/local/include/node/uv-unix.h
    /usr/local/include/node/uv-win.h
    /usr/local/include/node/uv.h
    /usr/local/include/node/v8-debug.h
    /usr/local/include/node/v8-defaults.h
    /usr/local/include/node/v8-profiler.h
    /usr/local/include/node/v8-testing.h
    /usr/local/include/node/v8.h
    /usr/local/include/node/v8config.h
    /usr/local/include/node/v8stdint.h
    /usr/local/include/node/zconf.h
    /usr/local/include/node/zlib.h

Warning: You have unlinked kegs in your Cellar
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
    git
    node

Warning: Your Xcode (7.0) is outdated
Please update to Xcode 7.1.
Xcode can be updated from the App Store.

Warning: Your Homebrew is outdated.
You haven't updated for at least 24 hours. This is a long time in brewland!
To update Homebrew, run `brew update`.

「24時間以上アップデートしていないのでbrew updateでアップデートしてね」とある。

Warning: Your Homebrew is outdated.
You haven't updated for at least 24 hours. This is a long time in brewland!
To update Homebrew, run `brew update`.

brew updateをすると/usr/localディレクトリが書き込みできない、chownコマンドでパーミションを変更してねと出る。

Warning: The /usr/local is not writable.

You should probably change the ownership and permissions of /usr/local
back to your user account.
  sudo chown -R $(whoami) /usr/local

chownコマンドは所有者とグループを変更するコマンド。所有者がrootの場合はsudoが必要。

`sudo chown -R 所有者名:グループ名 ファイル名やディレクトリ名`

書いてある通りsudo chown -R $(whoami):admin /usr/localを実行します。

パスワードを入力して、brew updateをする。

アップデートに成功すると、所有権を元に戻しても大丈夫だと表示されます。

Homebrew no longer needs to have ownership of /usr/local. If you wish you can
return /usr/local to its default ownership with:
  sudo chown root:wheel /usr/local
Error: The /usr/local directory is not writable.
Even if this directory was writable when you installed Homebrew, other
software may change permissions on this directory. Some versions of the
"InstantOn" component of Airfoil are known to do this.

You should probably change the ownership and permissions of /usr/local
back to your user account.
  sudo chown -R $(whoami):admin /usr/local

パスワードを入力して、brew updateをする。

Updated Homebrew from b453f0ba to 735f5e44.
==> New Formulae
acmetool                                 libmwaw                                
agedu                                    libphonenumber                         
amdatu-bootstrap                         libproxy                               
ansible-cmdb                             mat                                    
apcupsd                                  mediaconch                             
argon2                                   metabase                               
artifactory-cli-go                       moz-git-tools                          
libvirt                                
==> Renamed Formulae
hamsterdb -> upscaledb                   offline-imap -> offlineimap            
kotlin-compiler -> kotlin              
==> Deleted Formulae
ffts                       ipe                        perlmagick               
git-encrypt                kbtin                      rbenv-gem-rehash         
gptfdisk                   net6                     
groonga-normalizer-mysql   p11-kit

ここを見てnode_modulesをいったん削除してから、nodeをインストールし直すといいと書いてある。

rm -rf /usr/local/lib/node_modules
brew uninstall node
brew install node

2つ目のコマンド、

brew uninstall node

Uninstalling /usr/local/Cellar/node/5.1.0... (2,827 files, 28.6M)

インストール完了。

Please note by default only English locale support is provided. If you need
full locale support you should:
  `brew reinstall node --with-full-icu`

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/5.5.0: 3,135 files, 35.5M

ビールの絵文字がでたらOK。

壊れたシンボリックリンクがあるということなので、

Warning: Broken symlinks were found. Remove them with `brew prune`:
  /usr/local/bin/stree

コマンドを実行。

brew prune
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment