こんにちは！
エンジニアに転職してまだ三ヶ月も経っていない
バブバブエンジニアことTOKIOと申すものです！
最近、少しずつ本業に慣れてきたのですが、まだまだ先輩エンジニアたちには敵いません。
少しでも先輩たちに近づけるように、
どうしたら総合的に生産性、パフォーマンスを上げれるか
というものを考えるようになりました。
コーディングの速度はそもそもの知識、経験が不足しているので、一朝一夕では上げられません。
そこで、
コーディング以外に使っている時間をいかに減らせるか、
という思考になり、
「あれ？そういえば、俺ってショートカットキー全然知らねぇ！」
と、思ったので、細かいことでもショートカットキーを使うように意識するようになりました。
ということで、今回の記事は、MacBookで場面に分けてよく使うショートカットキーについて紹介します！
※Windowsの皆さん、ごめんなさい🙇
よく使うショートカットキー(Mac)
Google Chromeでよく使うショートカットキー
| 内容 | コマンド |
|---|---|
| テキストのコピー | cmd + c |
| テキストのペースト | cmd + v |
| フルスクリーンで開く/戻す | cmd + option + F |
| 新しいタブを開く | cmd + T |
| 隣のタブに移動 | cmd + option + 矢印キー |
| 指定したタブに移動 | cmd + 数字キー（一番左のタブからカウントされている） |
| 前のページに戻る | command + [ |
| 次のページに進む | cmd + ] |
| ページをリロードする | cmd + R |
| デベロッパーツールを開く | cmd + option + I |
コピー&ペーストは王道ショートカットキーだと個人的に思っていますが、一応記述しておきました。
「隣のタブに移動」を結構使います！タブでグループ化していると便利ですね〜。
ページをリロード,デベロッパーツールを開くは高頻度で使います！
VSCodeでよく使うショートカットキー
| 内容 | コマンド |
|---|---|
| 単語ごとに移動 | option + 矢印キー |
| 単語ごとに選択 | shift + option + 矢印キー |
| 端に移動 | cmd + 矢印キー |
| 端まで選択 | shift + cmd + 矢印キー |
| 同じ単語を選択 | cmd + D |
| ファイル内の単語を検索 | cmd + F |
| 隣のタブに移動 | cmd + option + 矢印キー |
| 前のページに戻る | command + [ |
| 次のページに進む | cmd + ] |
「単語ごとに移動」、「単語ごとに選択」は頻繁によく使います！
コピー＆ペーストと相性GOODです！
また、「端まで移動」はdivタグなどにプロパティやクラスを入れて、そこから出て次の行に何か記述するときによく使います！
リファクタリングするときは、「同じ単語を選択」をよく使います！
コード量が多くなると「ファイル内の単語を検索」、「全ファイルの単語検索」をよく使います！
探している単語が一瞬で見つかるので、ファイル内を探す手間が省けます。
また、デバッグするときにもエラーの原因になっている箇所をすぐに特定することができます。
自己流カスタマイズショートカットキー
ここからは自分でカスタマイズしたショートカットキーを二つ紹介します。
まず一つ目は
英語翻訳ショートカットキーです
カスタマイズした背景
現在、本業でDRF(Django REST Framework)を使っているのですが、
とにかく日本語の記事が少なくて、英語で検索する場面が多いです。
自分は英語に強くないので、一々グーグルの英語に翻訳する機能を使うのがめんどくさいと思っていました。
そこで、いいショートカットキーがないか探していたら見つけたChromeの拡張機能を用いたショートカットキーです。
下記記事を参考にさせていただきました！ショートカットキーの設定方法は下記記事を参考にしてください！
Chromeでショートカットですぐに翻訳する方法を紹介！
これはVue.jsの英語のドキュメントを翻訳している画像です。
選択している部分を下記画像のように、
本文と日本語を両方表示してくれるので、英語の勉強にもなります！
また、翻訳する範囲の選択は、下記の画像のように入力蘭が出るので、
翻訳したい部分をコピー&ペーストして翻訳することも可能です。
※このページを翻訳を選択すると全ページ翻訳されてしまい、
元に戻すのが面倒なのであまりお勧めしません。
二つ目は
VSCodeでのディレクトリ、ファイル作成ショートカットキーです
カスタマイズした背景
フロントエンドでVue.jsを使って開発しているのですが、コンポーネントを作成する機会が多く、
一々ファイルを作成するボタンを押しにいくのがめんどくさいな〜と思って見つけたショートカットキーです。
下記記事を参考にさせていただきました！
下記記事に全てカスタマイズ方法は記述されているので、
この記事でのカスタマイズ方法は割愛させていただきます。
【VS Code】指定ディレクトリに新規フォルダ・ファイルを作成するショートカットの設定
なぜショートカットキーにこだわるのか？
前職で恐ろしくタイピングが早く、Excelなどのショートカットキーを使いこなしている先輩がいたのですが、
その方に
「ショートカットキー、どうやって覚えてるんですか？」
と聞いたことがあります。
「とにかく使いまくるしかない。どんなに細かいことでも調べて使ってみる。
最初は、どれだっけ？と調べ直したり、余計に時間を食うこともあるけど、
徐々に自然と手が動くようになる。そうすると、一気に無駄な時間が減って二時間かかる作業が30分になったりする。
最終的に余計に時間を食った分をペイできるよ。
まずは、マウスをできるだけ使わないというところから意識した方がいいね。」
とおっしゃっていました。このような先輩と巡り会えてよかった😭
今でも感謝している人の一人です。
ショートカットキーを使えるようになれば、コーディング以外の細かい業務でも生産性が上がることは確実ですし、
パソコンが完全に相棒化します。ぜひ、皆さんもこれを機に「脱マウス(トラックパッド)」を目指してみてはどうでしょうか？
※マウスを使った方が早い場合もあるので、脱マウスが正義ではないと考えています！
マウス⇆キーボードをいかに減らせるかが重要！
以上、バブバブエンジニアでした〜👋
おまけ
YouTubeでよく使うコマンド
| 内容 | コマンド |
|---|---|
| 音声を上げる | ↑ |
| 音声を下げる | ↓ |
| 5秒スキップ | → |
| 5秒戻る | ← |
| 10秒スキップ | L |
| 10秒戻る | J |
| 再生速度を上げる | shift + > |
| 再生速度を下げる | shift + < |
| 停止 | J |
| ミュート | M |
| 全画面表示 | F |
| 検索欄に移動する | / |