メドレー開発部TechLunch React入門

メドレー開発部TechLunchで発表した内容を掲載しました。

メドレーで開発部では、隔週で社内勉強会が開かれています。
今回は、「React入門」というタイトルで、医療介護歯科の求人サイト"ジョブメドレー"の顧客向け管理画面をリニューアルした際に学んだことを発表したのでご紹介します。

発表者：楊 春涛

Transcript

1. ҩྍϔϧεέΞ෼໺ͷ՝୊Λղܾ͢Δ ༶
   य़౭ ϝυϨʔ։ൃ෦5FDI-VODI
 3FBDUೖ໳ גࣜձࣾϝυϨʔ
2.  ࣗݾ঺հ ɾ໊લ
   ɾग़਎ ༶
   य़౭ தࠃ࢛઒ল ɾגࣜձࣾϝυϨʔ೥໨ ɾ࢖ͬͯΔݴޠ ɾ$
   3VCZ
   +BWB4DSJQU
   FUD ɾझຯ ɾࢠڙͱ༡Ϳ͜ͱ ɾਏ͍৯΂෺ ɾαʔόαΠυΤϯδχΞ
3.  ࿩͢͜ͱɺ࿩͞ͳ͍͜ͱ ɾ7JSUVBM
   %0. ɾ࿩͞ͳ͍͜ͱ ɾ࿩͢͜ͱ ɾ'MVY ɾ*NNVUBCMFKT ɾ$PNQPOFOU ɾ$PNQPOFOU૊Έ߹Θͤ ɾ3FBDUͱ͸ ɾ$PNQPOFOUؒͷ௨৴ ɾ+49
4.  3FBDUͱ͸ • Facebook ੡ • UI Λߏங͢ΔͨΊͷ JavaScript ϥΠϒϥϦ ɾIUUQTHJUIVCDPNCSJMMPVUBXFTPNFSFBDUDPNQPOFOUT • UI Componentͷ਺͕ଟ͍
5.  $PNQPOFOU ɾ6*ͷύʔπ͸$PNQPOFOU୯ҐͰ෼͚Δ ɾϚʔΫΞοϓ΋ϩδοΫ΋·ͱΊͯ؅ཧ ɾ؆୯ͳίϯϙʔωϯτͷίʔυΛݟͯઆ໌ ɾQSPQT ɾSFOEFS ɾTUBUF ɾ&WFSZ
   UIJOH
   JT
   B
   $PNQPOFOU
6.  $PNQPOFOU ɾίϯϙʔωϯτ͕֎͔Βड͚औΔଐੑ΍ϝιουΛఆ͍ٛͯ͠Δ ɾQSPQT
7.  $PNQPOFOU ɾSFOEFS JOQVU
   WBMVF
   OBNFOBNF
   DMBTTDUFYUpFME
   NBYMFOHUI ɾ6*΁൓ө
8.  $PNQPOFOU ɾϓϥΠϕʔτͳΦϒδΣΫτͰίϯϙʔωϯτ಺෦Ͱ੍ޚՄೳ ɾTUBUF
9.  $PNQPOFOU૊Έ߹Θͤ ɾπϦʔߏ଄Ͱ૊Έ߹ΘͤΔ ϧʔτ$PNQPOFOU ϔομʔ$PNQPOFOU 6TFS'PSN
   $PNQPOFOU 5FYU'*FME 3BJEP#VUUPO ɾϧʔτ$PNQPOFOU͸͢΂ͯͷTUBUFΛ࣋ͭ ɾجຊ͸TUBUFMFTTʹอͭͷ͕γϯϓϧͰྑ͍
10.  $PNQPOFOU૊Έ߹Θͤ ɾ·ͩ͋Δ -JTU5BCMF)FBE -JTU5BCMF#PEZ ɾԼͷը໘͸Կݸͷ$PNQPOFOUͰߏ੒͞ΕͯΔ͔ʁ ɾJOQVUλά͸5FYU'JFMEͱ͍͏$PNQPOFOUͰ࡞੒ 5FYU'JFME -JTU5BCMF ɾશମ͸-JTU5BCMFͱ͍͏$PNQPOFOUͰ࡞੒
11.  $PNQPOFOU૊Έ߹Θͤ
12.  $PNQPOFOU૊Έ߹Θͤ ɾͰ͖Δ͚ͩখ͞ͳ$PNQPOFOU͔Β࡞੒ ɾখ͞ͳ$PNQPOFOUΛ૊Έ߹Θ͍ͤͯ͘ ɾTUBUFMFTTͳ$PNQPOFOUΛҙࣝ͠γϯϓϧʹอͭ
13.  $PNQPOFOU௨৴ ɾ਌$PNQPOFOUͷTUBUFΛࢠ$PNQPOFOUͷQSPQTʹ౉͢ ɾࢠ$PNQPOFOUͷΠϕϯτ͸$BMMCBDLͰϋϯυϦϯά
14.  $PNQPOFOU௨৴ ɾ਌͔ΒࢠͷϝιουΛ௚઀ݺͼ͍͍ͨͨ࣌ʹ͸SFGΛ࢖͏ ɾίʔυͰGPSNΛTVCNJU͢Δ৔߹͸ɺSFGͰίϯϙʔωϯτΠ ϯελϯεΛऔಘ ɾGPSNͷTVCNJUϝιουΛݺͿ ɾجຊతʹσʔλϑϩʔ͸Ұํ޲ʹอͭ΂͖ͳͷͰɺ࢖༻ʹ͍ͭ ͯ͸ۃྗ཈͑ͨ΄͏͕ྑ͍
15.  ɾ'MVY ɾ*NNVUBCMFKT ɾ$PNQPOFOU ɾ$PNQPOFOU૊Έ߹Θͤ ɾ3FBDUͱ͸ ɾ$PNQPOFOUؒͷ௨৴
16.  'MVY ɾ3FBDU͸͋͘·Ͱ7JFXߏங͢ΔͨΊͷϥΠϒϥϦ ɾ͜͜Ͱ'MVYͷग़൪ ɾͳͥඞཁͳͷ͔ ɾσʔλͷϑϩʔ؅ཧͳͲ͸͍ͯ͠ͳ͍
17.  'MVY ࢀরɿIUUQTGBDFCPPLHJUIVCJPSFBDUJNHCMPHqVYEJBHSBNQOH
18.  'MVY ɾ౎ಓ෎ݝ৘ใΛ"1*͔Βऔಘͯ͠දࣔ͢ΔػೳͰઆ໌ ɾ"DUJPO
    $SFBUPST ɾEJTQBUDIFS
19.  'MVY ɾ4UPSF ɾ"DUJPO
    $SFBUPST͔ΒσʔλΛड͚औΓɺอ࣋͢Δ
20.  'MVY ɾ3FBDU
    7JFX ɾ"DUJPO
    $SFBUPST͔ΒσʔλΛड͚औΓɺอ࣋͢Δ ॳظԽ ϢʔβΞΫγϣϯͰɺ"DUJPOܦ༝Ͱ ౎ಓ෎ݝ৘ใΛऔಘ TUBUF͔ΒΞΫηεͰ͖Δ
21.  ɾ'MVY ɾ*NNVUBCMFKT ɾ$PNQPOFOU ɾ$PNQPOFOU૊Έ߹Θͤ ɾ3FBDUͱ͸ ɾ$PNQPOFOUؒͷ௨৴
22.  *NNVUBCMFKT ɾྫ͑͹OBNFͱBHF͕த਎Ͱ͋ΔQFSTPO
    TUBUFΛ࣋ͭ ɾOBNFΛมߋ͍ͨ͠৔߹͸ɺҎԼͷૢ࡞͚ͩͩͱSFOEFS͞Εͳ ͍
23.  *NNVUBCMFKT ɾSFBDU୯ମͰ͸TUBUFɺQSPQTͷࠓͷঢ়ଶͱ࣍ͷσʔλΛൺֱ͠ ͯSFOEFS͢Δ͕ɺPCKFDUͷத਎·Ͱ͸ൺֱ͢Δ࢓૊Έ͕ͳ͍ ্ͷΑ͏ʹPCKFDUͷൺֱ͢Δ͕ɺத਎ͷൺֱ͸Ͱ͖ͳ͍
24.  *NNVUBCMFKT ɾղܾࡦ͸
    ࣗ෼ͰൺֱϩδοΫ࡞Δ͜ͱ ɾͨͩ͜Εͩͱɺ$PNQPOFUʹେྔͳൺֱϩδοΫ͕ඞཁͰɺ࣮ ૷͕େมʹͳΔ
25.  *NNVUBCMFKT ɾղܾࡦͱͯ͠͸৽͍͠PCKFDUΛฦ͢ ɾ؆୯ͳ৔߹͸໰୊ͳ͍͕ɺQFSTPOʹBSSBZΛ࣋ͭ৔߹͸ɺ৽͠ ͍PCKFDUฦ͢ͷ͸ෳࡶʹͳΔ
26.  *NNVUBCMFKT *NNVUBCMFKTͱ͸
    ෆมσʔλߏ଄Λѻ͏+BWB4DSJQUͷϥΠϒϥϦ
    IUUQTKBXJLJQFEJBPSHXJLJ &"&'&"&#$&#'&& "# IUUQTXXXXBOUFEMZDPNDPNQBOJFTXBOUFEMZQPTU@BSUJDMFT
27.  *NNVUBCMFKT ɾ0CKFDU
    BTTJHOͰॻ͘ΑΓσʔλͷ؅ཧָ͕ʹͳΔ ɾಛʹωετߏ଄ͷΦϒδΣΫτͷߋ৽ָ͕ ɾJNNVUBCMFͳ0CKFDUΛඞͣฦ͢ͷͰɺҙਤ͠ͳ͍σʔλͷߋ ৽͕͓͖ͮΒ͍
28.  *NNVUBCMFKT ɾ஫ҙ఺ ɾJNNVUBCMFKTͷฦ͢PCKFDUͱී௨ͷPCKFDU͕ࠞͬͯ͟͠ ·͏ͱɺࠞཚͯ͠͠·͏ͷͰɺશ෦౷Ұͨ͠ํ͕ྑ͍
29. ·ͱΊ
30.  ·ͱΊ ɾશͯ͸$PNQPOFOUɺγϯϓϧʹอͭ͜ͱΛҙࣝ͢Δ ɾ'MVYͱซ༻͠σʔλϑϩʔΛҙࣝ͢Δ ɾ*NNVUBCMFKT
    ศར ɾখ͘͞$PNQPOFOUΛ࡞Γɺ૊ΈཱͯΔ͜ͱʹΑΓ6*Λߏங͢Δ