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からVueに移行した話 #gotandajs
Search
mizuki_r
December 02, 2016
Programming
0
2.6k
RiotからVueに移行した話 #gotandajs
GotandaJS #6 の資料です
mizuki_r
December 02, 2016
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
250
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
620
モダンとレガシー #gotandaem
rymizuki
0
520
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
110
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
340
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.6k
物語を楽しむための物語論
rymizuki
0
480
失敗と向き合う
rymizuki
0
1.3k
社内勉強会と組織の成長を考える
rymizuki
1
2.5k
Other Decks in Programming
See All in Programming
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
初めてDefinitelyTypedにPRを出した話
syumai
0
420
flutterkaigi_2024.pdf
kyoheig3
0
150
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Quine, Polyglot, 良いコード
qnighy
4
650
Remix on Hono on Cloudflare Workers
yusukebe
1
300
Amazon Qを使ってIaCを触ろう!
maruto
0
410
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
CSC509 Lecture 11
javiergs
PRO
0
180
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
How GitHub (no longer) Works
holman
310
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
80
5k
GraphQLとの向き合い方2022年版
quramy
43
13k
Making Projects Easy
brettharned
115
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How to train your dragon (web standard)
notwaldorf
88
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Transcript
RiotからVueに移行した話 2016/12/02 GotandaJS #6 @mizuki_r
@mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です!” 2
本日のお話
本日のお題
本日のお題 RiotͰॻ͍͍ͯͨͷΛ Vueʹॻ͖͑ͨɻ
本日のお題 • ViewϑϨʔϜϫʔΫΓ͑ͷφϨοδڞ༗ • flux͍͍ͧ • view vs logicͷநԽେࣄ
ビルド環境
ビルド環境(前) • webpack • babel?preset[]=2015 • style + css +
postcss + scss • riot
ビルド環境(後) • webpack • babel?preset[]=2015 • style + css +
postcss + scss • vue
ビルド環境
なぜVueか?
基本的なHTML,CSS,そしてJavaScript • ϑϨʔϜϫʔΫͷߏͱͯ͠ɺHTMLɺCSSɺ JS͕ͦΕͧΕଘࡏ͍ͯ͠Δ • expressionͷॻ͖͚͑ͩͰ΄΅΄΅͓ΘΔ
ライフサイクル ·͋ͦΜͳʹࣅͯΔΘ͚͡Όͳ͍… ͕ɺ mount → created, mount unmount → unmount
update → watch etc… Riot࠷খͷϥΠϑαΠΫϧ͔࣋ͬͯ͠ͳ͍ͷͰɺ VueͷҠߦָɻ
jQueryの資産をそのまま活かせる • slick • masonry
やったこと
やったこと • SyntagmeͷStoreͷͷड͚औΓํΛมߋ • RouterΛࣗ࡞ͷͷ͔ΒVueRouterมߋ • *.tagΛ*.vueॻ͖͑ॻ͖͑ॻ͖͑
SyntagmeのStateを受け取る AppComponentͷcreatedͰsyntagmeͱଓ
VueRouterへ • ·͋ͦͦݩ͕ࣗ࡞ͩͬͨΜͰ… • શ෦ॻ͖͠ • VueRouter·͡ศར
*.tag to *.vue • HTML to pug • هड़ྔతʹHTMLॻ͘ͷΊΜͲ͔ͬͨ •
ActionCreatorͷͭͳ͗͠ • γϯλοΫεͷஔ͖͑
戦略
戦略 - 前日談 • ։ൃ։͔࢝ΒVueԽݟࠐΜͰ͍ͨ • ॳظRiotͰΘʔͬͯॻ͍ͯɺVue͕͍͍̎ ײͬ͡Ά͍ใ͕ग़ἧͬͨΒҠߦ͢Δ༧ఆ ――͕ɺ్தఀظ͕ڬ·ΓଦੑͷΑ͏ʹRiotͰॻ͍͍ͯͨɻ
fluxアーキテクチャの採用 • ࣗ࡞ϑϨʔϜϫʔΫSyntagmeͷར༻ • Angular to Whatever༻Λఆͯ͠࡞͍͚ͬͯͨͲɺRiotͰಈ͘Μͩͥʁ • ViewActionCreatorʹใΛ͠ɺσʔλProviderComponent͕Store͔Βड͚ औͬͯViewಉ࢜ͰσʔλΛͤ͞Δઃܭɻ͜ΕʹΑΓɺActionCreatorͷଓͱ
ProviderComponent͑͞ม͑ΕଞͷViewʹҠߦ͘͢͠ͳΔʕʕͱ͍͏Ծઆͩͬ ͨ • ઈରʹViewʹϩδοΫΛॻ͔ͳ͍ͱ͍͏ܾҙ • ActionCreatorͱReducerʹॲཧΛدͤΔ͍ͬͯ͏ϥΠϯ͚ͩࢮक
viewの役割 • ActionCreatorΛୟ͘ • DOM͔Βऔͬͯ͘Δ • routerͷભҠ Ҏ্
小さいコンポーネントをたくさん • Riotͷརͱׂ͕ͯ͠͠қ͍͜ͱΛ׆͔ͨ͠ • ରͷDOMΛΓऔΓ • ผϑΝΠϧʹషΓ͚ͯλάͰғΉ͚ͩ • grepͰ୳ͤΔൣғ •
ίϯϙʔωϯτͷ༰ • ϑϨʔϜϫʔΫʹґଘͨ͠γϯλοΫ
振り返り
良かったこと • View : LogicͷநԽͷޭ • Vueͷtickͷॲཧ͕ૉఢ • ެࣜαϙʔτڧ͍ •
ຊޠυΩϡϝϯτڧ͍ • ମײύϑΥʔϚϯεͷվળ • Τϥʔ͕ܹݮͨ͠ • ָ͍͠
苦労した • JavaScript͔ΒϖʔδભҠ • action-creatorͷதͰ͚ͬͯͨͲɺvueͰͲ͏͖͔͢அͰ͖ͣɺcomponentʹҾ͖ͨ͠ • ͖Δɻઈ͖ΔɻͬͯΔݟ͚ͩͰ200ߦॻ ͖͑ͱ͔ຊʹ͏͖Δ • routerͷҠ২
• ͜͜ͷڍಈ͕Ұ൪มΘΓ͍͢ɻશ෦reducerܦ༝ͰURLͱ͔औಘ͔ͯͨ͠Βக໋తʹͳΒ ͳ͔͕ͬͨɺ؊Λྫྷͨ͠ • ΤϯτϦʔϙΠϯτ͕গͳ͔ͬͨͷͰٹΘΕͨɻଟ͔ͬͨΒઈͯͨ͠
今後 • syntagme to vuex͢Δͷʁ • ͨͿΜ͠ͳ͍ • ݱঢ়Viewʹґଘ͠ͳ͍ϩδοΫΛॻ͍͖ͯͨͷʹ͜͜ ͰVueʹґଘ͢Δͷͪΐͬͱ
• ϩδοΫॻ͖͢ͷVueͷWAFॻ͖͑Δͷͱن ͕ҧ͏
まとめ
まとめ • RiotΛVueʹஔ͖͑ΔࣄྫΛհ͠·ͨ͠ • ViewʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪ • ͦͷͨΊʹflux! ֮ͦͯ͠ޛʂ • ઓུେࣄ
• ਖ਼ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓͳΔͰಈ͖·͠ΐ ͏
ご清聴ありがとうございました