210
263

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-22

新しく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

Firefox

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

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

ターミナルからインストールする場合
/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
//ブラウザで確認
210
263
11

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
210
263

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?