こんにちは、フロントエンドエンジニアのまさにょんです。
今回は、開発効率を上げるVSCodeやWebブラウザで使えるショートカット術について解説していきます。
見出しのタイトルは、Macバージョンでのコマンドを記載していますが、各内容でWindows版のショートカットも記載しています。
目次
- 1 ブラウザ上での使えるショートカット
- 2 VSCodeなどEditorで使えるショートカット
- 2.1 全選択: command A
- 2.2 コピー: command C
- 2.3 ペースト・貼り付け: command V
- 2.4 切り取り: command X
- 2.5 前に戻る: command Z
- 2.6 保存: command S
- 2.7 検索: command F
- 2.8 インテンド: ->|
- 2.9 インテンドをバックする(戻す): Shift Tab
- 2.10 カーソルのあるテキストのクローンを作成する: ⬆︎ option 上下矢印
- 2.11 指定方向でのテキスト全範囲選択: command ⬆︎ 矢印key
- 2.12 1マスずつのテキスト範囲選択: ⬆︎ 矢印key
- 2.13 テキストの行・移動: option 上下矢印
- 2.14 定義へ移動などの後に、前の状態に戻る
- 3 VSCodeでのマルチカーソル・ショートカット
- 4 プログラミング学習・エンジニア転職関連の情報
- 5 おすすめ書籍(HTML&CSS編)
- 6 Twitterやってます!Follow Me!
- 7 最近の投稿
ブラウザ上での使えるショートカット
まずは、ブラウザで使えるショートカットを紹介します。
新しいブラウザ・タブを開く: 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!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!