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
510
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
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
240
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.1k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Tuning GraphQL on Rails
pyama86
2
1k
Featured
See All Featured
Making Projects Easy
brettharned
115
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Fireside Chat
paigeccino
32
3k
Designing Experiences People Love
moore
138
23k
4 Signs Your Business is Dying
shpigford
180
21k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Bash Introduction
62gerente
608
210k
GraphQLとの向き合い方2022年版
quramy
43
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Automating Front-end Workflow
addyosmani
1365
200k
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! ֮ͦͯ͠ޛʂ • ઓུେࣄ
• ਖ਼ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓͳΔͰಈ͖·͠ΐ ͏
ご清聴ありがとうございました