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
Vue.js+AtomicDesign
Search
KeitaroOkamura
June 21, 2018
Technology
2
2.5k
Vue.js+AtomicDesign
Vue.js / Vuex / AtomicDesign / fukuokajs
KeitaroOkamura
June 21, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
230
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
250
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
150
サクッと簡単!お手軽 Scaffold
keitarookamura
1
240
自社サイトをPWA化した話
keitarookamura
0
88
CSS Animations vs WAAPI
keitarookamura
0
440
マイクロインタラクションから考えるアニメーション
keitarookamura
1
230
Other Decks in Technology
See All in Technology
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
競技としてのKaggle、役に立つKaggle
yu4u
3
1.8k
JAWS-UG Bedrock Claude Night
yamahiro
3
610
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
530
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
require(ESM)とECMAScript仕様
uhyo
3
770
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
A Modern Web Designer's Workflow
chriscoyier
689
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Building Adaptive Systems
keathley
31
1.9k
The Cult of Friendly URLs
andyhume
74
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Embracing the Ebb and Flow
colly
80
4.1k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Transcript
7VFKT "UPNJD%FTJHO 'VLVPLB+4
,FJUBSP0LBNVSB ΧϥϏφςΫϊϩδʔגࣜձࣾ 'SPOUFOE&OHJOFFS ϑϩϯτΤϯυΤϯδχΞੜ ࣗݾհ @karaagekeitaroo
ɾ"UPNJD%FTJHOʹ͍ͭͯ ɾίϯϙʔωϯτઃܭʢ7VF 7VFYʣʹ͍ͭͯ ɾ࣮ʹ͓͚ΔϧʔϧΛߟ͑ͯΈͨ ࠓ͢Δ
Έͳ͞Μ7VFKT͍ͬͯ·͔͢ʁ
ΧϯϑΝϨϯε͕։࠵͞Ε·͢ʢຊॳʣ
7VFKTͱʁ ɾ7VFKTϢʔβʔΠϯλʔϑΣΠεΛߏங ͢ΔͨΊͷ1SPHSFTTJWF'SBNFXPSL ɾίϯϙʔωϯτࢦʢ8FC$PNQPOFOUͷ ༷ʹԊͬͯઃܭ͞Ε͍ͯΔʣ
ίϯϙʔωϯτͷཻ͕ࣗ༝Ͱॊೈͳɺ ઃܭͰΉ͜ͱͬͯ͋Γ·ͤΜ͔ʁ
ͦ͜Ͱ"UPNJD%FTJHO
ͯ͢ͷཁૉΛʮ"UPNʢݪࢠʣʯ͔Β࢝·Δ ̑ͭͷཁૉʹղͯ͠ɺΈ߹Θ͍ͤͯ͘σβ Πϯख๏ͷ͜ͱ "UPNJD%FTJHOʢΞτϛοΫσβΠϯʣͱʁ
ίϯϙʔωϯτͷཻͷࢦ ⁞"UPNTʢΞτϜɾࢠʣ .PMFDVMFTʢϞϧΩϡʔϧɾࢠʣ 0SHBOJTNTʢΦϧΨχζϜɾੜʣ 5FNQMBUFTʢςϯϓϨʔτʣ 1BHFTʢϖʔδʣ
⁞"UPNTʢΞτϜɾࢠʣ "UPNTͦͷ໊લͷ௨Γɺػೳతʹ͜Ε Ҏ্ׂͰ͖ͳ͍ίϯϙʔωϯτ
⁞"UPNTʢΞτϜɾࢠʣ ྫͱͯ͠ɺϑΥʔϜͰ͍͏ͱ ʮϥϕϧʯʮೖྗ෦ʯʮϘλϯʯͷ֤ཁ ૉ͕"UPNTͱͳΓ·͢
.PMFDVMFTʢϞϧΩϡʔϧɾࢠʣ ͭҎ্ͷ"UPNT͔ΒΈ߹Θͤͯ࡞Β Εͨίϯϙʔωϯτ .PMFDVMFTͷ୯Ґʮͭͷ͜ͱ͕͏·͘ Ͱ͖Δ͜ͱʯ͕ਪ͞Ε͍ͯΔ
.PMFDVMFTʢϞϧΩϡʔϧɾࢠʣ ྫͱͯ͠ɺ ʮςΩετϘοΫεʯ ʮϘλϯʯʮೖ ྗϑΥʔϜʯͳͲ
0SHBOJTNTʢΦϧΨχζϜɾੜʣ .PMFDVMFTͷΈ߹ΘͤͰ࡞ΒΕͨൺֱ తෳࡶͳίϯϙʔωϯτ ࠷ऴతͳΠϯλʔϑΣʔεʹۙ͘ͳΓɺ࠶ ར༻ੑͷߴ͍ίϯϙʔωϯτʹͳΔ
0SHBOJTNTʢΦϧΨχζϜɾੜʣ ྫͱͯ͠ɺʮϔομʔʯʮϦετʯͳ Ͳ
5FNQMBUFTʢςϯϓϨʔτʣ ίϯϙʔωϯτΛϨΠΞτ͠ɺσβΠϯ ͷجຊతͳߏΛ໌֬ʹ͢ΔϖʔδϨϕϧ ͷΦϒδΣΫτ ݴ͍͑ΔͳΒʮϫΠϠʔϑϨʔϜʯ
1BHFTʢϖʔδʣ ϧʔλʔʹඞͣඥͮ͘ίϯϙʔωϯτ 5FNQMBUFTʹ࣮ࡍͷίϯςϯπ͕ೖΓ۩ ମతͳ࢟ͱͳͬͨঢ়ଶ͕1BHFTʹͳΓ· ͢
2ɿʮσʔλͷྲྀΕʯ͔Βݟͨ ίϯϙʔωϯτઃܭʹ͑Δͷʁ
"ɿ"UPNJD%FTJHOίϯϙʔωϯτࢦͷ ߟ͑ํʹϚον͠·͢ ʢ͖ͪΜͱ্࣮ͷϧʔϧΛઃ͚Εʂʣ
ʮσʔλͷྲྀΕʯͱʁ ɾঢ়ଶཧͷ͜ͱ ʢίϯϙʔωϯτؒͰͷσʔλ ड͚͠Πϕϯτୡͷ ΈʣΛࢦ͠·͢ ɾ7VFKTͰ7VFYΛ.PEFM ͱͯ͠ѻ͍·͢
ʮ7VFYʯͱʁ ɾ7VFY7VFKTΞϓϦέʔγϣϯͷͨΊͷ ঢ়ଶཧύλʔϯ ϥΠϒϥϦ ɾ7VFY4UPSFͱ͍͏ΞϓϦέʔγϣϯͷ ঢ়ଶʢ4UBUFʣΛอ࣋͢ΔίϯςφͰ͢
্࣮ͷϧʔϧͱͯ͠ ֤ίϯϙʔωϯτͷׂΛߟ͑ͯΈΔ
্࣮ͷϧʔϧ ⁞"UPNTʢΞτϜɾࢠʣ ɾଞͷίϯϙʔωϯτʹґଘ͠ͳ͍ ɾϩδοΫٴͼ4UBUFΛ࣋ͨͳ͍ʢεςʔτϨεʣ ɾσʔλΛ4UPSF͔Βऔಘ͠ͳ͍ ɾཁૉ͔ΒͷσʔλΛड͚औΓɺඳըཁૉʹ σʔλΛϨϯμϦϯά͢Δ͚ͩ
্࣮ͷϧʔϧ .PMFDVMFTʢϞϧΩϡʔϧɾࢠʣ ɾ"UPNTͷґଘ0,ʂ͚ͩͲ.PMFDVMFTಉ࢜ͷґ ଘͳΔ͘ආ͚Δ ɾঢ়ଶʹԠͯ͡"UPNTͷϓϩύςΟΛมߋͨ͠Γɺ "UPNTͷදࣔΓସ͑Λߦ͏ ɾ"UPNTͷΠϕϯτϋϯυϦϯάΛߦ͏ ɾσʔλΛ4UPSF͔Βऔಘ͠ͳ͍
্࣮ͷϧʔϧ 0SHBOJTNTʢΦϧΨχζϜɾੜʣ ɾཁૉ͔ΒͷσʔλΛड͚औΔʢগͳ͍ใʣ ɾ.PMFDVMFT"UPNTͷґଘ0,ʂ ɾෳͷ1BHFT͔Β࠶ར༻͞Εͯྑ͍Α͏ʹ࡞Δ ɾࢠཁૉͷΠϕϯτϋϯυϦϯάɺΠϕϯτͷൃߦ ɾ4UPSFͷΞΫηε0,ʂ
্࣮ͷϧʔϧ 5FNQMBUFTʢςϯϓϨʔτʣ ɾ5FNQMBUFT্࣮1BHFTͱҙຯ߹͍͕ ಉ͡ʹͳΔͨΊɺ༻͠ͳ͍͜ͱʹ͠·͠ ͨ
্࣮ͷϧʔϧ 1BHFTʢϖʔδʣ ɾॳݟ࣌ʹσʔλͷྲྀΕ͕໌֬ʹͳΔΑ͏ʹ͢Δ ɾίϯϙʔωϯτؒͷΠϕϯτόεʹͳΔ ɾը໘Ͱڞ௨ͷॲཧΛఆٛ͢Δ ɾը໘શମͰඞཁͳ.PEFM4UBUFΛཧ͢Δ ɾ4UPSFͷΞΫηε0,ʂʢඞཁͰ͋Εෳʣ ɾϧʔςΟϯάॲཧΛఆٛ͢Δ
"UPNJD%FTJHOͷ͓͔͛Ͱ ཻ͕దʹࡉ͔͘ͳΓɺ ίϯϙʔωϯτͷׂ͕໌֬ʹ
·ͱΊ ɾ"UPNJD%FTJHOϑϨʔϜϫʔΫʹର͢Δ ઃܭख๏σβΠϯύλʔϯΛըҰతʹͯ͠ ͘ΕΔ ɾͦΕʹ߹Θͤͯίϯϙʔωϯτͷʮׂʯ Λ໌֬ʹ͢Δ্࣮ͷϧʔϧඞཁ
ઃܭͯ͠Έͯࢥͬͨ͜ͱ ɾେ͖͞Λج४ʹ͢Δͱ͍͏ίϯηϓτ͕͔Γ͢ ͔͚ͬͨΕͲɺը໘୯Ґͷઃܭࢥ͔Β٫͢ΔͷͰɺ ࠷ॳ׳Εͳ͍ ɾ࠷্Ͱͦͷը໘ͷͯ͢ͷσʔλΛऔ͖ͬͯͯόέ πϦϨʔ͢ΔΑΓɺͦͷίϯϙʔωϯτ͕ࣗऔͬͯ͘ Δܗ͋Γͳͷ͔ͳɾɾɾΈͲ͜ΖʢQSPQESJMMJOH ʣ ɾ࠷ऴతʹίϯϙʔωϯτϑΝΠϧͱͯ͠Γ͚Δͷ ʮ࠶ར༻ʯͰ͖Δ͔Ͳ͏͔ͰܾΊͨ❗
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ