あらゆる人のためのフロントエンド #frontkansai

Slide 1

Slide 1 text

͋ΒΏΔਓͷͨΊͷ ϑϩϯτΤϯυ FRONTEND CONFERENCE 2017 TAKUMA HANATANI

Slide 2

Slide 2 text

Ֆ୩୓ຏ • @potato4d • 18 years old • Developer at pixiv inc. • JavaScript, Production development * ԍ

Slide 3

Slide 3 text

jQuery → Vue.js SCOUTER at SCOUTER inc.( https://service.scouter.co.jp )

Slide 4

Slide 4 text

Coffee + Backbone → Vue.js BOOTH at pixiv inc.( https://booth.pm )

Slide 5

Slide 5 text

Vue.js SPA GNEX ltd. ( https://globalnet-ex.com )

Slide 6

Slide 6 text

JavaScript͸ࠓ΋ͳ͓ɺ ʮ୭ʹͰ΋қ͍͠ݴޠʯͰ͋Δ͔ʁ Q.

Slide 7

Slide 7 text

Slide 8

Slide 8 text

ʮϑϩϯτΤϯυʯ͸ ݱ୅ʹ͓͍ͯ͸ઐ໳৬ͱͳͬͨ

Slide 9

Slide 9 text

͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨ npm trendsʹͯ؍ଌՄೳͳϞμϯ؀ڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )

Slide 10

Slide 10 text

αʔόʔαΠυͷʮ͓·͚ʯͰ͸ͳ͘ͳͬͨ Browser Server Browser Server

Slide 11

Slide 11 text

ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨ ը૾ɿ10෼Ͱ࣮૷͢ΔFlux http://azu.github.io/slide/react-meetup/ﬂux.html

Slide 12

Slide 12 text

ʮա౉ظʯΛӽ͑ΔͨΊͷπʔϧ͸૿͑ଓ͚Δ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-

Slide 13

Slide 13 text

❝ ❞ ʮͳ͊ɻ΋͏͜ΕͰऴΘΓͩͱࢥ͏Μͩɻ࣮ࡍͷ ͱ͜Ζ΋͏े෼ͩɻweb΋े෼ͩ͠ɺJavaScript ΋·ͬͨ͘΋ͬͯे෼ɺ΋͏͍͍ɻʯ ʲ຋༁ʳ 2016೥ʹJavaScriptΛֶΜͰͲ͏ײ͔ͨ͡ http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404

Slide 14

Slide 14 text

ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years

Slide 15

Slide 15 text

ݱߦIEͷαϙʔτ͸࢒Γ8೥ https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years ౰෼ʮա౉ظʯ͕ऴΘΔ͜ͱ͸ͳ͍

Slide 16

Slide 16 text

$ npm install -D babel-preset-es2015

Slide 17

Slide 17 text

$ npm install -D babel-preset-es2016

Slide 18

Slide 18 text

$ npm install -D babel-preset-es2017

Slide 19

Slide 19 text

$ npm install -D babel-preset-es20..

Slide 20

Slide 20 text

$ npm install -D babel-preset-es2023

Slide 21

Slide 21 text

$ npm install -D babel-preset-es2024

Slide 22

Slide 22 text

$ npm install -D babel-preset-es2025

Slide 23

Slide 23 text

2025೥ʹͳͬͨΒ શ͕ͯٹΘΕΔͷ͔ʁ Q.

Slide 24

Slide 24 text

Slide 25

Slide 25 text

ະདྷͷ࢓༷Λར༻Ͱ͖Δ؀ڥ͸ݶΒΕΔ https://www.infoq.com/jp/news/2017/03/node-76-async-await async/await 2017/02 2017/03 2016/12

Slide 26

Slide 26 text

Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱ͸ͳ͍ ESM/CommonJSͷղܾ ES2015+ͷղܾ ର৅͕޿͗͢ΔͨΊ ϒϥ΢βͰͷαϙʔτ͸ෆՄ ϑϨʔϜϫʔΫจ๏ͷղܾ bundle.js ϒϥ΢β࣮૷ͷน

Slide 27

Slide 27 text

͔͜͜ΒΘ͔Δ͜ͱ

Slide 28

Slide 28 text

ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͸௕͘ଓ͘ + + any

Slide 29

Slide 29 text

͋ΒΏΔਓ͕͜ͷઌੜ͖࢒ΔͨΊʹ

Slide 30

Slide 30 text

3ͭͷબ୒ࢶ

Slide 31

Slide 31 text

ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબ୒ࢶ ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ 1 2 3 ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢

Slide 32

Slide 32 text

ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ଍͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ •ࠓޙ΋ͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ •ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ଍͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔ΁ͷૌٻϋʔυϧΛ Լ͛Δ •࣌ʹ௧ΈΛ൐͏΋ͷͷɺઐۀͰ͋ΔͳΒ͹ɺࠓޙͷੜଘͷͨΊ ͷࢪࡦͱͯ͠͸΋ͬͱ΋༗ޮ 1

Slide 33

Slide 33 text

ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ࢖͍͍ٕͨज़Λ෍ڭ͢Δ •ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ৔߹ʹ͸ඞਢͱͳ Δࢪࡦ •ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈ քͰ͋ΔͨΊɺશͯΛ೺Ѳ্ͨ͠Ͱɺࣗ෼͕࠷΋༏Ε͍ͯΔͱ ࢥ͏πʔϧʹ͍ͭͯͷ৘ใΛڞ༗͍ͯ͘͠ 2

Slide 34

Slide 34 text

Stableͳٕज़΁ҠߦΛਐΊɺ҆ఆͨ͠؀ڥͰڠۀ͠΍͍͢ಓΛ୳͢ •ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠৔߹ͷ҆ఆࢪࡦ •શମͱͯ͠͸஗ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗ෼ʹ ؔ܎ͷ͋ΔϨΠϠͷΈΛ΢Υον͢Δͱ͍͏ख๏͸͋Δ •جຊతʹ৽ͨͳߏ੒Λఏ্ࣔͨ͠Ͱɺϝδϟʔʹͳͬͨޙʹࣗ ෼ͨͪҎ֎͕࢖͍΍͍͢੔උΛߦ͏܏޲ʹ͋Δ͜ͱΛར༻͢Δ •css-loader/style-loaderͳͲ͕ݦஶʹͦͷ܏޲Λද͍ͯ͠Δ •଴ͯ͹҆ఆ͸खʹೖΔ 3

Slide 35

Slide 35 text

React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞” // greeting.js const styles = { greeting: { color: #f00 } }; export default class Greeting extends Component { render() { return (

Hello

); } };

Slide 36

Slide 36 text

css-loader͕खʹೖΕͨ҆ఆ // greeting.css :local{ .greeting{ color:#f00; } } // greeting.js import styles from './greeting.css'; export default class Greeting extends Component { render() { return (