初心者エンジニアおすすめ開発ツール設定集

## 初めに
僕はエンジニアインターンを初めて２ヶ月半が経ちました
日頃、僕が使っているツールなどを紹介して、同じようにこれから勉強する人がより早く成長できたらと思い、この記事を書いています

## パソコンのスペック💻
参考までに僕のパソコンのスペックです
> Mac book Air 13-inch(2017)
CPU: Intel Core i7 2.2GHz
Memory: 8GB 1600MHz DDR3

## ツール選びのポイント
1. **高速に動く**
開発に十分なメモリやCPUを搭載できていない方もいるでしょう
どのパソコンでも高速で動いた方が嬉しいです

1. **使いやすい**
機能がたくさんあってごちゃごちゃしていたらコードを書く作業が苦痛になってしまいます😩

1. **見た目が綺麗**
いくら使いやすくても見た目が地味過ぎればストレスです
いつも使うものなのである程度は見た目も考慮に入れましょう⭐

この3つを守りつつ、「面倒なことはツールに任せる」、「ショートカットで省略する」も念頭に読んでください

## Atom
言わずと知れたエディタです
### フォント
フォントは`Menlo`を使っています
僕はフォントサイズを11にしていますが、お好みで

### キーバインド
カスタムでキーバインドを設定しています
https://qiita.com/takuchan9104/items/237dd39bf5987879b106
こちらを参考にタブを切り替えやすくするといちいちカーソルを探してタブをクリックせずに済みます

http://dormouse666.hatenablog.com/entry/2016/03/28/005857
`atom`には自動インデント機能があるもののデフォルトではキーバインドが設定されていません
僕はこのキーバインドを`option-cmd-p`に設定しています
これと`cmd-a`(全部選択)を組み合わせることでショートカットキーだけでインデントを一瞬で揃えられます

ファイルによってはうまく揃わないことがあるので最近は全然使っていませんが・・・😞
あとチーム開発の時にはインデントを整えることで無駄なコミットを作ってしまうので、使わないほうがいいです

### パッケージ
「atom パッケージ おすすめ」で検索して盲目的にパッケージを入れるのはやめましょう:bangbang:
最小限の構成で最大限の効果を出すには自分に合ったプラグインが必要です
僕はRubyを書くのでその関連のプラグインを紹介していますが、それぞれの言語で便利なプラグインを探してみてください

- `file-icon`
アイコンが綺麗で嬉しい
https://atom.io/packages/file-icons

- `通知プラグイン`
Linterでのerrorを表示するために必要となるものです
> busy-signal
intensions
linter
linter-ui-default

- `各種linter`
構文チェックしてくれるのでミスに気付きやすくなります
参考までに僕が入れているlinter一覧です
> linter-csslint
linter-jshint
linter-rubocop
linter-ruby
linter-sass-lint
linter-scss-lint
linter-eslint

ちなみにプラグインはPCにインストールされているgemを参照するだけなので、gemが入っていないと機能しないので対応するgemをそれぞれのページで確認してインストールしてください

- `markdown-preview-opener`
自動で開いてくれるみたいな説明が公式サイトではそんなことはしてくれません:joy:
最初にプレビューを開くときは`ctrl-shift-m`で開く必要がありますが、それ以降はマークダウンファイルを編集するとプレビューを切り替えてくれます

- `markdown-scroll-sync`
標準のプレビューでは、編集していてファイルが下に続いていってもプレビューは動いてくれないのですが、これを入れることで自動で編集箇所に移動してくれます

上記2つのパッケージを入れることで以下のように編集しながらそこがどのように表示されるか見れます
[![https://gyazo.com/b99f33ca5d9867c30f6d31190c7bd1da](https://i.gyazo.com/b99f33ca5d9867c30f6d31190c7bd1da.gif)](https://gyazo.com/b99f33ca5d9867c30f6d31190c7bd1da)

- `rubocop-auto-correct`

Rubyのコーディング規約に準拠しているかチェックして保存時に自動で直してくれます
`linter-rubocop`もインストールしないと機能しません

日本語化プラグインは入れてはいけません
プログラムを書くということは英語を読むということです😝
こういうところから慣れていきましょう

### テーマ
見た目の綺麗さもエディタにおいては捨てられません
ですが、あまりこだわりすぎるのも限りがないので好きではありません
明確な理由がない限り、デフォルトのものを使用するのがいいでしょう

#### **UI Theme**
One Dark
#### **Syntax Theme**
One Dark

### ショートカットキー
必要最低限のものを紹介します
編集するファイルを新たに開く、切り替えるなんてことは頻繁にあるので無駄な時間を使わないようにしましょう
#### Level1
3日で身につけましょう

|操作|キー|
|:--|:--|
|プロジェクトフォルダ内検索 |ctrl-shift-F|
|ファイル内検索|cmd-F|
|ファイル名検索|cmd-P|
|切り取り|cmd-X|
|コピー|cmd-C|
|貼り付け|cmd-V|
|1つ前に戻る/進む|cmd-Z/Y|
|1行削除|ctrl-shift-K|
|タブを閉じる|cmd-W|
|上書き保存|cmd-S|
|全選択|cmd-A|
|タブ切り替え 次/前|ctrl-tab/ctrl-shift-tab|

#### Level2
1週間で身につけましょう

|操作|キー|
|:--|:--|
|ファイルの先頭/末尾に移動|cmd-↑/↓|
|行の先頭/末尾|ctrl-A/ctrl-E|
|設定画面|cmd-,|
|行番号を指定してジャンプ|ctrl-G|
|行の移動|cmd-ctrl-↑/↓|
|予測候補無視して改行|shift-Enter|
|末尾まで削除|ctrl-K|
|選択行のインデントを増やす/減らす|cmd-[ / ]|

#### Level3
この辺は僕もパッと出てこないけど覚えてると必ず役に立ちます

|操作|キー|
|:--|:--|
|現在の単語を選択|ctrl-shift-W|
|次の同じ単語を選択|cmd-D|
|同じ単語を全選択|ctrl-cmd-G|
|対応する括弧に移動|ctrl-M|
|現在のブロックを選択|ctrl-cmd-M|



## Chrome
ブラウザは問答無用でChromeです
ちなみに、普通のモードとシークレットモードではユーザーを別にしてログインできます
管理者とユーザーとしてそれぞれ同時に操作したいときに使いましょう

### 拡張機能
- Awesome Screenshot
開発した画面のスクリーンショットを撮れます

- Vue.js devtools
Vue.jsを使う人は必須

- Adblock Plus
広告表示したくない人は入れておくとスッキリしていいかも

### ショートカットキー
Atomのショートカットキーが覚えられれば自然と身についているはずです

|操作|キー|
|:--|:--|
|新しいタブを開く|cmd-T|
|新しいウィンドウをシークレットモードで開く|cmd-shift-N|
|タブを切り替える 次/前|ctrl-tab/ctrl-shift-tab|
|タブを閉じる|cmd-W|
|スクロール|↑/↓|

## Terminal / zsh
Macに標準でインストールされているTerminalで困ったことないのでTerminalを使っています
シェルは標準で入っている`bash`よりも高速ということで`zsh`です
余談ですが、「zsh」なんて読みますか？
僕は「ズィーシェル」派です
https://saku.io/install-latest-zsh-using-homebrew/
`zsh`を入れていない方はこちらを参考にインストールしましょう

### フォント
`Menlo Regular 11pt`にしています
ここはお好みで

### テーマ
`Iceberg`を使ってます:ice_cream:
http://cocopon.me/blog/?p=4862
自分の気に入ったものを使えばいいと思います
基本的に黒系統が目が疲れにくくおすすめです
参考にどうぞ

### エイリアス
エイリアスを設定してコマンドを短くしましょう
`.zshrc`に`alias g='git'`のように書くことで設定できます
僕はメンドくさがりなのでよく使うコマンドは5文字以内に省略しています
とはいえ、コマンドに慣れないうちから省略するとそもそものコマンドを忘れてしまったり、どんなことをしているか意識できないので同じコマンドを30回くらいうってめんどくさくなってきたら設定しましょう:weary:

### 補完
https://blog.qnyp.com/2013/05/14/zsh-git-completion/
いちいちコピペしてたり、手打ちはらめんどいので、Gitコマンドの際にブランチ名が補完できるようにしましょう

### プロンプト
プロンプトはターミナルでコマンドの左に毎回出てくるあれです
![https://gyazo.com/34a00982a3f2b4b644e2112bf8d88a5c](https://i.gyazo.com/34a00982a3f2b4b644e2112bf8d88a5c.png)
以下の3つがわかるように設定してます
- カレントディレクトリ
- ブランチ名
- 直前のコマンドの終了ステータスがわかる

```
autoload -Uz vcs_info
zstyle ':vcs_info:*' formats '(%s)-[%b]'
zstyle ':vcs_info:*' actionformats '(%s)-[%b|%a]'

function precmd() {
    psvar=()
    LANG=en_US.UTF-8 vcs_info
    [[ -n "$vcs_info_msg_0_" ]] && psvar[1]="$vcs_info_msg_0_"
}

PROMPT="
%F{cyan}[%~]%f %1(v|%F{green}%1v%f|)
%(?.%F{yellow}%}.%F{magenta})%n@%m%f $ "
```
これを`.zshrc`に貼ってください
再起動すると反映されます

### その他
#### cd時にlsを自動でする
```
function chpwd() {
  if [ `ls -Al | wc -l` -eq 0 ]; then
    echo "\n\nempty directory";
  else
    echo "\n"
    ls
  fi
}
```
ちなみにこれも`.zshrc`に貼っておくと`cd`で移動した時に自動で`ls`してくれるので１ステップだけですがコマンドが減ります

## その他便利ツール集
### tig
Gitを便利に使えるCLIです
https://qiita.com/suino/items/b0dae7e00bd7165f79ea
詳しくは上記を参考にしていただければいいかと
いちいち`git add`する際にファイル名を入れなくて済む、余計な差分を作らないようにできるので重宝してます

### Alfred3
https://www.alfredapp.com/
`cmd-space`で起動するようにしています
Googleでの検索、プログラムの起動/終了、Youtubeでの音楽検索に使ってます
いちいちトラックパッド触らなくて楽になります

### SequelPro
MySQLのテーブルをさっとみたい時に使えるGUI
https://www.sequelpro.com/
値の書き換えもささっとできるので便利です

### BetterTouchTool
ショートカットキーを登録できます
https://www.boastr.net/
トライアル期間は無料で使えるけどそのあとは数百円課金しないといけないのが玉に瑕
無料で使えるこういうツール知っている方いませんか？
![https://gyazo.com/2d09501dcef3fba45bbf666bd63175a9](https://i.gyazo.com/2d09501dcef3fba45bbf666bd63175a9.png)
僕はこんな風に登録してるのでFinderやSlack, Atom, Google, Terminalを起動したり、選択がトラックパッドなしでできます

### Gyazo/Gyazo GIF
画像の一括管理できるWebサービスとGIFが簡単に撮れるツールです（**要会員登録**）
https://gyazo.com/download?lang=ja
スクリーンショットをGitHubやSlackにいちいちアップロードするのではなく、Gyazo上にアップロードしたもののURLを参照することで一度のアップロードで済みます
Dockに置いておいて画像をアイコンの上にドロップすると自動でアップロードして開いてくれます

### The Platinum Searcher
高速にカレントディレクトリ以下の文字列検索を行えます
Atomにもその機能はあるのですが少し重いのでササっと検索したい場合はこちらですかね

https://github.com/monochromegane/the_platinum_searcher
以下を実行するだけでインストール完了です
```
brew install pt
```
使用時は`pt`コマンドと検索したい文字列を入れるだけです

## 最後に
いかがでしたでしょうか
本来学ぶべきは、コードの書き方や仕事の進め方なのでツール選びや使い方になるべく時間を割かないようにしましょう