Jadeで作るカスタムタグ入門 #JavaScript

この記事は「Web Componentsとかに興味はあるけど、SEOも大事なんだよなー」という方向けの内容です。

`rating`タグを作る

例えば、下のように表示されるratingタグを作りたい場合。

HTMLには<input type="rating" />も<ratings />タグも無いので、Jadeで自作します。

まず先にJadeの記法について軽く触れておくと、

Jade

a(href="/" target="_blank") Home

のように書くと、コンパイル後に次のようなHTMLが出てきます。

HTML

<a href="/" target="_blank">Home</a>

imgタグのような空要素の場合はこう書きます。

Jade

img(src="logo.png" alt="ロゴ")

どことなくJavaScriptの関数の呼び出しに似ています。
実際にこういうこともできます。

Jade

+say(hello="world")

先頭に+をつけると関数（mixin）の呼び出しになります。
なので、事前にsayを定義しておきましょう。

Jade

mixin say
  if (attributes.hello && attributes.hello !== "")
    p Hello, #{attributes.hello}

JavaScriptにそっくりですが、ブラウザ上で実行されるわけではありません。静的なHTMLを出力します。

この場合のコンパイル結果はこうです。

HTML

<p>Hello, world</p>

hello属性を持ったカスタムタグsayの完成です。

実装に入る前に、ratingタグとはどうあって欲しいかを明確にします。

つまり、

Jade

+rating(value="3")

や、

Jade

+rating(value="50" max="100")

のようになるイメージです。

長くなりそうなので、先に完成品をご覧ください。

CSSを無効にして見ると分かりますが、各星がinput(type="radio")で実装されています。valueが"0"の場合もあり得るので、デフォルトのradioの数は6です。

後はCSSで頑張るのと、JSをちょっとだけ書きました。「星の表示精度は0.5刻み」という仕様がなければ、JSがなくてもちゃんと動きます。

ratingタグは少し複雑なので、最初はもう少し簡単なカスタムタグから始めた方がいいかもしれません。

以上です。

Have a nice SEO!