Windowsユーザーが手に入れたMacBookに対してしたこと（開発環境構築など）

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とは何者か。仕組みについて調べてみた](http://qiita.com/omega999/items/6f65217b81ad3fffe7e6)という記事で、homebrew＝「自家醸造」という意味だと知りました。
[公式ページ](http://brew.sh/index_ja.html)によると、

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

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

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

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

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

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

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

```bash:bash
$ brew install nodebrew
```

で、できました。
[Githubのnodebrewのページ](https://github.com/hokaccha/nodebrew)を見たら、Homebrewがなくてもインストールはできるようですが、Homebrewだと、上記コマンド一発なので楽でした。


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

```bash:bash
$ vi ~/.bash_profile
```
で、編集モードに入り、

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

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

```bash:bash
$ source ~/.bash_profile
```
と打つことで、パスが追加された.bash_profileが作成されました。

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

* [PATHを通すために環境変数の設定を理解する (Mac OS X)](http://qiita.com/soarflat/items/d5015bec37f8a8254380)
* [本当に正しい .bashrc と .bash_profile の使ひ分け](http://qiita.com/magicant/items/d3bb7ea1192e63fba850)

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

```bash:bash
$　nodebrew install-binary stable
```

そして、

```bash:bash
$　nodebrew use stable
```
と指定することで、Node.jsを使用できるようになりました。

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

```bash:bash
$ nodebrew list
```

で確認できました。

(参考記事)
[Node.jsをMacにインストールしてnpmを使えるようにする](http://www.hirooooo-lab.com/entry/development/install-node)

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

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

```bash:bash
$ brew install git
```
で、インストールできました。

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

(参考記事)
[HomebrewでGitをインストールする](http://qiita.com/micheleno13/items/133aee005ae37c28960e)
[なんかやばいらしいのでgitのバージョン上げる](http://qiita.com/ysekky/items/4e4b0e1cc51e618e725b)


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

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

```bash:bash
$ npm i -g gulp
```

## ローカルにインストール

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

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

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

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

```bash: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:bash
$ vi gulpfile.js
```

```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ことはじめ）](http://qiita.com/hashrock/items/15f4a4961183cfbb2658)


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

```bash:bash
$ brew install mysql
```

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

```bash:bash
$ server.mysql start
```
で起動。

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

```bash:bash
$ mysql -uroot -p
```
パスワードを訊かれるので、mysql_secure_installationで設定したパスワードを入力し、接続確認ができました。

(参考記事)
[MacでHomebrewを使ってMySQLをインストールする](http://chi-kun.hatenablog.com/entry/2016/05/20/203816)
[MacにMySQLをインストールして触ってみる](http://dev.classmethod.jp/etc/mac_mysql_install/)

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