【Web】コーディングをもっと速く楽に！（Emmetを使おう）ーHTML編ー
最終更新日:
弊社のWeb担当者が取り組んだスピードアップ術のひとつ、Emmetを紹介。
コードがどんどん増えていくけど・・・
Webサイトを取り巻く環境は日々、もの凄いスピードで進化していますが、特にこの10年間で別物になったと言っても過言ではないほど大きく変化したのがWebデザインではないでしょうか。スマホの普及による異なる画面サイズのWebサイト表示への対応は、今までのWebデザインを瞬く間に過去の物としてしまいましたね。
このスマホ対応、代表的なアプローチ手法として「アダプティブデザイン」や「レスポンシブデザイン」などがありますが、どの対応を取ってもHTMLやCSSなどのコードは、従来のWebデザインと比べて増えてしまいます。
また、SNSとの連携やCMSの導入などによって、HTMLとCSSだけでWebサイトを完結させることはもうできないですね。JavaScriptやPHP、Pythonなどの言語も駆使して、案件によっては従来の数倍のコーディングが求められるようになったと感じています。
そこで気になるのが、コーディング時間。
コーディングの物量が２倍になったからといって、１ページ当たりの値段も倍にするわけにはいかないですよね？ →営業さん。
ならばコーディングのスピードを速くしちゃいましょ！
てことで弊社のWeb担当者が取り組んだスピードアップ術がいくつかあるのですが、その中でも全員が一番効果を出したEmmetを紹介します。
Emmetを導入して解決しよう
詳しい紹介は割愛しますが、Emmet（エメット）のイメージを簡単に説明すると、コードを圧縮した形で記述しておいて後で展開する、です。
つまり、入力文字数が少なくて済むということですね。
コーディング作業のタイピング数が減れば、それだけで「速く」「楽に」なりますよ！
では、どのぐらいタイピング数が減るのか。
この記事では、具体的にHTMLに絞って説明してみます。
例えばよくある↓こんなナビゲーションのデザイン。
基本のHTMLは
<nav id=“global_nav”>
<ul>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
<li><a href=“”></a></li>
</ul>
</nav>これがEmmetなら
nav#global_nav>ul>li*7>a文字数を数えると
HTMLコード 230文字（スペース、改行、tabを含む）
Emmetコード 25文字（展開ショートカットとして＋１含む）
いかがでしょうか。
単純にキータッチの数が11％程度に減っています。
もちろんEmmetでは対応できない部分もあるので、スピードが倍以上になる！なんてことはそうありませんが、少なくともコードベタ打ちよりは圧倒的に「速く」「楽に」なります。
（完全にマスターした猛者なら、数倍の速度も可能なハズ。）
また、HTMLでは恩恵が少なくて注目されませんけど、CSSならスペルミスを無くしたり、単位の入れ忘れ防止という点もメリットとして大きいですね。
弊社の場合、一部のWeb担当者はEmmetに順応しすぎて、逆にCSSのプロパティ名を正しくスペリングできなくなってしまったり……。
最初はこれだけマスターすれば充分
Emmetのチートシートを見ると、とんでもない数のコードが載っていて、ちょっと浮き足立ってしまします。
参照：Cheat Sheet（https://docs.emmet.io/cheat-sheet/）
でも大丈夫！
最初は、ほんの３つか４つ覚えるだけでも充分に速度効果が出ます。
慣れたら、少しずつ使いやすいもの、よく使うものを取り入れて行きましょう。
一番最初に覚えると良いオススメを以下に紹介しておきます。
一つの要素のみ
HTMLタグが生成されます。
展開前
div展開後
<div></div>>
子要素にできます。
展開前
ul>li展開後
<ul>
<li></li>
</ul>+
兄弟要素にできます。
展開前
h2+p展開後
<h2></h2>
<p></p>*n
n回繰り返します。
展開前
p*3展開後
<p></p>
<p></p>
<p></p>()
グループ化できます。
展開前
(h4+p)*2展開後
<h4></h4>
<p></p>
<h4></h4>
<p></p>いかがでしょうか？
最初はこれらの簡単なものだけでいいのです。
次第に慣れて、考える時間もなくスムーズにコーディングできるようになったら、徐々に使えるEmmetを増やして行きましょう。
連番を振ったり、テキストの入れ込みなどを組み合わせ始めれば、もうEmmetが手放せなくなります。
服部プロセスでは、より良い商品を迅速にお客様にお届けできるよう、現場のオペレーターも常に時短と効率化に取り組んでいます。
Emmet以外にも取り組んだスピードアップ術がいくつかあるので、また紹介していきます。
投稿者：trinity-k