知ってると便利！HTML, CSS, JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ

Post on:2018年6月7日

フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。

Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。

サイトのキャプチャ

Text editing techniques every Front-End developer should know

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

各ショートカットは、macOS版のSublime Textで表記しています。Windows版は、commandをcontrolに変更してご利用ください。また、他のエディタの場合は、それぞれのエディタごとに合わせてご利用ください。

1. 2つのコードを入れ替える

2つのコードがあり、その2つの位置を入れ替えます。
それぞれのコードを選択し、ショートカットキーを押すだけで、それらは簡単に入れ替わり、離れた場所でも大丈夫です。

  1. 1つ目のコードをカーソルで選択（複数行可）。
  2. commandを押しながら、2つ目のコードを選択（複数行可）。
  3. control+Tで、2つのコードが入れ替わります。
エディタで2つのコードを入れ替える
Atom
control+T
VS Code
shift+alt+T
Sublime Text
control+T

2. エディタでコミット

多くの制作者が、Gitを使用しているでしょう。ファイルを加えたり、変更をコミットしたり、レポジトリに反映させたりするための簡単な方法が必要です。

こういった作業はターミナルを起動するのではなく、エディタで簡単にできます。私はSublime Textで「Sublime Text plugin: git」を使用しています。VS Codeだと標準で、Gitに対応した機能が備わっています。

3. タスクランナーの実行

Gitと同様に、Gulpなどのタスクランナーやビルドツールもエディタで作業したまま操作することができます。VS Codeにはタスクランナーのツールが標準で備わっています。Sublime Textでは「Sublime Gulp」を私は使用しています。

4. サイドバーを開閉

かなり基本的な操作ですが、サイドバーを開閉するショートカットを覚えておいてください。いちいちマウスで操作するのは、面倒です。

  1. command+K, command+B
    2つのショートカットを順番に押します。
エディタのサイドバーを開閉
Atom
command+\
VS Code
command+B
Sublime Text
command+K, command+B
2つのショートカットを順番に押します。

5. コードを移動

一行、または複数行のコードがあり、それを上か下に移動させる必要があるとします。ショートカットを使用すると簡単に、そして正確に移動できます。
VS Codeだと、移動した際でも自動的にインデントされます。

  1. コードをカーソルで選択（複数行可）。
  2. comman+shift+↑or↓
エディタでコードを移動
Atom
comman+control+↑or↓
VS Code
option+↑or↓
Sublime Text
comman+shift+↑or↓

6. 行単位の選択

複数行に渡る箇所を変更したい場合、便利な機能です。
複数行を選択し、ショートカットで選択した範囲を各行に分割できます。

  1. shift+矢印キー で、複数行を選択。
  2. command+shift+L で、行単位の選択。
エディタで行単位の選択
Atom
command+shift+L
VS Code
option+shift+I（行末にカーソルを追加）
Sublime Text
command+shift+L

7. ぎざぎざに選択

これは行単位の選択に代わる選択肢です。ショートカットを押しながら、マウスを移動すると選択できます。

  1. カーソルを行の最後に移動。
  2. optionキーを押しながら、マウスを移動。
エディタでぎざぎざに選択

8. 選択したワードをすべて選択

選択したワードをコード内からすべて見つけ出し、選択します。

  1. ワードを選択。
  2. command+control+G(alt+F3) でコード内から選択。
エディタで選択したワードをすべて選択

VS CodeだとF2を押すことで、シンボルの名前を変更できます。

Atom
command+control+G
VS Code
command+control+G
Sublime Text
command+control+G

9. 選択の追加とスキップ

ワードを見つけて、次のインスタンスを見つけたいとします。ショートカットで、次のワードに移動したり、スキップしてさらに移動することもできます。

私は頻繁に使用しないので、ショートカットを忘れてしまいますが、あなたが必要であると感じるなら知っておくとよいでしょう。

  • command+Dは、ワードの選択を追加。
  • command+Uは、選択したワードを取り消し。
  • command+K, command+Dは、ワードをスキップして選択。
Atom
command+D
VS Code
command+D
Sublime Text
command+D

10. プロジェクトでシンボルを検索

Sublime Text以外のほとんどのエディタはこれで失敗します。VS Codeでは、CSSのためにそれを実装することに煩わされるようには思えません。

classがあり、コードベースでそのclass宣言のプロパティを編集したいとします。command+Fのグローバル検索は、なんとなく検索したい人のための機能です。
プロジェクトでシンボルを検索したい時は、それ用のショートカットが用意されており、ファイルに直接ジャンプすることができます。

  1. command+Rで、シンボルを検索。
エディタでシンボルを検索

11. 指定した行に移動

デベロッパーツールで、234行目にエラーがあることが分かりました。もちろんスクロールしてその行を表示することもできますが、ショートカットで簡単に移動できます。

  1. control+Gで、指定した行に移動。
エディタで指定した行に移動
Atom
control+G
VS Code
control+G
Sublime Text
control+G

12. 行の選択

もちろんマウスで行を選択することができます、しかしショートカットを使用すると簡単です。

  • command+Lで、行を選択。
  • command+shift+Lで、複数行を一行ずつ選択。
Atom
command+L
VS Code
command+L
Sublime Text
command+L

13. 選択範囲の拡張

CSSのプロパティを選択していて、そのプロパティを含む括弧内すべてを選択したい場合、ショートカットですべてを選択できます。

  1. control+shift+Mで、選択範囲をブラケット内に拡張。

ブラケットではなく、通常のパラグラフを選択したい場合は、下記のショートカットが利用できます。

  1. command+shift+Jで、選択範囲をインデントに拡張。

タグ内の選択も知っておくと便利です。

  1. command+shift+Aで、選択範囲をタグ内に拡張。
エディタで選択範囲の拡張
Atom
command+control+M
VS Code
なし
Sublime Text
control+shift+M

14. 複数行をまとめてインデント

これは指摘するにはあまりにも明白に思われますが、CSSのプロパティや値、JavaScriptの関数などを1行ずつインデントしているのを見たことがあります。これは複数行まとめて、インデントすることができます。

  1. 複数行を指定して、tabキーでインデント。

15. AceJump/QuickJump

この機能はエディタに標準装備として備わっているものはほとんどありません。例えば、Sublime TextではAceJumpのプラグインとして利用できます。

ショートカットを入力すると、テキストがトークン化され、ラベルが付けられます。関連するキーを入力して、ページ上のそのラベルポイントにジャンプします。

  1. Command Palleteから、Package Control: Install Packageで、「AceJump」をインストール。
  2. command+;で、AceJump。
エディタでAceJump/QuickJump
Atom
jumpy
VS Code
Code Ace Jumper
Sublime Text
AceJump

16. クリップボードの履歴

何かをコピーし、次に別の何かをコピーし、前にコピーしたものをコピーする、これは非効率です。たいていのエディタがコピーしたクリップボードの履歴を表示して利用できます。

  1. command+K, command+Vで、クリップボードの履歴を表示。
    2つのショートカットを順番に押します。

コードのようなものは、プラグインを介して機能を追加することができます。また、エディタ自身には依存しないAlfredのようなソフトウェアを使用して、クリップボードの履歴を利用することもできます。

エディタでクリップボードの履歴を表示
Atom
clipboard-plus package
VS Code
Clipboard History
Sublime Text
command+K, command+V
2つのショートカットを順番に押します。

17. プロジェクトの切り替え

プロジェクトを素早く切り替えるショートカットも用意されています。いちいちメニューにアクセス必要はありません。

  1. command+control+Pで、プロジェクトの切り替え
エディタでプロジェクトの切り替え

18. コーディングの爆速化

同じclassを持ったdivを100個作る必要がありますか？ 一つずつすることを考えないでください。Emmetを使用すれば、簡単に作ることができます。

Emmetのページを見ると、便利な機能を利用できるかが分かります。エディタを使用するすべての人のためのプラグインが用意されています。

  1. .myClass-${Hi}*100で、同じclassを持ったdivを100個作る
エディタでEmmetを使用

最後に

あなたが知っている素晴らしいエディタの機能を教えてください。
使用しているツールでどんなことができるのか、を知ることは大切です。

sponsors

top of page

©2024 coliss