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

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

PHP関西2017 スライドです。

Dc3d696098c93ae724c0ac7f2d203aaf?s=128

Nobuhiko Futagami

July 15, 2017
Tweet

Transcript

  1. 9.

    • node • yarn • Webpack • babel or TypeScript

    • axios • Vue.js ඞཁͳͷ͜Ε ύοέʔδ؅ཧ όϯυϧπʔϧ τϥϯεύΠϥɺaltJS HTTP௨৴ϥΠϒϥϦ JSϑϨʔϜϫʔΫ
  2. 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όϯυϧ͚ͩͷγϯϓϧͳͱ͜Ζ͔Β ࢝Ίͨ΄͏͕͍͍ͱࢥ͍·͢
  3. 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໊ʹͳΔ
  4. 13.

    babel, TypeScript • babel • JavaScriptͷ৽͍͠࢓༷ES6,ES7ͳͲΛoldϒϥ΢βʹରԠग़དྷΔΑ ͏ίʔυΛτϥϯεύΠϧ͢Δπʔϧ • Webpackʹ૊ΈࠐΉ •

    ES6·ͰͩͬͨΒIEͷͨΊʹಋೖ͢ΔΑ͏ͳ΋ͷ • TypeScript • Microsoft͕։ൃ͍ͯ͠ΔaltJS • ES6Ҏ্ͷ৽͍͠࢓༷ʹ΋ରԠ͍ͯ͠Δ • ੩తܕ෇͖ΛJSͰ͢Δ΍ͭ • ͜Ε΋Webpackʹ૊ΈࠐΊΔ
  5. 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'] } } } ] }
  6. 15.

    axios • HTTP௨৴Λ͢ΔͨΊͷϥΠϒϥϦ • Promise Based • axios.default, axios.createͰڞ௨߲໨Λઃఆग़དྷΔ •

    axios.all,axios.spreadͰฒྻͷϦΫΤετॲཧʹରԠ • adapterػೳΛ࢖͏ͱ؆қmocking͕ग़དྷΔ
  7. 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
  8. 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) { …..
  9. 22.

    Vue.jsΛબͿཧ༝ • ϑϨʔϜϫʔΫͷ࢖͑Δن໛ͷબ୒ࢶ͕޿͍ • cdnಡΈࠐΈͷΈ or vue-loader, vuex, vue-router
 ※vue-resouceͱ͍͏httpΫϥΠΞϯτ΋͋Γ·͕ͨ͠։ൃ͕ऴΘͬͯΔͷ

    ͰaxiosΛ࢖͍·͠ΐ͏ • ཉ͍͠ػೳ͕ద౓ʹ͋Δɺγϯϓϧʹॻ͚Δ • ϑΥʔϜͳͲͰ࢖͑Δ૒ํ޲όΠϯσΟϯά v-model • on-clickܗࣜͷΠϕϯτϋϯυϦϯά v-on: click • ReactͷΑ͏ʹίϯϙʔωϯτ෼ׂɺJSX΋ͱΓ͍ΕΑ͏ͱࢥ͑͹ग़དྷΔ • ୹ॴ • ςϯϓϨʔτ෦෼ͷΤϥʔ͕Θ͔Γʹ͍͘ • dataͰΦϒδΣΫτɺ഑ྻΛѻ͍
  10. 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 } }
  11. 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>
  12. 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>
  13. 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", }
  14. 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