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
フロントエンドの秩序は保たれているか?
Search
masawada
July 12, 2017
Technology
1
4.1k
フロントエンドの秩序は保たれているか?
Hatena Engineer Seminar #8
https://connpass.com/event/60276/
masawada
July 12, 2017
Tweet
Share
More Decks by masawada
See All by masawada
10年続くサービスのデータを1日未満のメンテナンスウィンドウで安全に移管する
masawada
5
2.3k
よりよいレビュー環境を求めて / A code review odyssey
masawada
0
2.9k
Getting Started with ScratchX
masawada
0
710
GyaPC::Asia Tokyo 2015 LT
masawada
0
1.5k
Privileged Apps with Vue.js
masawada
0
170
Chikubeam
masawada
1
1.5k
Git講習 2014.04.15
masawada
1
330
Hack U at UEC 2014.03.27
masawada
0
1.5k
Firefox OS勉強会 4th Untitled
masawada
0
1.4k
Other Decks in Technology
See All in Technology
Kotlinで学ぶ 代数的データ型
ysknsid25
5
970
基調講演: 生成AIを活用したアプリケーションの開発手法とは?
asei
1
100
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
110
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
370k
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
210
CSSの最新トレンド Ver.2025
tonkotsuboy_com
11
4.3k
AI Engineering Summit Pre Event LT #10
okaru
2
520
現場で役立つAPIデザイン
nagix
1
220
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
1
410
ハッカー視点で学ぶサイバー攻撃と防御の基本
nomizone
0
920
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
2
1.3k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
The Cult of Friendly URLs
andyhume
79
6.4k
The Invisible Side of Design
smashingmag
299
50k
Scaling GitHub
holman
459
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
910
Practical Orchestrator
shlominoach
188
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Unsuck your backbone
ammeep
671
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Applications with DynamoDB
mza
95
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Transcript
IS THE ORDER MAINTAINED? ϑϩϯτΤϯυͷடং อͨΕ͍ͯΔ͔ʁ @masawada
id:masawada
None
ࠓ͙͢ొʂ IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!
None
ͯͳϒϩά प
ख़͞Εͨ +4ίʔυ܈
/PEFֶԂࡇͰͷൃද
,ZPUPKTͰͷൃද
ࠓ͜ΕҎ߱ ͷ͜ͱΛ͠· ͢ʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ͷલʹ
લճ·Ͱͷ ͋Β͢͡
+4ͷׂ w ݹ͖ྑ͖DPODBU͔ΒCSPXTFSJGZʹ w Ұ෦ͷϑΝΠϧߦ͘Β͍͋ͬͨʜ w ˠߦʹ
None
$*ͰςετΛճ͢ w ͪΌΜͱϏϧυͰ͖Δ͔ w &4-JOUͰνΣοΫ w Ϣχοτςετ
$*ͰςετΛճ͢ +4ςετͷ࣮ߦ݁Ռ
OQNΞοϓσʔτσʔͷಋೖ w ຖ݄ୈҰ݄༵Λ OQNΞοϓσʔτσʔʹ w ಉ࣌ʹ/PEFKTͷΞοϓσʔτ ߦͳ͏
OQNΞοϓσʔτσʔͷಋೖ
ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ w ͜Ε·ͰಠࣗܰྔϥΠϒϥϦͰ 'MVY w 3FBDU'MVYք۾ͷ͕ࣝඞཁ w νʔϜͷΤϯδχΞʹ ϑϩϯτΤϯυઐډͳ͍
ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ w ಠࣗ'MVY࣮ΛϦϑΝΫλϦϯά w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ w 3FEVYΘͳ͍
·ͩ·ͩ ൃల్্
ࠓޙͷվળʹඞཁͳͷ w νʔϜϝϯόʔͱͷ૬ஊ w ࣮ํ๏ͷυΩϡϝϯτԽ w
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ͱ͜Ζ͕
None
None
ࠓ͢͜ͱ
݄·Ͱʹͬͨ͜ͱ w ࠷৽ใΛΩϟονΞοϓ͢Δ ମ੍Λ͑Δ w ςετվળ w OQNΞοϓσʔτσʔͷഇࢭ w 3FBDUͷར༻ൣғΛ͛Δ
Mission 1: INPUT & OUTPUT
+4൪ෆࡏ
࠷৽ใͷऩूͱڞ༗ w ऩू w ϑϩϯτΤϯυϥϯν w ࣾ֎ަྲྀ w ڞ༗ w
υΩϡϝϯτͷඋ w '8(ͷ։࠵ ݱࡏഇࢭ
υΩϡϝϯτͷඋ Ҿ͖ܧ͗
υΩϡϝϯτͷඋ Ҿ͖ܧ͗ w ٧·ΓͲ͜ΖΛͳ͘͢ w ࢦͷڞ༗ w ελΠϧͷࢦఠͳͲ&4-JOUʹͤΔ
υΩϡϝϯτͷඋ Ҿ͖ܧ͗
'8(ͷ։࠵
'8(ͱ w ϑϩϯτΤϯυϫʔΩϯάάϧʔϓ w ϑϩϯτΤϯυʹؔ͢Δ Α͠ͳ͠͝ͱΛ͠߹͏ w 18(ͱซ࠵
18(ͱ w ύϑΥʔϚϯεϫʔΩϯάάϧʔϓ w ΠϯϑϥपΓͷ༷ࢠΛఆظతʹ؍ w ରԠ͕ඞཁͰ͋Ε *TTVFͷ༏ઌΛ্͛ΒΕΔ
18(ͱ
None
1BHF4QFFE*OTJHIUT
'8( w Ұϲ݄͝ͱ։࠵ w ৽ͨʹಋೖٕͨ͠ज़Λࣗຫ w ࠔΓ͝ͱΛڞ༗ w ͷʹΑͬͯ༏ઌΛ্͛Δ
'8(
'8( w ࠷ۙഇࢭ͞Ε·ͨ͠ w ͋Δఔҙࣝͷڞ༗͕Ͱ͖ͨ w ใڞ༗ࣾάϧʔϓ PSJTTVF Ͱ
IMPROVE THE TEST ENVIRONMENT Mission 2:
ςετڥͷվળ w 'MPXಋೖ w QPXFSBTTFSUಋೖ w &O[ZNFಋೖ
QPXFSBTTFSU CBCFMQMVHJOFNQPXFSBTTFSU
QPXFSBTTFSU require(‘assert’); ↓ require(‘power-assert’); উखʹஔ͖͑ͯ͘ΕΔ
&O[ZNF 3FBDU$PNQPOFOUͷ ςετ͍͍ײ͡ʹ ॻ͚ΔΑ͏ʹ͢Δͭ
None
ςετڥͷվળ w ςετΛॻ͖͍͢ڥΛ࡞Δ w ϨϏϡʔΑΓલʹؒҧ͍ʹ ؾ͚ΔڥΛ࡞Δ w ࡉ͔͘ೖΕ͍ͯํΛνʔϜʹڞ༗
Mission 3: MODULE UPDATING STRATEGY
OQNΞοϓσʔτσʔͷಋೖ
OQNΞοϓσʔτσʔͭΒ͍ w $)"/(&-0(Λ୳͢ͷʹ͕͔͔࣌ؒΔ w ࡞ۀऀʹϨϏϡΞʔʹෛ୲͕͔͔Δ w ϨϏϡʔࣗମʹख͕͔͔ؒΔ w ຊʹҰϲ݄͝ͱʹΔͷͳͷ͔
w ͲΕ͘Β͍ͷϖʔεͰݹͼ͍ͯ͘ͷ͔Γ͍ͨ
ZBSOPVUEBUFEGPSNBUUFS
$ yarn outdated --json
ZBSOPVUEBUFEGPSNBUUFS w $)"/(&-0(Λ.BSLEPXOʹؚΊͯग़ྗ w ύοέʔδͱ$)"/(&-0(ͷରΛ :".-ʹอଘ w .BDLFSFMʹݹ͍ύοέʔδΛߘͰ͖Δ w ແࢹ͢ΔϑΝΠϧΛࢦఆͰ͖Δ
w K2VFSZͷΞοϓσʔτͳͲ͚͍ͨ
None
None
IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ
'"2 2(SFFOLFFQFSݕ౼ͨ͠
'"2 "ͯ͠·ͤΜ
(SFFOLFFQFS w ͢Έ·ͤΜΒͳ͔ͬͨ w ݕ౼ͯ͠Θͳ͔͔ͬͨͳɺɺ w ϒϩάͰ(JU)VC&OUFSQSJTFΛ͍ͬͯͯ ؾܰʹ͓ࢼ͠Ͱ͖ͳͦ͞͏ w ZBSOPVUEBUFEGPSNBUUFS͘Β͍ͳΒ
ίετ গͳͯ͘Ͱ͖Δ
Mission 4: REACTIZE VIEW
कΓ
߈Ί
3FBDUBTB5FNQMBUF&OHJOF
3FBDUBTB5FNQMBUF&OHJOF w 9TMBUFͷ55FSTFΛ͍ͬͯΔ w 1FSMͷςϯϓϨʔτΤϯδϯ w ૉ
[% IF element.selected %] class=“active” [% END %] 3FBDUBTB5FNQMBUF&OHJOF
3FBDUBTB5FNQMBUF&OHJOF 3FBDUʹدͤΔ
3FBDUBTB5FNQMBUF&OHJOF w 1FSM • $r->embed_state(‘pro’, $json) w +BWB4DSJQU • const
state = InitialState.get(‘pro’)
None
None
None
None
3FBDUBTB5FNQMBUF&OHJOF 2443͠ͳ͍ͷ
3FBDUBTB5FNQMBUF&OHJOF "ݱঢ়Ͱ443ʹ͢Δ ϝϦοτΛݟੵ͍ͬͯͳ͍
1FSMPO3FBDUPO443 w ·ͩେʑతʹਐΊ͍ͯΔΘ͚Ͱͳ͍ w ͦͦ1FSMͰ443ͷ࣮͕গͳ͍ w ఫୀՄೳͳܗͰਐΊ͍ͯΔ
IS THE ORDER MAINTAINED? ϑϩϯτΤϯυͷடং อͨΕ͍ͯΔ͔ʁ @masawada
ࠓͨ͜͠ͱ w +4൪͕͍ͳ͍͚ͯͬͯ͘Δ νʔϜͮ͘Γ w ςετ͕ॻ͖͍͢ྑ͘ͳ͍͕ ͔Γ͍͢ڥͮ͘Γ w ৽ͨͳ͜ͱΛ͢Δͱ͖ఫୀ͘͢͠
ͨΓલͷ͜ͱ Λॗʑͱͬͯ ͍͘εϐϦοτ
·ͩ·ͩ Δ՝
ࠓޙΓ͍ͨ w ͞ΒͳΔςετվળ w 1IBOUPN+4ग़ w &&ςετ$*Ͱճ͢ w υΩϡϝϯτͷߋ৽
ಓʹվળΛଓ ͚͍ͯͧ͘ʂʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠