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
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
920
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
930
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
210
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.2k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
570
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
890
NEWT Backend Evolution
xpromx
1
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
610
Porting a visionOS App to Android XR
akkeylab
0
660
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Practical Orchestrator
shlominoach
189
11k
The Invisible Side of Design
smashingmag
301
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
A Tale of Four Properties
chriscoyier
160
23k
How GitHub (no longer) Works
holman
314
140k
Docker and Python
trallard
45
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Speed Design
sergeychernyshev
32
1k
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