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.2k
プロトタイプ編 Hatena Engineer Seminar #19
k-murakami0609
April 01, 2022
Tweet
Share
More Decks by k-murakami0609
See All by k-murakami0609
aaaa
kmurakami0609
0
4
Hatena Engineer Seminar #26 エンジニアとして チーム改善してたら EMになってた話
kmurakami0609
0
1.4k
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Git Lint
bkuhlmann
4
750
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
100
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
見た目から始める生産性向上
ikumatadokoro
7
830
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Site Reliability Engineering for GMO
pyama86
7
1k
Elm 0.19.0 Changes
bkuhlmann
0
490
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
950
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
RailsConf 2023
tenderlove
4
540
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
KATA
mclloyd
15
12k
A Tale of Four Properties
chriscoyier
151
22k
Bash Introduction
62gerente
604
210k
Practical Orchestrator
shlominoach
182
9.7k
Navigating Team Friction
lara
178
13k
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ͷ༻ීஈͷϓϩδΣΫτཧ Ͱ͍ͬͯΔख๏Λ͏ͷΛ͓קΊ͠·͢