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

我が家のフロントエンド開発事情 2015年度版

82ed567f8497acfed7f7b464225dd536?s=47 wakamsha
September 24, 2015

我が家のフロントエンド開発事情 2015年度版

2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたものです。

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

September 24, 2015
Tweet

Transcript

  1. զ͕ՈͷϑϩϯτΤϯυ։ൃࣄ৘ ࢁా௚थ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ  - Web application development environment -

  2. ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ

  3. ࣗݾ঺հ ࢁా௚थ !XBLBNTIB גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ϑϩϯτΤϯυΤϯδχΞ ೥݄ೖࣾ ࣾ໨  ϦΫϧʔτʹདྷΔલ͸6*σβΠφʔϑϩϯτΤϯυΤϯδχΞͱͯ͠ ۀ຿ܥΞϓϦέʔγϣϯͷ6*ઃܭ͔Β։ൃ·ͰΛ΍͍ͬͯͨ

  4. https://ryorisapuri.jp ྉཧαϓϦ

  5. None
  6. http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

  7. None
  8.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    "HFOEB
  9.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    
  10. ৽نαʔϏεΛ 41"Ͱ࡞͍ͬͯ·͢ Single Page Application

  11. None
  12. 8FC4FSWFS

  13. ೥݄຤ 8FC൛ϦϦʔε Ծ Coming soon...

  14.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    
  15. 4JOHMF1BHF"QQMJDBUJPOͳͷͰ +BWB4DSJQU͕େن໛ʹͳΔͷ͸ඞવ 5PP'BU'SPOUFOE$PEF

  16. 41"ͳͷͰ+BWB4DSJQU͕େن໛ʹͳΔͷ͸ඞવ w มԽͷܹ͍͠8FCϑϩϯτΤϯυք۾ w σϑΝΫτελϯμʔυͷੜ·Εʹ͍͘ྖҬ w ͻͱͭͣͭࣗ෼ୡͰௐࠪͭͭ͠ɺख୳ΓͰ؀ڥߏங w ྲྀߦ͸ద౓ʹऔΓೖΕͭͭɺ෼͔Γ΍͢͞Λॏࢹ w

    ໰୊ʹ௚໘ͨ͠Βɺ։ൃͷ࠷தͰ΋᪳᪯ͳ͘ݟ௚͢
  17. 5ZQF4DSJQU "UZQFETVQFSTFUPG+BWB4DSJQUUIBUDPNQJMFTUPQMBJO+BWB4DSJQU

  18. 5ZQF4DSJQU w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ  w +BWB4DSJQUͷεʔύʔηοτ ׬શ্Ґޓ׵  w

    ੩తܕ෇͚ݴޠ w ܕਪ࿦͋Γ w ѹ౗తଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ جຊతʹ͸ਪ࿦ʹཔΒͣ શྗͰܕఆٛ͠·͢
  19. 5ZQF4DSJQU w +BWB $ʹΠϯεύΠΞ͞Εͨݴޠ࢓༷ w &$."4DSJQUͷ࢓༷Λੵۃతʹ࠾༻͍ͯ͠Δ w ίϯύΠϧޙͷ+4ίʔυ͸ඒ͘͠ಡΈқ͍ w طଘ+4ϥΠϒϥϦͷଟ͕͘࢖͑Δ

    ॆ࣮ͷܕఆٛϑΝΠϧ
  20. 7BOJMMB+4ΑΓ͸ͣͬͱߴػೳ͕ͩɺ ಈతܕ෇͚ͳͷ͸େن໛։ൃʹ͓͍ͯෆར ෳ਺ਓͰ։ൃ͢ΔҎ্ɺܕ͸ඞਢཁ݅ ͋Δఔ౓ίʔσΟϯάʹ΋౷੍͕ͱΕΔ ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ ࠓޙ&4͕ਁಁ͍ͯ͘͜͠ͱΛߟ͑Δͱ ͜ͷ࣌ظʹ͋͑ͯબ୒͢Δඞཁੑ͸௿͍ͱ΋

  21. ͦͷ΄͔ީิʹͳͬͨ+4τϥϯεύΠϥ &4Ͱॻ͔Εͨ+4ίʔυΛ&4ʹม׵͢Δ τϥϯεύΠϥ ࠓ೥ͷ०ͳٕज़Ͱ͸͋Δ͕ɺ ΍͸ΓܕΛ࣋ͨͳ͍ͱ͍͏ཧ༝͔Β/( &4ͷจ๏͸5ZQF4DSJQUͰ΋͍͍ͩͨॻ͚ΔͷͰ ͋͑ͯͪ͜Βʹ߆Δཧ༝͸ബ͍

  22. "OHVMBS+4 4VQFSIFSPJD+BWB4DSJQU.78'SBNFXPSL

  23. "OHVMBS+4 w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹ౗తଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %*

    1SPNJTF BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ͸41"ʹ͏͚ͬͯͭ w "OHVMBS6*3PVUFSϞδϡʔϧͱ૊Έ߹ΘͤΕ͹࠷ڧ
  24. $VTUPNEJSFDUJWF ಠࣗͷػೳΛ࣮૷ͨ͠λά΍ϓϩύςΟΛఆٛͰ͖Δ

  25. "OHVMBS+4º5ZQF4DSJQU 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ ίϯτϩʔϥɺαʔϏεɺσΟϨΫςΟϒͳͲ ػೳผʹΫϥεԽ͠΍͍͢ ͨͩ͠ɺ஌ݟ͸গͳΊ άάͬͯ΋࣮ફతͳ৘ใ͸ຆͲग़ͯ͜ͳ͍

  26. ࠓ೥࠷΋०ͳ+4ϑϨʔϜϫʔΫ   "OHVMBS+4ͱൺֱͯ͠஌ݟ͕গͳ͍ ೥ॳ಄͸·ͩ৘ใ͕গͳ͔ͬͨ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ +49ͷจ๏͕ಠಛ͗ͯ͢ ೃછΊΔࣗ৴͕࣋ͯͳ͔ͬͨ ҙࣝߴ͍ܥͷਓ͕ͨͪ΍ͨΒਪ͍ͯ͠Δ͕ Ͳͷൃݴ΋එଣ͍͘͞ҹ৅

    3FBDU
  27. "OHVMBS+4͕ྲྀߦΔલ͸օ͜Εʹເதͩͬͨ ΘΓͱૉ௚ͳ.7$ 1 ͕ॻ͚Δͷ͸޷ҹ৅ .BSJPOFUUFͱ૊Έ߹ΘͤΕ͹ɺࠞಱͱ͕ͪ͠ͳ #BDLCPOFͷίʔυʹ΋͋Δఔ౓౷੍͕ͱΕΔ ͜Ε͔Β࡞ΔΞϓϦͷن໛Λߟ͑Δͱ ΍΍ྗෆ଍Λײ͡Δ ͦͷ΄͔ީิʹͳͬͨ+4ϑϨʔϜϫʔΫ

  28. $SFBUF+4 "TVJUFPG+BWB4DSJQUMJCSBSJFTBOEUPPMTEFTJHOFEGPSXPSLJOHXJUI)5.-

  29. w $BOWBT΍"VEJP౳Λ͍͍ײ͡ʹ͓ੈ࿩ͯ͘͠ΕΔ w ֤छ"1*͕'MBTI "4 ͷͦΕͱࠅࣅ͍ͯ͠Δ w 5ZQF4DSJQUͱͷ૬ੑ͕ൈ܈ w ϦονίϯςϯπΛදݱ͢ΔՕॴͰ࢖༻

    w $BOWBTΛ࢖ͬͨΞχϝʔγϣϯ w ΦʔσΟΦϑΝΠϧͷ࠶ੜ w ϝσΟΞϑΝΠϧͷඇಉظಡΈࠐΈ $SFBUF+4
  30.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    
  31. ྲྀߦ͸ద౓ʹऔΓೖΕΔ ෼͔Γ΍͢͞આ໌͠΍͢͞Λॏࢹ େࣄͳ͜ͱͳͷͰೋճݴ͍·ͨ͠

  32. None
  33. +BWB4DSJQU࣮ߦ؀ڥ ͜ΕΛϕʔεʹ։ൃ؀ڥΛߏங͠ɺ ༷ʑͳπʔϧΛಈ͔͢ Ұ࣌ظɺJPKTͱରཱ ͍ͯͨͬ͠Ά͍͚Ͳɺ ࠷ऴతʹ࿨ղͯ͠౷߹ɻ7FS͕ϦϦʔε OPEFKT

  34. λεΫϥϯφʔ (VMQ w 5ZQF4DSJQU 4$44 +BEFͷίϯύΠϧ w ϩʔΧϧαʔόʔͷىಈ w 8FCϑΥϯτͷੜ੒

    w ͦͷଞͳΜͰ΋ʜ $ npm install -g gulp ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEHFUUJOHTUBSUFEHVMQTBTTCPVSCPO
  35. ϑϩϯτΤϯυؔ࿈ͷύοέʔδ؅ཧπʔϧ #PXFS "OHVMBS+4 $SFBUF+4 #PPUTUSBQ ͱ͍ͬͨ֎෦ϥΠϒϥϦ͸શͯ͜Εܦ༝Ͱ औಘ؅ཧ #SPXTFSJGZ΍8FCQBDLͷ࠾༻΋ݕ౼͕ͨ͠ɺ ॾʑͱෆ౎߹͕͋ͬͨͷͰ٫Լ

  36. $44Λੜ੒͢ΔϓϦϓϩηοαʔݴޠ 4$44 (VMQܦ༝Ͱ࢖༻͢Δ ͨͩ͠-FTT ͯΊʔ͸μϝͩ 4BTTͰ΋4UZMVTͰ΋͓޷͖ͳͷΛͲ͏ͧ

  37. )5.-Λੜ੒͢ΔϓϦϓϩηοαʔݴޠ +BEF (VMQܦ༝Ͱ࢖༻͢Δ )BNM΍4MJNͱඇৗʹΑ͘ࣅͨจ๏͕ͩɺ ػೳ͸ͦΕΒʹҰஈྼΔ

  38. +BWB4DSJQUͷϢχοτςετπʔϧ +BTNJOFº,BSNB "OHVMBS+4ͷඪ४ςεςΟϯάϑϨʔϜϫʔΫ ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ IUUQUFDISFDSVJUNQDPKQGSPOUFOEQPTU ςετΛಋೖ͢Δ͔͸ɺΤϯδχΞͷεΩϧͱ Ϧιʔε ظؒ ʹԠͯ͡ॊೈʹ൑அ͢Δ͜ͱ εΩϧPSظؒʹෆ͕҆͋ΔͷͳΒ

    ܿ͘੾ΓࣺͯΑ͏
  39. None
  40. 5ZQF4DSJQU͸ίϯύΠϥࣗମ͕*%&༻"1*Λ ͍࣋ͬͯΔͨΊɺΤσΟλʹίʔυิ׬ͱ͍ͬͨػ ೳΛ࣋ͨͤ΍͍͢ ίʔυิ׬5ZQF4DSJQUͷ৔߹ 7JTVBM4UVEJPͱಉ౳ͷิ׬ػೳ͕ظ଴Ͱ͖Δ ๻͸*OUFMMJ+ͱ4VCMJNF5FYU Λ࢖͍ͬͯ·͢

  41.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    
  42. "OHVMBS6*and5ZQF4DSJQU "SDIJUFDUVSF IUUQTHJUIVCDPNXBLBNTIBBOHVMBSVJ@UZQFTDSJQU

  43.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ  41"։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ  ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ  େ·͔ͳΞϓϦέʔγϣϯߏ੒  αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ

    
  44. "1*υΩϡϝϯτ͸ ඞਢ

  45. "1*υΩϡϝϯτ͸ඞਢ w αʔόʔΫϥΠΞϯτ͸"1*ͷΈͰ΍ΓऔΓ͢Δ w ͲͷΑ͏ͳ +40/ ܗࣜͰ௨৴͢Δͷ͔ৗʹ೺Ѳ͓ͯ͘͜͠ͱ͕ඞཁ w ։ൃத΋υΩϡϝϯτΛৗʹ࠷৽ʹ͓ͯ͘͜͠ͱͰೝࣝʹᴥᴪ͕ੜ·Ε ΔͷΛ๷͙

  46. "1*#MVFQSJOU࢓༷Ͱॻ͔Εͨ .BSLEPXOϑΝΠϧ HVMQBHMJPͰ.BSLEPXOϑΝΠϧ͔Β ੩త)5.-Λੜ੒ ద౰ͳαʔόʔʹΞοϓϩʔυ͢Ε͹ ཱ೿ͳ"1*υΩϡϝϯτϖʔδ͕׬੒ "1*υΩϡϝϯτ࡞੒πʔϧ HVMQBHMJP "1*#MVFQSJOU ৄ͘͠͸ฐࣾͷϒϩάΛಡΊʂ

    IUUQUFDISFDSVJUNQDPKQEFWUPPMTQPTU
  47. %FNP IUUQTHJUIVCDPNXBLBNTIBUSZ@HVMQUSFFNBTUFSUSZ@BQJ

  48. 2" "OZ2VFTUJPOT

  49. 5IBOLZPV