Edited at

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

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

・Macの設定の巻

・おすすめソフトの巻


Macの設定の巻

・Wifi

・ディスプレイ

・省エネルギー(バッテリーの設定)

・キーボード

・スマート引用符とスマートダッシュの無効化(1/25追記)

・トラックパッド

・共有の設定(コンピューター名の変更)

・日付と時刻

・セキュリティとプライバシーx

・ユーザとグループ(セキュリティのため)

・dock

・Finder

・デスクトップのアイコンをグリッドに沿うように設定

・ミッションコントロール(1/25追記)


Wifiの設定

スクリーンショット_2019-01-22_23_14_13.png


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

スクリーンショット_2019-01-22_23_36_37.png

▼以下の項目を設定していきます。

スクリーンショット_2019-01-22_23_29_45-2.png


ディスプレイの設定

スペースを拡大させる

スクリーンショット_2019-01-22_23_31_44.png


省エネルギーの設定(バッテリーの設定)

スクリーンショット 2019-01-22 23.27.38.png

スクリーンショット 2019-01-22 23.27.45.png


キーボードの設定

▼勝手に大文字に変更されたり、スペルを変更されることを防ぎたいですよね。

gif.gif

これが初期設定なことにイラっと・・・しませんか?

システム環境設定>キーボード>ユーザー辞書

スクリーンショット_2019-01-22_22_57_42-2.png


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

スクリーンショット_2019-01-22_23_01_35.png

※1/25からライブ変換を「ON」にしています。

慣れると、タイピングが超絶早くなるらしいので、おすすめです!


スマート引用符とスマートダッシュの無効化(1/25追記)

スクリーンショット_2019-01-25_22_58_55-2.png

スクリーンショット_2019-01-25_23_01_16.png


トラックパッドの設定

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

・すべて → チェックする

・軌跡の速さ → 速い

スクリーンショット 2019-01-22 23.20.14.png

スクリーンショット 2019-01-22 23.20.20.png

スクリーンショット 2019-01-22 23.20.29.png


共有の設定(コンピューター名の変更)

システム環境設定>共有

コンピューター名の変更.png


日付と時刻の設定

日付を表示させるようにします。

システム環境設定>日付と時刻>時計

スクリーンショット_2019-01-22_23_23_01.png


セキュリティとプライバシーの設定

Macのセキュリティーを高めます。

スクリーンショット_2019-01-22_23_51_34.png


ユーザとグループの設定

スクリーンショット_2019-01-22_23_54_46.png


dockの設定

スクリーンショット 2019-01-23 0.09.25.png


Finderの設定


パスバーを表示させる

Finderをアクティブにした状態でおこなう

スクリーンショット_2019-01-22_23_57_16.png


拡張子を表示させる Shift + Cmd + .

Finderをアクティブにした状態で

環境設定>詳細

スクリーンショット_2019-01-23_0_02_54.png


その他のFinderの設定

スクリーンショット 2019-01-23 0.10.59.png

スクリーンショット 2019-01-23 0.11.38.png


デスクトップのアイコンをグリッドに沿うように設定する

スクリーンショット_2019-01-23_0_13_43.png


ミッションコントロールの設定(1/25追記)

タッチパネルを三本指で上にスワイプすると出てくるやつです。

勝手に場所を移動する癖のある方。それを解除しちゃいましょう!

スクリーンショット_2019-01-25_13_55_33.png

これ・・・地味にいいです。不便に思ったらググりましょう!

「ミッションコントロール 設定 便利」

スクリーンショット_2019-01-25_13_54_34.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入門(オススメの設定・プラグイン・使い方)

スクリーンショット_2019-01-23_0_47_02.png


clipy(Mac専用コピペ用ツール)

https://clipy-app.com/

コピーしたテキストや画像などの履歴を、簡単に呼び出すことができるようになるソフトです。

スクリーンショット 2019-01-25 23.09.16.png

スクリーンショット_2019-01-25_23_12_35.png

スクリーンショット 2019-01-25 23.14.05.png


skitch(撮る。描き込む。共有する )

https://itunes.apple.com/jp/app/skitch/id425955336?mt=12

直感的に使えて便利です。

スクリーンショット 2019-01-25 23.15.31.png

スクリーンショット_2019-01-23_0_22_15-2.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


iTerm2(高機能なターミナル)

https://www.iterm2.com/

スクリーンショット 2019-01-25 23.16.33.png

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

iterm.gif

設定は以下の通りです。

スクリーンショット_2019-01-24_1_09_47.png

新規を防ぐ.png

フルスクリーン.png

スクリーンショット_2019-01-24_1_29_47.png

ショートカット.png


SourceTree

https://ja.atlassian.com/software/sourcetree

スクリーンショット 2019-01-25 23.17.13.png

Git リポジトリの操作が簡単なのでおすすめです。

だけど、簡単すぎるために、チェックアウトなどをしっかり行う癖がつかなくて、最初は

「赤いエラー文が出てきてプッシュできないよー!どーしていいか分からないよー!」ってなり、プッシュ恐怖症になります。

自分は、一度、ソースツリーをやめて、ターミナルからgitコマンドで操作を行うようにしました。

そうすると、gitの基礎が分かるようになったのです。

それから、ソースツリーの操作も安心してできるようになりました。

今では、チェックアウト、プッシュ、強制プッシュ、マージなど、自信を持って作業できます。

gitもsourcetreeも友達です。

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

スクリーンショット_2019-01-25_23_32_38.png


Homebrew

http://brew.sh/index_ja.html


ターミナルからインストールする場合

/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

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インストール

【今日から携わる】5分でおわるよ!gulpでsassのコンパイルしませんか?(コピペでオーケー)

スクリーンショット 2019-01-23 20.57.41.png


docker

https://docs.docker.com/docker-for-mac/install/

スクリーンショット_2019-01-23_0_28_48.png

スクリーンショット_2019-01-23_0_29_05-2.png

スクリーンショット_2019-01-23_0_29_29.png

スクリーンショット_2019-01-23_0_29_41.png


WordPressの環境を構築する

【今日から携わる】3分でWordPress開発環境の構築をする方法(docker-composeを使用)

ファイルをダウンロード

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