Emmetで爆速コーディングを始めよう！- 導入編
ものぐさな私が大好きなEmmetについて書く日がやってきました。HTMLコーディングを改めて学習したいと思うようになったきっかけでしたので、感慨もひとしおです。
と言いながらサクッと行きます。基本的なことを押さえたらどんどんコーディングして、コーディングはちょっと苦手…なんて人も「まぁ苦手ではなくなったかな」と思えるような、そんなツールの一つです。
Emmetって何？
Emmetとは、独自の省略記法でHTML・CSSのコーディングの効率化をサポートしてくれるテキストエディタのプラグインです。
HTMLタグを展開したり、用意されたテンプレートを簡単に呼び出すことができるようになります！
…かつてZen-Codingと呼ばれていたようです。その頃現在のEmmetのような操作を実現させるためにはどうやらもう一つHayakuというプラグインが必要だったようです。
Emmetを使うと…？
「テキストエディタを使っているけれど、Emmetなんて初めて聞いたぞ。」という人がこれをお読みくださっているなら、まさにその方のための章になります。
最近のテキストエディタには入力補助機能が備わっていますが、それよりも速いというのがEmmetの利点です。
テキストエディタの入力補助機能でもかなり楽ですが、Emmetと組み合わせるとさらに速くコーディングできます。
例えば以下のようなHTMLを書くとします。
1 2 3 4 5 6 7 | <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav> |
Emmetの省略記法では以下を入力してCtrl+EまたはTabで展開されます。
1 | nav>ul>li*3>a |
百聞は一見に如かず、ですね。Emmetを導入したら実際に試してみましょう。
Emmetをエディタに導入しよう！
Emmetが使えるテキストエディタは沢山あります。というのが下の画像。
個人的なオススメは、無料ならAdobeから提供されているBracketsとGithubが開発したATOM、HTMLコーダー向きでないと一部では言われていますけれど、Sublime text2もいいですね。
有償ならAdobe DreamWeaverでしょうか…
上記以外にもブラウザで動かせるエディタやコードをバリバリ書く人向けのエディタにもEmmetは導入されています。
導入方法としては、テキストエディタのプラグインや拡張機能の追加からインストールします、それで完了です。
…あっさりしすぎなので、無料で使えるテキストエディタの中からご紹介します。
Brackets
ツールバー>ファイル>拡張機能マネージャーを選択後、ポップアップした拡張マネージャー右上にある検索バーからEmmetと入力して現れた拡張機能を追加、そしてF5かCtrl+R or ⌘+Rで更新しておしまい。
ATOM
- Ctrl or ⌘+,で設定画面を開き、左メニューの「+インストール」をクリックして「パッケージのインストール」画面を開きます。
- テキストボックスに emmet と入力し[パッケージ]ボタンをクリック!
- 検索結果からEmmetのインストールボタンを押しておしまい。
※すでにメニューなどプラグインで日本語化してしまっていますが、英語でもやり方は同じです。
Sublime Text 2
Sublime Textだけちょっと面倒です。先にパッケージコントロールを追加してからEmmetを追加することになります。
英語が苦手な人はSublime Textをパスして上の2つのどちらか、あるいは他のエディタを選んでください。
- パッケージコントロールを追加した状態でCtrl+Shift+P or ⌘+Shift+P でパッケージコントロールを開きます。
- Package Control:Install Package を選択。
- 入力バーにEmmetと入力すると該当するプラグインが出てくるので、選択してインストール。
- Sublime Text 2を再起動しておしまい。
パッケージコントロールの追加はこちらが簡潔で分かりやすそうです。
ちなみに、最新のDreamWeaverは標準で搭載されていて、すぐEmmetが使えます。
また、DreamWeaverについては別に記事を書いています。よかったらご参考になさってくださいね。
刷新されたDreamweaver CC 2017は中々いいかも…
お疲れ様でした。これを書いていて新しいテキストエディタのインストールと設定だけで疲れてしまった2年前のことを思い出しました。
今にして思うと目新しいことばかりで、あれもこれもと詰め込もうとしていたんですね…
ですので、ここを読んでくださっている初学者の方は一つ一つできることを着実に、現在できることを喜び、楽しんで下さいね。
また、記事の中で「ここはどうすればいいんだろう？」といった疑問点がありましたら、ご質問いただけると幸いです。3月末とはいえ、まだまだ寒さも残っていて中々冷えた指が動かないねこま（@necomacustom）でした。