【プロ必須技術】コーディングを爆速にする「Emmet」の使い方【HTML、CSS】
コーディングをもっと早く楽にしたいけど、いい方法はないかな？「Emmet」って聞いたことあるけど、イマイチどんなものか分からないなあ…。どうやって使うの？
この記事で得られること
- Emmetがどういうものかが分かる
- 実際によく使うコマンドが分かる
- 各テキストエディタごとのEmmet設定方法が分かる
こんにちは、はとむぎです。
今回はコーディングを爆速にする「Emmet」の基本や使い方、導入方法などについて解説していきます。
Webのコーディングやプログラミングに関わるプロの方で、Emmetを使っていない方はほとんどいません。必須級の技術と言ってもいいでしょう。ただ、使い方はとても直感的で簡単なので、使っていけば問題なく覚えられると思いますので、心配はいりません。
Emmetを使えば本当に楽に早くコーディングすることができ、一度慣れたらもう戻ることはできません！爆速というのは何も言い過ぎではないです。
では、始めていきましょう！
Emmetとは 、メリット
Emmetとは、 HTMLやCSSを省略して書けるツールです。僕が始めた頃はZen-Codingと呼ばれていた技術ですが、いつの間にかオシャレな名前になってました。
わかりやすい例でいうと、Emmetに対応したテキストエディタのHTMLファイル上でimgと打ってtabキーを押します。
imgすると、こうなります。
<img src="" alt="">こんな感じで、わざわざ打つのが面倒なものや、ul liのようにHTMLの記述量が多くなってしまうとき等は特に重宝します。ちなみに後で詳しく解説しますが、Emmetの真髄はHTMLよりもCSSの省略にあります。
Emmetはエディタ上で直感的に使えるツールなので、SassやTypeScriptのようなコンパイルも不要で、最も簡単に効率を上げる方法の一つです。コーディングの仕方を制限しないので、チームで自分だけが知っていたとしても問題ありません（教えてあげたほうが生産性は上がりますが 笑）
一応言っておくと、もちろん無料です。
基本的な使い方
基本的には、Emmetに対応したテキストエディタのHTML、CSSファイル上でコマンドを打ち、tabキーを押すだけです。tabキーの部分はテキストエディタによって変わる場合もありますが、基本的にはこれだけです。
よく使うコマンド・チートシート
さて、ついに紹介することができます。Emmetの凄さを実感してほしいです。また、この章の最後に本家のチートシートを付けておきますので、より詳しい使い方を知りたい方はご利用ください。
以下、見出しにコマンドを書きます。そのコマンドの後にtabキーですぐ下のコードが出力されます。
HTML編
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>初っ端からこのインパクトです。わずか1文字でこのコード。HTML5準拠の記述で、viewportなども入っています。あとはlangをjaに変えて、必要な記述を足していけばOKです。
a
<a href=""></a>これもよく使う便利なものです。出力した後、hrefのところにカーソルが合うのですぐにリンクを書き始められるのも粋なポイントです。
img
<img src="" alt="">例としても出しましたね。便利です。srcにカーソルが合います。
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>こういう複数行にまたがる記述もEmmetを使えば一瞬です。A>Bの書き方で、Aのタグの中にBのタグを入れる事ができます。また、*5の部分でその数だけ繰り返すことができます。
h1.title
<h1 class="title"></h1>.の後にクラス名を入れることでclassを指定できます。ちなみに#でidを指定できます。jQueryと同じなので、使っている人にとっては覚えやすいと思います。
p{text$}*3
<p>text1</p>
<p>text2</p>
<p>text3</p>2つ新しい要素を入れました。一つ目が{}で囲う部分です。こうするとタグ内のテキストを指定できます。二つ目が$です。ここには連番が出力されます。
CSS編
Emmetの真骨頂、CSS編です。といっても例に出すというよりも、CSSは基本全てEmmetを使って書きます。CSSのコマンドはある程度柔軟に作られているので、表記が少しズレてもちゃんと出力されるときもあります。慣れてくればこうかな？と思って打ってみたら思ったとおりに出力されるということも増えてくると思います。
HTMLと違うのは「1行ずつ書く」ということでしょうか。複数行の展開は基本的にしません。書いていけばそれも納得できると思います。
では、例を書いていきます。
w100
width: 100px;よく使います。数字の部分がpxとして出力されます。ちなみに例えばh50でheight: 50px;が出力されます。
w100p
width: 100%;最後にpを付けると％指定になります。便利ですね。
m0-a
margin: 0 auto;mがマージン、pがパディングです。半角スペースを開けて記述する部分は-（ハイフン）で繋げばOKです。
mt30
margin-top: 30px;めちゃくちゃ使います。2文字目はtがtop、bがbottom、rがright、lがleftです。
tac
text-align: center;次のものと一緒に解説します。
fll
float: left;こんな感じで記述に出てくるそれっぽい部分を繋げて書けば、自動的に判断して出力してくれます。いろいろ試してみましょう。他にもlhでline-heightとかもあります。
このように、例を出すと切りがないのですが、CSSは基本Emmetで書きます。よく使うものを覚えておくだけでも爆速になりますので、オススメです！
上でもお話したように、こちらにチートシートを載せておきます。英語ですが、コマンドと内容を見て頑張って判断しましょう。といってもまずはこの記事に載せているものくらいから始めるのが良いのかなと思います。僕がこれまで使ってきた中でよく使うものを重点的に載せましたので。
各エディタへの導入方法
今のエディタは標準か、プラグインでだいたい対応します。主なエディタを書いておきます。もっと詳しく知りたい方は「エディタ名 emmet」などで検索すれば詳しく出てくるでしょう。
VS Code
標準搭載です。さすがですね。
SublimeText3
package control が入っている前提で、 shift+control+pでinstallと入力。 Package Control:install Packageを選んでEmmetと入力。一番上のEmmetをインストールすれば対応します。
参考記事：【sublimetext3】Emmetを導入する！
Coda
プラグインページからプラグインを落とし、 ダブルクリックすればOKです。
参考ページ：Emmet Coda2
Dream Weaver
Zen-Codingの時はプラグインでしたが、今は標準搭載です。
Eclipse
こちらの参考記事の通りです。
「ヘルプ」→「新規ソフトウェアのインストール」 から 「作業対象」に
https://blog.goo.ne.jp/siyokuanjin/e/43764761c736fe29f9a13cec6312e7behttp://emmet.io/eclipse/updates/と書いて、「追加」ボタンを押す。
エディタへの導入方法については以上です。他のエディタをお使いの方は検索してみてください。情報が見つかると思います。
最先端の技術を効率よく学ぶ方法
Emmetが登場してからWeb開発業界はさらにスピードアップしました。また、今後もこういった新技術が登場していくことでしょう。こうした技術を逃さないためにも、特に初心者の方はアンテナの張り方を身につけるのが大事です。
そのためにはいくつかの方法があります。以下3つ程紹介します。
方法その1：プログラミングスクール
本気でWeb業界を目指すのであれば、プログラミングスクールは良い選択肢です。僕もかつてプログラミングスクールで基礎を身につけてWeb業界へ就職しましたので、確信を持って言えます。
プログラミングスクールは効率よく最新技術を学べるだけでなく、無料体験もあったり、就職の斡旋などもやってくれるので、検討してみてはいかがでしょうか。欠点としてはやはり金額面と、時間が必要になるところです。ただこれは就職斡旋などのメリットで相殺できますし、オンラインだけで完結するスクールもあるので、そこを踏まえて考えてみてはいかがでしょうか。
記事にしていますので、気になる方は覗いてみてください。
【現役エンジニア実体験】おすすめプログラミングスクールの選び方
今熱い業界のプログラミングを学べるスクールの紹介です。会社でWeb責任者を担っている僕もかつて通っていた経験を踏まえ、数多くあるスクールから3社を選別しました。
方法その2：Webサービス
手っ取り早く調べるにはWebサービスを活用するのがオススメです。最近は多くの使いやすいWebサービスで学ぶことができ、内容も多岐に渡ります。ただ、自分で情報を見つけに行かなければならないという欠点もあります。
progate
今最も熱いプログラミング学習サイトです。Emmet単体での講座はありませんが、Webに必要な様々な言語の基礎を学べます。0から始めるには一番いい選択肢です（この記事を読んでいる方にそういう方は少ないとは思いますが）。
ドットインストール
3分の動画を見ていくだけで様々な知識を学ぶことができる大人気サイトです。歴史も長く、僕がWebの学習を始めた頃からすでにありました。
Emmetの講座もあるので、興味がある方は覗いてみてはいかがでしょうか。
方法その3：書籍
方法の3つめは本で学習することです。まとまった確かな知識が付くメリットの反面、最新の情報とのタイムラグがあったり、細かな部分まで学べるかどうかは本の質に左右されるというデメリットもあります。ちなみにEmmet単体の書籍は現状ありません。恐らく書籍にするほどの内容ではないという理由でしょう。
下記で紹介しているものは、信頼できる著者のものを選んでいます。僕が過去本を購入し、場合によってはセミナー等にも参加した著者です。
大人気のWebクリエイター兼ブロガーのManaさんの「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は本当にわかりやすく、現場で使える内容が書かれた良書です。すでにこの本を持っている方も多いのではないでしょうか。名字が一緒なので親近感を覚えますね。
安心の「本当によくわかるシリーズ」です。テキストのサイズや画像など、読みやすさに対しての深いこだわりと、親切で分かりやすい内容が魅力です。余談ですが、たにぐちまことさん著の「よくわかるPHPの教科書 【PHP7対応版】」は僕の基礎になりました（当時はPHP5.5対応版だったと思います）。
こういうものはだいたい3冊くらい紹介するのが普通ですが、実際に買っておすすめできるものが2冊だけだったので、これに留めます。書籍も入門には最適で、本のほうがWebよりもやる気が出るという方もいると思いますので、そういう方には特におすすめです。
まとめ
思ったより長くなってしまいましたが、少しでもEmmetの凄さが伝わったなら幸いです。Emmetは導入や使い方は簡単なのに対し効果は抜群なので、ぜひとも覚えていきましょう！
それでは！