LoginSignup
6
9

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.

@geek_shanshan

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

Last updated at Posted at 2018-02-11

初めに

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

パソコンのスペック💻

参考までに僕のパソコンのスペックです

Mac book Air 13-inch(2017)
CPU: Intel Core i7 2.2GHz
Memory: 8GB 1600MHz DDR3

ツール選びのポイント

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

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

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

この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を書くのでその関連のプラグインを紹介していますが、それぞれの言語で便利なプラグインを探してみてください

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

  • 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
以下の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
僕はこんな風に登録してるので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コマンドと検索したい文字列を入れるだけです

最後に

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

6
9
0

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
Sign upLogin
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?