Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Riot.jsでSPAを作る
Search
khdd-mks
December 13, 2018
Programming
0
880
Riot.jsでSPAを作る
Riot.jsの基礎とRiot.jsでSPAを作るときの基礎です
khdd-mks
December 13, 2018
Tweet
Share
More Decks by khdd-mks
See All by khdd-mks
AWS Amplify / AppSync
khddmks
1
350
AWS Amplify HandsOn
khddmks
1
310
GoogleKubernetesEngine is very easy
khddmks
0
200
Other Decks in Programming
See All in Programming
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
NEWT Backend Evolution
xpromx
1
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
NPOでのDevinの活用
codeforeveryone
0
870
AIともっと楽するE2Eテスト
myohei
8
2.9k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
670
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A better future with KSS
kneath
238
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Unsuck your backbone
ammeep
671
58k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Invisible Side of Design
smashingmag
301
51k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Transcript
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 でカスタムタグファイルを読み込み、マウントする
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo>
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> 全体をカスタムタグ名で囲む
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> HTMLを記述する 変数の埋め込みとかあるけど 何となく分かる感じ
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> CSSを記述する 普通に <style> h3 { font-size: 14px; } </style> みたいな感じで記述
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> 処理を記述する thisでカスタムタグ自身にアクセスできる メソッドを定義してHTML側のイベントハンドラ に指定する等が可能
<todo> <h3>{ opts.title }</h3> <ul> <li each={ item, i in
items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- 本当はこの辺りにcss(<style>~</style>)を指定 --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> カスタムタグに関する内容が 全て同じ場所に記述されているので 分かりやすい
基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む
) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする
<html> <head> <title>Hello Riot.</title> </head> <body> <todo></todo> <script type="riot/tag" src="todo.tag"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]
/riot+compiler.min.js"></script> <script>riot.mount('todo')</script> </body> </html>
<html> <head> <title>Hello Riot.</title> </head> <body> <todo></todo> <script type="riot/tag" src="todo.tag"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]
/riot+compiler.min.js"></script> <script>riot.mount('todo')</script> </body> </html> コンパイラ付のRiot.js クライアント側でカスタムタグをjavascriptに変換して実行す る
基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む
) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする
<html> <head> <title>Hello Riot.</title> </head> <body> <todo></todo> <script type="riot/tag" src="todo.tag"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]
/riot+compiler.min.js"></script> <script>riot.mount('todo')</script> </body> </html> カスタムタグ名そのままのタグを用 意するのが簡単 マウント方法が若干変わるが divタグ等でも可能
基本 1. カスタムタグファイルを作る 2. HTML で Riot.js のスクリプトを読み込む ( コンパイラ含む
) 3. HTML 内にカスタムタグのマウント場所を用意する 4. HTML でカスタムタグファイルを読み込み、マウントする
<html> <head> <title>Hello Riot.</title> </head> <body> <todo></todo> <script type="riot/tag" src="todo.tag"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]
/riot+compiler.min.js"></script> <script>riot.mount('todo')</script> </body> </html> カスタムタグファイルは普通にスクリプト タグで読み込めばいい riot.mount(‘todo’) で <todo></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 の設定を行い、ルーティングを開始する
<html lang="ja"> <head> <meta charset="utf-8"> <title>Hello Riot.</title> <script src="js/app.js" defer></script>
</head> <body> <menu></menu> <div id="main"></div> </body> </html> 複数のタグ(各ページ用のタグ)を マウントするため 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 で見れます
ご清聴ありがとうございました