読者です 読者をやめる 読者になる 読者になる

Panda Noir

JavaScript の限界を究めるブログです。

Riotでカスタムタグを作るときの3つのやり方

Riot.js JavaScript

割とまとまってなくて四苦八苦したのでメモ

方法

カスタムタグを書く方法は3つあります。

  1. <script type="riot/tag"></script> の中に直接書く
  2. .tagファイルに分割し、<script src="path/to/file.tag" type="riot/tag"></script> で読み込む(注意点あり)
  3. プリコンパイルし、 <script src="tag.js"></script> で読み込む

1. 直接書く

オーソドックスに直接書きます。このとき、いくつか注意点があります。

  1. カスタムタグ内に <script> と明示的に書く場合、 閉じる </script>書かない
  2. riot.js ではなく、 riot+compiler.js を読み込む

2はわかるとして、1はこういうことです。

<my-custom-tag></my-custom-tag>
<script src="path/to/riot+compiler.js"></script>
<script type="riot/tag">
<my-custom-tag>
  {hoge}
  <script>
    this.hoge = "hoge";
  // </script>は書かない!
</my-custom-tag>
</script> <!-- ここにたどり着かなくなるから -->
<script>
riot.mount('*');
</script>

</script> を書くと、 <script type="riot/tag"> が閉じられてしまい、 </my-custom-tag> まで読み込まれずエラーとなるようです。

2. 分割して書く

この場合もブラウザ側でコンパイルするので riot.js ではなく riot+compiler.jsを読み込みます。

この方法の場合、とても大事な注意点があります。 ローカル環境で閲覧できない ことです。要するにクロスドメイン制約に引っかかります。ローカルサーバ建てるなら別として、基本的にローカル環境で閲覧できません。

というわけなので、ローカル環境で使う時は1. の直接書くか、3. のプリコンパイルして読み込むかしかできません。

分割して書くサンプルはこんな感じです

↓HTML

<my-custom-tag></my-custom-tag>
<script src="path/to/riot+compiler.js"></script>
<script src="src/tags/customTag.tag" type="riot/tag"></script>
<script>
riot.mount('*');
</script>

↓customTag.tag

<my-custom-tag>
  {hoge}
  <script>
    this.hoge = "hoge";
    // 今度は1とは違い、</script>を書いてもOKです。
  </script>
</my-custom-tag>

こちらは</script>を書いても、<script type=“riot/tag”>の中でないので問題ありません。

3. プリコンパイルする

この場合、 npm i riot -g としてRiotをインストールする必要があります。

この方法なら、カスタムタグ内でES2015やCoffeeScriptを使うことができます。もちろん、使いたいものに合わせてコンパイラをインストールしなければなりませんが。

コンパイラなど環境を整える手間をおしまず、一々コンパイルする手間が惜しくないなら、この方法が一番いいと思います。

それと、プリコンパイルしたファイルを読み込むときは、拡張子は.tagではなく.jsにして、 type=“riot/tag"をつけないでくださいコンパイル後のコードはただのJavaScriptなのでこうしないと動きません。

サンプルはこんな感じです。

<my-custom-tag></my-custom-tag>
<script src="path/to/riot.js"></script><!-- compilerはいらない -->
<script src="dist/tags/customTag.js"></script><!-- 拡張子はjs -->
<script>
riot.mount('*');
</script>

コンパイルするときのコマンドはこれがベストプラクティスのようです。

riot --ext tag.html src/tags/customTag.tag.html dist/tags

拡張子を.tag.htmlとすることで、エディタが適切なシンタックスを選択しやすくなります。