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.7k
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
テスト駆動Kaggle
isax1015
1
630
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Goで作る、開発・CI環境
sin392
0
260
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
GPUを計算資源として使おう!
primenumber
1
250
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
628
62k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Documentation Writing (for coders)
carmenintech
72
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Designing Experiences People Love
moore
142
24k
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ͷ༻ීஈͷϓϩδΣΫτཧ Ͱ͍ͬͯΔख๏Λ͏ͷΛ͓קΊ͠·͢