株式会社LITALICOでWebエンジニアをしています、@takafumimegumiです。
この記事は『LITALICO Engineers Advent Calendar 2020』の17日目の記事になります。
はじめに
研修が終わり、配属されてから現場のコードに慣れるまで、先輩方と「ペアプロ」をする機会が多くありました。
ペアプロとは、その名の通り2人のプログラマがペアになって共同でプログラムを書いていく開発スタイルのことです。
先輩方のプログラムを書く様子を見ていると、作業を効率化するための多くの気づきや学びがあったので、自分用のメモとして残しておきたいと思います。
開発効率化のTipsをまとめると、ざっと次の4つです。
- ワークスペースはどんどん作りなおすべし!!
- フルスクリーンモードを使いこなすべし!!
- エディタのスニペット機能を使うべし!!
- キーボードからなるべく手を離さず操作すべし!!
前提
- Webエンジニア
- フロントエンドの開発多め
- アジャイル開発
- MacBook Proを使用
- エディタはVSCode（Visual Studio Code）を使用
- 検証用のメインブラウザはChromeを使用
1. ワークスペースはどんどん作りなおすべし!!
1日に数多くの開発タスクをこなしていると、気づいたらエディタがたくさんのファイルで埋め尽くされていることはないですか？
こうなると、そもそも左側にはどんなファイルがあり、右側とどういう基準で分けたのか、どのタブにあるファイルを編集すべきなのかというのは結構忘れちゃいがちです。
この状態で、「さあ今度は別の開発をするぞー！」と意気込んでも作業机が散らかっているのでうまく頭を切り替えられません。
そのため、ためらわずワークスペースはどんどん作りなおし、脳内メモリはできるだけクリアな状態で作業を始めるのがおすすめです。
先輩方を見ていると1機能の開発を目安に作りなおしていることが多いので私も真似しています。その機能の開発に関わるファイルだけが開かれている状態です。
VSCodeを使っている方は、⌘ + Shift + P で > Duplicate Workspaceと検索すれば、同一ワークスペースを新たなウィンドウで開くことができるので、ぜひやってみてください。
そもそも「ワークスペースってなんぞや？」って方にはこちらの記事がおすすめです。
2. フルスクリーンモードを使いこなすべし!!
Macでは ⌘ + Tab でアプリ間の切り替えが可能です。
しかし、複数アプリを開いていると、開発でよく使うアプリは2,3コなのにすぐ切り替えられなかったりします。
また、マルチウィンドウで作業をしていると、Chromeなどのブラウザアプリに切り替えた際、両方のウィンドウで画面が切り替わりイライラしたことがある方もいるのではないでしょうか？
そんな時はフルスクリーンモードを使いましょう！
⌘ + Ctrl + F で今開いているアプリをフルスクリーン表示できます。
さらにトラックパッドを4本指でスワイプすればフルスクリーン表示しているアプリ間を素早く切り替えられるので大変便利です。
3. エディタのスニペット機能を使うべし!!
ファイルを新規作成して、さあコードを書くぞ！となった時、似たようなコードをなんどもゼロから書いてはいませんか？
「またこのコード書いてるわ...」って思ったらもう自動入力にしちゃいましょう。
スニペットとは、「断片」などの意味があり、プログラミングの分野では特定の機能を実現した短いコードのまとまりのことを指します。
エディタのスニペット機能を使えば、何かしらの文字をキーにコードの一部を登録しておき、簡単に使い回すことができるんです。
私が所属するLITALICO仕事ナビでは、フロントエンドの開発でReactの関数コンポーネントを作る機会が多く、そんな時はスニペットを使って入力を省略しています。
VSCodeでスニペットを使う具体的な方法はこちらの記事にわかりやすくまとまっています。
4. キーボードからなるべく手を離さず操作すべし!!
新規でタブを開く時、タブを切り替える時、カーソル行を移動させる時...にいちいちトラックパッドで操作していませんか？
トラックパッドって便利ですけど、キーボードだけで操作した方が早いし、なんかエンジニア！って感じがしてかっこいいですよね笑
というわけで、できるだけショートカットキーを使うようにしましょう！
今回は私が開発中によく使うキーに絞って紹介したいと思います。
ブラウザ編（Chrome）
| キー | 結果 |
|---|---|
| ⌘-R | 更新 |
| ⌘-[←] | 戻る |
| ⌘-[→] | 進む |
| ⌘-T | 新しいタブを開く |
| ⌘-W | タブを閉じる |
| ⌘-N | 新規ウィンドウで開く |
| ⌘-L | アドレスバーにフォーカス |
| ⌘-Option-F | アドレスバーに移動/検索 |
| ⌘-Option-[←] | 左のタブに切り替える |
| ⌘-Option-[→] | 右のタブに切り替える |
| ⌘-[1~8] | 指定した番号のタブに切り替える |
・ デベロッパーツール
| キー | 結果 |
|---|---|
| ⌘-Option-I | デベロッパーツールを開く |
| ⌘-Shift-C | 虫眼鏡アイコンを選択する |
| ⌘-Shift-M | デバイスアイコンを選択する |
エディタ編（VSCode）
| キー | 結果 |
|---|---|
| ⌘-P | 指定ファイルに移動 |
| ⌘-F | ファイル内でテキスト検索 |
| ⌘-Shift-F | すべてのファイルからテキスト検索 |
| ⌘-X | 行の切り取り |
| ⌘-Shift-K | 行の削除 |
| ⌘-C | 行のコピー |
| ⌘-Enter | 下に行を追加 |
| ⌘-D | 次のマッチを選択に追加 |
| Option-[↓] | カーソル行を下に移動 |
| Option-[↑] | カーソル行を上に移動 |
| ⌘-[←] | 行頭に移動 |
| ⌘-[→] | 行末に移動 |
| Option-[←] | 1単語左に移動 |
| Option-[→] | 1単語右に移動 |
| Ctrl-G | 指定行に移動 |
| ⌘K-P | パスをコピー |
参照：【Mac版】 VisualStudioCode キーボードショートカット
ターミナル編
| キー | 結果 |
|---|---|
| Ctrl-A | カーソルを行頭に移動 |
| Ctrl-E | カーソルを行末に移動 |
| Option-[←] | カーソルを1単語左に移動 |
| Option-[→] | カーソルを1単語右に移動 |
| Ctrl-U | 行頭まで切り取り |
| Ctrl-W | １単語切り取り |
| Ctrl-Y | 切り取った内容を貼り付け |
| ↑ | 前の履歴を表示 |
| ↓ | 後の履歴を表示 |
| Ctrl-L | 画面をクリア |
参照：Macターミナルの覚えておきたい基本情報・ショートカット・コマンドまとめ
最後に
いろいろと書きましたが、私はベテランと新人の開発スピードのギャップの本質的な要因は道具の使い方ではなく、完全にスキルの差だと考えています。
開発スピードを上げるには、とにかく実装経験を積み、コードを読んで理解するスピードを上げるのが近道です。
ただ、これまで挙げた開発Tipsは効率化の面でとても学びが多く、他の人の役に立つかもと思い書き起こしてみました。
すでに社内で一緒に働いている方々や他のエンジニアの方々の新たな発見になったら嬉しいです。
明日は@yoshikitanaka0707さんの記事です！お楽しみに〜