今風のフロントエンド開発をする最短で最小限の装備

PHP関西2017 スライドです。

1. ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢ Δ࠷୹Ͱ࠷খݶͷ૷උ ೋਆ ெ඙ / Nobuhiko Futagami Twitter ϊϏ(nobii) @bobu_web Qiita http://qiita.com/bobu_web
2. ຖ೥ग़ΔϑϩϯτΤϯυࣄ৘ɻɻ • ͜ΕΒಡΜͰԿ͔໾ʹͨͬͨ͜ͱ͋Γ·͔͢ʁ • ʮ;ʔΜʯͰऴΘΓ·ͤΜʁ
3. ͚ͲPHPerͷΈͳ͞Μ΋ͳΜ͔ͩΜͩͰ ϑϩϯτͷ࣮૷͢Δ͜ͱ͋Γ·͢ΑͶʁ
4. ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢Δ ࠷୹Ͱ࠷খݶͷ૷උ
5. ͪΐͬͱࢲʹ͍ͭͯ͝঺հ • ͱʹ͔͘͸΍͘࡞ͬͯϒϥογϡΞοϓ͢Δ͜ͱ͕ଟ͍ • ͳͷͰɺόοΫΤϯυͱͷؔ܎͸APIͷΈ • ͓ޓ͍ͷ࡞ΓํͳͲ͸΄ͱΜͲׯব͠ͳ͍ • ͍͍ͩͨSlackͷ΍ΓऔΓͰਐΉ
6. ։ൃ࣌ͷϓϥΠΦϦςΟ • ਖ਼͘͠ॻ͘͜ͱΑΓ΋׬੒ͤ͞Δ͜ͱ͕େࣄ • ϑϩϯτʹ͓͚Δ༷ʑͳ৔໘ʹରԠग़དྷΔ͜ͱ • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ੒͕ Α͍
7. ։ൃ࣌ͷϓϥΠΦϦςΟ • ਖ਼͘͠ॻ͘͜ͱΑΓ΋׬੒ͤ͞Δ͜ͱ͕େࣄ • ϑϩϯτʹ͓͚Δ༷ʑͳ৔໘ʹରԠग़དྷΔ͜ͱ • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ੒͕ Α͍ ͜ΕͬͯPHPer͞Μ͕ϑϩϯτΛ࣮૷͢Δ৔໘Ͱ΋ಉ͜͡ ͱ͕͍͑ΔΜ͡Όͳ͍Ͱ͠ΐ͏͔ʁ
8. ඞཁͳͷ͸HTTP௨৴ͱ ϦΞΫςΟϒͳ࢓૊Έ
9. • node • yarn • Webpack • babel or TypeScript • axios • Vue.js ඞཁͳͷ͜Ε ύοέʔδ؅ཧ όϯυϧπʔϧ τϥϯεύΠϥɺaltJS HTTP௨৴ϥΠϒϥϦ JSϑϨʔϜϫʔΫ
10. yarn • FacebookɺGoogleͳͲʹΑͬͯ։ൃ͞Εͨύοέʔδ Ϛωʔδϟ • ಛ௃ʢnpmͱൺֱʣ • ֤ύοέʔδΛฒߦͯ͠Πϯετʔϧ͢ΔͷͰ଎͍ • όʔδϣϯΛϩοΫ͢Δ࢓૊Έ͕σϑΥϧτͰಈ͘ • npm͕ಈ͘ͱ͜ΖͳΒyarn΋ಈ͘ • Ͷ͕͜ΠϝʔδΩϟϥ brew install yarn Πϯετʔϧ͸͜Ε͚ͩ
11. Webpack • ࠓ·Ͱ͋ͬͨ։ൃ༻πʔϧͷશ෦ೖΓ • browserify => JSͷϞδϡʔϧ؅ཧ • gulp,grunt => Sass,LessίϯύΠϧɺlinterͱ͔ • browser-sync => webpack-devserver • ࣍ͷbabel΍TypeScriptͷίϯύΠϧʹ΋࢖ΘΕΔ • Angular,React,Vue.js౳ͷओཁϑϨʔϜϫʔΫʹ΋࠾༻͞Ε͍࣮࣭ͯͯͷσ ϑΝΫτʹͳ͍ͬͯΔ • version2͔ΒTree ShakingʹରԠ • laravel-mix? ग़དྷΔ͜ͱ͕ଟ͍෼ɺ࠷ॳ͸JSόϯυϧ͚ͩͷγϯϓϧͳͱ͜Ζ͔Β ࢝Ίͨ΄͏͕͍͍ͱࢥ͍·͢
12. var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } } Webpack JSϞδϡʔϧΛϑΝΠϧ୯ҐͰࢦఆɺΦϒδΣΫτʹ ͢Δ͜ͱͰෳ਺ࢦఆ͢Δ͜ͱ΋ग़དྷΔ ग़ྗϑΝΠϧͷࢦఆɺෳ਺ࢦఆͨ͠৔߹͸ '[name].bundle.js'ͱ͔͘ͱnameͷ෦෼͕key໊ʹͳΔ
13. babel, TypeScript • babel • JavaScriptͷ৽͍͠࢓༷ES6,ES7ͳͲΛoldϒϥ΢βʹରԠग़དྷΔΑ ͏ίʔυΛτϥϯεύΠϧ͢Δπʔϧ • Webpackʹ૊ΈࠐΉ • ES6·ͰͩͬͨΒIEͷͨΊʹಋೖ͢ΔΑ͏ͳ΋ͷ • TypeScript • Microsoft͕։ൃ͍ͯ͠ΔaltJS • ES6Ҏ্ͷ৽͍͠࢓༷ʹ΋ରԠ͍ͯ͠Δ • ੩తܕ෇͖ΛJSͰ͢Δ΍ͭ • ͜Ε΋Webpackʹ૊ΈࠐΊΔ
14. babelΛWebpackʹ௥Ճ͢Δ yarn add babel-loader babel-core babel-preset-env webpack --dev babelͷηοτΛ௥Ճ webpack.config.jsʹ௥ه var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [‘env'] } } } ] }
15. axios • HTTP௨৴Λ͢ΔͨΊͷϥΠϒϥϦ • Promise Based • axios.default, axios.createͰڞ௨߲໨Λઃఆग़དྷΔ • axios.all,axios.spreadͰฒྻͷϦΫΤετॲཧʹରԠ • adapterػೳΛ࢖͏ͱ؆қmocking͕ग़དྷΔ
16. axiosͱͦͷଞ αϯϓϧίʔυൺֱ $.ajax({ url: URL, dataType: 'json', cache: false, success: function(data) { console.log(data) }, error: function(xhr, status, err) { console.log(err) } }); request .get(URL) .end(function(err, res) { if (res.ok) { console.log(res.body); } else { console.log('error'); } }); axios .get(URL) .then(function(response) { console.log(response.data) }) .catch(function(err) { console.log(err) }) jQuery superagent axios
17. const result = axios .get(URL) .then(function(response) { return response.data }) .catch(function(err) { return false }) .then(function(result) { if(result) { ….. axiosͳΒ࿈ଓͯ͠APIΛୟ͘ͱ͖͸͜͏ॻ͚Δ const asyncResult = axios .get(URL) .then(function(response) { return response.data }) .catch(function(err) { return false }) asyncResult.then(function(result) { if(result) { …..
18. JSϑϨʔϜϫʔΫʹԿΛ࢖͏͔
19. Angular,React,Vue.js ߃ྫͷGoogle Trend
20. Vue.jsΛબͿཧ༝ • ࢥ૝͕ڧ͗͢Δ • JSXΑΓςϯϓϨʔτߏจ • Reduxͷهड़ྔ͓͓͗͢ɺ૒ํ޲όΠϯσΟϯά࢖͍͍ͨ vs React
21. Vue.jsΛબͿཧ༝ vs Angular Hello world͢Δ͚ͩͰϑΝΠϧ͓͓͗͢
22. Vue.jsΛબͿཧ༝ • ϑϨʔϜϫʔΫͷ࢖͑Δن໛ͷબ୒ࢶ͕޿͍ • cdnಡΈࠐΈͷΈ or vue-loader, vuex, vue-router
 ※vue-resouceͱ͍͏httpΫϥΠΞϯτ΋͋Γ·͕ͨ͠։ൃ͕ऴΘͬͯΔͷ ͰaxiosΛ࢖͍·͠ΐ͏ • ཉ͍͠ػೳ͕ద౓ʹ͋Δɺγϯϓϧʹॻ͚Δ • ϑΥʔϜͳͲͰ࢖͑Δ૒ํ޲όΠϯσΟϯά v-model • on-clickܗࣜͷΠϕϯτϋϯυϦϯά v-on: click • ReactͷΑ͏ʹίϯϙʔωϯτ෼ׂɺJSX΋ͱΓ͍ΕΑ͏ͱࢥ͑͹ग़དྷΔ • ୹ॴ • ςϯϓϨʔτ෦෼ͷΤϥʔ͕Θ͔Γʹ͍͘ • dataͰΦϒδΣΫτɺ഑ྻΛѻ͍
23. ͍࣮͟૷ • σʔλΛऔಘ͢Δ import axios from 'axios' export default { name: 'app', data () { return { url: 'https://api.github.com/search/repositories', events: [] } }, created() { axios.get(this.url, { params: { q: 'vuejs' } }) .then(response => this.events = response.data.item } }
24. ͍࣮͟૷ • σʔλΛՃ޻͢Δ name: 'app', data () { return { url: 'https://api.github.com/search/repositories', events: [] } }, created() { axios.get(this.url, { params: { q: 'vuejs' } }) .then(response => { this.events = response.data.items) } } } </script>
25. ͍࣮͟૷ • දࣔ͢Δ <template> <div id="app"> <h1>Vue.js boilerplate</h1> <a href="http://google----------.com">google</a> <div v-for="event in events"> <h2> <a :href=“event.html_url"> {{event.full_name}} </a> </h2> </div> </div> </template> <script>
26. σόοάɺΦʔτϦϩʔυ • σόοά • Chrome֦ுͷvue-devtools • ΦʔτϦϩʔυ • webpack-dev-server • λʔϛφϧͰ௚઀࣮ߦɺ΋͘͠͸package.jsonͷ scriptsͰهड़࣮ͯ͠ߦ͢Δ • ϓϩμΫγϣϯͱσϕϩοϓͷ੾Γସ͑ • ίϯύΠϧ࣮ߦ࣌ʹύϥϝʔλΛ౉ͯ͠෼ذ
 if ( process.env.NODE_ENV !== ‘production' ) { // ͜͜ʹ։ൃ༻ͷઃఆॲཧΛॻ͍ͨΓग़དྷΔ } scripts: { ”hot”: "cross-env NODE_ENV=development webpack-dev-server --inline --hot —config=webpack.config.js", }
27. ΋ͬͱ΋࠷খͰ࢖͏ͨΊͷVue.js • HTMLϑΝΠϧ1ຕͰ׬݁͠·͢ <!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <img src="https://vuejs.org/images/logo.png" alt="Vue logo"> <h1>{{ greeting }}</h1> <ul> <li> To learn more about Vue, visit <a :href="docsURL" target="_blank"> {{ humanizeURL(docsURL) }} </a> </li> <li> For live help with simple questions, check out <a :href="gitterURL" target="_blank"> the Gitter chat </a> </li> <li> For more complex questions, post to <a :href="forumURL" target="_blank"> the forum </a> </li> </ul> </div> <script> new Vue({ el: '#app', data: { greeting: 'Welcome to your Vue.js app!', docsURL: 'http://vuejs.org/guide/', gitterURL: 'https://gitter.im/vuejs/vue', forumURL: 'http://forum.vuejs.org/' }, methods: { humanizeURL: function (url) { return url .replace(/^https?:\/\//, '') .replace(/\/$/, '') } } }) </script> </body> </html> ࠓ೔ͷσϞͷαϯϓϧίʔυ https://gist.github.com/ nobu222/4e396afca307eaaf497ce33bdbd917c9
28. ͕࣌ؒ͋Ε͹αϯϓϧίʔυղઆ
29. Let’s enjoy Frontend!!