書き換え作業って面倒なのでは？

どうも。フロントエンドエンジニアの杉原睦弘です。

突然ですが、コーディングしてると、文章の書き換え作業って発生しますよね。
「この連番、番号変わったから全部数字ずらしておいて」「画像ファイル変更になったからファイル名の部分修正しておいて」みたいなやつです。
しかもこういう作業って「置換する程の量ではないし、手で書き換えるか」ってことになりがちです。しかし「3回以上繰り返す作業は自動化すべきなのでは？」と思う自分もいるわけです。
そこで、本記事ではテキストエディタでの入力を効率化する方法を紹介しようと思います。

1. 連番を入力するプラグイン

先程連番の書き換えという例を出しましたので、連番入力の効率的な方法を紹介します。
これは、連番の入力を補助してくれるプラグインを使用します。
エディタごとに連番入力プラグインがあるかと思いますが、私はSublime Textを使用しているので、Sublime Textのプラグインである「Increment Selection」を使います。
「increment selection」は数字を選択して Ctrl + Alt + i で数字を連番にしてくれます。

2. マルチカーソル使ってますか？

マルチカーソルとは、複数のカーソルを使って同時に入力を行える機能です。
テキストエディタによって実装の有無はありますが、最近ではDreamweaverのベータ版に実装されるぐらいにはメジャーになってきています。
AtomやBrackets等でマルチカーソルを使っている方も多いのではないでしょうか。
マルチカーソルを使えば書き換え作業がかなり効率化ができます。

カーソルの増やし方

カーソルを増やす方法は、同じ単語を選択する方法と、行ごとに増やす方法があります。

・同じ単語を選択する方法

Ctrl + D(Sublime Text)で同じ単語を選択できます。

・行ごとに増やす方法

Ctrl + Alt + Up, Ctrl + Alt + Down(Sublime Text)でカーソルを増やせます。

カーソルの移動方法

マルチカーソルを使いこなすためにはカーソルの移動方法を知っておくことが大切です。

・矢印キーで一文字ずつ移動

・Ctrl + 矢印キーで単語単位の移動

一文字ずつ移動する方法の問題点は、文字数が違う場合は対応しきれないという点です。
そういう場合は単語単位でのカーソル移動で解決できます。
Ctrl + Left, Ctrl + Rightでカーソルの単語単位での移動ができます。

単語単位と言いましたが、厳密に言うと半角スペースやハイフン、コロン・セミコンなどの記号を起点とした移動となります。
なので、全角文字列の場合は全角文字が続く範囲が一塊として扱われるため、HTMLタグ内の文字をすべて選択するなどの利用ができます！

・Homeキー, Endキーで行頭、行末への移動

単語単位でもカーソル移動が合わない場合、行頭、行末からの文字数・単語数が同じであれば、マルチカーソルでの移動で入力できます。

クォーテーション単位での移動

Sublime Textでは、Ctrl + Shift + Spaceでダブルクォーテションやシングルクォーテーションの範囲を選択することができます。
単語数・文字数が違ってもクォーテーション内を一律で変更できます。

行を上下に移動

ある一行を他の行に移動するという場合は、Ctrl + Shift + Up, Ctrl + Shift + Downで行を移動できます。

まとめ

置換するほどでもない手入力の作業を効率化するのは、劇的に作業時間が短縮されるものではないかもしれません。しかし、小さな改善が積もり積もって「お、ちょっと作業時間減ったかも？」となるはずです。

因みに、テキストエディタのショートカットキーを公式リファレンスなどで確認すると、それだけで楽しいですよ！
ではでは！

WEB初心者？ならまずタイプミスをなくす環境を整えよう！