ホームページ制作を行うにあたって、なるべく少ない工数で仕上げたいのは誰しも思う事だと思います。最近ではスマホ最適化など考えることも多くなってきていますので、より効率よく作業を進めて行くには一つ一つのタスクに掛かる時間を減らしていくことも大事です。コーディングを行うにしても、エディターを存分に使いこなせるかどうかも重要な要素になってきます。私はエディターはAtomを使用しているので、今回はAtomにおいての効率化として、私が普段行っている事などを紹介できればと思います。Atomの便利なパッケージに関しては、弊社の
馬場が
以前ご紹介したと思いますので、私はそのAtomを使って如何に効率よくコーディングができるかをご紹介したいと思います。ツールやコツというより普段私が行っているテクニックみたいなものを記載していきます。
Emmet+スニペットのダブルコンボ
AtomにおけるEmmetのパッケージもスニペットも利用されている方は少なくないと思われますが、
そちらを組み合わせた使い方をしています。Emmetもスニペットもどういうものかわからないという方はこちら↓・Emmet（
参照）・Atomのスニペット（
参照）例えばulタグの下にリンク付きのliをいくつ設けるか、といった時にスニペットに予めいくつか記載していても当然毎回その数必要になるとは限らないので、私は下記のように
ul>li*n>a[href="#test"]
と記載しています。こちらを一旦スニペットとして呼び出し、li*nのnの部分を好きな数字に変えれば
手っ取り早くliが必要な数だけ記述ができます。また、スニペットはcssも登録できますので、私は下記のようなものを設定しています。
'.source.css': 'font': 'prefix': 'font' 'body': """ font-size: color: # margin: font-weight:"""
テキストのスタイルを編集する際に、パッと呼び出せて便利です。上記四つのプロパティ以外にも例えばpaddingを加えたい場合はemmetで簡単に編集できますし、中々捗ります。上記のように、Emmetとスニペットを組み合わせる事でより早く、より確実にコーディングが可能となります。
Ctrl(command) + M
割と使える。
簡単にいえばタグ（括弧）の開始と終了を行き来できます。例えば、htmlにて割と記述が長いsectionの塊が一つあり、それをコピーしたい時。開始から数えて、どこから終了なのかわかりにくいですよね。CSSも同じで、メディアクエリの閉じ括弧がどこなのか、記述が長ければ長いほど探しにくくなります。そんな時にカーソルを開始もしくは終了タグ（括弧）にあわせ、Ctrl(command) + Mを押下するだけで一気に反対側のタグ（括弧）に移動できます。開始タグなら終了タグへ。終了タグなら開始タグへ。これが中々便利です。
Ctrl(command) + .
コメントアウトしたい箇所をドラッグし、上記のショートカットを押下しましょう。
一気にコメントアウトしてくれます。逆も然り。コメントアウトに適応すると、コメントが解除されます。
Alt（option） + Shift + w
Atomのパッケージである
atom-wrap-in-tagをインストールすることにより使用可能となるショートカットです。その名の通り、ドラッグして選択したソースコード（タグ）を任意のタグで囲めます。このdivに対して更にwrapを作って囲みたいなーって時に便利です。
※但し、誤ってCtrl（command） + Shift + wと入力してしまうとタブを全て閉じてしまうので注意…。まとめ
如何でしたでしょうか。今回は4つテクニック的なものをご紹介しましたが、これだけでもかなり楽になるはずです。ぜひぜひ、試してみてください。～箸休め～来月行われる
福岡マラソン2018に出場します。去年初参加でなんとか完走はできたのですが、今までの人生の中で禄に走ってきた人間ではなかったのでかなりギリギリのタイムでした。今回はなるべくタイムを縮めようと思います。
