はじめに

前回の記事から8ヶ月近くが経とうとしております。
みなさまいかがお過ごしでしょうか。

前回書いてた『Gulpを用いたフロントエンド開発環境の構築』の次の記事も結構下書き書いていたのですが、途中で保存したまま放置してました。。

久しぶりに書くので、気を取り直して新しい記事を書こうかと思います。
(そのうち前の記事の続きも書きますよ。。きっと)

新しく書く記事の内容ですが、最近勉強を始めた Riot.js を用いたSPAサイトを構築する方法を勉強しながら記事にしていきたいと思います。
自分もまだ開発環境の最適化をしていないので、今回は環境構築に関しては触れません。

とりあえず簡単に動くものを作っていきたいと思います。

シリーズ

空のHTMLファイルを作ろう

とりあえず、空のHTMLファイルを作成します。

以下のファイルを作成してください。

riot_spa.html

<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="Riot.jsでSPAサイトを構築する方法" />

    <title>Riot.jsを使ってSPAサイトを作ってみる</title>

  </head>

  <body>
  </body>

</html>

Riot.jsを読み込む

今回はローカルでプリコンパイルを行わないので、インブラウザコンパイルのできる、コンパイラ入りのRiot.jsを使用します。
バージョンは最新(2016/11/21時点)の 2.6.7 を使用します。

先ほど作成したhtmlファイルの head に以下を追記してください。

riot_spa.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.js'></script>

カスタムタグを作成しよう

Riot.jsではHTMLとJavaScript、CSSを使用し、再利用可能なコンポーネントとしてカスタムタグを定義することができます。

まずは、メニュー付きの mainタグ を作成します。
bodyに以下を追記してください。

riot_spa.html

<script type='riot/tag'>
  <main>
    <h1>{title}</h1>

    <ul>
      <li each='{list}'>
        <a href='#{tagName || 'no_tag'}' onclick='{click}'>{title}</a>
      </li>
    </ul>

    // thisは常に常に現在のタグのインスタンスを指す
    this.list = [
      {
        tagName: 'first',
        title: 'さいしょのぺーじ'
      },
      {
        tagName: 'second',
        title: '2、2番目だと'
      },
      {
        tagName: 'third',
        title: '銅メダル！'
      },
      {
        title: 'ぶーびー'
      },
      {
        tagName: 'last',
        title: '最終ページや'
      }
    ]

    this.title = opts.title || 'HOME';

  </main>
</script>

追記した内容を説明します。

scriptタグのtype='riot/tag' ですが、これはコンパイル時にカスタムタグをJavaScriptに変換するために、ここにカスタムタグ書いてますよーと明示するためのものです。
each属性を定義することで、定義された要素は配列の要素の数だけ繰り返されます。
{tagName || 'no_tag'}はテンプレート変数と呼ばれるものです。
- 属性かネストされたテキストに使えます。
- テンプレート変数は100%JavaScriptです。

カスタムタグをマウントしよう

それでは、先ほど定義したカスタムタグを表示しましょう。
そのためには、定義したカスタムタグを body に追記します。
また、定義したカスタムタグをマウントすることで、 body に追記されたカスタムタグを読み込むことができるようになります。

riot_spa.html

<body>
  <main></main>

  <script type='riot/tag'>
    <main>
    ...
    </main>
  </script>

  <script>
    // マウント
    riot.mount('main');
  </script>
</body>

実行しよう

作成したHTMLファイルを実行し、メニューが表示されたことを確認してください。

これで、Riot.jsを使用してカスタムタグの定義 => 実行までは完了です。

まとめ

今回の重要な点は以下の5つになります。

インブラウザコンパイルする場合はコンパイラ入りのRiot.jsを読み込む。
カスタムタグを定義する時は、scriptに type='riot/tag' を定義する。
each属性 を定義するとループ処理が行われる。
テンプレート変数 は属性かネストされたテキストに使用できるJavaScript。
riot.mount('カスタムタグ名') でカスタムタグをマウントする。

次回は今回触れなかった {click} の実装と、画面の切り替えを説明します。
(今回こそは続ける。。。)

えんじにあときどきくらいまー

個人的な技術メモとかボルダリングのこととかなんか色々書けたらいいなぁ

Riot.jsを使ってSPAサイトを作ってみる基礎編 Section1 ～Riot.jsの使い方～