初めに
僕はエンジニアインターンを初めて２ヶ月半が経ちました
日頃、僕が使っているツールなどを紹介して、同じようにこれから勉強する人がより早く成長できたらと思い、この記事を書いています
パソコンのスペック💻
参考までに僕のパソコンのスペックです
Mac book Air 13-inch(2017)
CPU: Intel Core i7 2.2GHz
Memory: 8GB 1600MHz DDR3
ツール選びのポイント
高速に動く
開発に十分なメモリやCPUを搭載できていない方もいるでしょう
どのパソコンでも高速で動いた方が嬉しいです使いやすい
機能がたくさんあってごちゃごちゃしていたらコードを書く作業が苦痛になってしまいます😩見た目が綺麗
いくら使いやすくても見た目が地味過ぎればストレスです
いつも使うものなのである程度は見た目も考慮に入れましょう⭐
この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 パッケージ おすすめ」で検索して盲目的にパッケージを入れるのはやめましょう
最小限の構成で最大限の効果を出すには自分に合ったプラグインが必要です
僕は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
自動で開いてくれるみたいな説明が公式サイトではそんなことはしてくれません
最初にプレビューを開くときはctrl-shift-mで開く必要がありますが、それ以降はマークダウンファイルを編集するとプレビューを切り替えてくれますmarkdown-scroll-sync
標準のプレビューでは、編集していてファイルが下に続いていってもプレビューは動いてくれないのですが、これを入れることで自動で編集箇所に移動してくれます
上記2つのパッケージを入れることで以下のように編集しながらそこがどのように表示されるか見れます
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を使ってます
http://cocopon.me/blog/?p=4862
自分の気に入ったものを使えばいいと思います
基本的に黒系統が目が疲れにくくおすすめです
参考にどうぞ
エイリアス
エイリアスを設定してコマンドを短くしましょう
.zshrcにalias g='git'のように書くことで設定できます
僕はメンドくさがりなのでよく使うコマンドは5文字以内に省略しています
とはいえ、コマンドに慣れないうちから省略するとそもそものコマンドを忘れてしまったり、どんなことをしているか意識できないので同じコマンドを30回くらいうってめんどくさくなってきたら設定しましょう
補完
https://blog.qnyp.com/2013/05/14/zsh-git-completion/
いちいちコピペしてたり、手打ちはらめんどいので、Gitコマンドの際にブランチ名が補完できるようにしましょう
プロンプト
プロンプトはターミナルでコマンドの左に毎回出てくるあれです
以下の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/
トライアル期間は無料で使えるけどそのあとは数百円課金しないといけないのが玉に瑕
無料で使えるこういうツール知っている方いませんか？
僕はこんな風に登録してるので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コマンドと検索したい文字列を入れるだけです
最後に
いかがでしたでしょうか
本来学ぶべきは、コードの書き方や仕事の進め方なのでツール選びや使い方になるべく時間を割かないようにしましょう