Upgrade to Pro — share decks privately, control downloads, hide ads and more …

メドレー開発部TechLunch React入門

メドレー開発部TechLunch React入門

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

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

発表者:楊 春涛

D879794ea42768ea417f970914430d56?s=128

Medley Inc.

June 26, 2017
Tweet

More Decks by Medley Inc.

Other Decks in Technology

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 ɾ&WFSZUIJOHJTB$PNQPOFOU

  6.  $PNQPOFOU ɾίϯϙʔωϯτ͕֎͔Βड͚औΔଐੑ΍ϝιουΛఆ͍ٛͯ͠Δ ɾQSPQT

  7.  $PNQPOFOU ɾSFOEFS JOQVUWBMVFOBNFOBNFDMBTTDUFYUpFMENBYMFOHUI ɾ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 ɾ3FBDU7JFX ɾ"DUJPO$SFBUPST͔ΒσʔλΛड͚औΓɺอ࣋͢Δ ॳظԽ ϢʔβΞΫγϣϯͰɺ"DUJPOܦ༝Ͱ ౎ಓ෎ݝ৘ใΛऔಘ TUBUF͔ΒΞΫηεͰ͖Δ

  21.  ɾ'MVY ɾ*NNVUBCMFKT ɾ$PNQPOFOU ɾ$PNQPOFOU૊Έ߹Θͤ ɾ3FBDUͱ͸ ɾ$PNQPOFOUؒͷ௨৴

  22.  *NNVUBCMFKT ɾྫ͑͹OBNFͱBHF͕த਎Ͱ͋ΔQFSTPOTUBUFΛ࣋ͭ ɾ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 ɾ0CKFDUBTTJHOͰॻ͘ΑΓσʔλͷ؅ཧָ͕ʹͳΔ ɾಛʹωετߏ଄ͷΦϒδΣΫτͷߋ৽ָ͕ ɾJNNVUBCMFͳ0CKFDUΛඞͣฦ͢ͷͰɺҙਤ͠ͳ͍σʔλͷߋ ৽͕͓͖ͮΒ͍

  28.  *NNVUBCMFKT ɾ஫ҙ఺ ɾJNNVUBCMFKTͷฦ͢PCKFDUͱී௨ͷPCKFDU͕ࠞͬͯ͟͠ ·͏ͱɺࠞཚͯ͠͠·͏ͷͰɺશ෦౷Ұͨ͠ํ͕ྑ͍

  29. ·ͱΊ

  30.  ·ͱΊ ɾશͯ͸$PNQPOFOUɺγϯϓϧʹอͭ͜ͱΛҙࣝ͢Δ ɾ'MVYͱซ༻͠σʔλϑϩʔΛҙࣝ͢Δ ɾ*NNVUBCMFKTศར ɾখ͘͞$PNQPOFOUΛ࡞Γɺ૊ΈཱͯΔ͜ͱʹΑΓ6*Λߏங͢Δ