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.7k
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
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
200
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
React 19アップデートのために必要なこと
uhyo
8
1.5k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
500
楽しく向き合う例外対応
okutsu
0
710
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
Learning Kotlin with detekt
inouehi
1
150
Rubyと自由とAIと
yotii23
6
1.8k
ML.NETで始める機械学習
ymd65536
0
240
PRレビューのお供にDanger
stoticdev
1
240
AWS Step Functions は CDK で書こう!
konokenj
4
630
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
140
23k
A Philosophy of Restraint
colly
203
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Producing Creativity
orderedlist
PRO
344
40k
Docker and Python
trallard
44
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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