Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
プロトタイプ編 Hatena Engineer Seminar #19
k-murakami0609
April 01, 2022
Programming
0
680
プロトタイプ編 Hatena Engineer Seminar #19
k-murakami0609
April 01, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
110
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
160
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1k
GitHubのユーザー名を変更した後のあれこれ
tahia910
0
130
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
Amazon Aurora の v1 が EOL になるので 10 クラスタアップグレードして出てきたノウハウ
dekokun
0
860
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
180
Swift Regex
usamik26
0
180
Mobile Product Engineering
championswimmer
0
300
Licences open source : entre guerre de clochers et radicalité
pylapp
2
500
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
Featured
See All Featured
Done Done
chrislema
174
14k
Side Projects
sachag
450
37k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Become a Pro
speakerdeck
PRO
3
840
Debugging Ruby Performance
tmm1
65
10k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Bash Introduction
62gerente
597
210k
Happy Clients
brianwarren
89
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
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ͷ༻ීஈͷϓϩδΣΫτཧ Ͱ͍ͬͯΔख๏Λ͏ͷΛ͓קΊ͠·͢