Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Riot.jsAdvent Calendar 2016

Day 11
@megane9988

Riot.jsがこれからJSを学ぶのにいいような気がするので使ってみる！

Posted at

どもめがねこと、大串です。こちらは Riot.js Advent Calendar 2016 - Qiita の記事として書いています。

もともとは、JSに興味があるものの、なかなか仕事で使う機会がなく、さらにはJSを使うためにいろいろ技術を組み合わせて使わないといけない。

WebpackやbabelやES6やGulpやnpmやわーーー。。。ということで、全体のことも解らずなのですが、このRiotのコアコントリビュータでもある河村さんに、「メガネさん Riot.js Advent Calendar 2016 に参加してよ。」とお声掛けいただきましたので、とりあえず参加しないわけには行かないということで、ココに書きます。

さて、上記のようにほぼさっぱりわかってないものです。（JSといえば、jQueryアコーディオンするぐらい）なので、そういった私と同じような人がRiot.jsを使えるのか？！　身をもって実験してみましょう。

ひとまず公式サイトです。

なんと、日本語化されてますね。とても助かります。
色々書いてありますが、とりあえず

  1. カスタムタグ
  2. シンプルでミニマリスト

Riotは誰でも使えるWeb Componentsです。React + Polymerから無駄を省いたものを想像してください。ごく自然に使用でき、すごく軽い。それを今日から使えます。車輪の再発明をするのではなく、これらのツールの良いとこ取りで、可能な限りシンプルにしました。

とのことです。使いやすいということがアピールされていますね。これなら何となりそうでしょうか。では早速試してみたいと思います。

取り敢えず触ってみる

とりあえず、ダウンロード のところに、Get Riot! · Riot.js riot.min.js があったのでこれを利用しましょう。

このjsをダウンロードしてHTMLファイルから呼び出しました。ついでにbootstrapのcssを読み込むようにしました。あと自分でCSSを追加するかも知れないのでstyle.cssを入れ込んで、以下のようなファイル構成です。

HTMLは以下のようにしました。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="style.css">
            <script src="riot.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>

さてどうしましょうね。カスタムタグというのがあるようなので使ってみたいと思います。おそらくタグを自分で設定できて、そのタグをHTML内に書けば、それが表示されるみたいな形かなと想像しております。

とりあえず、公式サイトのTOPページに書いてあるものを貼り付けたいと思います

    <todo>
    
      <!-- layout -->
      <h3>{ opts.title }</h3>
    
      <ul>
        <li each={ item, i in items }>{ item }</li>
      </ul>
    
      <form onsubmit={ add }>
        <input>
        <button>Add #{ items.length + 1 }</button>
      </form>
    
      <!-- logic -->
      <script>
        this.items = []
    
        add(e) {
          var input = e.target[0]
          this.items.push(input.value)
          input.value = ''
        }
      </script>
    
    </todo>

おそらくtodoというタグを作っている、気がしますね。また。{} （波括弧）が入ってるところが変数になりそうです。さらに、each って書いてあるところが、li タグなのでおそらくループしそうな気がしますね。さらにformがあるってことは、todoリストが、入力できるのでしょう。最後のscript は雰囲気的にフォームに入力があったら、それをリストに表示するようにするという感じかなと。あくまでも予想ですが、そんな気がします。

ということで、とりあえずHTMLに貼り付けてみました。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="style.css">
            <script src="riot.min.js"></script>
    </head>
    <body>
    
    <todo>
    
      <!-- layout -->
      <h3>{ opts.title }</h3>
    
      <ul>
        <li each={ item, i in items }>{ item }</li>
      </ul>
    
      <form onsubmit={ add }>
        <input>
        <button>Add #{ items.length + 1 }</button>
      </form>
    
      <!-- logic -->
      <script>
        this.items = []
    
        add(e) {
          var input = e.target[0]
          this.items.push(input.value)
          input.value = ''
        }
      </script>
    
    </todo>
    </body>
    </html>

すると！

んー、どう考えても間違ってそうですね。さらにChromeさんのコンソールではエラーが出ています

    (index):31 Uncaught SyntaxError: Unexpected token {

なんかちがいますね、もうすこしGuideを読んでみましょう。Live demo · Riot.js をみると以下のようなHTMLのサンプルがあります。

    <html>
      <head>
        <title>Hello Riot.</title>
      </head>
      <body>
        <!-- place the custom tag anywhere inside the body -->
        <sample></sample>
        <!-- include the tag -->
        <script type="riot/tag" src="sample.tag"></script>
        <!-- include riot.js -->
        <script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
        <!-- mount the tag -->
        <script>riot.mount('sample')</script>
      </body>
    </html>

ほうほう、作ったタグ(多分sample)をHTML内で読み出していますね。そして.tagというファイルをriot/tag で呼び出しているのがわかります。さらに、cdnでriot+compiler というのを呼び出していますね。先のダウンロードのページにありました。さらに、riot.mount というのもありますね。とりあえず見よう見まねで書き換えてみます。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <todo></todo>
    <script type="riot/tag" src="todo.tag"></script>
    <script src="riot+compiler.min.js"></script>
    <script>riot.mount('todo')</script>
    </body>
    </html>

こんな感じになりました。riot.min.jsもあらたにriot+compiler.min.jsをダウンロードして読み込んでいます。すると

お、とりあえずフォームは出ましたね。入力して、Add をおすと、一瞬上部にリストで出ますがすぐに消えてしまいます。

しかし動くのは動きました。

  • .tagファイルにカスタムタグの内容を書く
  • 読み込むのはriot+compiler.min.js
  • でタグを有効化する? 多分そんな感じ

カスタムタグを作ってみる

調子に乗ってmeganeというタグを作ってみましょう。meganeというタグを入れるとなにかしらメガネの画像が表示されるというのがいいですよね。

HTML

    <!DOCTYPE html>
    <html lang="ja">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="container">
            <div class="row">
                    <div class="col-sm-12">
                            <megane></megane>
                    </div>
            </div>
    </div>
    </div>
    <script type="riot/tag" src="megane.tag"></script>
    <script src="riot+compiler.min.js"></script>
    <script>riot.mount('megane')</script>
    </body>
    </html>

megane.tag

    <megane>
      <img src="megane.jpg" height="885" width="1600" alt="">
    </megane>

結果

おーおー、
meganeタグが爆誕しました。いい気分ですね。ほほー。( 画像は眼鏡 - Wikipedia から利用しています。)

これでHTMLのどこにでもいつでも眼鏡の画像を表示することが出来ますね。しかもmeganeタグで一元管理されているので、meganeタグ内の画像を変えるだけで、簡単にすべての利用箇所の画像が差し替えられそうです。

簡単だーー！！！

タグのスタイリング

もう少し調子にのってみましょう。タグのスタイリング　を見てみるとstyleの同梱できそうですね。やってみましょう。

megane.tag

    <megane>
      <img src="megane.jpg" height="885" width="1600" alt="">
    <style>
      megane { 
        background-color: #f6f6f6;
        margin: 20px 0;
        padding: 20px;
        display: block;
        border: 1px solid #ddd;
      }
      megane img {
        border: 1px solid #aaa;
      }
      /** other tag specific styles **/
    </style>
    </megane>

結果

おーおー、
出来てますね。スタイルはheadタグの中にて読み込まれるですね。これでいつでもどこでも眼鏡がおしゃれに表示できそうです。もうすこし調子に乗ってみましょう

オプションを利用してみる。

以下の様なことが書いてあります。雰囲気的にはmountするときにパラメータがつけられて、それを呼び出すことができそうですね。やってみましょう。

オプション
第二引数にタグのオプションを渡すことができます。


    <script>
    riot.mount('todo', { title: 'My TODO app', items: [ ... ] })
    </script>

    <my-tag>
    
      <!-- Options in HTML -->
      <h3>{ opts.title }</h3>
    
      // Options in JavaScript
      var title = opts.title
    
    </my-tag>

せっかくなので、タイトルを付けてみましょうか。

megane.tag

    <megane>
      <h3>{ opts.title }の眼鏡</h3>
      <img src="megane.jpg" height="885" width="1600" alt="">
    <style>
      megane { 
        background-color: #f6f6f6;
        margin: 20px 0;
        padding: 20px;
        display: block;
        border: 1px solid #ddd;
      }
      megane img {
        border: 1px solid #aaa;
      }
      megane h3{
        margin-top: 0;
        padding: 10px 0;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ccc;
      }
      /** other tag specific styles **/
    </style>
    </megane>

index.html


    <!DOCTYPE html>
    <html lang="ja">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="container">
            <div class="row">
                    <div class="col-sm-12">
                            <megane></megane>
                    </div>
            </div>
    </div>
    </div>
    <script type="riot/tag" src="megane.tag"></script>
    <script src="riot+compiler.min.js"></script>
    <script>riot.mount('megane', { title: 'ウィキペディア'})</script>
    </body>
    </html>

結果

やったぜ！！

というわけで、一番触りの部分を使いながら、記録してみました。恐ろしく簡単ですね。さらに、タグ毎にCSSを書けるので、とてもわかり易い気がします。サーバサイドのプログラムを使わなくて良いし、さくっと書けるので、これはなるほど便利ですね。

私はWordPressのサイト構築をよく行うのですが、最新版の4.7ではWP-REST API といって、Json形式でWordPressとやり取りできるものが、コアに取り込まれたのですが、Riot.jsと一緒に使うことで、私にももしかしたら、SPA的なものが作れるのかもしれません。

今後さらに試してみようと思います。ありがとうございました。

実はこの記事は12月11日(日)の公開の予定でして、今はすでに12日(月)です。今日は、Riot.js を使ってみた - tchsskのブログ です、どうぞ引き続き Riot.js Advent Calendar 2016 - Qiita　をおたのしみください。

それでは！

22
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?