こんにちは。タスカルです。
ちょっと前までApplivの攻略データベースのコーディングに携わっていたのですが、スピードが遅い遅い・・・汗。どうにかこうにかコーディングスピードを上げたいと悩んでいたところ、同僚のあゆみさんからEmmetという便利ツールがあるよ!と紹介してもらいました。ありがとうございます。

というわけで、今回はコーディングスピードを上げたい人向けに、Emmetというプラグインを紹介します。
Emmetを使えばコーディングのスピードをガンガンあげていくことができますよ!

目次

  • Emmetとは
  • 導入
  • 使い方
  • ちょっとだけカスタマイズ
  • 参考文献

Emmetとは

Emmetはコーディングを補助してくれるプラグインです。スニペットを記述し、ショートカットキーで展開するという操作で、まとまったコードを一気に記述する事ができます。

僕は使った事はないのですが、前身はZen-Codingというプラグインです。開発元はこちらです。基本的に操作性にはあまり変化はないとのことなので、旧Zen-CodingユーザーもEmmetにアップデートしてみてはいかがでしょうか?

導入

Emmetの導入はとても簡単です。ここではSublime Text 3に導入する方法を紹介します。Sublime Text 3に機能追加をするためには、まずPackage Controlをインストールする必要があります。こちらの記事を参考にしてみてください。

Package Controlをすでにインストールしている場合は、以下をするだけで大丈夫です。

  • Ctrl + Shift + Pを入力してコマンドパレットを呼び出します。
  • 「Package Control:Install Pacage」を選択します。
  • Emmetと入力し、インストール

これだけです!

使い方

それでは、Emmetの使い方を紹介していきます。基本的な使い方もとても簡単です。

スニペット × ショートカットキー = 展開

という感じで使います。

スニペットは様々なものがありますが、展開に必要なショートカットキーはTabまたは、Ctrl+Eを押すだけです。

それでは実際にやってみましょう。

■基本パターン

aの後ろにカーソルを持っていき、Ctrl+Eを押すと、

と展開されます。

■id、class

■階層

他にも様々なスニペットがありますが、
すべて覚えるのは大変です。

チートシートが公式サイトで用意されているので、
コーディングの際に逐一確認していけば、自然と覚えられるのではないでしょうか。
Emmetチートシート

また、展開以外の便利なショートカットキーもあります。
こちらについては公式ドキュメントページのActionsという項目に掲載されているので、確認してみてください。
また、下記サイトの下部に翻訳されてまとめられています。
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻

ちょっとだけカスタマイズ

知っておくと便利なカスタマイズがあります。

Zen-Codingプラグインのアンインストール

Zen-Codingプラグインを併用すると誤動作があるそうなのでアンインストールしておきましょう。

  • Ctrl + Shift + Pを入力してコマンドパレットを呼び出します。
  • 「Package Control: Remove Package」を選択します。
  • Zen-Codingと入力し、アンインストールします。

Tabキーで展開できないようにしておく

Emmetのデフォルトの設定ではTabキーで展開できるようになっていますが、他の動作と干渉し合うので無効にしておくと幸せになれるそうです。

  • Sublime Text > Preferences > Package Settings > Emmet > Settings – User を開く。
  • “disabled_keymap_actions”: “expand_abbreviation_by_tab”を書き加え、保存してください。

HTML5のDOCTYPE宣言のスニペット「!」のlangがenになっているのでデフォルトでjaにしておく。

[Preferenes] – [Package Settings] – [Emmet] – [Settings-User]を開いてください。そこに以下のコードを貼付けてください。

こちらで変更完了です。! と記述して展開してみましょう。

オリジナルスニペットを作成する。

オリジナルのスニペットを登録する事もできます。
[Preferenes] – [Package Settings] – [Emmet] – [Settings-User]を開いてください。そこに以下のコードを貼付けてください。

では、展開してみましょう。

まとめ

Emmet使ってみていかがでしたでしょうか?
私の場合、「うーん、納期も近いし、いちいちスニペットなんて覚えてらんないよ。余裕があるときに使ってみるか」という感じだったのですが、結局余裕があるときなんてないということがわかりました汗
こういうものはいかに使って体で覚えていくかだと思いますので、是非チートシートを見ながら日々のコーディング業務で使ってみていただければと思います。

参考文献

今回の記事をまとめるにあたり参考にさせていただいた記事です。感謝。
スニペットやショートカットキーについて詳しく掲載されているので、是非こちらもご覧ください!

Zen-Codingの次期バージョン、Emmet について
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
Sublime TextのEmmetにオリジナルのコードスニペットを登録する方法メモ
【技術メモ】SublimeTextでEmmetの展開をcommand+eにする