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
プロトタイプ編 Hatena Engineer Seminar #19
Search
k-murakami0609
April 01, 2022
Programming
0
1.5k
プロトタイプ編 Hatena Engineer Seminar #19
k-murakami0609
April 01, 2022
Tweet
Share
More Decks by k-murakami0609
See All by k-murakami0609
Hatena Engineer Seminar #26 エンジニアとして チーム改善してたら EMになってた話
kmurakami0609
0
1.6k
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
0
400
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
530
Team operations that are not burdened by SRE
kazatohiei
1
300
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
5つのアンチパターンから学ぶLT設計
narihara
1
150
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
2.3k
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.1k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
570
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
125
52k
Designing for Performance
lara
610
69k
Transcript
Hatena Engineer Seminar #19 id: ϓϩτλΠϓฤ ΧΫϤϜͷΛݟਾٕ͑ͨज़ 2022.03.30 k-murakami0609
ࣗݾհ ID: k-murakami060 9 ͯͳʹೖࣾޙɺϊϕϧνʔϜ Ͱຐ๏ͷiΒΜͲͷ։ൃΛ୲ ɻڈ͔ΒΧΫϤϜͷ։ൃʹ ܞΘ͍ͬͯΔɻ
ηογϣϯͷհ ΧΫϤϜͰ Xslate + jQuery ͔Β React ʹҠߦ͢ΔϓϩδΣΫτΛਐΊ͍ͯ ·͢ɻ͜ΕΛਐΊΔʹ͋ͨͬͯɺݕ౼ॳظʹϓϩτλΠϓΛ࡞Δͱ͍͏બ Λ͠·ͨ͠ɻ(Ұ΄Ͳલͷ
) ͜ͷηογϣϯͰɺϓϩτλΠϓΛߦ͏ʹࢸͬͨܦҢૂ͍ɺ·ͨޙͰ શମͷਐΊํͳͲΛհͰ͖ͨΒͱࢥ͍·͢ɻ ิ) Xslate Perl ͷςϯϓϨʔτΤϯδϯ
ΧΫϤϜࠓޙ510ͱܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱΛߟ͑Δඞཁ͕͋Δ ໘ϑϧϚΠάϨʔγϣϯܭը͞Ε͓ͯΒͣɺݱঢ়ͷαʔϏεΛܧଓͯ͠։ ൃɾӡ༻͍ͯ͘͠ܗΛͱ͍ͬͯ͘ ͜Εʹର͢ΔΞϓϩʔνͱͯ͠ɺΠϯϑϥɺΞϓϦέʔγϣϯ྆໘Ͱͦͷ࣌ʑ ʹଈͨ͠ߏʹগͣͭ͠Γସ͍͑ͯ͘ ͳͥ React ҠߦΛਐΊ͍͔ͨ React ҠߦͷΠϯηϓγϣϯσοΩʹ͋ΔʮզΘΕͳͥ͜͜ʹ͍Δͷ͔(Why1)ʯ͕తͰΘ͔
Γ͍͢
• Perl ग़ΛਐΊͯߦ͖͍ͨ ◦ ͦͷ͕͔Γͱͯ͠ɺ·ͣϑϩϯτΤϯυͱόοΫΤϯυ ͷΛߦ͍͍ͨͱ͍͏ʹͳͬͨ • ຐ๏ͷiΒΜͲͱΞʔΩςΫνϟΛἧ͍͑ͨ • React
ͷ΄͏͕ੜ࢈ੑ͕ѹతʹߴ͍ ◦ ຐ๏ͷiΒΜͲͷܦݧ͔ΒɺΤϯδχΞɾσβΠφʔڞʹͦ ͏͍ͬͨʹͳͬͨ ͳͥ React Ҡߦ͕બΕͨͷ͔
• ϓϩτλΠϐϯάΛͯ͠ΧΫϤϜͷͱ͋ΔϖʔδΛ৽͍͠Ξʔ ΩςΫνϟͰ࣮ͯ͠ΈΔ • ظؒ1ϲ݄ఔ ◦ ظؒΛ̎ͭʹ͚ͯɺผͷΞʔΩςΫνϟΛݕূͨ͠ Ͳ͏ͬͯ React Ҡߦͷݕ౼ΛਐΊ͔ͨ
• ͕࣌ؒແݶͩͱແݶʹࢼ͍ͨ͜͠ͱ͕ग़ͯ͘ΔͷͰͦͷରࡦ ◦ ҠߦͷաఔͰΓͨ͘ͳͬͯɺείʔϓ͕ແବʹ͘ͳΔ ͜ͱ͛ͨ • ݱ࣮ͱͯ͠ɺαϙʔλʔζύεϙʔτͱ͍͏େ͖ͳػೳ ͷϦϦʔε͕͋ΔͨΊɺ͜ͷظؒΛա͗͢͠ΔͱReactͷҠ ߦࣗମΛҰ୴ఘΊΔඞཁ͕͋ͬͨ ϓϩτλΠϓͷظؒΛ1ϲ݄ͱઃఆͨ͠ཧ༝
ϓϩτλΠϓͷૂ͍
ϦΞʔΩςΫνϟʹ͓͚Δࣦഊͱ • ҠߦΛਐΊ͍ͯ͘தͰɺํ͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γશ෦ Γ͠ʹͳΔ • ։ൃΛ্͛ΒΕͯͳ͍ ◦ ٕज़બఆͷے͕ྑ͘ͳ͍/աʹ৽ٕज़Λ٧ΊࠐΈ͗͢Δ ◦ Ҡߦ్͕தͰࢭ·ͬͯ͠·͍ɺ৽چ͕ࠞͬͨ͟ঢ়ଶͰ։ൃ/
ӡ༻Λଓ͚ͳ͍͚ͯ͘ͳ͍
ϓϩτλΠϓΛ࡞ΔϝϦοτ • ૣΊʹཕΛ౿ΜͰ͓͚Δ • ص্͚ͩߟ͍͑ͯΔ͚ͩΑΓɺݕ౼༰ͷਫ਼Λ͋͛Δ͜ͱ͕ Ͱ͖Δ • ج൫࣮࣌ʹྲྀ༻Ͱ͖ΔͷΛগͳ͍Ͱ༻ҙͰ͖Δ
ૣΊʹཕΛ౿ΜͰ͓͚Δ • طଘϓϩμΫτʹಋೖ͢Δ߹ʹɺڭՊॻͲ͓Γʹߦ͔ͳ͍ ෦͕͋Δ • ϓϩτλΠϐϯάΛ௨ͯ͡ཏతͳݕ౼ࣄ߲ҰཡΛҭͯΒΕΔ
ݕ౼༰ͷਫ਼Λ͋͛Δ͜ͱ͕Ͱ͖Δ • ࣮ࡍʹಈ͔ͯ͠ΈͯΘ͔Δ͜ͱ͕͋Δ • ࣮ΛνʔϜϝϯόʔʹΈͯΒ͏͜ͱͰҙݟΛΒ͍͘͢ ͳΔ
ج൫࣮࣌ʹྲྀ༻Ͱ͖ΔͷΛগͳ͍Ͱ༻ҙͰ͖Δ • ج൫࣮࣌ଟਓͰͬͯίϯϑϦΫτͯ͠࡞ۀ͕εέʔ ϧ͠ͳ͍͜ͱ͕Α͋͘Δ
• ϓϩτλΠϓ͕ޮՌతͰͳ͍͔ͱࢥ͍ͬͯΔɻ ◦ ҠߦΛਐΊ͍ͯ͘தͰɺํ͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γ શ෦Γ͠ʹͳΔ ▪ -> ૣΊʹཕΛ౿ΜͰ͓͚Δ ◦ ։ൃΛ্͛ΒΕͯͳ͍
▪ -> ϓϩτλΠϓΛ͖ͨͨͱ͢Δ͜ͱͰɺνʔϜϝϯ όʔͷҙݟΛฉ͍ͯόϥϯεײ֮Λ͔֬ΊΔ͜ͱ͕Ͱ͖ Δ ϦΞʔΩςΫνϟʹ͓͚ΔࣦഊͷରԠํ๏
ϓϩτλΠϓͷਐΊํ
ݕ౼͖͢ҰཡΛ༻ҙͯ͠ɺ༏ઌॱҐ͕ܾ·Εྑ͍ɻ ͕ɺൣғ͕͍ͨΊཏతͳݕ౼ࣄ߲ҰཡΛ༻ҙ͢Δͷ͕͘͠ɺ ࢼ͍ͨ͜͠ͱଟ͍ͨΊ༏ઌॱҐΛܾΊΔͷ͍͠ɻ ԿΛݕূ͖͔͢ߟ͑Δ
• ͍͖ͳΓཏతʹλεΫΛग़͢ͷ͔ͬͨ͠ͷͰɺॳखϘ τϜΞοϓͰߟ͑Δ͜ͱʹͨ͠ ◦ ݒ೦ΛͱΓ্͋͑ͣ͛·ͬͨ͘ ▪ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ▪ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ
▪ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ ▪ … ݕ౼ࣄ߲Ұཡͷ࡞Γํ
• ͦΕΛݩʹδϟϯϧͰάϧʔϐϯάͯ͠ɺ͞Βʹ࿙Ε͍ͯΔ ͷ͕ͳ͍͔Λߟ͑ͯՃ͍ͯͬͨ͠ɻ • ·ͨϓϩτλΠϓΛ࡞͍ͬͯΔ͏ͪʹݕ౼͍ͨ͠ͷ͕ग़͖ͯ ͨ߹ʹɺͲΜͲΜ͜ͷҰཡʹՃͯ͠ߦͬͨ ݕ౼ࣄ߲Ұཡͷ࡞Γํ2
༏ઌॱҐͷߟ͑ํ • ํ͕มΘͬͨ࣌ͷӨڹൣғ͕େ͖͍ͷɺ࡞ͬͯΈͳ͍ͱΑ ͘Θ͔Βͳ͍ͷΛϐοΫΞοϓͨ͠ ◦ ࣦഊ͠ͳ͍͜ͱΛ༏ઌ͢Δํ • ·ͨɺݕূ͍ͯ͘͠͏ͪʹɺΘ͔Δঢ়ଶʹͳͬͨΒਂ͍͠ ͳ͔ͬͨ ◦
ϓϩτλΠϓͰ࡞ΓΔඞཁͳ͍ͷͰ
• ظؒΛ2ͭʹ͚ͯɺϓϩτλΠϓΛ2छྨ࡞ͬͨ ◦ Next.js + GraphQL Λ͏ύλʔϯ ◦ XslateͱReact͕ڞଘ͢Δύλʔϯ ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨͷ
࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨͷ
• ྆ऀͷλεΫཧతͳҧ͍࡞ۀͷείʔϓ ◦ τϨʔυΦϑεϥΠμʔͰɺσϦόϦʔ͕Ұ൪༏ઌ͕ߴ ͘ɺ࣭མͱͨ͘͠ͳ͍͕ɺείʔϓখͯ͘͞͠ྑ͍ͱ ͍͏͕͋ͬͨ ◦ σϦόϦʔ͕༏ઌ͞Εͨཧ༝ɺޙ͘Β͍ʹαϙʔλʔ ζύεϙʔτͱ͍͏େ͖ΊͷػೳϦϦʔε͕ܭը͞Ε͍ͯͨ ͨΊ
࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨͷ
શମͷਐΊํ
React ҠߦϓϩδΣΫτͷશମײ 1. νʔϜͰReactҠߦ͢Δ͜ͱͷ߹ҙ͕ߦΘΕΔ 2. ֬อ͢Δ 3. ٕज़બఆɺϓϩτλΠϓ࡞ɺϩʔυϚοϓͷ࡞͢Δ 4. ϑϩϯτΤϯυͷج൫Λ࣮͢Δ
5. Ұ෦ͷϖʔδʹల։͢Δ 6. શ෦ͷϖʔδʹల։͠ऴΘΔ
ϓϩτλΠϐϯά෦Λ͞Βʹׂ 1. Γ͍ͨ͜ͱݱঢ়ͷ՝ΛϦετԽ͢Δ 2. ΠϯηϓγϣϯσοΩͷ࡞ 3. ϓϩτλΠϐϯά 4. ํΛܾΊͯνʔϜʹ߹ҙΛͱΔ 5.
ϑϩϯτΤϯυͷج൫ͷ࣮ʹ͚ͯλεΫׂ
Γ͍ͨ͜ͱݱঢ়ͷ՝ΛϦετԽ͢Δ • ظؒ ◦ 3࣌ؒ • ͬͨ͜ͱ ◦ ԿͰ͍͍ͷͰࢥͬͨ͜ͱΛՕॻ͖Ͱॻ͖ग़ͨ͠ ▪
ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ▪ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ ▪ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ • ྑ͔ͬͨ͜ͱ ◦ ͜Ε͔Βͷٞͷ͖ͨͨʹͳͬͨ
ΠϯηϓγϣϯσοΩͷ࡞ • ظؒ ◦ 2࣌ؒ • ͬͨ͜ͱ ◦ ΠϯηϓγϣϯσοΩΛ࡞ͨ͠ •
ྑ͔ͬͨ͜ͱ ◦ ͠߹͍ͷ͖͔͚ͬʹͳͬͨ ◦ τϨʔυΦϑεϥΠμʔͷ͓͔͛ͰPOͱͷೝ͕ࣝἧͬͨ ◦ ༻ޠͷཧ͕ਐΜͩ
• ظؒ ◦ 2िؒ * 2 • ͬͨ͜ͱ ◦ 2ύλʔϯͷϓϩτλΠϓΛ࡞ͬͨ
▪ Next.js + GraphQL Λ͏ύλʔϯ ▪ XslateͱReact͕ڞଘ͢Δύλʔϯ ◦ ݕ౼ࣄ߲ҰཡΛ͕࣌ؒڐ͢ݶΓ্͔Βࢼ͍ͯͬͨ͠ ϓϩτλΠϐϯά
ϓϩτλΠϐϯά • ྑ͔ͬͨ͜ͱ ◦ ظؒΛ2ͭʹ͚ͨ͜ͱͰࣗಈతʹ͖Γ͕Ͱ͖ͨ ◦ ݕ౼ࣄ߲ҰཡΛ࡞ͬͯ༏ઌॱҐ͚ͮͨ͜͠ͱ ▪ ≒ ௨ৗͷ։ൃͱಉ͡Α͏ʹλεΫཧͨ͜͠ͱ
◦ σβΠφʔʹཁΛฉ͖ʹߦͬͨ͜ͱ ◦ (ޙͰΘ͔ͬͨ͜ͱ͚ͩͲ) બΕͳ͔ͬͨύλʔϯͷݕূ ͕ޙʑੜ͖Δ͜ͱ͕͋ͬͨ
ํͷݻΊͱνʔϜʹ߹ҙΛͱΔ • ظؒ ◦ 1िؒ • ͬͨ͜ͱ ◦ ͻͨ͢ΒADRΛॻ͍ͨ͜ͱ ◦
શ෦ͷϖʔδʹల։ྃ·ͰͷେࡶͳϩʔυϚοϓΛॻ ͍ͨ͜ͱ ◦ εςʔΫϗϧμʔΛશһूΊͯձΛ։͍ͨ
ςΩετϕʔεͷܰྔͳςϯϓϨʔτΛ༻ͯ͠ɺΞʔΩςΫνϟ্ͷઃܭ அΛه͢Δɻ ܰྔͳΞʔΩςΫνϟσγδϣϯϨίʔυʢArchitecture Decision Recordsɿ ADRʣɺ࣮ͷ͋ΔΞʔΩςΫνϟख๏ʹର͢Δ։ൃऀدΓͷΞϓϩʔν ͩɻઃܭஅΛه͍ͯ͘͜͠ͱͰɺͦΕΒΛڞ༗͠ੳ͢Δ͜ͱ͕༰қʹͳ Δɻ ҙࢥܾఆͷཤྺΛ͢͜ͱͰɺݱࡏͷΞʔΩςΫνϟʹ͍ͭͯͷίϯςΩετ Λɺͦͷաఔͱ݁ͼ͚ͭͯఏڙͰ͖Δɻ
ADRͱ ※ Michael Keeling. Design it . גࣜձࣾΦϥΠϦʔɾδϟύϯ. 2019. 404p
None
• Next.js + GraphQL ʹ͖͔͢ɺXslateͱReact͕ڞଘ͢ΔΑ͏ʹ͢ ͖͔ • CSRΛ༗ޮʹ͢Δ͔ • ΩϟογϡͲ͏͢Δ͔
• CSSͲΜͳٕज़Λ͏͔ • ਪϒϥβϙϦγʔΛͲ͏͢Δ͔ • ReactԽલޙϖʔδͷϧʔςΟϯάͷํ๏Γସ͑ΛͲ͏࣮ݱ͢Δ͔ • WebViewͰදࣔ͞Ε͍ͯΔͷͲ͏͢Δ͔ʁ • etc… ADRʹॻ͍ͨ͜ͱ
ํͷݻΊͱνʔϜʹ߹ҙΛͱΔ • ྑ͔ͬͨ͜ͱ ◦ ADRΛॻ͍ͨ͜ͱ ▪ ϑΥʔϚοτ͕ॻ͖͔ͬͨ͢ ▪ ్தܦա͕ slack
ʹྲྀΕ͍ͯͨͷͰɺձʹ͚ͯࢥߟΛঃʑ ʹ։ࣔͰ͖ͨ ▪ ్தͰϝϯόʔ͔ΒԠ͕Β͑ΔͷͰɺυΩϡϝϯτͷ ྔΛௐͰ͖ͨ ◦ େࡶͳϩʔυϚοϓΛΈΜͳͰΈΔ͜ͱͰɺنײΛڞ༗Ͱ͖ ͨΓɺۙͷͳͷ͔ະདྷͷͳͷ͔ΛཧͰ͖ͨ
• ظؒ ◦ 1 • ͬͨ͜ͱ ◦ λεΫʹղͯ͠ϓϩδΣΫτཧπʔϧʹஔͨ͠ • ྑ͔ͬͨ͜ͱ
◦ ϓϩτλΠϓͰݕ౼ࣄ߲ҰཡΛ࡞͍ͬͯͨͨΊɺλεΫ ղ͕༰қͩͬͨ ϑϩϯτج൫࣮ʹඞཁͳλεΫΛղͯ͠ɺεέδϡʔϧʹམͱ͢
• ࿙Ε͕গͳ͍λεΫҰཡ͕͋ͬͨͷͰɺཧ্εϜʔζͩͬͨ • ผͷϝϯόʔʹλεΫΛҕৡ͔ͬͨ͢͠ ◦ αϯϓϧίʔυ͜ΕͳͷͰɺ͍͍ײ͡ʹ͔ͬ͜Αͯ͘͘͠ ͍ͩͬͯ͞ݴ͑ऴΘͬͨ • ج൫࣮࣌ʹ͏·͘ಈ࡞͠ͳ͔ͬͨ߹ʹɺϓϩτλΠϓͱ͍ ͏طʹಈ͍͍ͯΔͷΛࢀরͰ͖ͨ
ج൫։ൃޙʹৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ
Ұޙ͔ΒৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ • ʮϦΞʔΩςΫνϟʹ͓͚Δࣦഊʯʹ͋ΔΑ͏ͳɺํ͕ؒ ҧ͍ͬͯͨΊΓ͠ൃੜ͠ͳ͔ͬͨͷͰɺϓϩτλΠϓΛ ௨ͯ͡ਫ਼ͷߴ͍ݕূ͕Ͱ͖ͨͱߟ͍͑ͯΔ
·ͱΊʙϓϩτλΠϓʙ • ϦΞʔΩςΫνϟʹ͓͚ΔࣦഊΛ͙ͨΊʹɺϓϩτλΠϓ͕ ༗ޮͩͱߟ͍͑ͯ·͢ • ૣΊʹཕΛ౿ΊͨΓɺखΛಈ͔͢͜ͱͰݕূͷਫ਼͕͕͋ Γɺ࡞ͬͨίʔυΛޙͷϑΣΠζͰ͑ͨΓ͠·͢
·ͱΊʙϓϩτλΠϓͷਐΊํʙ • ཏతͳλεΫҰཡΛ࡞Δ͜ͱɺ༏ઌॱҐͷ࣠ΛͲ͏͢Δ͔ ͍͠Ͱ͕͢ɺେͳ͜ͱͩͱࢥ͍ͬͯ·͢ • ϓϩτλΠϓͰɺແݶʹΓ͍ͨ͜ͱ͕͋ΔͷͰ࣌ؒΛ۠ Δͷ͕͓͢͢ΊͰ͢ • ϓϩτλΠϓͷ࣌ʹɺADRͷ༻ීஈͷϓϩδΣΫτཧ Ͱ͍ͬͯΔख๏Λ͏ͷΛ͓קΊ͠·͢