Windowsユーザーである私が、MacBookの開発環境構築にチャレンジした記録です。
もし、間違っているところがあれば、ご指摘・ご教示いただけると幸いです。

前提

OS: macOS Sierra 10.12.1
主な用途： Webサイト制作、CMS構築
当人スキル：　
WindowsではGUIツールと仲良しだった。
でも昔触ったLinuxコマンドやviコマンドのことが忘れられない。
Macのショートカットが覚えられないけど、ターミナルを使いたいからがんばる。

やったこと

以下をインストールしました。

環境構築系

Homebrew（パッケージ管理システム）
nodebrew（Node.jsのバージョン管理システム）
Node.js(javascript実行環境)
Git(バージョン管理システム)
gulp(タスクランナー)
MySQL(データベース)

GUIなツール

PhpStorm(IDE)
CotEditor（テキストエディタ）
Kobito（マークダウンエディタ）
FileZilla（FTPクライアント）
MAMP（ローカル開発環境）

今回は、環境構築のために、ターミナルと対話を重ねたことを書いていきます。

npmを使うためにやったこと

色々とインストールするにはnpmが便利、ということで、Node.jsをインストールする方法を調べていたら、nodebrewを使ってインストールすると、後々良いらしいことがわかりました。Node.jsのバージョンを管理できるそうで、Windowsでいうところのnodist的な位置付けかと。

Homebrewをインストール

そのnodebrewをインストールするために、Homebrewなるものがあると知りました。Macのパッケージ管理システムとのこと。同じ用途では、MacPortsというツールが有名なようですが、後発優位なのかHomebrewを勧める記事をよく見かけました。

homebrewとは何者か。仕組みについて調べてみたという記事で、homebrew＝「自家醸造」という意味だと知りました。
公式ページによると、

Homebrew は、Apple が用意していないあなたの必要なものをインストールします。

とのこと。だから自家醸造なんですね。コンセプトが素敵です。
ロゴをよく見ると、ビールにりんごが浸かっていて、かわいらしいです。

公式サイトトップに書いてあるコマンドでインストールしました。

bash

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

インストール後、不具合がないかを調べるコマンドが、

bash

$ brew doctor

というのも、遊び心があってよいです。
「問題ないよ」と言われたので、次。

nodebrewをインストール

Homebrewから、nodebrewをインストールします。

bash

$ brew install nodebrew

で、できました。
Githubのnodebrewのページを見たら、Homebrewがなくてもインストールはできるようですが、Homebrewだと、上記コマンド一発なので楽でした。

パスを通す

で、このままNode.jsをインストール！と思ったら、先にパスを通す必要がありそうです。
私の場合、パスを記述する.bash_profileというファイル自体がなかったため、

bash

$ vi ~/.bash_profile

で、編集モードに入り、

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

と記述して保存。
その後、ターミナルから

bash

$ source ~/.bash_profile

と打つことで、パスが追加された.bash_profileが作成されました。

パスの設定についてはこちらのページの説明で理解が深まりました。

Node.jsをインストール

そして、ようやくNode.jsをインストール。

bash

$　nodebrew install-binary stable

そして、

bash

$　nodebrew use stable

と指定することで、Node.jsを使用できるようになりました。

今回は、stable（安定版）をインストールしましたが、latest（最新版）やバージョンを指定することも可能なようです。インストールされているNode.jsのバージョンと、使用されているバージョンは、

bash

$ nodebrew list

で確認できました。

(参考記事)
Node.jsをMacにインストールしてnpmを使えるようにする

Gitをインストール

Node.jsをインストールした理由は、npmでGitをインストールするためでした。
しかし、手順を調べていくうちに、
「Macには標準でGitが入っていますが」
という言葉に遭遇。
恐る恐る、git --versionと打ってみると・・・ちゃんとバージョンが表示されました。

ま、まぁ、gulpとか入れるし、npmだけの用途でNode.jsを入れたわけじゃないから・・・と思い直し、いっそのことHomebrewでGitを管理することにしました。

bash

$ brew install git

で、インストールできました。

参考にさせていただいた記事には、パスの優先順位を変更する必要があるという記載がありましたが、私の環境ではGitが存在する/user/local/bin/がパスの前方に記述されていたため、ターミナルを再起動しただけで、今回インストールしたGitを見にいくようになりました。
PhpStorm内で利用するGitのパスは、Preference->VersionControl->Gitから変更しました。

(参考記事)
HomebrewでGitをインストールする
 なんかやばいらしいのでgitのバージョン上げる

gulpをインストール

色々と自動化したいので、gulpをインストールします。

グローバルにインストール

bash

$ npm i -g gulp

ローカルにインストール

プロジェクトのディレクトリに移動し、

bash

$ npm init

で、package.jsonを作ります。
そして、以下のコマンドで、ローカルにインストール。

bash

$ npm i -D gulp -s

node_modules/ディレクトリができました。
オプションに-sを指定しているのは、package.jsonに依存ファイルとして追記するためです。

パッケージのインストール

bash

$ npm i -D [パッケージ名] -s

で、使用したいパッケージをインストール。
グローバルでインストールするか悩ましくもありましたが、
今後、プロジェクトを作るときは、package.jsonからインストールする予定なので、
-Dをつけてローカルにインストールすることにしました。

今回インストールしたのは以下の通り。

gulp-sass
gulp-sourcemaps
gulp-postcss
autoprefixer
gulp-plumber
imagemin-pngquant
gulp-imagemin
browser-sync

gulpにやってもらいたいことを指定

gulp.jsファイルを作り、やってもらいたいことを指定します。

bash

$ vi gulpfile.js

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var plumber = require('gulp-plumber');

//sass
gulp.task('sass',function(){
    return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber({
      errorHandler: function(err) {
        console.log(err.messageFormatted);
        this.emit('end');
      }
    }))
    .pipe(sass({style : 'expanded'}))
    .pipe(
      postcss([
        autoprefixer({
          browsers: ['last 2 version','ie 9'],
          cascade: false
        })
      ])
    )
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'));
});

//watch
gulp.task('watch', function () {
    gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);

試行錯誤しながら、sassのコンパイル、ソースマップの出力、ベンダープレフィックスの付与を自動でやってくれるタスクを作りました。
画像の圧縮と、ブラウザのauto reloadも予定してましたが、力尽きたのでいつの日か。

(参考記事)
フロントエンド開発の３ステップ（npmことはじめ）

MySQLをインストール

Homebrewで、MySQLもインストールします。

bash

$ brew install mysql

インストールが完了したら、

bash

$ server.mysql start

で起動。

bash

$ mysql_secure_installation

で、表示される質問に対して答え、セキュリティの設定をします。
ローカルの開発環境ですが、念のため全て「y」（Yes)にしました。

bash

$ mysql -uroot -p

パスワードを訊かれるので、mysql_secure_installationで設定したパスワードを入力し、接続確認ができました。

(参考記事)
MacでHomebrewを使ってMySQLをインストールする
 MacにMySQLをインストールして触ってみる

後からMAMPをインストールしたので、被っちゃったけど、まぁいいか。