Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

PHP関西2017 スライドです。

Nobuhiko Futagami

July 15, 2017
Tweet

Other Decks in Programming

Transcript

  1. ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢
    Δ࠷୹Ͱ࠷খݶͷ૷උ
    ೋਆ ெ඙ / Nobuhiko Futagami
    Twitter ϊϏ(nobii) @bobu_web
    Qiita http://qiita.com/bobu_web

    View Slide

  2. ຖ೥ग़ΔϑϩϯτΤϯυࣄ৘ɻɻ
    • ͜ΕΒಡΜͰԿ͔໾ʹͨͬͨ͜ͱ͋Γ·͔͢ʁ
    • ʮ;ʔΜʯͰऴΘΓ·ͤΜʁ

    View Slide

  3. ͚ͲPHPerͷΈͳ͞Μ΋ͳΜ͔ͩΜͩͰ
    ϑϩϯτͷ࣮૷͢Δ͜ͱ͋Γ·͢ΑͶʁ

    View Slide

  4. ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢Δ
    ࠷୹Ͱ࠷খݶͷ૷උ

    View Slide

  5. ͪΐͬͱࢲʹ͍ͭͯ͝঺հ
    • ͱʹ͔͘͸΍͘࡞ͬͯϒϥογϡΞοϓ͢Δ͜ͱ͕ଟ͍
    • ͳͷͰɺόοΫΤϯυͱͷؔ܎͸APIͷΈ
    • ͓ޓ͍ͷ࡞ΓํͳͲ͸΄ͱΜͲׯব͠ͳ͍
    • ͍͍ͩͨSlackͷ΍ΓऔΓͰਐΉ

    View Slide

  6. ։ൃ࣌ͷϓϥΠΦϦςΟ
    • ਖ਼͘͠ॻ͘͜ͱΑΓ΋׬੒ͤ͞Δ͜ͱ͕େࣄ
    • ϑϩϯτʹ͓͚Δ༷ʑͳ৔໘ʹରԠग़དྷΔ͜ͱ
    • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ੒͕
    Α͍

    View Slide

  7. ։ൃ࣌ͷϓϥΠΦϦςΟ
    • ਖ਼͘͠ॻ͘͜ͱΑΓ΋׬੒ͤ͞Δ͜ͱ͕େࣄ
    • ϑϩϯτʹ͓͚Δ༷ʑͳ৔໘ʹରԠग़དྷΔ͜ͱ
    • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ੒͕
    Α͍
    ͜ΕͬͯPHPer͞Μ͕ϑϩϯτΛ࣮૷͢Δ৔໘Ͱ΋ಉ͜͡
    ͱ͕͍͑ΔΜ͡Όͳ͍Ͱ͠ΐ͏͔ʁ

    View Slide

  8. ඞཁͳͷ͸HTTP௨৴ͱ
    ϦΞΫςΟϒͳ࢓૊Έ

    View Slide

  9. • node
    • yarn
    • Webpack
    • babel or TypeScript
    • axios
    • Vue.js
    ඞཁͳͷ͜Ε
    ύοέʔδ؅ཧ
    όϯυϧπʔϧ
    τϥϯεύΠϥɺaltJS
    HTTP௨৴ϥΠϒϥϦ
    JSϑϨʔϜϫʔΫ

    View Slide

  10. yarn
    • FacebookɺGoogleͳͲʹΑͬͯ։ൃ͞Εͨύοέʔδ
    Ϛωʔδϟ
    • ಛ௃ʢnpmͱൺֱʣ
    • ֤ύοέʔδΛฒߦͯ͠Πϯετʔϧ͢ΔͷͰ଎͍
    • όʔδϣϯΛϩοΫ͢Δ࢓૊Έ͕σϑΥϧτͰಈ͘
    • npm͕ಈ͘ͱ͜ΖͳΒyarn΋ಈ͘
    • Ͷ͕͜ΠϝʔδΩϟϥ
    brew install yarn
    Πϯετʔϧ͸͜Ε͚ͩ

    View Slide

  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όϯυϧ͚ͩͷγϯϓϧͳͱ͜Ζ͔Β
    ࢝Ίͨ΄͏͕͍͍ͱࢥ͍·͢

    View Slide

  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໊ʹͳΔ

    View Slide

  13. babel, TypeScript
    • babel
    • JavaScriptͷ৽͍͠࢓༷ES6,ES7ͳͲΛoldϒϥ΢βʹରԠग़དྷΔΑ
    ͏ίʔυΛτϥϯεύΠϧ͢Δπʔϧ
    • Webpackʹ૊ΈࠐΉ
    • ES6·ͰͩͬͨΒIEͷͨΊʹಋೖ͢ΔΑ͏ͳ΋ͷ
    • TypeScript
    • Microsoft͕։ൃ͍ͯ͠ΔaltJS
    • ES6Ҏ্ͷ৽͍͠࢓༷ʹ΋ରԠ͍ͯ͠Δ
    • ੩తܕ෇͖ΛJSͰ͢Δ΍ͭ
    • ͜Ε΋Webpackʹ૊ΈࠐΊΔ

    View Slide

  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'] }
    }
    }
    ]
    }

    View Slide

  15. axios
    • HTTP௨৴Λ͢ΔͨΊͷϥΠϒϥϦ
    • Promise Based
    • axios.default, axios.createͰڞ௨߲໨Λઃఆग़དྷΔ
    • axios.all,axios.spreadͰฒྻͷϦΫΤετॲཧʹରԠ
    • adapterػೳΛ࢖͏ͱ؆қmocking͕ग़དྷΔ

    View Slide

  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

    View Slide

  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) {
    …..

    View Slide

  18. JSϑϨʔϜϫʔΫʹԿΛ࢖͏͔

    View Slide

  19. Angular,React,Vue.js
    ߃ྫͷGoogle Trend

    View Slide

  20. Vue.jsΛબͿཧ༝
    • ࢥ૝͕ڧ͗͢Δ
    • JSXΑΓςϯϓϨʔτߏจ
    • Reduxͷهड़ྔ͓͓͗͢ɺ૒ํ޲όΠϯσΟϯά࢖͍͍ͨ
    vs React

    View Slide

  21. Vue.jsΛબͿཧ༝
    vs Angular
    Hello world͢Δ͚ͩͰϑΝΠϧ͓͓͗͢

    View Slide

  22. Vue.jsΛબͿཧ༝
    • ϑϨʔϜϫʔΫͷ࢖͑Δن໛ͷબ୒ࢶ͕޿͍
    • cdnಡΈࠐΈͷΈ or vue-loader, vuex, vue-router

    ※vue-resouceͱ͍͏httpΫϥΠΞϯτ΋͋Γ·͕ͨ͠։ൃ͕ऴΘͬͯΔͷ
    ͰaxiosΛ࢖͍·͠ΐ͏
    • ཉ͍͠ػೳ͕ద౓ʹ͋Δɺγϯϓϧʹॻ͚Δ
    • ϑΥʔϜͳͲͰ࢖͑Δ૒ํ޲όΠϯσΟϯά v-model
    • on-clickܗࣜͷΠϕϯτϋϯυϦϯά v-on: click
    • ReactͷΑ͏ʹίϯϙʔωϯτ෼ׂɺJSX΋ͱΓ͍ΕΑ͏ͱࢥ͑͹ग़དྷΔ
    • ୹ॴ
    • ςϯϓϨʔτ෦෼ͷΤϥʔ͕Θ͔Γʹ͍͘
    • dataͰΦϒδΣΫτɺ഑ྻΛѻ͍

    View Slide

  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
    }
    }

    View Slide

  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)
    }
    }
    }

    View Slide

  25. ͍࣮͟૷
    • දࣔ͢Δ


    Vue.js boilerplate
    google



    {{event.full_name}}





    <br/>

    View Slide

  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",
    }

    View Slide

  27. ΋ͬͱ΋࠷খͰ࢖͏ͨΊͷVue.js
    • HTMLϑΝΠϧ1ຕͰ׬݁͠·͢


    Welcome to Vue





    {{ greeting }}


    To learn more about Vue, visit

    {{ humanizeURL(docsURL) }}



    For live help with simple questions, check out

    the Gitter chat



    For more complex questions, post to

    the forum




    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>greeting: 'Welcome to your Vue.js app!',<br/>docsURL: 'http://vuejs.org/guide/',<br/>gitterURL: 'https://gitter.im/vuejs/vue',<br/>forumURL: 'http://forum.vuejs.org/'<br/>},<br/>methods: {<br/>humanizeURL: function (url) {<br/>return url<br/>.replace(/^https?:\/\//, '')<br/>.replace(/\/$/, '')<br/>}<br/>}<br/>})<br/>


    ࠓ೔ͷσϞͷαϯϓϧίʔυ
    https://gist.github.com/
    nobu222/4e396afca307eaaf497ce33bdbd917c9

    View Slide

  28. ͕࣌ؒ͋Ε͹αϯϓϧίʔυղઆ

    View Slide

  29. Let’s enjoy Frontend!!

    View Slide