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
frontend development on recruit tech
Search
Yosuke Furukawa
PRO
March 08, 2017
Programming
2
1.8k
frontend development on recruit tech
r-tech night vol.5 2017/3/8
Yosuke Furukawa
PRO
March 08, 2017
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
76
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.1k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
250
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
The State of Fluid (2025)
s2b
0
180
バイブコーディング × 設計思考
nogu66
0
120
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.3k
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
140
Introduction to Git & GitHub
latte72
0
110
TanStack DB ~状態管理の新しい考え方~
bmthd
2
180
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
960
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
630
実践!App Intents対応
yuukiw00w
1
320
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
990
AHC051解法紹介
eijirou
0
610
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Documentation Writing (for coders)
carmenintech
73
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Gamification - CAS2011
davidbonilla
81
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
Frontend Develops on Recruit Tech 2017 8th March @r-tech night
vol.5
@yosuke_furukawa ϦΫϧʔτςΫϊϩδʔζॴଐ γχΞιϑτΣΞΤϯδχΞ
<13>8FC %#1SFTT݄߸ ʹͯɺ3FBDUͷهࣄಛू
ࠓݴ͍͍ͨ͜ͱ ʮϑϨʔϜϫʔΫ࡞Δͷ ʹ߹Θͤͯ࡞Δʯ
ϦΫϧʔτͷWeb
ϦΫϧʔτͷWeb ݕࡧɹ some website
ϦΫϧʔτͷWeb ݕࡧɹ some website τοϓϖʔδʹݕࡧͰ͖ Δͱ͜Ζ͕͋ͬͯ ݕࡧ͢ΔͱϦετϏϡʔ ͕ग़ͯ ϦετΛΫϦοΫ͢Δͱ ৄࡉϖʔδ͕ग़Δ
ϦΫϧʔτͷWeb ݕࡧɹ some website τοϓϖʔδʹݕࡧͰ͖ Δͱ͜Ζ͕͋ͬͯ ݕࡧ͢ΔͱϦετϏϡʔ ͕ग़ͯ ϦετΛΫϦοΫ͢Δͱ ৄࡉϖʔδ͕ग़Δ
యܕతͳ8FCαΠτ
ϦΫϧʔτͷWeb ʢ࠷ۙ͜͏͍͏ͷ૿͖͑ͯͨʣ chat YYYYYYY bbs YYYYYY Enquete 2YYYYYYYYY ˘
BBBBBBBBB ˘ CCCCCCCC ˘ DDDDDDDDD ˘ EEEEEEEE
ϦΫϧʔτͷWeb ʢ࠷ۙ͜͏͍͏ͷ૿͖͑ͯͨʣ chat YYYYYYY bbs YYYYYY Enquete 2YYYYYYYYY ˘
BBBBBBBBB ˘ CCCCCCCC ˘ DDDDDDDDD ˘ EEEEEEEE νϟοτͰ͖ͯ ܝࣔ൘ͰϝοηʔδʹϦ ΞΫγϣϯ͚ΒΕͯ Ξϯέʔτͱ͔Ͱ Ϣʔβʔͱίϛϡχέʔ γϣϯऔΕΔ
ϦΫϧʔτͷWeb ʢ࠷ۙ͜͏͍͏ͷ૿͖͑ͯͨʣ chat YYYYYYY bbs YYYYYY Enquete 2YYYYYYYYY ˘
BBBBBBBBB ˘ CCCCCCCC ˘ DDDDDDDDD ˘ EEEEEEEE νϟοτͰ͖ͯ ܝࣔ൘ͰϝοηʔδʹϦ ΞΫγϣϯ͚ΒΕͯ Ξϯέʔτͱ͔Ͱ Ϣʔβʔͱίϛϡχέʔ γϣϯऔΕΔ ΠϯλϥΫςΟϒͳ 8FCΞϓϦ
WebαΠτͷཁ • ͱʹ͔͘αΠτύϑΥʔϚϯε • Ұཡ͔Βݕࡧ͢Δਓ͍Δ͚Ͳৄࡉʹߦ ͘ਓ͍Δ(େମ༧αΠτܥৄࡉ > Ұཡ) ډञ༧ͨ͠Βৄࡉ 63-ΛγΣΞͯ͠ෆಛఆ
ଟʹڞ༗͢ΔͨΊ
WebΞϓϦͷཁ • Native ΞϓϦͬΆ͍ Look & Feel • Interactive ͳಈ͖(Chat
͍͍Ͷ௨) chat Like ཁ/BUJWFΞϓϦͱಉ͡ ಈ͖Λͯ͠΄͍͠
ϦΫϧʔτͷWebͷཁ • αΠτܥύϑΥʔϚϯε • ΞϓϦܥLook & Feel chat
ϦΫϧʔτͷWebͷཁ • αΠτܥύϑΥʔϚϯε • ΞϓϦܥLook & Feel chat ྆ऀͷཁΛຬͨ͢ʹ͜Ε·Ͱͷ 8FCϑϨʔϜϫʔΫͰແཧ
Recruit Technologies Ͱ React, Redux, Node.js Ͱ৽͘͠ϑϨʔϜϫʔΫ Λ࡞͍ͬͯΔ
Web αΠτͷࣄྫ DEMO
Web ΞϓϦͷࣄྫ DEMO
ϑϩϯτΤϯυΛ࡞Δ্Ͱ ؾΛ͚͍ͭͯΔࣄ
αʔόͰΫϥΠΞϯτͰ ϨϯμϦϯά͢Δ
αʔόͰΫϥΠΞϯτͰϨ ϯμϦϯά͢Δ • αʔόαΠυϨϯμϦϯάͱݺΕΔͷ • ΫϥΠΞϯτͱαʔόͰಉ͡ϩδοΫͰϨϯ μϦϯά͢Δ • ॳظදࣔͷվળʹޮՌ͋Γʢ͋ͱOGPSEO ͷରԠ͕͍͢͠ʣ
ΫϥΠΞϯταΠυͰͷΈϨ ϯμϦϯάͨ͠߹ ʢॴҦSPAͷ߹ʣ
(&5BSUJDMFT loading… (&5BTTFUCVOEMFKT (&5BQJBSUJDMFT
αʔόαΠυϨϯμϦϯάͷ ߹
(&5BSUJDMFT loading… (&5BTTFUCVOEMFKT αʔόαΠυͰطʹσʔλΛGFUDI ͯ͠)5.-ΛߏஙࡁΈͷͨΊߴ ࣍Ҏ߱ͷϦΫΤετ"1*ܦ༝Ͱ ΫϥΠΞϯταΠυϨϯμϦϯά͢Δ
(&5BSUJDMFT loading… (&5BTTFUCVOEMFKT αʔόαΠυͰطʹσʔλΛGFUDI ͯ͠)5.-ΛߏஙࡁΈͷͨΊߴ ࣍Ҏ߱ͷϦΫΤετ"1*ܦ༝Ͱ ΫϥΠΞϯταΠυϨϯμϦϯά͢Δ ॳظද্͕͕ࣔΔ
DEMO
αʔόαΠυϨϯμϦϯά • ॳظදࣔͷվળͱϨϯμϦϯά͞Εͨޙ ͷ෦ϨϯμϦϯάΛ͢Δٕज़ • ճ༡தͷϢʔβʔͷUXॳظදࣔͷվ ળͰ͖Δ • ݕࡧͯ͠Ұཡදࣔ͢Δૢ࡞ৄࡉ͚ͩΛදࣔ ͢Δૢ࡞ύϑΥʔϚϯεΛ্͍ͤ͢͞
αʔόαΠυϨϯμϦϯά • ͨͩ͠ɺҙ͋Δ • ಛʹࠓͷReactͷαʔόαΠυϨϯμϦϯάॏ ͍(ϨϯμϦϯά͚ͩͰ100msͱ͔͔͔Δ߹͋ Δ) • ͔͜͠ͷॲཧඇಉظͰͳ͍ͷͰblocking͞ ΕΔ
αʔόαΠυϨϯμϦϯά • ͜ΕΛճආ͢ΔͨΊʹɿ • ϨϯμϦϯά݁ՌΛҰ࣌తʹΩϟογϡ͍ͯ͠Δʢϓ ϩηεΩϟογϡ (nginxͷcache dirʹอଘݕ ౼த)) •
Above the fold ͷΈϨϯμϦϯάͤͯ͞αʔόαΠ υϨϯμϦϯάΛݶఆతʹߦ͏ඞཁ͕͋Δ(ະݕূ)
HistoryΛյ͞ͳ͍
HistoryΛյ͞ͳ͍ • ΔɾਐΉΛͨ࣌͠ʹҎલʹݟͯͨঢ়ଶ͕ͪΌ Μͱ෮ݩ͞ΕΔ • વͱ͍͑વ • ͨͩ͠ɺͰ͖͍ͯΔαΠτগͳ͍
History ͕յΕͯΔαΠτྫ
History ͕յΕͯΔαΠτྫ εΫϩʔϧҐஔ่͕ΕΔࣄҊ
εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝ Δ
Δ దͳҐஔʹεΫϩʔϧ ͔ͯ͠Βผͳϖʔδʹભ Ҡ͢Δ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
Δ ભҠͨ͠ϖʔδ͔ΒΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
Δ ͬͨ࣌ʹݩͷ)5.-ফ͑ͯ ͍Δʢ+BWB4DSJQUͰ)5.-͕ߏங ͞ΕΔલʹOBWJHBUF͞ΕΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
Δ ͜ͷ࣌ʹϒϥβݩͷεΫϩʔ ϧҐஔΛ֮͑ͯΔ͕ɺ)5.-͕ શʹϨϯμϦϯά͞Ε͍ͯͳ͍ͷ ͰҐஔ͕࠶ݱ͞Εͳ͍ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
Δ Ґஔ͕࠶ݱͰ͖ͳ͍ͷͰɺεΫϩʔ ϧҐஔ)5.-͕දࣔͰ͖͍ͯΔ ॴ·ͰʹͳΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
ճආࡦ ΔɾਐΉΛͨ࣌͠ʹσʔλ ಡΈࠐΈதϨϯμϦϯάΛ εΩοϓͤ͞Εྑ͍
Δ Δ࣌ʹBKBYͷ࠶ϦΫΤετ͕ Δɺ࠶ϦΫΤετ͕͍ͬͯΔؒ ϨϯμϦϯάͤͣ͞ɺϨεϙϯε ͕ฦ͖͔ͬͯͯΒϨϯμϦϯά͞ ͤΔ εΫϩʔϧҐஔ่͕ΕΔओͳཧ ༝
DEMO
Consumer Driven Contract Ͱ։ൃ͢Δ
Consumer Driven Contract • ैདྷόοΫΤϯυ (Provider)͕ܾΊ͍ͯͨ API ͷ༷ΛϑϩϯτΤϯυ(Consumer)͕ओಋ͠ ͯཁٻΛॻ͘(Contract)͜ͱͰ API
༷ΛܾΊ ͍ͯ͘ͱ͍͏ελΠϧͷ༷ࡦఆํ๏
Consumer Driven Contract • Contract Λఆٛ͢Δ(APIͷ༷ΛJSON͔Կ͔ Ͱॻ͘)
Consumer Driven Contract • هड़͞ΕͨϑΝΠϧΛͬͯmockͱͯ͠׆༻ ͢Δ
Consumer Driven Contract • mock͕ΫϥΠΞϯτͱͳΓɺProviderͷϨε ϙϯεΛνΣοΫ͢Δ
Consumer Driven Contract • ϑϩϯτΤϯυ͕͍͍͢APIʹͳΔ • ͬͪ͜ͷرΛͦͷ··࣮͍ͯ͠Δ͚ͩͰɺόο ΫΤϯυ͕ϋοϐʔʹͳΔ༁Ͱͳ͍ • ͪͳΈʹ࣮ફͯ͠Έͨॴɺ͜ΕΛͬͯίϛϡ
χέʔγϣϯίετ͕͍҆Θ͚Ͱͳ͔ͬͨʢͪΌ ΜͱίϛϡχέʔγϣϯΛऔΔඞཁ͋ͬͨʣ
DEMO
Why Consumer Driven Contract • ैདྷ௨ΓͷΓํͰϑϩϯτΤϯυ։ൃͷ ߹͕ѱ͘ͳΔ • ͳΔ͘ͳΒɺΤϯυϢʔβʹ͍ۙॴͰAPI ༷ΛܾΊΔ͠
• Agreedͱ͍͏ϥΠϒϥϦΛͬͯmockΛॻ͘ ͜ͱͰCDC࣮ફՄೳ
Ͳ͏ͬͯΊΔ͔
Ͳ͏ͬͯΊΔ͔ʁ • ࣄྫΛ࡞͍ͬͯͬͯΊΔ • ڭҭͯ͠ΊΔ • ڭՊॻ • ϓϩτλΠϓ •
ΞϓϦέʔγϣϯߏஙΨΠυ
ڭՊॻ
7 principles of Rich Web Applications • socket.io ͷ࡞ऀ •
Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
7 principles of Rich Web Applications • socket.io ͷ࡞ऀ •
Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 ͜ͷݪଇʹैͬͯ࡞Δ
ϓϩτλΠϓ
ϓϩτλΠϓ • React / Redux / Node.js ͷ࣮ྫूΛ࡞͍ͬͯ Δ •
react-router ແݶεΫϩʔϧͳͲΛͬͨࢀ ߟؚ࣮·Ε͍ͯΔ • Living Recruit Standard ͱͯ͠ৗʹ࠷৽ͷϥΠ ϒϥϦʹै͍ͯ͘͠༧ఆɻ
ΞϓϦέʔγϣϯߏஙΨΠυ
ΞϓϦέʔγϣϯߏஙΨΠυ • Ӷҙ࡞தʂʂʂʂ • ख͕Γͯͳ͍ • Ұॹʹ࡞͍ͬͯ͘ਓืूதʂʂʂʂʂ
ॿ͚͍ͯͩ͘͞ʂʂʂʂʂʂ
Thank you