マークアップコーディングを爆速化するemmetのすヽめ

# 概要
本記事ではマークアップコーディングを爆速化できる `emmet` の紹介をします．
emmetとは，開発者のHTMLやCSSのコーディング効率を大幅に改善することができるツールキットです.([公式サイト](https://emmet.io/)より)
だいたいのエディターにプラグインが用意されているので，簡単に使い始める事ができます．

本記事は普段あまりHTMLを触らない人を対象にしています．

## 本記事の流れ
本記事の流れは以下となります．

1. 環境について
2. Emmet基礎
2. Emmet導入
* Emmet実践
* おまけ マークアップのコツ?

## Emmet基礎編
百聞は一見に如かず，ということでEmmetでなにができるかというと

↓これを書いて`tab`を押すと

```
div>ul>li
```

↓こうなります

```
<div>
    <ul>
        <li></li>
    </ul>
</div>
```

このように簡単にマークアップを展開することができます．
これはとても簡単な例なので便利さが伝わりづらいですが，もっと複雑なマークアップを書く時により効いてきます．
それは実践編で紹介します．

**Emmetでは`div`や`ul`などのタグと， `>`や`+`などの演算子を用いることになります．**

### Emmetで使える演算子
Emmetのチートシートです．
多くの演算子がありますが，とりあえず覚えておくべき演算子をピックアップしました．(参考:[公式ドキュメント](https://docs.emmet.io/abbreviations/syntax/))

### 1. Child: >

childを使う事で要素をネストさせることができます．

```
div>ul>li
```
↓展開後

```
<div>
    <ul>
        <li></li>
    </ul>
</div>
```

### 2. Sibling: +
Siblingを使う事でネストせずに要素を追加することができます．

```
div+p+bq
```
↓展開後

```
<div></div>
<p></p>
<blockquote></blockquote>
```

### 3. Climb-up: ^
Climb-upを使う事で階層を上げる事ができます．

```
div+div>p>span+em^bq
```
↓展開後

```
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
```
**`^`を連続で記述することで，その分だけ階層を上げることができます．**

```
div+div>p>span+em^^^bq
```
↓展開後

```
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
```

### 4.Multiplication: *
Multiplicationを使う事で，要素を指定した数だけ出力できます．

```
ul>li*5
```
↓展開後

```
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

### 5. ID and CLASS
idとclass指定して要素を展開できます．
id指定では`#`を，class指定には`.`を使います．

#### id指定

```
div#header
```
↓展開後

```
<div id="header"></div>
```

#### class指定

```
div.page
```
↓展開後

```
<div class="page"></div>
```

### 6. Text: {}
`{}`を使うことで要素内のテキストを指定できます．

```
a{Click me}
```
↓展開後

```
<a href="">Click me</a>
```

## Emmet導入

### 1. Atomダウンロード
https://atom.io/ より，Atomのダウンロードを行ってください．

### 2. Emmetプラグイン導入
1. まずはAtomを開きます
 開くと以下のような画面になるかと思います．
<img width="1342" alt="スクリーンショット 2019-02-10 4.03.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/cace3005-f690-763c-4c6e-462a271a9c9b.png">


2. `install a package` ，もしくはツールバーの `Packages > Settings View > Install Packages/Themes` から `Install Packages` 画面を開きます．
<img width="1342" alt="スクリーンショット 2019-02-10 4.03.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/bc142f99-b5b3-f92a-2065-cc1a6d8f9e93.png">


3. 検索窓に`emmet`と入力し，Installをクリックします．
<img width="1343" alt="スクリーンショット 2019-02-10 4.04.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/eb94ccef-30d2-f652-b916-4632a99387b1.png">


4. Atomを再起動する

以上で導入は終了です．


## 実践編
実践編ではgithubのヘッダーのようなものを作ってみましょう．

<img width="1408" alt="スクリーンショット 2019-02-11 1.52.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/7e777fa2-7005-d6f4-2f68-a25ccb95e08d.png">

※ CSSを書くところまではやりません
(タグ名やCSS名はてきとうですmm)

まずは一番左のロゴからです．
<img width="1408" alt="スクリーンショット 2019-02-11 1.52.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/e00a4bd5-2985-a698-698d-9c5fdb77f26f.png">

まず，画像を囲う`div`が必要ですね．

```
header>div.header-logo-box
```
さらに，クリックされた時にトップページに飛ぶ必要があるため，aタグも必要になります．
その中にimgタグを埋め込みましょう.

```
header>div.header-logo-box>a.header-logo-link>img.logo-image
```

展開してみましょう

```
<header>
	<div class="header-logo-box">
		<a href="" class="header-logo-link">
			<img src="" alt="" class="logo-image">
		</a>
	</div>
</header>
```

undoして引き続き書き進めましょう．

以下のナビゲーション部分を作ります．
<img width="1408" alt="スクリーンショット 2019-02-11 1.52.52のコピー.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/5c57d6e2-9463-b390-1dc8-3eb514e8079d.png">


```
header>div.header-logo-box>a.header-logo-link>img.logo-image^^+nav>div.search-box>form>input^^+div.nav-list>ul>li*4>a.nav-link{リンクテキスト}
```

展開すると

```
<header>
	<div class="header-logo-box"><a href="" class="header-logo-link"><img src="" alt="" class="logo-image"></a></div>
	<nav>
		<div class="search-box">
			<form action=""><input type="text"></form>
		</div>
		<div class="nav-list">
			<ul>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
			</ul>
		</div>
	</nav>
</header>
```

undoして引き続き作成しましょう．
以下のユーザーナビゲーションを作っていきます，
<img width="1408" alt="スクリーンショット 2019-02-11 1.52.52のコピー2.png" src="https://qiita-image-store.s3.amazonaws.com/0/214145/2e98e7f3-edde-7d2b-7776-0997025b1fdc.png">


```
header>div.header-logo-box>a.header-logo-link>img.logo-image^^+nav>div.search-box>form>input^^+div.nav-list>ul>li*4>a.nav-link{リンクテキスト}^^^+div.user-nav>ul>li*2>a.user-nav-link>img
```
展開すると

```
<header>
	<div class="header-logo-box"><a href="" class="header-logo-link"><img src="" alt="" class="logo-image"></a></div>
	<nav>
		<div class="search-box">
			<form action=""><input type="text"></form>
		</div>
		<div class="nav-list">
			<ul>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
				<li><a href="" class="nav-link">リンクテキスト</a></li>
			</ul>
		</div>
		<div class="user-nav">
			<ul>
				<li><a href="" class="user-nav-link"><img src="" alt=""></a></li>
				<li><a href="" class="user-nav-link"><img src="" alt=""></a></li>
			</ul>
		</div>
	</nav>
</header>
```

このようにあっという間にマークアップが終わりました．
あとはてきとうにCSSをあてたり，テキストを変えたり画像を用意することでそれっぽい感じになると思います．
(暇な時にEmmetのCSS実践編でも書いてみます.実はCSSのほうがEmmetによる効率化を享受することができます..たぶん)


## HTML初心者のエンジニア向けマークアップコーディングのコツ
HTMLを書くことに慣れていないうちは，実現したいUIをどうやって構造化していいかわからない状態だと思います．
**そんな人はまず実現したいUIを手書きしましょう．**

例えば，githubのヘッダーみたいなのを作りたいと考えてみます．
以下のようにとりあえず書きます．
どうせ誰にも見られないので，こんな感じで汚い&雑でも大丈夫です．
![Scannable の文書 (2019-02-11 3_13_30).jpg](https://qiita-image-store.s3.amazonaws.com/0/214145/712469a7-153a-6fac-da09-da91ed395096.jpeg)

そして，どんな構造にするといいか想像しながら先ほどのUIを構造化してみます．
例えば，ロゴの画像を表示するためにはimgタグをaタグで囲わなきゃだめだよなーとか
検索ボックスと横のリストをまとめてナビゲーションで囲ったらいいかなとか
![Scannable の文書 2 (2019-02-11 3_19_47).jpg](https://qiita-image-store.s3.amazonaws.com/0/214145/25e261bb-04cc-db05-35dc-5f7a826a0c72.jpeg)
タグと，できたらCSS名なども書いていくとコードにおこす時に楽になります．

だれかに見せる時は清書することをオススメします．
Illustratorを使えるならこれですぐワイヤーフレームを作成できると思います．

これを繰り返していけば，実現したいUIをどのように構造化すればいいか想像がつきやすくなるかと思います．

## あとがき
全然HTML書いた事とか無いのにコツとか一丁前に紹介しちゃいましたが，ガチフロントエンジニアの方が見たらツッコミどころが多いと思います．
〜違うよや，〜したほうがいいよなどの指摘は是非してほしいですmm