はじめに

この資料は、サポーターズColabさんにて「Riot.jsで簡単SPA開発ハンズオン」 というタイトルで登壇させて頂く勉強会用のものになります！

---

今回作るSPA

---

今回作るSPAは こちら

Riot.jsの公式サイトにも公開されています。

---

注意事項

---

1. オンラインの開発環境 plunker を利用
2. InternetExplorer は使わない
3. webpack などの開発環境の自動化には触れない
4. 全部終わらない場合は公式のソースを見るべし
5. 「Riot.js ええやん」と思ったら__是非広めましょう__（ここ大事 ）

---

自己紹介

---

基本情報

• Name : 桑原 聖仁
• Twitter: @kuwahara_jsri
• Qiita: clown0082
• Github: k-kuwahara
• Workplace: Yumemi, Inc

---

github.com/k-kuwahara

---

目次

1. Riot.js is 何
2. Riot.js で SPA を作ってみよう！
3. 今後のRiot.jsでの開発アドバイス
4. v4 について

---

1. Riot.js is 何？

---

1. Riot.js is 何

　

( image by: https://riot.js.org/ja/ )

---

1. Riot.js is 何

特徴は

• カスタムタグ
• シンプル, 軽量
  　

です。でも、小さい割にパワフルなやつです

---

1. Riot.js is 何

---

1. Riot.js is 何

---

1. Riot.js is 何

---

1. Riot.js is 何

---

余談

Q:
なんで Riot（暴動）なの？

A:
現代の複雑化したフロントエンドのライブラリ・フレームワークのに対する__暴動__です。

それくらいにRiot.js はシンプルかつパワフルなものです

---

2. ハンズオン
Riot.js で SPA を作ってみよう！

---

2. ハンズオン
Riot.js で SPA を作ってみよう！

---

3. 今後のアドバイス

---

3. 今後のアドバイス

• 困ったら slack へ
• 情報は Githubのissue にある
• 英語でもよければ gitter もあり
• バンドラは webpack か rollup がオススメ
• 最悪は捨てても良い

---

4. v4 について

---

4. v4 について

以下の変更がある予定です。

• 🚮 this.tags
• 🚮 riot-observable
• 🚮 shouldUpdate method
• 🙅 :scope → 🙆 :root
• 🆕 parser/compiler

---

4. v4 について

水面下で開発は進んでいます。(issue: https://github.com/riot/riot/issues/2515)

具体的には以下のリポジトリを参照。

• riot
• riot-dom-bindings
• riot-parser

---

4. v4 について

Q:
いつリリースの予定？

A:
わかりません！（予想は秋くらいかなと）

---

終わりに

改めてこの度は、Riot.js で簡単SPA開発ハンズオンにご参加いただき、ありがとうございました！

少しでも Riot.js の魅力が伝わったのであれば、登壇者冥利に尽きますw 是非、今後も Riot.js を使ってみてください(^^)

---