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

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

Transcript

1. զ͕ՈͷϑϩϯτΤϯυ։ൃࣄ৘ ࢁా
   ௚थ
   גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    - Web application development environment -
2. ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ
3. ࣗݾ঺հ ࢁా
   ௚थ
   !XBLBNTIB
   גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
   ϑϩϯτΤϯυΤϯδχΞ ೥݄
   ೖࣾ
   
   
   ࣾ໨
   
   ϦΫϧʔτʹདྷΔલ͸
   6*
   σβΠφʔ
   
   ϑϩϯτΤϯυΤϯδχΞͱͯ͠
   ۀ຿ܥΞϓϦέʔγϣϯͷ
   6*
   ઃܭ͔Β։ൃ·ͰΛ΍͍ͬͯͨ
4. https://ryorisapuri.jp ྉཧαϓϦ
6. http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
8.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ
    41"
   ։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ
    ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ
    େ·͔ͳΞϓϦέʔγϣϯߏ੒
    αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ "HFOEB
9.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ
    41"
   ։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ
    ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ
    େ·͔ͳΞϓϦέʔγϣϯߏ੒
    αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ 
10. ৽نαʔϏεΛ
    41"
    Ͱ࡞͍ͬͯ·͢ Single Page Application
12. 8FC
    4FSWFS
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 "
    UZQFE
    TVQFSTFU
    PG
    +BWB4DSJQU
    UIBU
    DPNQJMFT
    UP
    QMBJO
    +BWB4DSJQU
18. 5ZQF4DSJQU w .JDSPTPGU
    ͕։ൃͨ͠
    "MU+4
    
    τϥϯεύΠϥ
    
    w +BWB4DSJQU
    ͷεʔύʔηοτ
    
    ׬શ্Ґޓ׵
    
    w ੩తܕ෇͚ݴޠ
    w ܕਪ࿦͋Γ
    w ѹ౗తଟػೳ
    w $MBTT
    *OUFSGBDF
    "SSPX
    GVOD
    (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 %BUB
    CJOEJOH
    3PVUJOH
    $VTUPN
    EJSFDUJWF
    %*
    1SPNJTF
    BOE
    NPSFʜ
    w ಛʹڧྗͳϧʔςΟϯάػೳ͸
    41"
    ʹ͏͚ͬͯͭ
    w "OHVMBS6*3PVUFS
    Ϟδϡʔϧͱ૊Έ߹ΘͤΕ͹࠷ڧ
24. $VTUPN
    EJSFDUJWF ಠࣗͷػೳΛ࣮૷ͨ͠λά΍ϓϩύςΟΛఆٛͰ͖Δ
25. "OHVMBS+4
    º
    5ZQF4DSJQU 5ZQF4DSJQU
    ͱͷ૬ੑ͕ൈ܈ ίϯτϩʔϥɺαʔϏεɺσΟϨΫςΟϒͳͲ
    ػೳผʹΫϥεԽ͠΍͍͢ ͨͩ͠ɺ஌ݟ͸গͳΊ
    
    άάͬͯ΋࣮ફతͳ৘ใ͸ຆͲग़ͯ͜ͳ͍
    
26. ࠓ೥࠷΋०ͳ
    +4
    ϑϨʔϜϫʔΫ
    
    
    "OHVMBS+4
    ͱൺֱͯ͠஌ݟ͕গͳ͍
    
    ೥ॳ಄͸·ͩ৘ใ͕গͳ͔ͬͨ
    ͦͷ΄͔ީิʹͳͬͨ
    +4
    ϑϨʔϜϫʔΫ +49
    ͷจ๏͕ಠಛ͗ͯ͢
    ೃછΊΔࣗ৴͕࣋ͯͳ͔ͬͨ ҙࣝߴ͍ܥͷਓ͕ͨͪ΍ͨΒਪ͍ͯ͠Δ͕
    Ͳͷൃݴ΋එଣ͍͘͞ҹ৅ 3FBDU
27. "OHVMBS+4
    ͕ྲྀߦΔલ͸օ͜Εʹເதͩͬͨ
    ΘΓͱૉ௚ͳ
    .7$
    1
    ͕ॻ͚Δͷ͸޷ҹ৅ .BSJPOFUUF
    ͱ૊Έ߹ΘͤΕ͹ɺࠞಱͱ͕ͪ͠ͳ #BDLCPOFͷίʔυʹ΋͋Δఔ౓౷੍͕ͱΕΔ ͜Ε͔Β࡞ΔΞϓϦͷن໛Λߟ͑Δͱ
    ΍΍ྗෆ଍Λײ͡Δ ͦͷ΄͔ީิʹͳͬͨ
    +4
    ϑϨʔϜϫʔΫ
28. $SFBUF+4 "
    TVJUF
    PG
    +BWB4DSJQU
    MJCSBSJFT
    BOE
    UPPMT
    EFTJHOFE
    GPS
    XPSLJOH
    XJUI
    )5.-
29. w $BOWBT
    ΍
    "VEJP
    ౳Λ͍͍ײ͡ʹ͓ੈ࿩ͯ͘͠ΕΔ
    w ֤छ
    "1*
    ͕
    'MBTI
    
    "4
    
    ͷͦΕͱࠅࣅ͍ͯ͠Δ
    w 5ZQF4DSJQU
    ͱͷ૬ੑ͕ൈ܈
    w ϦονίϯςϯπΛදݱ͢ΔՕॴͰ࢖༻
    w $BOWBT
    Λ࢖ͬͨΞχϝʔγϣϯ
    w ΦʔσΟΦϑΝΠϧͷ࠶ੜ
    w ϝσΟΞϑΝΠϧͷඇಉظಡΈࠐΈ $SFBUF+4
30.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ
     41"
    ։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ
     ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ
     େ·͔ͳΞϓϦέʔγϣϯߏ੒
     αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ 
31. ྲྀߦ͸ద౓ʹऔΓೖΕΔ
    ෼͔Γ΍͢͞
    
    આ໌͠΍͢͞Λॏࢹ େࣄͳ͜ͱͳͷͰೋճݴ͍·ͨ͠
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
    ظؒʹෆ͕҆͋ΔͷͳΒ
    ܿ͘੾ΓࣺͯΑ͏
40. 5ZQF4DSJQU
    ͸ίϯύΠϥࣗମ͕
    *%&
    ༻
    "1*
    Λ
    ͍࣋ͬͯΔͨΊɺΤσΟλʹίʔυิ׬ͱ͍ͬͨػ ೳΛ࣋ͨͤ΍͍͢ ίʔυิ׬
    
    5ZQF4DSJQU
    ͷ৔߹ 7JTVBM4UVEJP
    ͱಉ౳ͷิ׬ػೳ͕ظ଴Ͱ͖Δ ๻͸
    *OUFMMJ+
    ͱ
    4VCMJNF5FYU
    Λ࢖͍ͬͯ·͢
41.  ͍·औΓ૊ΜͰ͍Δ࢓ࣄ
     41"
    ։ൃ͢Δʹ͋ͨΓ࠾༻ͨ͠ςΫϊϩδʔ
     ͜ΕΒΛ౿·͑ͨզ͕ՈͷϑϩϯτΤϯυ։ൃ؀ڥ
     େ·͔ͳΞϓϦέʔγϣϯߏ੒
     αʔόʔଆͱ͏·͘࿈ܞ͢ΔͨΊʹඞཁͳ͜ͱ 
42. 
    
    "OHVMBS6*
    and
    5ZQF4DSJQU
    
    "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
    
    " "OZ
    2VFTUJPOT
    
49. 5IBOL
    ZPV