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

Slide 1

Slide 1 text

๩͍͠ਓͷͨΊͷ ϑϩϯτΤϯυ։ൃ؀ڥ ϥΠϯφοϓ(2016)

Slide 2

Slide 2 text

ࠓ·ͰHTML5/CSS3/jQuery/ Ajaxͱ͔ɺ৭ʑ࿩Λฉ͍͖ͯ ͚ͨͲ

Slide 3

Slide 3 text

ͦΖͦΖࣗ෼Ͱ࡞ΔͨΊͷ ؀ڥߏஙΛ͍ͨ͠…͸ͣ

Slide 4

Slide 4 text

ͦΖͦΖࣗ෼Ͱ࡞ΔͨΊͷ ؀ڥߏஙΛ͍ͨ͠…͸ͣ

Slide 5

Slide 5 text

λʔήοτʹ͢Δ։ൃൣғ͸ ϑϩϯτΤϯυʹ͔͗Δ

Slide 6

Slide 6 text

λʔήοτʹ͢Δ։ൃൣғ͸ ϑϩϯτΤϯυʹ͔͗Δ αʔόʔαΠυ͸ର৅֎

Slide 7

Slide 7 text

࠷௿ݶඞཁͳ΋ͷ ϒϥ΢βͱΤσΟλ Ҏ্ɻ

Slide 8

Slide 8 text

࠷௿ݶඞཁͳ΋ͷ ϒϥ΢βͱΤσΟλ Ҏ্ɻ

Slide 9

Slide 9 text

2016೥ݱࡏɺSakuraΤσΟ λͰखଧͪͰ͠·͔͢ʁ

Slide 10

Slide 10 text

Slide 11

Slide 11 text

ϞμϯςΩετΤσΟλ(ແྉ)   ༏लͳೖྗิ׬ͱ๛෋ͳϓϥάΠϯͰίʔσΟϯάεϐʔυ͕̑̌ഒ(※ݸਓͷײ૝) ‣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/)   ݰਓ޲͚ɻλʔϛφϧ্Ͱ࣮ߦ͞ΕΔɻϚ΢εݏ͍ͳਓ͸ͥͻ 

Slide 12

Slide 12 text

ඞཁ࠷খݶͷ؀ڥͰ͍͍ͷ͔ʁ

Slide 13

Slide 13 text

Slide 14

Slide 14 text

։ൃͷ඼࣭޲্ & ޮ཰Խ

Slide 15

Slide 15 text

඼࣭޲্ & ޮ཰Խ 1.ίʔσΟϯάΛ΋ͬͱָʹ͍ͨ͠ 2.ίʔσΟϯάن໿Λ९कͨ͠ΩϨΠͳιʔεΛ࡞Γ͍ͨ 3.Ajaxͷςετ؀ڥΛ࡞Γ͍ͨ 4.JavascriptͰ҆શʹେن໛։ൃΛ͍ͨ͠ 5.JSϑϨʔϜϫʔΫΛಋೖ͠ɺอकੑͷߴ͍։ൃΛߦ͍͍ͨ 6.ΧΦεʹͳΓ͕ͪͳCSSͷ؅ཧΛͳΜͱ͔͍ͨ͠ 7.CSSϑϨʔϜϫʔΫΛಋೖ͠ɺ౷ҰͷσβΠϯΛར༻͍ͨ͠ 8.ϑΝΠϧͷόʔδϣϯ؅ཧΛָʹ͍ͨ͠ 9.ޮ཰తͳςετ؀ڥ͕ཉ͍͠

Slide 16

Slide 16 text

͝ୗ͸͍͍͔Β͙͢ʹ࢖͍͍ͨ

Slide 17

Slide 17 text

Githubʹ؀ڥΛ४උͯ͠·͢ https://github.com/inhouseuse/frontend_dev

Slide 18

Slide 18 text

ίʔσΟϯάΛ΋ͬͱָʹ͍ͨ͠

Slide 19

Slide 19 text

‣Emmet(http://emmet.io/)  ‣Pathิ׬  ‣εχϖοτ  ‣Pug(ςϯϓϨʔτΤϯδϯ)  →HTML/CSSγϣʔτΧοτ →ϑΝΠϧύεͷࣗಈิ׬ →JavascriptͳͲͷγϣʔτΧοτ →αϯϓϧίʔσΟϯάͰ΋HTMLςϯϓϨʔτΛ࢖͏

Slide 20

Slide 20 text

࣮ԋ

Slide 21

Slide 21 text

ίʔσΟϯάن໿Λ९कͨ͠ ΩϨΠͳιʔεΛ࡞Γ͍ͨ

Slide 22

Slide 22 text

‣ίʔυϑΥʔϚολʔ ‣Linter  ‣CSSCombo  ‣CSS໋໊نଇ (BEM/SMACSS…)  →੩తߏจνΣοΫπʔϧ HTML/CSS/Javascript →CSSͷϓϩύςΟͷॱ൪Λιʔτͯ͘͠ΕΔ →πʔϧͰ͸ͳ͘ઃܭࢥ૝

Slide 23

Slide 23 text

࣮ԋ Linter CSSCombo

Slide 24

Slide 24 text

Ajaxͷςετ؀ڥΛ࡞Γ͍ͨ

Slide 25

Slide 25 text

‣Node.js & NPM or Yarn  ‣Express  →αʔόʔαΠυͰJSΛ࢖͏ͨΊͷ࣮ߦ؀ڥ →αʔόʔαΠυJSϑϨʔϜϫʔΫ

Slide 26

Slide 26 text

‣Node.js & NPM or Yarn  ‣Express  →αʔόʔαΠυͰJSΛ࢖͏ͨΊͷ࣮ߦ؀ڥ →αʔόʔαΠυJSϑϨʔϜϫʔΫ Express͸ͨͩͷαʔόʔଆJSϑϨʔϜϫʔΫͳͷͰ  StrutsͰ΋SpringͰ΋RailsͰ΋cakesPHPͰ΋ ࣗ෼͕޷͖ͳͷͰOK

Slide 27

Slide 27 text

ׂѪ

Slide 28

Slide 28 text

JavascriptͰ҆શʹ େن໛։ൃΛ͍ͨ͠

Slide 29

Slide 29 text

બ୒ࢶ͸େ͖̎ͭ͘ • JavascriptͷECMAScript2015Ҏ߱Λར༻͢Δ • altJSΛར༻͢Δ

Slide 30

Slide 30 text

ECMAScript2015Λ࢖͍͍ͨ

Slide 31

Slide 31 text

‣Bable  ‣Browserify  ‣Gulp(λεΫϥϯφʔ) → ES6͔ΒES5ͷιʔεΛ͸͖ग़͢τϥϯεύΠϥ →Web։ൃʹඞཁͳఆྫॲཧΛࣗಈԽ͢Δ࢓ֻ͚ → require()Λ࢖͏ͨΊͷຐ๏ͷ伺

Slide 32

Slide 32 text

࣮ԋ Babel Browserﬁy Gulp

Slide 33

Slide 33 text

altJSΛར༻͍ͨ͠

Slide 34

Slide 34 text

‣Typescript    ‣CoffeeScript → Javascriptʹ੩తܕ෇͚ͳͲͷػೳΛ෇Ճͨ͠ݴޠ ɹίϯύΠϧͯ͠JavascriptΛੜ੒͢ΔɻMicrosoft੡ →վߦͱΠϯσϯτͰϒϩοΫΛද͢

Slide 35

Slide 35 text

࣮ԋ Typescript

Slide 36

Slide 36 text

JSϑϨʔϜϫʔΫΛಋೖ͠ɺ  อकੑͷߴ͍։ൃΛߦ͍͍ͨ

Slide 37

Slide 37 text

‣Angular.js  ‣React.js  ‣VUE.js  ‣Underscore.js →Google੡ɻΫϥΠΞϯτͰMVCΛߏஙͰ͖Δ →Facebook੡ɻUIʹಛԽͨ͠JavascriptϥΠϒϥϦ →γϯϓϧ͔ͭίϯύΫτ

Slide 38

Slide 38 text

࣮ԋ VUE.js

Slide 39

Slide 39 text

ΧΦεʹͳΓ͕ͪͳCSSͷ ؅ཧΛͳΜͱ͔͍ͨ͠

Slide 40

Slide 40 text

‣Sass(SCSS) → ม਺ɺωετɺϛοΫεΠϯͳͲCSSʹϓϩάϥϛ ϯάͷ֓೦Λಋೖ͢ΔɻίϯύΠϧͯ͠CSSΛੜ੒

Slide 41

Slide 41 text

࣮ԋ

Slide 42

Slide 42 text

CSSϑϨʔϜϫʔΫΛಋೖ͠ɺ ౷ҰͷσβΠϯΛར༻͍ͨ͠

Slide 43

Slide 43 text

‣Bootstrap →Twitterࣾ੡ ɹੈքͰ΋ͬͱ΋ར༻͞Ε͍ͯΔCSSϑϨʔϜϫʔΫ

Slide 44

Slide 44 text

࣮ԋ

Slide 45

Slide 45 text

ϑΝΠϧͷόʔδϣϯ؅ཧ Λָʹ͍ͨ͠

Slide 46

Slide 46 text

‣Git →LinuxͰ࠾༻͞Εͨ෼ࢄܕόʔδϣϯ؅ཧγεςϜ ɹGitͷϗεςΟϯάαʔϏε͕Github

Slide 47

Slide 47 text

࣮ԋ

Slide 48

Slide 48 text

ޮ཰తͳςετ؀ڥ͕ཉ͍͠

Slide 49

Slide 49 text

‣Browser-sync → ιʔείʔυΛߋ৽͢ΔͱࣗಈͰϒϥ΢βΛϦϑϨογϡɻ ɹ ·ͨෳ਺ͷ୺຤/ϒϥ΢βͰಉ͡ૢ࡞͕Մೳ

Slide 50

Slide 50 text

‣Browser-sync → ιʔείʔυΛߋ৽͢ΔͱࣗಈͰϒϥ΢βΛϦϑϨογϡɻ ɹ ·ͨෳ਺ͷ୺຤/ϒϥ΢βͰಉ͡ૢ࡞͕Մೳ σόοά΍୯ମςετɺը໘ςετͷ؀ڥͷઆ໌͸ޙ೔ karma/jasmin/mocha …