イイダリョウのブログ。Pug】HTMLテンプレートエンジン事始めHTMLHTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Pagなどをよく見聞きしますね。これらの形式をブラウザで表示するためにはHTMLにコンパイル(変換)する必要があります。その環境構築が第一難関です。!CodePenを使えば環境構築なしにテンプレートエンジンを体験することができます!!早速やってみました。目次:CodePenのSetting(設定)変更EmmetHamlHAMLの主な記法コンパイル後のコード表示MarkdownMarkdownの主な記法SlimSlimの主な記法PugPugの主な記法まとめ※参考:HTMLの基本についてはこちら【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2※2019/10/20:この記事上にソースコードがありませんでしたが、追記しました。CodePenのSetting(設定)変更CodePenでどうやってテンプレートエンジンを体験するか。設定を変更する必要があります。右上にある「Setting」をクリックしてください。Preprocessor>HAML」などが選択できます。jQueryのCDNリンクなどもこのSettingで設定します。英語メニューのため、何気にここに辿り着くのもハードルかもしれません...。Settingの旅の幕開けです!Emmetとその前に...初めにいきなり「テンプレートエンジン」とは少し違うのですがCodePenが標準で対応しているという「Emmet」を試してみたいと思います。テキストエディタにプラグインとして拡張するツールのようですが、CodePenでは標準機能のためSettingも何も変える必要はないようです。CodePen.おお!<div><h1></h1><p></p></div>に変化した!ここに中身を入れていくわけか。これば便利!しかしながら、変化した後の修正は通常のHTMLと変わらないわけね。PenはEmmetに最初から対応しているそうな。適当な文章を書いてみる。そこにEmmetの記法を割り当てたい。CodePenの記法を書いた後にタブを押せば良いらいい。「div>h1+p」と書いて、タブを押す。おお、展開された!では、早速この文章を入れ込もうか。</p></div>Emmetは昔は「Zen-Coding」と呼ばれていたそうです。禅コーディング!渋い!HTML以外にCSSにも色々使えるようです。Hamlお待たせしました。それではCodePen、Settingの旅を始めましょう。ズラズラと並んでいますが、正直何がどう良いのかなどの知識も気迫なので上から順番に体験してみたいと思います。