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.3k
プロトタイプ編 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.4k
Other Decks in Programming
See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
유연한 Composable 설계
l2hyunwoo
0
380
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
AHC035解説
terryu16
0
720
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
継続的な活動で築く地方エンジニアの道
myamashii
2
360
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Bash Introduction
62gerente
607
210k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
BBQ
matthewcrist
82
9k
Writing Fast Ruby
sferik
623
60k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Gamification - CAS2011
davidbonilla
78
4.9k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Six Lessons from altMBA
skipperchong
24
3.2k
Rails Girls Zürich Keynote
gr2m
93
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ͷ༻ීஈͷϓϩδΣΫτཧ Ͱ͍ͬͯΔख๏Λ͏ͷΛ͓קΊ͠·͢