【今日から携わる】新しいMacを買ったエンジニアのためのオススメ初期設定の方法&開発環境をさらしてみる。

新しくMacを買ったフロントエンジニアが、戸惑うことなく初期設定と開発環境をと整えることができるように自分の設定を公開します。

・Macの設定の巻
・おすすめソフトの巻

# Macの設定の巻

・Wifi
・ディスプレイ
・省エネルギー（バッテリーの設定）
・キーボード
・スマート引用符とスマートダッシュの無効化（1/25追記）
・トラックパッド
・共有の設定（コンピューター名の変更）
・日付と時刻
・セキュリティとプライバシーx
・ユーザとグループ（セキュリティのため）
・dock
・Finder
・デスクトップのアイコンをグリッドに沿うように設定
・ミッションコントロール（1/25追記）

## Wifiの設定

<img width="389" alt="スクリーンショット_2019-01-22_23_14_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/be9ad129-ad58-2d53-2c1b-1a26c2aeb9da.png">

# 「システム環境設定」の設定

<img width="846" alt="スクリーンショット_2019-01-22_23_36_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/2e2df5a7-bfd8-0a2a-a6d6-15c6103e93a6.png">

▼以下の項目を設定していきます。
![スクリーンショット_2019-01-22_23_29_45-2.png](https://qiita-image-store.s3.amazonaws.com/0/254652/8746b3dd-a9c8-8efd-df62-632f16f19d1e.png)

##ディスプレイの設定

スペースを拡大させる
<img width="664" alt="スクリーンショット_2019-01-22_23_31_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/cf94fdbd-48fa-88be-324d-7c6010f58d30.png">

## 省エネルギーの設定（バッテリーの設定）

![スクリーンショット 2019-01-22 23.27.38.png](https://qiita-image-store.s3.amazonaws.com/0/254652/eff8120e-08fd-69b2-15ac-0c694b0b6b66.png)
![スクリーンショット 2019-01-22 23.27.45.png](https://qiita-image-store.s3.amazonaws.com/0/254652/a08debfd-6610-63d7-8166-fa00f32b12b1.png)

##キーボードの設定


▼勝手に大文字に変更されたり、スペルを変更されることを防ぎたいですよね。
![gif.gif](https://qiita-image-store.s3.amazonaws.com/0/254652/f836279e-24ef-b5d1-3401-ebc938e48bda.gif)
これが初期設定なことにイラっと・・・しませんか？

システム環境設定＞キーボード＞ユーザー辞書
<img width="660" alt="スクリーンショット_2019-01-22_22_57_42-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/a59d282a-9428-6cf9-b91e-39b8ef323a29.png">

## ▼「ライブ変換」の`チェックを外す`

<img width="228" alt="スクリーンショット_2019-01-22_23_01_35.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/57a1c1eb-7ff7-92f5-2cce-97886d04ac3a.png">
※1/25からライブ変換を「ON」にしています。
慣れると、タイピングが超絶早くなるらしいので、おすすめです！


## スマート引用符とスマートダッシュの無効化（1/25追記）
<img width="666" alt="スクリーンショット_2019-01-25_22_58_55-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/50a21792-3b0a-82e0-5c7e-b32020b4444c.png">

<img width="736" alt="スクリーンショット_2019-01-25_23_01_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/22f81913-4d17-b964-5e35-1a244b6fbdb1.png">



## トラックパッドの設定
トラックパッドは一番速くうごくように設定して、あとは全てにチェックを入れます。

・すべて　→ `チェックする`
・軌跡の速さ　→　`速い`
![スクリーンショット 2019-01-22 23.20.14.png](https://qiita-image-store.s3.amazonaws.com/0/254652/7b94b316-61f4-b165-6881-e143019248d3.png)
![スクリーンショット 2019-01-22 23.20.20.png](https://qiita-image-store.s3.amazonaws.com/0/254652/e0090d66-654a-3bc1-fcd1-c65668e67316.png)
![スクリーンショット 2019-01-22 23.20.29.png](https://qiita-image-store.s3.amazonaws.com/0/254652/548cb30c-2e6b-a448-e1d4-eee4743a2f46.png)

## 共有の設定（コンピューター名の変更）

システム環境設定＞共有
![コンピューター名の変更.png](https://qiita-image-store.s3.amazonaws.com/0/254652/4f8667d7-5308-583e-1db1-ae934aeb5e13.png)

##日付と時刻の設定
日付を表示させるようにします。

システム環境設定＞日付と時刻＞時計
![スクリーンショット_2019-01-22_23_23_01.png](https://qiita-image-store.s3.amazonaws.com/0/254652/75ae77ac-bada-51a0-42b7-1472ed763dec.png)

## セキュリティとプライバシーの設定
Macのセキュリティーを高めます。
![スクリーンショット_2019-01-22_23_51_34.png](https://qiita-image-store.s3.amazonaws.com/0/254652/b14fb6ac-4910-69f1-a723-f6efbaa3191b.png)

## ユーザとグループの設定
![スクリーンショット_2019-01-22_23_54_46.png](https://qiita-image-store.s3.amazonaws.com/0/254652/e31abf02-1de7-1bfd-393f-d0fd54d830db.png)

## dockの設定
![スクリーンショット 2019-01-23 0.09.25.png](https://qiita-image-store.s3.amazonaws.com/0/254652/8936217b-5b61-20f2-fa86-f486684a52ce.png)


## Finderの設定
### パスバーを表示させる
Finderをアクティブにした状態でおこなう
<img width="407" alt="スクリーンショット_2019-01-22_23_57_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/ad711c69-a583-ac36-16bc-de9dc93cc636.png">

### 拡張子を表示させる `Shift + Cmd + .`
Finderをアクティブにした状態で
環境設定＞詳細
<img width="310" alt="スクリーンショット_2019-01-23_0_02_54.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/103be90f-121b-6138-bfab-d59e85499c78.png">

### その他のFinderの設定
<img width="330" alt="スクリーンショット 2019-01-23 0.10.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/3a2fb4a8-0533-de35-0cff-edc941e20701.png">
<img width="351" alt="スクリーンショット 2019-01-23 0.11.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/4cc12361-a283-ac4d-4317-2e3229dabfc8.png">

## デスクトップのアイコンをグリッドに沿うように設定する
<img width="451" alt="スクリーンショット_2019-01-23_0_13_43.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/801b1b92-5b60-039e-721c-ecaca8faf4b7.png">


## ミッションコントロールの設定（1/25追記）
タッチパネルを三本指で上にスワイプすると出てくるやつです。
勝手に場所を移動する癖のある方。それを解除しちゃいましょう！

<img width="661" alt="スクリーンショット_2019-01-25_13_55_33.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/ce8d7085-a1bb-1dd1-bcf8-62bd41c2ae9c.png">

これ・・・地味にいいです。不便に思ったらググりましょう！
「ミッションコントロール　設定　便利」
<img width="809" alt="スクリーンショット_2019-01-25_13_54_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/ad922180-dea8-b028-46ce-398db5b80128.png">



# おすすめソフトの巻

・Google Chrome
・Firefox
・Visual Studio Code
・clipy（Mac専用コピペ用ツール）
・skitch(撮る。描き込む。共有する )
・adobe
・PicGIF Lite（「QuickTime Player」と合わせて、GIFを簡単に作る）
・iTerm2（高機能なターミナル）
・SourceTree
・Homebrew
・nodebrew（Homebrewをインストール後）
・Node.js
・Gulp
・docker

## Google Chrome
https://www.google.com/intl/ja_ALL/chrome/

## Firefox
https://www.mozilla.org/ja/firefox/new/

## Visual Studio Code
https://code.visualstudio.com/
[【今日から携わる】はじめてのVisual Studio Code入門（オススメの設定・プラグイン・使い方）](https://qiita.com/abeno/items/6366bfe1ea8e5f6ee07c)
<img width="891" alt="スクリーンショット_2019-01-23_0_47_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/6a25f0f4-13b2-1eb3-ebf7-d0c694e84f03.png">

## clipy（Mac専用コピペ用ツール）
https://clipy-app.com/
コピーしたテキストや画像などの履歴を、簡単に呼び出すことができるようになるソフトです。

![スクリーンショット 2019-01-25 23.09.16.png](https://qiita-image-store.s3.amazonaws.com/0/254652/57eab3aa-c416-ac8a-2cd1-06c84da641cb.png)

<img width="653" alt="スクリーンショット_2019-01-25_23_12_35.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/829eee40-5dd9-88e9-d460-ccd2c279e74c.png">

<img width="537" alt="スクリーンショット 2019-01-25 23.14.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/fed53fa4-8d17-566a-23a4-3b5b19088044.png">




## skitch(撮る。描き込む。共有する )
https://itunes.apple.com/jp/app/skitch/id425955336?mt=12
直感的に使えて便利です。
![スクリーンショット 2019-01-25 23.15.31.png](https://qiita-image-store.s3.amazonaws.com/0/254652/92c629f1-1c08-ca7e-7e9d-c731b5bac4d5.png)

<img width="1084" alt="スクリーンショット_2019-01-23_0_22_15-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/94bcbd49-3977-5f70-29cf-8d1d3bbb7662.png">

## adobe
https://www.adobe.com/jp/

## PicGIF Lite（「QuickTime Player」と合わせて、GIFを簡単に作る）
https://itunes.apple.com/jp/app/picgif-lite/id844918735?mt=12
![スクリーンショット 2019-01-25 23.16.04.png](https://qiita-image-store.s3.amazonaws.com/0/254652/cd293ce6-c986-3003-d973-2b66c48c4553.png)

## iTerm2（高機能なターミナル）
https://www.iterm2.com/
![スクリーンショット 2019-01-25 23.16.33.png](https://qiita-image-store.s3.amazonaws.com/0/254652/0462ac74-07f7-53c6-fd14-aaa5f3085e36.png)

ショートカットでターミナルをフルスクリーンで出せたり、`cmd+d`や`shift+cmd+d`で画面を分けることが簡単にできて便利

![iterm.gif](https://qiita-image-store.s3.amazonaws.com/0/254652/a994160d-2dcd-d2c1-5b7a-37ba07291a07.gif)

設定は以下の通りです。

<img width="571" alt="スクリーンショット_2019-01-24_1_09_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/2936b324-7a5e-7beb-3deb-796bbb8eb738.png">

<img width="1115" alt="新規を防ぐ.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/480af9df-c775-bc0c-d76f-f03292abcffe.png">

<img width="917" alt="フルスクリーン.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/cb0bdb7b-f86c-2b32-bd16-5511fb02868f.png">

<img width="1061" alt="スクリーンショット_2019-01-24_1_29_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/2b687a08-df14-715e-a846-d04cf2209aba.png">


<img width="951" alt="ショートカット.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/ea9033ee-fdcf-327b-1321-41bc1a29ce14.png">


## SourceTree
https://ja.atlassian.com/software/sourcetree
<img width="1232" alt="スクリーンショット 2019-01-25 23.17.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/3da57135-ff34-7b3e-41b5-74c84326d802.png">

Git リポジトリの操作が簡単なのでおすすめです。
だけど、簡単すぎるために、チェックアウトなどをしっかり行う癖がつかなくて、最初は
「赤いエラー文が出てきてプッシュできないよー！どーしていいか分からないよー！」ってなり、プッシュ恐怖症になります。

自分は、一度、ソースツリーをやめて、ターミナルからgitコマンドで操作を行うようにしました。
そうすると、gitの基礎が分かるようになったのです。
それから、ソースツリーの操作も安心してできるようになりました。
今では、チェックアウト、プッシュ、強制プッシュ、マージなど、自信を持って作業できます。

gitもsourcetreeも友達です。

怖がらずにどんどんリモートにプッシュしていきましょう！

![スクリーンショット_2019-01-25_23_32_38.png](https://qiita-image-store.s3.amazonaws.com/0/254652/b2046ad2-fcc6-20ef-d55c-ab83085e7da1.png)



## Homebrew
http://brew.sh/index_ja.html

```terminal:ターミナルからインストールする場合
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
↓↓↓
brew help
//エラーがでなければ　OK
```

## nodebrewのインストール（Homebrewをインストール後）
https://github.com/hokaccha/nodebrew#install
▼参考
https://qiita.com/33yuki/items/bae442fa6314bd8f9d7a

```terminal
brew install nodebrew
↓↓↓
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bash_profile
↓↓↓
source ~/.bash_profile
↓↓↓
which nodebrew
↓↓↓
nodebrew setup
↓↓↓
nodebrew -help
//エラーがでなければOK
```

## Node.jsのインストール

```
node -v
//nodeが入っていないことを確認する
//入っていたらアンインストールする
↓↓↓
nodebrew ls-all
//バージョンの確認をする
↓↓↓
nodebrew install-binary stable
// stable：安定板、latest：最新版
↓↓↓
nodebrew use stable
//使用するバージョンを指定する
↓↓↓
which node
↓↓↓
which npm
//場所の確認をする
↓↓↓
node -v
↓↓↓
npm -v
// バージョンの確認をする
```

## Gulpインストール
[【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー）](https://qiita.com/abeno/items/16275556c751b5615937#2-%E7%B0%A1%E5%8D%98%E3%81%AA%E5%AE%9F%E8%B7%B5)
<img width="771" alt="スクリーンショット 2019-01-23 20.57.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/0f77ef3c-313a-b738-fda8-edcc3f92b68f.png">


## docker
https://docs.docker.com/docker-for-mac/install/
<img width="1136" alt="スクリーンショット_2019-01-23_0_28_48.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/177294af-d6a0-269d-6769-1ab8bf25fdb0.png">

<img width="1148" alt="スクリーンショット_2019-01-23_0_29_05-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/3016b02c-a3bb-3859-fd03-c13a78b24988.png">


<img width="712" alt="スクリーンショット_2019-01-23_0_29_29.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/1f826633-bb9c-f664-6274-2870d65b7105.png">

<img width="1153" alt="スクリーンショット_2019-01-23_0_29_41.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/0bad63e2-fea4-3665-918d-431f9f60ea7f.png">

## WordPressの環境を構築する
[【今日から携わる】3分でWordPress開発環境の構築をする方法（docker-composeを使用）](https://qiita.com/abeno/items/1063f871b0de290202b9)

```
ファイルをダウンロード
https://github.com/abenosite/wp-docker-compose
↓↓↓
ターミナルで、docker-compose.ymlファイルがある場所に移動する
↓↓↓
docker-compose up -d
↓↓↓
http://localhost:8080
//ブラウザで確認
```