By U Zensen.

欲しいものはプログラミングで自分で作る。

【入門編】最強のJavaScriptフレームワーク「Riot.js」を触ってみました!

2016 / 7 / 12 2016 / 9 / 26
JavaScript
Riot.jsの使い方

はじめに!!

こんばんは!ぴーすけです!

巷で噂の「Riot.js」の基本的な機能を使ってみました!名前がかっこいいし、なんか評判がいいから気になっていたんですよねー

簡単だ簡単だとは聞いていましたが、確かにあっという間にやりたい事が実装できました。

今回はそんなRiot.jsの基礎の基礎をまとめたいと思います。

【注意】

Riot.jsは比較的新しいフレームワークなので、バンバンバージョンアップをしています。これから紹介する記述はバージョン2.5.0で実際に動いた方法となります。

動作は確認していますが、記述方法が最適なものかどうかはわかりませんので、ご了承ください。

スポンサードリンク

Riot.jsとは!?

以下、Riot.jsの公式サイトになります。

上記サイトにも書かれていますが、Riot.jsとは、React.jsに影響を受けたJavaScriptのフレームワークです。

細かい事は公式サイトを見ていただくとして、とにかく無駄を省いたシンプルなフレームワークという事みたいです。

ファイルサイズもReactの5分の1程度しかないみたいです。

使う準備!!

Riot.jsを使うためには、jQueryみたいにRiot.jsの機能が記述されているファイルをページ内で読み込む必要があります。Riot.jsをダウンロードしてローカルから読み込む事もできますが、Riot.jsもjQueryのようにCDNが使えます。

CDNとは、ネット経由で使いたいファイルを読み込むことにより、いろいろあって、WEBサイトの表示の速度の向上にもつながります。

本来ならばローカルに保存してそこからそのファイルを読み込まなくてはいけないのが、ネット経由でその機能を使えるので便利です!

HTMLファイルの<head>内に以下の記述をします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js"></script>

これで準備OKです。

基本的な使い方!!

Riot.jsを書くには基本的に3つの構成になっています。

カスタムタグの展開先

空のカスタムダグを用意します。ここでは

<item></item>

とします。ここに後で設定する内容が代入されてきます。

カスタムタグの構成

以下のようにカスタムタグの構成を用意します。

<script type="riot/tag">
  <item>
    <div>
      <p>{ name }</p>
    </div>
    this.name = '上記{ name }に入る値';
  </item>
</script>

ポイントは2つ

//ポイント1
<script type="riot/tag">
  //カスタムタグの構成
</script>

でカスタムタグの構成を囲います。そしてここでのカスタムタグの構成は、上記で用意したカスタムタグの展開先と同じカスタムタグ名で用意します。

//ポイント2
<item>
  //タグなど
  //その下にjavascriptなど
</item>

カスタムタグのマウント

用意したカスタムタグの構成をカスタムタグの展開先にマウントするために以下の記述をします。

<script>
  riot.mount('item');
</script>

これの3つを上手く用意すればOKです!!

基本的な使い方の例を幾つか載せたいと思います。最後には軽く説明していますので、例をみてから見てみてください!

カスタムタグ

一番基本的な使い方です。

See the Pen grdzpL by p-suke (@p-suke) on CodePen.

イベントハンドラ

カスタムタグ内で使うイベントハンドラです。

See the Pen rLkvVk by p-suke (@p-suke) on CodePen.

カスタムタグ内のスタイル

カスタムタグ内のスコープで使えるスタイル指定ができます。

See the Pen xOajGo by p-suke (@p-suke) on CodePen.

eachでループ

配列を用意し、その中身を出し切るまでループさせる方法です。

See the Pen oLPdjg by p-suke (@p-suke) on CodePen.

レンダリングタイミング

カスタムタグ内のイベントハンドラが動くと再レンダリングします。

See the Pen BzOxok by p-suke (@p-suke) on CodePen.

さらに、明示的に再レンダリングする方法があります。

See the Pen KrxRdR by p-suke (@p-suke) on CodePen.

まとめ!!

以上です!ほとんど公式サイトのDEMOを元にしているので、そちらを参考にしていただいても良いと思います。

とにかく、使ってみて本当に学習コストが少ないなーと思いました!1日でだいたいやりたい事はできるようになります。

カスタムタグの構成を書く部分を外部ファイルにして読み込むようにもできるので、ソースももっと綺麗にできると思います。

次の記事では、定番の「TODO」と「ルーティングを使ったSPA」のやり方を記事にしたいと思っています。

SPAといえば画面が切り替わる際にフェードアウト、フェードインをさせたい時も多いと思います。Riot.jsの記事はまだまだ少ないので、なかなか見つかりませんでしたがページが切り替わる度にじわっとフェードインさせる方法も見つけたので、参考になると思います。しょしょお待ちをー!!

Pocket

コメント

コメントを残す