「あなたの作業時間を短縮し、より効率的なWeb制作を実現しませんか？」
VSCodeは多くのエンジニアやコーダーが愛用する強力な開発ツールです。しかし、ショートカットを使いこなすことで、作業スピードをさらに大幅に向上させることができます。
本記事では、8年以上の実務経験をもとに選んだ「絶対に役立つショートカット」を厳選し、具体的な使い方やメリットをお伝えします。この記事を参考に効率的なコーディングを今日から始めましょう！
拡張機能を使うことでも効率化が可能です。おすすめの拡張機能を知りたい方はこちら！
テキスト操作系
行を入れ替える
- Windows：alt + 上下矢印
- Mac：option + 上下矢印
HTML要素やCSSルールの並び順を変更する際に便利。例えば、リスト項目を動かしたい時や、コードの見やすさを整理したい時にスムーズに作業できます。
コピペでも良いのですが、option + 上下矢印の行の入れ替えの方が数倍速いです。
行をコピーする
- Windows：alt + shift + 上下矢印
- Mac：option + shift + 上下矢印
CSSプロパティを複数のセレクタで使う際や、同じ行を少しだけ変更して使うケースに役立ちます。
コピペででやるよりショートカットの方が圧倒的に速いのでおすすめ！
複数行の同じ位置を選択する
複数行に対して同時に同じ変更をしたい時があります。例えばクラス名の変更です。一括置換で良い場合もありますが、全てを変更したいわけではない場合もあります。そういった時に使えます。
キーボードのみの場合
- Windows：ctrl + alt + 上下矢印
- Mac：option + command + 上下矢印
行が連続していて、かつ同じ文字数の位置の場合はショートカットが速いです。これを使えばミスを防ぎながら効率的に作業できます。
クリックを使うパターン
- Windows：altを押しながらクリック
- Mac：optionを押しながらクリック
行、もしくは文字数の位置が離れている場合はこちらを使いましょう。
後からクォーテーションで囲む
- 文字列を選択してからshift + 2 or 7
文字列として扱いたい部分を間違えてクォーテーションなしで記述してしまうことってありますよね。普通に追加しようとすると離れた場所にカーソルを持っていく必要がありますが、実は範囲選択をしてからであればその範囲を囲んでくれます（次のgifではダブルクリックで範囲選択をしています）。
HTMLの属性値やJavaScriptの文字列として扱いたい部分を一括でクォーテーションで囲む作業に役立ちます。
検索、置換系
ファイル内検索 / 置換
- Windows：ctrl + f（検索）/ ctrl + h（置換）
- Mac：command + f（検索） / option + command + f（置換）
ファイル内で文字列を検索、あるいは置換するためのボックスを開くことができます。
時々クラス名の一括置換をしたいケースなどがありますので、覚えておきましょう。
ファイル横断検索 / 置換
- Windows：ctrl + shift + h
- Mac：command + shift + h
特定のファイルではなく、フォルダ全体に対して検索もしくは置換をしたい場合があります。ページ数が多いと必然的にファイル数も増えますからね。
そんな時にはこちらを使いましょう。複数のファイルを横断して検索ができます。例えばサイト全体のクラス名変更や、プロジェクト全体で繰り返し使用されるコードの修正を迅速に行いたい時におすすめです。
単語選択系
ダブルクリック ｜ 単語を選択する
特定の文字を選択するにはドラッグを使う方が多いのではないでしょうか。狙った部分をドラッグで選択するのは地味ながら面倒ですね。
コード内の単語（変数名や関数名など）を素早く選択したい時にはこれが最適。誤ってドラッグするミスを防ぎます。
トリプルクリック ｜ 行を選択する
特定の行を丸ごとコピーしたり編集したりする場合に素早く選択できます。
さらに時短！プロが使うツールと裏技を手にする
コーディングを爆速にするには、あといくつかのツールを使うだけです。知っているか知らないかでコーディング速度は10倍くらいの差が出てしまいます。
自分が1ページ作っている間にあの人は10ページ作っているかも・・・なんてことにならないようしっかりノウハウを持っておきましょう！爆速コーディングに必要なすべてをまとめた本を出していますのでぜひ以下のリンクからお買い求めください！
よくある質問
- QVSCodeのショートカットはカスタマイズできますか？
- A
はい、VSCodeではショートカットキーを自由にカスタマイズできます。
Windowsは「ctrl + k」→「ctrl +s」を、Macなら「command + k」→「command + s」押すと、キーボードショートカットの設定画面が開きます。ここで検索・変更・削除が可能です。
- QMacとWindowsで操作が違うときの覚え方は？
- A
基本的に「MacのCommand」は「WindowsのCtrl」、「Option」は「Alt」と覚えると対応しやすいです。記事内でも両方のキーを表記していますので、混乱せず使えるはずです。また次のセクションで公式のチートシートも載せていますので確認してみてください。
- QWeb制作においてショートカットを使うとどのくらい時短になる？
- A
具体的な作業にもよりますが、コピペ・検索・編集などの頻出操作をショートカットで行うだけで、1日あたり30分〜1時間程度の短縮が可能になります。特に複数ページ編集時に差が大きくなります。
参考記事
Windows版ショートカットキーチートシート：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Mac版ショートカットキーチートシート：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
コメント