忙しい人のためのフロントエンド開発環境ラインナップ

社内勉強会用の資料
2016年のフロントエンドの開発環境をまとめています。

説明用の環境自体はGithubに公開しています。
https://github.com/inhouseuse/frontend_dev

Transcript

1. ๩͍͠ਓͷͨΊͷ ϑϩϯτΤϯυ։ൃ؀ڥ ϥΠϯφοϓ(2016)
2. ࠓ·ͰHTML5/CSS3/jQuery/ Ajaxͱ͔ɺ৭ʑ࿩Λฉ͍͖ͯ ͚ͨͲ
3. ͦΖͦΖࣗ෼Ͱ࡞ΔͨΊͷ ؀ڥߏஙΛ͍ͨ͠…͸ͣ
4. ͦΖͦΖࣗ෼Ͱ࡞ΔͨΊͷ ؀ڥߏஙΛ͍ͨ͠…͸ͣ
5. λʔήοτʹ͢Δ։ൃൣғ͸ ϑϩϯτΤϯυʹ͔͗Δ
6. λʔήοτʹ͢Δ։ൃൣғ͸ ϑϩϯτΤϯυʹ͔͗Δ αʔόʔαΠυ͸ର৅֎
7. ࠷௿ݶඞཁͳ΋ͷ ϒϥ΢βͱΤσΟλ Ҏ্ɻ
8. ࠷௿ݶඞཁͳ΋ͷ ϒϥ΢βͱΤσΟλ Ҏ্ɻ
9. 2016೥ݱࡏɺSakuraΤσΟ λͰखଧͪͰ͠·͔͢ʁ
10. NO
11. ϞμϯςΩετΤσΟλ(ແྉ) 
 ༏लͳೖྗิ׬ͱ๛෋ͳϓϥάΠϯͰίʔσΟϯάεϐʔυ͕̑̌ഒ(※ݸਓͷײ૝) ‣Visual Studio Code(https://code.visualstudio.com/)
 Microsoftࣾ੡ Emmet͕ඪ४࢓༷ ೔ຊޠ൛͋Γ ‣Atom (https://atom.io/)
 Githubࣾ੡ Githubͱͷ࿈ܞ͕༰қ ϓϥάΠϯଟΊ ‣Brackets (http://brackets.io/)
 Adobeࣾ੡ ϥΠϒϓϨϏϡʔ ػೳ͕ඪ४࢓༷ ೔ຊޠ൛͋Γ ‣Vim (http://vim-jp.org/) 
 ݰਓ޲͚ɻλʔϛφϧ্Ͱ࣮ߦ͞ΕΔɻϚ΢εݏ͍ͳਓ͸ͥͻ

12. ඞཁ࠷খݶͷ؀ڥͰ͍͍ͷ͔ʁ
13. NO
14. ։ൃͷ඼࣭޲্ & ޮ཰Խ
15. ඼࣭޲্ & ޮ཰Խ 1.ίʔσΟϯάΛ΋ͬͱָʹ͍ͨ͠ 2.ίʔσΟϯάن໿Λ९कͨ͠ΩϨΠͳιʔεΛ࡞Γ͍ͨ 3.Ajaxͷςετ؀ڥΛ࡞Γ͍ͨ 4.JavascriptͰ҆શʹେن໛։ൃΛ͍ͨ͠ 5.JSϑϨʔϜϫʔΫΛಋೖ͠ɺอकੑͷߴ͍։ൃΛߦ͍͍ͨ 6.ΧΦεʹͳΓ͕ͪͳCSSͷ؅ཧΛͳΜͱ͔͍ͨ͠ 7.CSSϑϨʔϜϫʔΫΛಋೖ͠ɺ౷ҰͷσβΠϯΛར༻͍ͨ͠ 8.ϑΝΠϧͷόʔδϣϯ؅ཧΛָʹ͍ͨ͠ 9.ޮ཰తͳςετ؀ڥ͕ཉ͍͠
16. ͝ୗ͸͍͍͔Β͙͢ʹ࢖͍͍ͨ
17. Githubʹ؀ڥΛ४උͯ͠·͢ https://github.com/inhouseuse/frontend_dev
18. ίʔσΟϯάΛ΋ͬͱָʹ͍ͨ͠
19. ‣Emmet(http://emmet.io/)
 ‣Pathิ׬
 ‣εχϖοτ
 ‣Pug(ςϯϓϨʔτΤϯδϯ)
 →HTML/CSSγϣʔτΧοτ →ϑΝΠϧύεͷࣗಈิ׬ →JavascriptͳͲͷγϣʔτΧοτ →αϯϓϧίʔσΟϯάͰ΋HTMLςϯϓϨʔτΛ࢖͏
20. ࣮ԋ
21. ίʔσΟϯάن໿Λ९कͨ͠ ΩϨΠͳιʔεΛ࡞Γ͍ͨ
22. ‣ίʔυϑΥʔϚολʔ ‣Linter
 ‣CSSCombo
 ‣CSS໋໊نଇ (BEM/SMACSS…)
 →੩తߏจνΣοΫπʔϧ HTML/CSS/Javascript →CSSͷϓϩύςΟͷॱ൪Λιʔτͯ͘͠ΕΔ →πʔϧͰ͸ͳ͘ઃܭࢥ૝
23. ࣮ԋ Linter CSSCombo
24. Ajaxͷςετ؀ڥΛ࡞Γ͍ͨ
25. ‣Node.js & NPM or Yarn
 ‣Express
 →αʔόʔαΠυͰJSΛ࢖͏ͨΊͷ࣮ߦ؀ڥ →αʔόʔαΠυJSϑϨʔϜϫʔΫ
26. ‣Node.js & NPM or Yarn
 ‣Express
 →αʔόʔαΠυͰJSΛ࢖͏ͨΊͷ࣮ߦ؀ڥ →αʔόʔαΠυJSϑϨʔϜϫʔΫ Express͸ͨͩͷαʔόʔଆJSϑϨʔϜϫʔΫͳͷͰ
 StrutsͰ΋SpringͰ΋RailsͰ΋cakesPHPͰ΋ ࣗ෼͕޷͖ͳͷͰOK
27. ׂѪ
28. JavascriptͰ҆શʹ େن໛։ൃΛ͍ͨ͠
29. બ୒ࢶ͸େ͖̎ͭ͘ • JavascriptͷECMAScript2015Ҏ߱Λར༻͢Δ • altJSΛར༻͢Δ
30. ECMAScript2015Λ࢖͍͍ͨ
31. ‣Bable
 ‣Browserify
 ‣Gulp(λεΫϥϯφʔ) → ES6͔ΒES5ͷιʔεΛ͸͖ग़͢τϥϯεύΠϥ →Web։ൃʹඞཁͳఆྫॲཧΛࣗಈԽ͢Δ࢓ֻ͚ → require()Λ࢖͏ͨΊͷຐ๏ͷ伺
32. ࣮ԋ Babel Browserfiy Gulp
33. altJSΛར༻͍ͨ͠
34. ‣Typescript
 
 ‣CoffeeScript → Javascriptʹ੩తܕ෇͚ͳͲͷػೳΛ෇Ճͨ͠ݴޠ ɹίϯύΠϧͯ͠JavascriptΛੜ੒͢ΔɻMicrosoft੡ →վߦͱΠϯσϯτͰϒϩοΫΛද͢
35. ࣮ԋ Typescript
36. JSϑϨʔϜϫʔΫΛಋೖ͠ɺ
 อकੑͷߴ͍։ൃΛߦ͍͍ͨ
37. ‣Angular.js
 ‣React.js
 ‣VUE.js
 ‣Underscore.js →Google੡ɻΫϥΠΞϯτͰMVCΛߏஙͰ͖Δ →Facebook੡ɻUIʹಛԽͨ͠JavascriptϥΠϒϥϦ →γϯϓϧ͔ͭίϯύΫτ
38. ࣮ԋ VUE.js
39. ΧΦεʹͳΓ͕ͪͳCSSͷ ؅ཧΛͳΜͱ͔͍ͨ͠
40. ‣Sass(SCSS) → ม਺ɺωετɺϛοΫεΠϯͳͲCSSʹϓϩάϥϛ ϯάͷ֓೦Λಋೖ͢ΔɻίϯύΠϧͯ͠CSSΛੜ੒
41. ࣮ԋ
42. CSSϑϨʔϜϫʔΫΛಋೖ͠ɺ ౷ҰͷσβΠϯΛར༻͍ͨ͠
43. ‣Bootstrap →Twitterࣾ੡ ɹੈքͰ΋ͬͱ΋ར༻͞Ε͍ͯΔCSSϑϨʔϜϫʔΫ
44. ࣮ԋ
45. ϑΝΠϧͷόʔδϣϯ؅ཧ Λָʹ͍ͨ͠
46. ‣Git →LinuxͰ࠾༻͞Εͨ෼ࢄܕόʔδϣϯ؅ཧγεςϜ ɹGitͷϗεςΟϯάαʔϏε͕Github
47. ࣮ԋ
48. ޮ཰తͳςετ؀ڥ͕ཉ͍͠
49. ‣Browser-sync → ιʔείʔυΛߋ৽͢ΔͱࣗಈͰϒϥ΢βΛϦϑϨογϡɻ ɹ ·ͨෳ਺ͷ୺຤/ϒϥ΢βͰಉ͡ૢ࡞͕Մೳ
50. ‣Browser-sync → ιʔείʔυΛߋ৽͢ΔͱࣗಈͰϒϥ΢βΛϦϑϨογϡɻ ɹ ·ͨෳ਺ͷ୺຤/ϒϥ΢βͰಉ͡ૢ࡞͕Մೳ σόοά΍୯ମςετɺը໘ςετͷ؀ڥͷઆ໌͸ޙ೔ karma/jasmin/mocha …
51. ࣮ԋ
52. The End ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ