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
160
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.2k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Leading Effective Engineering Teams in the AI Era
addyosmani
7
580
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
630
CSC509 Lecture 06
javiergs
PRO
0
270
CSC305 Lecture 10
javiergs
PRO
0
230
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
KATA
mclloyd
PRO
32
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
A better future with KSS
kneath
239
18k
Building Adaptive Systems
keathley
44
2.8k
Designing Experiences People Love
moore
142
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Music & Morning Musume
bryan
46
6.9k
Docker and Python
trallard
46
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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