Emmetを使ってコーディング作業を爆速化しよう！WordPressもだよ！！

どうもどうも！五体満足じゃねぇクリエイティブディレクターぐっさんでございます。サマー突入で毎日暑いですね。今年は血流を良くする漢方薬を飲んでるためか、いつもよりカラダが火照ってますよwww

さて本題です。みなさんはタイピングスピードに自信ありますか？

残念ながらボクはタイピングスピードは遅いです。元々遅かったのですが、くも膜下出血を患ってから右半身の細かい動きがビミョーで更にタイピングスピードが劇的に遅くなりました！

しかしながら、コーティングのスピードはそこそこです。それはなぜか？
タイトルにもありますかEmmetという拡張機能を使っているからです。

Emmet — the essential toolkit for web-developers https://emmet.io/

だいぶ浸透しているのでご存知の人が多いかもですが。

Emmetは前はzen-coadingと言われてましたが、htmlとcssの記述を短縮化出来る奴です。これを使う事によって…

・タイプミスが少なくなる
・タイピングが少なくなるので腕が疲れない

と便利グッズ！コーダーさんはほぼほぼ必須アイテムだと思います。

これを使う事によってタイピングスピードは遅くてもコーティングのスピードは遅くならない…いや慣れたら劇的に上がるかも？というものです。

百聞は一見にしかず。1例をば。
例えばリストタグを<li>を5個作ってその一個一個のliにaタグ（リンク）をつける場合….当たり前にコードを書くとこうなりますよね。


<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>
</ul>

それがEmmetだったら。こうゆう風になります。いわゆる短縮記法ですかね


ul>(li>a)*5

そう書いてTabキー（もしくはCtl+E。このへんは使ってるエディタで変わってきますし。設定で変えれます！）で展開。そうすると前述で書いたようになります

少し書き方（法則?）を覚えなくてはいけませんが、そんなに難しくありませんし今後の爆速コーディング作業のためなら覚える時間を惜しんでは行けないっす(๑•̀ㅂ•́)و✧

ちなみにボクはhtml記述で使ってますが、cssも爆速でかけるんです。リハビリ中にcssの方は練習して覚えようかなと

【Emmetの使い方を詳しく紹介してる参考ブログ】もいくつか紹介しておきます

・Emmetってどれくらい活用してる? 略して楽するハッピーコーディング！ | 東京上野のWeb制作会社LIG →https://liginc.co.jp/member/member_detail?user=okazawa_shinya
・Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG → https://blog.leko.jp/post/introduction-of-emmet/

で、最近知ったのですが、ボクが使ってるWordPressもプラグインでEmmetが使える！

WP Emmet – WordPressのテキストエディタでEmmetが使える！ | ザ・サイベース → https://thesaibase.com/wordpress/wp-emmet

えーっ(・_・;)

これならわざわざエディタで記述したものをコピペする必要なくWordPressのエディタ上で記事が書ける！

コードを直接書いて、記事を書いたほうが、キレイなコンテンツになるんですよね。（デモ最近導入された新エディタ「Gutenberg」を使ってる。なんかよさげ）

WordPress任せだと（ビジュアルエディタで書くと）ビミョーなコードで仕上がりがうーん(･ัω･ั)て感じになる。

それがEmmetのプラグインを入れてしまえば、サクサクっとテキストエディタでコードを書き書きして記事が書けるってもんです。

けど注意点が。

ボクが使ってた感想ですがフォームプラグインの『MW WP Form』を使ってるのですがフォームを作る時に上手くフォームが作れなかったです。

フォームパーツを選択してInsertさせても普通ならコードが表示されるはず何やけど、何故か表示されなかった。

で、Emmetプラグインを止めてフォームを改めて作ったら問題なかった。

プラグインの相性悪かったかな？