RiotでSPAなう！ 2016/08/04 Meguro.es #5 @mizuki_r

@mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です！” 2

本日のお題 3

RiotJSで SinglePageAppを 作る

ーー過程で起きた事例の紹介

絶賛制作進行中です！ あしからず

構成 7

構成 • Webpack • Riot • syntagme • jQuery + jQuery-Plugin 8

というわけで、 事例の紹介 をします。 9

事例1. ルーティング 10

事例1. ルーティング • URLରͯ͠೚ҙͷॲཧΛ࣮ߦ͢Δ • riot͸ϓϦΠϯͰRouterΛఏڙ͍ͯ͠Δ • http://riotjs.com/ja/api/route/

本当にそれで十分？

足りなかったので 魔改造した

魔改造1. コンポーネントのマウント

魔改造1. コンポーネントのマウント • riot.router͸URLͷมߋ࣌ʹίʔϧόοΫΛ࣮ ߦ • ReactRouterΈ͍ͨʹComponentΛϧʔςΟϯ ά͢ΔΘ͚Ͱ͸ͳ͍

魔改造1. コンポーネントのマウント this.routes = [ { path: '/', component: 'home', param_keys: [ 'pickup_list', 'popular_list' ] }, { path: '/user/:user_id', component: 'user', param_keys: [ 'user' ] } { path: '/user..', component: 'user-list', param_keys: ['user_list'] }, ] ͜Μͳײ͡Ͱ࢖͑ΔΑ͏ʹϥοϓ

魔改造2. パラメータマッチングの拡張

魔改造2. パラメータマッチングの拡張 • riot.route͸ΫΤϦύϥϝʔλ͔͠ѻ͑ͳ͍ • /path/:id/toΛύʔεͯ͠{id: 1234}ΛऔΕΔΑ͏ ʹվ଄

魔改造2. パラメータマッチングの拡張 function secondParser (path, filter) { let keys = [] let format = filter .replace(/\*/g, '([^/?#]+?)') .replace(/\.\./, '.*') .replace(/:([^/?#]+)/g, (pattern, key) => { keys.push(key); return '([^/?#]+?)'}) let re = new RegExp('^' + format + '$') let args = path.match(re) if (args) { args = args.slice(1) let params = _.reduce(keys, (prev, key) => { prev[key] = args.shift(); return prev }, {}) args.unshift(params) return args } } riot.route.parser(null, secondParser) ͜͏͍͏ͷΛఆٛͯ͋͛͠Δͱ…

魔改造2. パラメータマッチングの拡張 औΕΔΑ͏ʹͳΔʂ riot.route('/path/:id/to', function (args) { console.log(args.id) })

魔改造3. popStateで更新する

魔改造3. popStateで更新する • riot.route͸popStateͷΠϕϯτΛ؂ࢹ͍ͯ͠ ͳ͍ • ͳͷͰࣗલͰ؂ࢹ͢Δ

魔改造3. popStateで更新する window.addEventListener('popstate', () => { riot.route.exec() }) ※riot.route.exec͸2.3͔ΒdeprecatedͰ͢

魔改造4. マウント時にルーティング

魔改造4. マウント時にルーティング • URLͷมߋΛݕ஌ͯ͠ίʔϧόοΫΛ࣮ߦ • Ϛ΢ϯτ࣌ʹ͸URL͸͢Ͱʹܾఆ͍ͯ͠Δͷ Ͱ࣮ߦͯ͘͠Εͳ͍(´ʀТʀʆ) • ͳͷͰɺखಈͰୟ͘

魔改造4. マウント時にルーティング this.on('mount', function () { riot.route.exec() }) ※riot.route.exec͸2.3͔ΒdeprecatedͰ͢

Q. 公開しないんですか？

Q. 公開しないんですか？ • ͱΓ͋͑ͣಈ͘΋ͷΛ࡞ͬͨϨϕϧͳΜͩ • ͜Ε͔Βௐ੔͢Δ • Ͱ͖Δஈ֊ʹͳͬͨΒ͓ͦΒ͘ ެ։͢Δʂ

事例2. カルーセル 29

事例2. カルーセル • ԣʹεϥΠυ͢ΔόφʔͷΞϨ • θϩ͔Β࡞Δͷ͸ΊΜͲ͍͘͞

jQueryPluginで いいのがありますよ！！

http://kenwheeler.github.io/slick/

事例2. カルーセル $(this.root).slick() ཁૉΛjQueryʹ͘Θͤͯυʔϯ

事例2. カルーセル • jQuery·͡ศར • ͨͩɺWebpackͰjQuery + pluginΛ͍͍ײ͡ ʹѻ͏ज़Λݟ͚ͭΒΕͯͳ͍

事例2. アニメーション 35

事例2. アニメーション • ཁૉΛදࣔɾඇදࣔͨ͠ͱ͖ʹΞχϝʔγϣ ϯΛ͔͚͍ͨ • ng-enter, ng-leaveΈ͍ͨͳ΍ͭ • enterͨ͠ͱ͖͸؆୯ʹͰ͖͚ͨͲɺleave࣌ ʹΞχϝʔγϣϯΛ଴ͨͣʹফ͑ͯ͠·͏

書いた

function changeClass (item, action, name) { item.classList[action]('riot-'+name) } function init () { this.elements = [] const requestAnimation = function () { for (let i = 0; i { changeClass(item, 'add', action == 'show' ? 'hide-leave-active' : 'hide-add-active') }, 0) let onAnimationEnd = function () { changeClass(item, 'remove', action == 'show' ? 'hide-leave-active' : 'hide-add-active') changeClass(item, 'remove', action == 'show' ? 'hide-leave' : 'hide-add') if (action == 'hide') changeClass(item, 'add', 'hide') item.removeEventListener('animationend', onAnimationEnd, false) item.removeEventListener('transitionend', onAnimationEnd, false) } item.addEventListener('animationend', onAnimationEnd, false) item.addEventListener('transitionend', onAnimationEnd, false) } }.bind(this) this.on('mount', function () { this.elements = this.root.querySelectorAll('[animate]') }) this.on('update', function () { for (var i = 0; i

example { &[animate] { transition: 500ms linear; &.riot-hide { display: none; } &.riot-hide-leave { opacity: 0; &.riot-hide-leave-active { opacity: 1; } } &.riot-hide-add { opacity: 1; &.riot-hide-active { opacity: 0; } } } } this.mixin(require('riot-animate-show'))

まとめ 40

まとめ • riot.routeຐվ଄ͨ͠ • ௒ௐ੔த • jQueryPluginศར • ؆୯ʹ࢖͑Δ • animateࣗ࡞ͨ͠ • ΍ͬͺΓRiot͸͕͜͜ऑ͍ 41

さいごに ϞόΠϧϑΝΫτϦʔͰ͸ɺ JavaScript͕େ޷͖ͳΤϯδχΞΛืू͓ͯ͠Γ·͢ʂ 42