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

5173 ワード
JavaScript CSS WebComponents grunt Jade CSS テキストリンク

この記事は「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タグの仕様を決める

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

  • valueをセットできてsubmitできるようにしたい
  • readonly属性で読み取り専用にできるようにしたい
  • stars属性で5段階評価から変更できるようにしたい
  • max属性でvalueの最大値を設定したい
  • max属性がある場合は、starsとの割合でvalueを表示したい
  • 星の表示精度は0.5刻み、入力精度は1刻みにしたい
  • 入力はタップで行いたい

つまり、

Jade
+rating(value="3")

や、

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

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

ratingタグの完成

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

動作の仕組み

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

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

詳しいソースはこちら

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

以上です。

Have a nice SEO!