Web Development with Yeoman

学内勉強会用に作った資料

Transcript

1. @isoden_ Lewis Martin / scaffolding / http://www.flickr.com/photos/ldm/14296081/ YeomanͰߏங͢Δ
   Web։ൃ؀ڥ
   
2. //github.com/isoden // isoden.github.io ᛹ా༏
   
3. ࠓճ͓࿩͢Δ͜ͱ
   
   
   •  ࠷ۙͷ8FC੍࡞
   •  ໘౗ͳ࡞ۀͷࣗಈԽ
   •  λʔϛφϧૢ࡞
   
4. ࠷ۙͷ8FC੍࡞
   
5. ࠷ۙͷ8FC੍࡞
   
   
   •  $44ॻ͔ͳ͍
   
   
   
   •  +BWB4DSJQUॻ͔ͳ͍
   
   
   
   •  ύϑΥʔϚϯεΛॏཁࢹ
   •  ը૾ͷ࠷దԽ ܰྔԽ
   •  ϑΝΠϧͷNJOJGZ
   BOE
   NPSF
   
8. ϝλݴޠ
   
   
   •  +BEF
   )BNM
   • 
   
   IUNMϑΝΠϧੜ੒
   •  -FTT
   4BTT
   4UZMVT
   $44
   1SFQSPDFTTPS
   • 
   
   DTTϑΝΠϧੜ੒
   •  $P⒎FF4DSJQU
   5ZQF4DSJQU
   )BYF
   • 
   
   KTϑΝΠϧੜ੒
   ςϯϓϨʔτΤϯδϯɾϝλݴޠ͔ΒϑΝΠϧΛੜ੒
   ίϯύΠϧ࡞ۀ͕ඞਢ
   
9. Lamya Rashid / back to work! / http://www.flickr.com/photos/karroozi/1609253/ ࠓճ঺հ͢Δͷ͸ɺ
   ͦΜͳ໘౗ͳ࡞ۀΛࣗಈԽ͢Δπʔϧ
   
   ͨͩɺָΛ͢ΔͨΊʹ͸͋Δఔ౓ͷؤுΓ͕ඞཁ
   
10. Yeoman http://yeoman.io/
11. :FPNBOͱ͸ʁ
    
    
    •  .0%&3/
    803,'-084
    '03
    .0%&3/
    8&#"114
    •  /PEFKT੡ͷ؀ڥߏஙπʔϧ
    •  ͖ͬ͞ͷ໘౗ͳ࡞ۀΛࣗಈԽͯ͘͠ΕΔ
    •  ZP
    CPXFS
    (SVOUKTͷͭͷπʔϧ܈Ͱܗ੒͞ΕΔ
    
    
12. Yo http://yeoman.io/
13. :P
    •  4DB⒎PMEJOHͷػೳΛఏڙ
    
    •  K2VFSZϓϥάΠϯ༻ͻͳܗ
    •  8PSE1SFTT༻ͷͻͳܗ
    •  8FCαΠτ੍࡞༻ͷͻͳܗ
    ͳͲͷ؀ڥ͕͙͢࡞ΕΔ
    
14. Bower http://bower.io/
15. CPXFS
    •  5XJUUFSࣾ੡
    •  ύοέʔδϚωʔδϟʔ
    •  ϥΠϒϥϦͷόʔδϣϯ؅ ཧ
    
16. Grunt http://gruntjs.com/
17. (SVOU
    •  CPDPVQࣾ੡
    •  +4Λ࢖ͬͨλεΫϥϯφʔ
    •  ϑΝΠϧͷNJOJGZ
    •  ը૾ͷ࠷దԽ
    •  ߏจνΣοΫ
    •  ֤छϝλݴޠͷίϯύΠϧ
    •  ͱʹ͔͍͕͍ͭ͘͜͢͝ʂ
    
18. ඞཁͳ΋ͷ
    
    
    •  /PEFKT (http://nodejs.org) •  (JU
    
    (http://git-scm.com/)
    ݸʑͰඞཁͰ͋Ε͹
    •  3VCZ
    4BTT
    
    $PNQBTT
    ͳͲΛ࢖͏৔߹ඞཁ
    
    
19. > ૢ࡞͸ࠇ͍ը໘Ͱߦ͍·͢ɻ@
    
20. ·ͣ͸λʔϛφϧΛىಈ
    $ sudo npm install -g yo grunt-cli bower // 3छͷπʔϧ܈ΛάϩʔόϧྖҬʹΠϯετʔϧ
    $ npm search yeoman-generator // yeomanͷͻͳܗͱͳΔgeneratorΛ୳͢ $ sudo npm install -g generator-webapp // generatorΛάϩʔόϧྖҬʹΠϯετʔϧ
    
22. ·ͣ͸λʔϛφϧΛىಈ
    
    $ mkdir project_folder && cd project_folder // ϓϩδΣΫτϑΥϧμʔΛ࡞੒ͦ͜͠·ͰҠಈ
    $ yo webapp // ઌ΄ͲΠϯετʔϧͨ͠website༻ͷͻͳܗΛϏϧυ
    
23. %&.0
    
24. ·ͱΊ
    
    
    •  :FPNBOͰ࡞ۀޮ཰͕֨ஈʹ্͕Δ
    •  ࠇ͍ը໘ͷ৮Γ࢝Ίʹ΋࢖͑Δ
    
25. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    
    
    
    
    ग़య
    
    -  http://yeoman.io -  http://bower.io -  http://gruntjs.com -  http://www.slideshare.net/jsugiyama/yeoman-19583549 -  http://yosuke-furukawa.hatenablog.com/entry/2013/07/04/085814
    
    Robert Barney / Thank You Note Letterpress / http://www.flickr.com/photos/r_b/2452307906/