開発効率を上げるVSCodeやWebブラウザのショートカットの一覧と使い方 (Mac・Windows)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、開発効率を上げるVSCodeやWebブラウザで使えるショートカット術について解説していきます。

見出しのタイトルは、Macバージョンでのコマンドを記載していますが、各内容でWindows版のショートカットも記載しています。

ブラウザ上での使えるショートカット

まずは、ブラウザで使えるショートカットを紹介します。

新しいブラウザ・タブを開く: command T

新しいブラウザのタブを開く際は、command T のショートカットが使えます。

command T

Ctrl T

ブラウザ・タブを閉じる: command W

ブラウザのタブを閉じる際は、command W のショートカットが使えます。

command W

Ctrl W

ブラウザ・タブのReload: command R

ブラウザのタブをReload(再度、読み込み)する際は、command R のショートカットが使えます。

command R

Ctrl R

ブラウザ上での検索窓を開く: command F

ブラウザ上での検索窓を開く際は、command F のショートカットが使えます。

command F

Ctrl F

リンクを別タブで開く: command クリック

ブラウザなどでリンクを別タブで開く際は、command クリック が使えます。

command クリック

Ctrl クリック

DevToolsを開く: option command I

Web開発者にとって、必須級のDevToolsを開く際は、option command I のショートカットが使えます。

option command I

Alt Ctrl I

気になったWordを検索するショートカット: command C T V Enter

このショートカット・コンボは、メンティーとして相談に乗っている後輩から教えてもらったものです。

知らない単語や気になったWordに遭遇したら、次のショートカット・コンボが役立ちます。

command C で気になるWordをコピーして、command T で新しいブラウザ・タブを開いて、command V で貼り付けて、Enterで検索できます。

command C
command T
command V 
Enter

Ctrl C
Ctrl T
Ctrl V
Enter

VSCodeなどEditorで使えるショートカット

VSCodeなどのEditor上で使えるショートカットを紹介していきます。

テキストを扱う場面、全般で使えるショートカットなので、活用範囲は広いと思います。

ぜひ積極的に実践して、覚えてください。

全選択: command A

command A のショートカットを使用することで、テキストの全範囲選択をすることができます。

command A

Ctrl A

コピー: command C

command C のショートカットを使用することで、テキストのコピーをすることができます。

command C

Ctrl C

ペースト・貼り付け: command V

command V のショートカットを使用することで、テキストのペースト・貼り付けをすることができます。

command V

Ctrl V

切り取り: command X

command X のショートカットを使用することで、テキストの切り取りをすることができます。

command X

Ctrl X

前に戻る: command Z

command Z のショートカットを使用することで、編集の1つ前の状態に戻すことができます。

command Z

Ctrl Z

保存: command S

command S のショートカットを使用することで、編集内容を保存することができます。

command S

Ctrl S

検索: command F

command F のショートカットを使用することで、Editor内での検索窓を開くことができます。

command F

Ctrl F

インテンド: ->|

VSCodeでインテンドを使用する場合は、「 ->| 」(Windowsは「Tab」)キーを押します。

->|

Tab

インテンドをバックする(戻す): Shift Tab

VSCodeでインテンドをバックするする場合は、「⬆︎」と「 ->| 」(Windowsは「Shift」と「Tab」)キーを押します。

⬆︎ ->|

Shift Tab

カーソルのあるテキストのクローンを作成する: ⬆︎ option 上下矢印

⬆︎ option 上下矢印 のショートカットを使用することで、カーソルのあるテキストのクローンを作成することができます。

⬆︎ option 上下矢印

Shift  Alt  上下矢印

指定方向でのテキスト全範囲選択: command ⬆︎ 矢印key

command ⬆︎ 矢印key のショートカットを使用することで、指定方向でのテキストの全範囲選択をすることができます。

command ⬆︎ 矢印key

Ctrl  Shift  矢印key

1マスずつのテキスト範囲選択: ⬆︎ 矢印key

⬆︎ 矢印key のショートカットを使用することで、テキストを1マスずつの範囲選択することができます。

⬆︎ 矢印key

Shift 矢印key

テキストの行・移動: option 上下矢印

option 上下矢印 のショートカットを使用することで、テキストの行を移動することができます。

option 上下矢印

Alt 上下矢印

定義へ移動などの後に、前の状態に戻る

Ctrl – をすることで、定義へ移動などの後に、前の状態に戻ることができます。

Ctrl -

Alt 左矢印キー

VSCodeでのマルチカーソル・ショートカット

VSCodeでテキストやプログラムコードを編集するために、マルチカーソルが役立ちます。

ちなみに、カーソルは、PC上でテキストを記述する際にでる点滅している縦線「 | 」のことです。

指定地点にカーソルを追加: option クリック

option 上下矢印 のショートカットを使用することで、テキストの行を移動することができます。

option クリック

Alt クリック

上下方向にカーソルを追加: option command 上下矢印

option command 上下矢印 のショートカットを使用することで、上下方向にカーソルを追加することができます。

option command 上下矢印

Ctrl  Alt 上下矢印

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

おすすめ書籍(HTML&CSS編)

Twitterやってます！Follow Me！

最近の投稿

2023年3月18日Reactの状態管理ツールであるRecoilのstateとHooks(atom, selector, useRecoilState)の使い方 2023年3月18日MacでIPアドレスをコマンドやWebサイトで確認する方法 2023年3月17日【Git・GitHub】Gitでよく使用するコマンドまとめ・CLIの一覧 2023年3月16日React・TypeScriptで入力フォーム(input)のイベント型定義(Event型)一覧と方法 2023年3月11日JavaScriptのfor文・while文とdo_while文、繰り返し処理を理解する 2023年3月10日JavaScriptで配列から特定の値が重複しないグループを作成する方法