Riot.jsでSPAを作る 2018/12/13 fun-tech #7 @khdd-mks

自己紹介 ・北島久資 (@khdd-mks) ・オープンストリーム所属 アーキテクト ・ fun-tech 運営 ・ Scala が好きですが 仕事では Golang, Python, javascript とかやってます …

Riot.js

https://riot.js.org/

Riot.js ・ Web 上の UI コンポーネントを作るためのライブラリ ・要するに React.js や Vue.js と同じような領域のライブラリ ・ React.js や Vue.js よりも軽量でシンプルなのが特徴

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' }

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } 全体をカスタムタグ名で囲む

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } HTMLを記述する 変数の埋め込みとかあるけど 何となく分かる感じ

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } CSSを記述する 普通に h3 { font-size: 14px; } みたいな感じで記述

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } 処理を記述する thisでカスタムタグ自身にアクセスできる メソッドを定義してHTML側のイベントハンドラ に指定する等が可能

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } カスタムタグに関する内容が 全て同じ場所に記述されているので 分かりやすい

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする

Hello Riot. riot.mount('todo')

Hello Riot. riot.mount('todo') コンパイラ付のRiot.js クライアント側でカスタムタグをjavascriptに変換して実行す る

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする

Hello Riot. riot.mount('todo') カスタムタグ名そのままのタグを用 意するのが簡単 マウント方法が若干変わるが divタグ等でも可能

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする

Hello Riot. riot.mount('todo') カスタムタグファイルは普通にスクリプト タグで読み込めばいい riot.mount(‘todo’) で にtodoタグの内容が埋 め込まれる

webpack のようなビルドシステムを 使わなくても普通にできる すごく簡単！！

|ﾟдﾟ) ＜ とか言って 実システムで webpack とか使 おうとすると逆に困るんだろ、 騙されんぞ

|ﾟдﾟ) ＜ とか言って 実システムで webpack とか使 おうとすると逆に困るんだろ、 騙されんぞ 大丈夫です

ビルドシステムを使用する場合 ・ webpack であれば riot-tag-loader 等の loader を使えば問題ない ・仮に他のビルドシステムを使用しており、そのビルドシステム用のものが 存在しなかったとしても $ riot --esm [カスタムタグのあるディレクトリ] [出力先のディレクトリ] でESモジュールに変換できるので、変換後のファイルを使用すればいい

ビルドシステムを使用する場合 // エントリポイントのjavascriptファイル import riot from 'riot'; require('./tags/todo.tag'); riot.mount('todo');

…require?

ビルドシステムを使用する場合 // エントリポイントのjavascriptファイル import riot from 'riot'; require('./tags/todo.tag'); riot.mount('todo'); Riot.jsは内部的に カスタムタグ名とその内容を対応付けて管理している (のでマウント時にカスタムタグ名しか指定していない) → ESモジュールに変換しても何もexportしないのでimportで はなくrequire

Riot.js の基本は分かった というわけで

SPA ※ここからが本題です

SPA SPA(SinglePageApplication) ・1つのページでアプリケーション全体を構築する手法 ・利点：ページ遷移を伴わないので高速化・通信量削減が期待できる ・欠点：クライアントサイドが複雑化しやすい

SPA に欠かせないのが 「見た目上ページ遷移して いるように見える機能」

Riot.js の場合 何を使用することも可能だが 特にこだわりが無いのであれば Riot.js の補助ライブラリである

Riot-Route

Riot-Route ・Riot.jsに標準では組み込まれていない → 別のものを使ってもいい ・特にRiot.jsと相乗効果は無い → Vue.jsのRouter (「Vue.js のコアと深く深く統合されており」とか紹介されている) 等とは真逆の発想 ・Riot.jsと同じくシンプル

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML で Riot-Router のスクリプトを読み込む 4. HTML 内に各ページ用のカスタムタグのマウント場所を用意する 5. HTML でカスタムタグファイルを読み込むが、直接マウントしない 6. Riot-Route の設定を行い、ルーティングを開始する

ちなみに webpack とか使わなくても できると思うけど ここでは webpack 使う前提で

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML で Riot-Router のスクリプトを読み込む 4. HTML 内に各ページ用のカスタムタグのマウント場所を用意する 5. HTML でカスタムタグファイルを読み込むが、直接マウントしない 6. Riot-Route の設定を行い、ルーティングを開始する

import riot from 'riot'; import route from 'riot-route'; import todoRoute from './router/todo'; import todo2Route from './router/todo2'; import todo3Route from './router/todo3'; require('./tags/menu.tag'); riot.mount('menu'); route.base('/'); // ホスト名以下の部分を #hoge -> /hoge で表示するのに必要 const subRoutes = [todoRoute, todo2Route, todo3Route]; for (const subRoute of subRoutes) { subRoute('div#main'); } route('', () => { route('/todo'); }) route.start(true); 普通にnpm install --save riot-route

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML で Riot-Router のスクリプトを読み込む 4. HTML 内に各ページ用のカスタムタグのマウント場所を用意する 5. HTML でカスタムタグファイルを読み込むが、直接マウントしない 6. Riot-Route の設定を行い、ルーティングを開始する

Hello Riot. 複数のタグ(各ページ用のタグ)を マウントするため divタグで定義

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML で Riot-Router のスクリプトを読み込む 4. HTML 内に各ページ用のカスタムタグのマウント場所を用意する 5. HTML でカスタムタグファイルを読み込むが、直接マウントしない 6. Riot-Route の設定を行い、ルーティングを開始する

import riot from 'riot'; import route from 'riot-route'; import todoRoute from './router/todo'; import todo2Route from './router/todo2'; import todo3Route from './router/todo3'; require('./tags/menu.tag'); riot.mount('menu'); route.base('/'); // ホスト名以下の部分を #hoge -> /hoge で表示するのに必要 const subRoutes = [todoRoute, todo2Route, todo3Route]; for (const subRoute of subRoutes) { subRoute('div#main'); } route('', () => { route('/todo'); }) route.start(true); // ./router/todo.js import riot from 'riot'; import route from 'riot-route'; require('../tags/todo.tag'); // 直接マウントはしない export default function(mainSelector) { const todoRoute = route.create(); todoRoute('/todo', () => { riot.mount(mainSelector, 'todo'); }); return todoRoute; }

基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む ) 3. HTML で Riot-Router のスクリプトを読み込む 4. HTML 内に各ページ用のカスタムタグのマウント場所を用意する 5. HTML でカスタムタグファイルを読み込むが、直接マウントしない 6. Riot-Route の設定を行い、ルーティングを開始する

import riot from 'riot'; import route from 'riot-route'; import todoRoute from './router/todo'; import todo2Route from './router/todo2'; import todo3Route from './router/todo3'; require('./tags/menu.tag'); riot.mount('menu'); route.base('/'); // ホスト名以下の部分を #hoge -> /hoge で表示するのに必要 const subRoutes = [todoRoute, todo2Route, todo3Route]; for (const subRoute of subRoutes) { subRoute('div#main'); } route('', () => { route('/todo'); }) route.start(true); // ./router/todo.js import riot from 'riot'; import route from 'riot-route'; require('../tags/todo.tag'); export default function(mainSelector) { const todoRoute = route.create(); todoRoute('/todo', () => { // URLが /todo のとき riot.mount(mainSelector, 'todo'); // div#main にtodoタグをマウント }); return todoRoute; }

import riot from 'riot'; import route from 'riot-route'; import todoRoute from './router/todo'; import todo2Route from './router/todo2'; import todo3Route from './router/todo3'; require('./tags/menu.tag'); riot.mount('menu'); route.base('/'); // ホスト名以下の部分を #hoge -> /hoge で表示するのに必要 const subRoutes = [todoRoute, todo2Route, todo3Route]; for (const subRoute of subRoutes) { subRoute('div#main'); } route('', () => { route('/todo'); }) route.start(true); ルーティング開始

あと どのエンドポイントを呼ばれても 同じ HTML を返すように サーバー側を設定したりする必要がある が割愛

デモ ( 時間あれば )

ちなみに このスライド内のコードの完全版は $ git clone https://github.com/khdd-mks/funtech.git で見れます

ご清聴ありがとうございました