入社8ヶ月で体に染みついたショートカット一覧

この記事はソニックガーデン [若手プログラマ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/sonicgarden-junior)の11日目の記事です

## 前提：環境について

- macOSを使用している
- VS Code(Visual Studio Code)を使用する
- Google Chromeを使用する

## 読んで欲しい人

- 上記の「前提：環境について」に当てはまる人
- ウィンドウ操作をいちいちマウスやトラックパッドで操作していてめんどくさい人
- 開発を進める上で、ショートカットを利用して開発効率を上げたい人
- 過去の自分

## この記事を読む必要がない人

- macOS、Chrome、VS Code(Visual Studio Code)使ってないし興味ない人
- すでに数多のショートカットを使いこなしている人


## macOS操作

| コマンド        | 操作内容                                 |
| --------------- | ---------------------------------------- |
| cmd + space     | アプリ検索                               |
| cmd + tab       | アプリの切り替え                         |
| cmd + o         | ファイルを開く                           |
| cmd + Shift + @ | 同じアプリのウィンドウ切り替え           |
| Ctrl + ↑        | 開いているアプリのウィンドウをすべて表示 |
| Ctrl + ←, →     | デスクトップの移動                       |

※ `escape`を押すと選択が解除されます。macOSの操作以外でも大体共通です

## ウィンドウ操作(Rectangle)

### ウィンドウの分割、移動

- 私はウィンドウの分割、移動には**Rectangle**を使用しています。無料です

https://rectangleapp.com/

**Rectangleの基本的なコマンド**

| コマンド             | 操作内容                                 |
| -------------------- | ---------------------------------------- |
| Ctrl + opt + ←       | 画面を左半分に分割                       |
| Ctrl + opt + →       | 画面を右半分に分割                       |
| Ctrl + opt + ↑       | 画面を上半分に分割                       |
| Ctrl + opt + ↓       | 画面を下半分に分割                       |
| Ctrl + opt + e       | 画面を2/3の大きさで左寄せ                |
| Ctrl + opt + t       | 画面を2/3の大きさで右寄せ                |
| Ctrl + opt + u       | 画面を1/4の大きさで右上に寄せる          |
| Ctrl + opt + i       | 画面を1/4の大きさで左上に寄せる          |
| Ctrl + opt + k       | 画面を1/4の大きさで右下に寄せる          |
| Ctrl + opt + j       | 画面を1/4の大きさで左下に寄せる          |
| cmd + Ctrl + opt + → | 次のディスプレイにウィンドウを移動させる |
| cmd + Ctrl + opt + ← | 前のディスプレイにウィンドウを移動させる |
| Ctrl + opt + Enter   | 画面をほぼ最大化                         |

:::note info
macOS Sequoiaでも同様の機能が導入されているので、Rectangleインストールするのめんどくさいようなら、標準の機能を試してみてください
:::

https://support.apple.com/ja-jp/guide/mac-help/mchl9674d0b0/mac


### その他

| コマンド                                | 操作内容                                                                              |
| --------------------------------------- | ------------------------------------------------------------------------------------- |
| cmd + Ctrl + f                          | フルスクリーンにする（もう一回押すと解除）                                            |
| cmd + m                                 | 最小化                                                                                |
| cmd + tabでアプリ選択、opt押してcmd離す | [最小化したアプリを戻す](https://softantenna.com/blog/osx-activate-invisible-window/) |


### 拡張機能にショートカットを設定できる 

よく使用するショートカットはコマンドを割り振っています

https://atmarkit.itmedia.co.jp/ait/articles/2004/01/news020.html

## Chrome操作

### Chrome標準コマンド

| コマンド         | 操作内容                         |
| ---------------- | -------------------------------- |
| cmd + n          | 新しいウィンドウ作成             |
| cmd + t          | 新しいタブの生成             |
| cmd + Shift + n  | 新しいシークレットウィンドウ作成 |
| cmd + Shift + b  | ブックマークを隠す |
| cmd + y          | 履歴                             |
| cmd + l          | アドレスバーにフォーカス         |
| cmd + +(プラス), -(マイナス)          | 画面の拡大と縮小         |
| opt + cmd + i    | 検証ツールの開閉                 |
| opt + cmd + ←, → | 開いているタブの移動             |

### Chrome拡張機能(Vimium)

- 基本的なスクロールやクリックなどは、Chromeの拡張機能である[Vimium](https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja)を使用しています

https://qiita.com/arihori13/items/19ff042ecca5c3b0b2c4 


## Visual Studio Code

### フォーカス系

:::note info
フォーカスとは、現在、操作可能な状態を指します
例：エディターにカーソルが点滅している場合、そのエディターで文字入力や編集ができる状態です
:::

### フォーカス

| コマンド        | 操作内容                                                                                                              |
| --------------- | --------------------------------------------------------------------------------------------------------------------- |
| cmd + 1〜       | エディターにフォーカスする（複数エディターがある場合は左から1, 2, 3...）                                              |
| cmd + Shift + e | 現在のファイルをディレクトリツリー（エクスプローラ）でフォーカスする。選択したファイルはspaceキーで開くことができます |
| Ctrl + @        | ターミナルにフォーカス                                                                                                |

### 検索, 置換

| コマンド        | 操作内容         |
| --------------- | ---------------- |
| cmd + p         | ファイル検索     |
| cmd + Shift + f | 全体検索         |
| cmd + Shift + p | 設定を開いて検索 |
| opt + cmd + f   | 置換             |

### 移動と選択

| コマンド           | 操作内容                                                   |
| ------------------ | ---------------------------------------------------------- |
| Ctrl + g + 行番号  | 指定した行にカーソルを移動                                 |
| Ctrl + Shift + L   | 選択した文字と一致する文字を選択、マルチカーソル状態にする |
| Ctrl + d           | 選択した文字を追加で選択、マルチカーソル状態にする         |
| cmd + ↑, ↓         | カーソルをファイルの一番上, 下に移動                       |
| cmd + Shift + ↑, ↓ | ファイルの一番上まで, 下まで範囲選択                       |
| cmd + ←, →         | カーソルを行の一番左, 右に移動                             |
| cmd + Shift + ←, → | カーソルを行の一番左まで, 右まで範囲選択                   |
| cmd + opt + ←→     | 開いているファイルのタブ移動                               |
| cmd + l            | 行選択                                                     |
| opt + ←→           | カーソルを行の左右で矩形移動                               |
| opt + Shift + ←→   | カーソルを行の左右で矩形移動、移動部分を範囲選択           |
| opt + cmd + ↓, ↑   | 上下にカーソルを追加                                       |
| opt + ↑, ↓         | 行を上下に移動、範囲選択時は範囲を移動                     |

### 分割

| コマンド | 操作内容                                                            |
| -------- | ------------------------------------------------------------------- |
| cmd + ｜ | 今開いているファイルを2つに分割                                     |
| cmd + 2  | ファイルを開かずエディターを2つに分割、以降3, 4でエディターが増える |

### コピー

| コマンド           | 操作内容                       |
| ------------------ | ------------------------------ |
| Shift + opt + ↓, ↑ | 選択している行を下、上にコピー |

### サイドバー、パネルの操作

| コマンド | 操作内容         |
| -------- | ---------------- |
| cmd + b  | 左サイドバー開閉 |
| cmd + j  | パネルの開閉     |

:::note info
パネルとは、ターミナルやログなどを表示する部分のことを指しています
:::

### インデント

| コマンド | 操作内容                |
| -------- | ----------------------- |
| cmd + [  | 行のインデントを1つ左へ |
| cmd + ]  | 行のインデントを1つ右へ |

### 削除、コメントアウト

| コマンド | 操作内容           |
| -------- | ------------------ |
| cmd + /  | 行のコメントアウト |
| cmd + x  | 行削除（切り取り） |

### ショートカット一覧

| コマンド          | 操作内容                 |
| ----------------- | ------------------------ |
| cmd + k + cmd + s | ショートカット一覧を表示 |

## ショートカットキーの覚え方

自分が行なっている覚えたいショートカットの覚え方です

### 1. メモする

ショートカットをメモします
自分はスティッキーズを使用しています

macOSに標準で入っている付箋アプリ

https://support.apple.com/ja-jp/guide/stickies/welcome/mac

メモをすることで、そのコマンドを使用する場面と押すキーが無理やり紐づけられます

### 2. メモを見ながら使用する

そのコマンドを使用する場面がどれだけ登場するのか、にもよりますが下記の感覚な気がしてます

- １〜３日：無理して使う
- ３〜５日：もうメモ見ないでいいかも
- ５〜７日：覚えた
- その後：こいつがいない人生なんて考えられない

### 3. メモ解除

メモからショートカットを削除します

次の覚えたいショートカットを見つけて、手順1に戻りましょう

※ スティッキーズのイメージ画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3819522/5cc00ae1-e58f-4641-4db7-6c7774f14445.png)


## SonicGarden : ベテラン勢の開発効率について

ショートカットは確かに作業効率を爆上げしてくれますが、ショートカット以外にも作業効率を上げてくれるものはいくらでもあります。

社内で「**個々人が実践している生産性向上の取り組みをお互いに共有し合おう**」という勉強会がありました。
下記の記事は非常に勉強になったので実践しています。

https://qiita.com/jnchito/items/ec8d625c83b207f21ded

## この記事を書こうと思った理由

最近、HHKBを譲り受けました。超ラッキー

見た目もさることながら、打刻音も良し

ただ一点、トラックパッドやマウス操作にストレスを感じるようになりました。手の移動がめんどいのです。

そこでショートカットを多用してマウス、トラックパッドから離れようと決意したのが始まりです。


## 終わりに

今後も使用するショートカットをどんどん追記していこうと思います
ありがとうございました🙇

明日は[@marcy](https://qiita.com/tknohas)が執筆予定です。お楽しみに〜