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

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

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*
    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