Riot.jsを使ってみた

こんにちは、いまこです。

最近仕事では主にLaravelを使用しており、
新しい技術に触れることが出来て非常に楽しいのですが、
jsはフロントエンジニアさんにまかせっきりになってしまい、あまり触る機会が無くなっており…

そこで！時代に取り残されない為にも！
今回は今流行り？のRiot.jsについて書いていこうと思います！

1 Riot.jsとは
2 Hello World!
- 2.1 コード
- 2.2 解説
3 TODOアプリ
- 3.1 コード
  - 3.1.1 html
  - 3.1.2 todo.tag
- 3.2 デモ
4 最後に

Riot.jsとは

React likeを謳う、コンポーネント指向なJavaScriptフレームワーク
Reactよりも軽量で書きやすい(比較コード)
VirtualDom
コンパイラ搭載
プリコンパイルも可能で好きな言語を使用可能(詳細)

Hello World!

ではとりあえず試してみましょう！

コード


<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Riot.js Test</title>
        <!-- riot.js読み込み -->
        <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js'></script>
    </head>
    <body>
        <!-- helloタグ -->
        <hello></hello>

        <script type="riot/tag">
            // helloタグの中身
            <hello>
                <h1>{ title }</h1>
                // titleを取得
                this.title = opts.title;
            </hello>
        </script>
        
        <script>
            // マウント
            riot.mount('hello', {
                // タイトルをセット
                title: 'Hello World!'
            });
        </script>
    </body>
</html>

解説

riot.js読み込み

riot.jsは普通にダウンロード、CDN、パッケージマネージャー等、様々な方法で入手できますが、今回はとりあえずCDNで読み込んでいます。
読み込んでいるのは、コンパイラ付のファイルなので、自動的にコンパイルしてくれます。

helloタグ

riot.jsで作成された、タグをの出力箇所です。

helloタグの中身

タグの中身を作成します。
普通にhtmlタグを使用することが可能です。
optsはタグに渡されたオプションで、マウント時にセットしたtitleが入っています。

マウント

最後にマウントを行います。
ここでtitleをセットしています。

TODOアプリ

簡単な使い方がわかったところで、TODOアプリを作ってみようと思います。

コード

html


<!doctype html>
<html>
    <head>
        <title>Riot todo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/todo.css">
    </head>
    <body>
        <!-- todoタグ出力 -->
        <todo></todo>

        <!-- todoタグの中身読み込み -->
        <script src="js/todo.tag" type="riot/tag"></script>
        <!-- riot.js読み込み -->
        <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

        <script>
        // todoタグマウント
        riot.mount('todo', {
            title: 'TODOリスト',
            // 初期リスト
            items: [
                { title: 'タスク1' },
                { title: 'タスク2' },
                { title: 'タスク3' }
            ],
            // ステータス
            status: [
                { name: '未対応', value: '1' },
                { name: '対応中', value: '2' },
                { name: '対応済', value: '3' },
            ]
        })
        </script>
    </body>
</html>

todo.tag


<todo>
    <h3>{ opts.title }</h3>

    <ul>
        <!-- 初期リストループ -->
        <li each={ items.filter(whatShow) }>
            <!-- done=trueの場合はcompletedクラスが付く、背景色の設定 -->
            <label class={ completed: done } style="background-color:{ color }">
            <!-- チェックがついたらtoggleメソッドが実行され、doneが変更される -->
            <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
            <!-- 値が変更されたらchangeColorメソッドが実行され、colorが変更される -->
            <select onchange={ changeColor }>
                <!-- ステータスループ -->
                <option each={ status } value={ value }>{ name }</option>
            </select>
            </label>
        </li>
    </ul>

    <!-- submit時にaddメソッドを実行 -->
    <form onsubmit={ add }>
        <!-- クリック後にeditメソッドを実行 -->
        <input name="input" onkeyup={ edit }>
        <!-- textが無い場合はdisabled、次のタスクが何個目なのかを表示 -->
        <button disabled={ !text }>Add #{ items.filter(whatShow).length + 1 }</button>
        <!-- doneがfalseの場合はdisabled(チェックがついていない場合)、クリック時にremoveAllDoneメソッドを実行、チェック数を表示 -->
        <button disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>X{ items.filter(onlyDone).length }</button>
    </form>

    <!-- this script tag is optional -->
    <script>
    // 使用する値の設定
    this.items = opts.items
    this.status = opts.status
    this.color = 'red'

    // textの設定
    edit(e) {
        this.text = e.target.value
    }

    // textが入っていた場合itemsに追加、追加後はtextを空にする
    add(e) {
        if (this.text) {
            this.items.push({ title: this.text })
            this.text = this.input.value = ''
        }
    }

    // done=true(チェックがついている物)を削除(itemsの値を変更)
    removeAllDone(e) {
        this.items = this.items.filter(function(item) {
            return !item.done
        })
    }

    // hidden=trueの物を表示させない
    whatShow(item) {
        return !item.hidden
    }

    // done(チェックがついているか)を返す
    onlyDone(item) {
        return item.done
    }

    // doneの値を変更
    toggle(e) {
        var item = e.item
        item.done = !item.done
        return true
    }

    // リストの色を変更
    changeColor(e) {
        var value = e.target.options[e.target.selectedIndex].value
        var color
        switch (parseInt(value)){
            case 1:
                color = 'red'
                break;
            case 2:
                color = 'blue'
                break;
            case 3:
                color = 'green'
                break;
        }
        e.target.parentElement.style.backgroundColor = color
    }
    </script>

</todo>