Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
今風のフロントエンド開発をする最短で最小限の装備
Nobuhiko Futagami
July 15, 2017
Programming
1
740
今風のフロントエンド開発をする最短で最小限の装備
PHP関西2017 スライドです。
Nobuhiko Futagami
July 15, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
sters
2
140
line_developers_tw2
0
4.9k
meemeelab
0
310
xrdnk
0
210
koheisakata
0
180
sansuke05
1
140
alperhankendi
1
150
ntaro
0
170
christianweyer
PRO
0
310
afilina
PRO
0
150
numeroanddev
1
240
korosuke613
2
270
Featured
See All Featured
holman
461
280k
sachag
267
17k
62gerente
587
200k
bkeepers
52
4.2k
shlominoach
176
7.5k
imathis
479
150k
hannesfritz
28
950
bryan
31
3.4k
garrettdimon
288
110k
gr2m
83
11k
scottboms
251
11k
productmarketing
6
720
Transcript
ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢ Δ࠷Ͱ࠷খݶͷඋ ೋਆ ெ / Nobuhiko Futagami Twitter ϊϏ(nobii) @bobu_web
Qiita http://qiita.com/bobu_web
ຖग़ΔϑϩϯτΤϯυࣄɻɻ • ͜ΕΒಡΜͰԿ͔ʹͨͬͨ͜ͱ͋Γ·͔͢ʁ • ʮ;ʔΜʯͰऴΘΓ·ͤΜʁ
͚ͲPHPerͷΈͳ͞ΜͳΜ͔ͩΜͩͰ ϑϩϯτͷ࣮͢Δ͜ͱ͋Γ·͢ΑͶʁ
ࠓ෩ͷϑϩϯτΤϯυ։ൃΛ͢Δ ࠷Ͱ࠷খݶͷඋ
ͪΐͬͱࢲʹ͍ͭͯ͝հ • ͱʹ͔͘͘࡞ͬͯϒϥογϡΞοϓ͢Δ͜ͱ͕ଟ͍ • ͳͷͰɺόοΫΤϯυͱͷؔAPIͷΈ • ͓ޓ͍ͷ࡞ΓํͳͲ΄ͱΜͲׯব͠ͳ͍ • ͍͍ͩͨSlackͷΓऔΓͰਐΉ
։ൃ࣌ͷϓϥΠΦϦςΟ • ਖ਼͘͠ॻ͘͜ͱΑΓͤ͞Δ͜ͱ͕େࣄ • ϑϩϯτʹ͓͚Δ༷ʑͳ໘ʹରԠग़དྷΔ͜ͱ • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ͕ Α͍
։ൃ࣌ͷϓϥΠΦϦςΟ • ਖ਼͘͠ॻ͘͜ͱΑΓͤ͞Δ͜ͱ͕େࣄ • ϑϩϯτʹ͓͚Δ༷ʑͳ໘ʹରԠग़དྷΔ͜ͱ • มߋΛͲΜͲΜՃ͍͑ͯ͘ͷͰɺγϯϓϧͰ͍ܰߏ͕ Α͍ ͜ΕͬͯPHPer͞Μ͕ϑϩϯτΛ࣮͢Δ໘Ͱಉ͜͡ ͱ͕͍͑ΔΜ͡Όͳ͍Ͱ͠ΐ͏͔ʁ
ඞཁͳͷHTTP௨৴ͱ ϦΞΫςΟϒͳΈ
• node • yarn • Webpack • babel or TypeScript
• axios • Vue.js ඞཁͳͷ͜Ε ύοέʔδཧ όϯυϧπʔϧ τϥϯεύΠϥɺaltJS HTTP௨৴ϥΠϒϥϦ JSϑϨʔϜϫʔΫ
yarn • FacebookɺGoogleͳͲʹΑͬͯ։ൃ͞Εͨύοέʔδ Ϛωʔδϟ • ಛʢnpmͱൺֱʣ • ֤ύοέʔδΛฒߦͯ͠Πϯετʔϧ͢ΔͷͰ͍ • όʔδϣϯΛϩοΫ͢ΔΈ͕σϑΥϧτͰಈ͘
• npm͕ಈ͘ͱ͜ΖͳΒyarnಈ͘ • Ͷ͕͜ΠϝʔδΩϟϥ brew install yarn Πϯετʔϧ͜Ε͚ͩ
Webpack • ࠓ·Ͱ͋ͬͨ։ൃ༻πʔϧͷશ෦ೖΓ • browserify => JSͷϞδϡʔϧཧ • gulp,grunt =>
Sass,LessίϯύΠϧɺlinterͱ͔ • browser-sync => webpack-devserver • ࣍ͷbabelTypeScriptͷίϯύΠϧʹΘΕΔ • Angular,React,Vue.jsͷओཁϑϨʔϜϫʔΫʹ࠾༻͞Ε͍࣮࣭ͯͯͷσ ϑΝΫτʹͳ͍ͬͯΔ • version2͔ΒTree ShakingʹରԠ • laravel-mix? ग़དྷΔ͜ͱ͕ଟ͍ɺ࠷ॳJSόϯυϧ͚ͩͷγϯϓϧͳͱ͜Ζ͔Β ࢝Ίͨ΄͏͕͍͍ͱࢥ͍·͢
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໊ʹͳΔ
babel, TypeScript • babel • JavaScriptͷ৽͍༷͠ES6,ES7ͳͲΛoldϒϥβʹରԠग़དྷΔΑ ͏ίʔυΛτϥϯεύΠϧ͢Δπʔϧ • WebpackʹΈࠐΉ •
ES6·ͰͩͬͨΒIEͷͨΊʹಋೖ͢ΔΑ͏ͳͷ • TypeScript • Microsoft͕։ൃ͍ͯ͠ΔaltJS • ES6Ҏ্ͷ৽͍༷͠ʹରԠ͍ͯ͠Δ • ੩తܕ͖ΛJSͰ͢Δͭ • ͜ΕWebpackʹΈࠐΊΔ
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'] } } } ] }
axios • HTTP௨৴Λ͢ΔͨΊͷϥΠϒϥϦ • Promise Based • axios.default, axios.createͰڞ௨߲Λઃఆग़དྷΔ •
axios.all,axios.spreadͰฒྻͷϦΫΤετॲཧʹରԠ • adapterػೳΛ͏ͱ؆қmocking͕ग़དྷΔ
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
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) { …..
JSϑϨʔϜϫʔΫʹԿΛ͏͔
Angular,React,Vue.js ߃ྫͷGoogle Trend
Vue.jsΛબͿཧ༝ • ࢥ͕ڧ͗͢Δ • JSXΑΓςϯϓϨʔτߏจ • Reduxͷهड़ྔ͓͓͗͢ɺํόΠϯσΟϯά͍͍ͨ vs React
Vue.jsΛબͿཧ༝ vs Angular Hello world͢Δ͚ͩͰϑΝΠϧ͓͓͗͢
Vue.jsΛબͿཧ༝ • ϑϨʔϜϫʔΫͷ͑Δنͷબࢶ͕͍ • cdnಡΈࠐΈͷΈ or vue-loader, vuex, vue-router ※vue-resouceͱ͍͏httpΫϥΠΞϯτ͋Γ·͕ͨ͠։ൃ͕ऴΘͬͯΔͷ
ͰaxiosΛ͍·͠ΐ͏ • ཉ͍͠ػೳ͕దʹ͋Δɺγϯϓϧʹॻ͚Δ • ϑΥʔϜͳͲͰ͑ΔํόΠϯσΟϯά v-model • on-clickܗࣜͷΠϕϯτϋϯυϦϯά v-on: click • ReactͷΑ͏ʹίϯϙʔωϯτׂɺJSXͱΓ͍ΕΑ͏ͱࢥ͑ग़དྷΔ • ॴ • ςϯϓϨʔτ෦ͷΤϥʔ͕Θ͔Γʹ͍͘ • dataͰΦϒδΣΫτɺྻΛѻ͍
͍࣮͟ • σʔλΛऔಘ͢Δ 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 } }
͍࣮͟ • σʔλΛՃ͢Δ 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>
͍࣮͟ • දࣔ͢Δ <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>
σόοάɺΦʔτϦϩʔυ • σόοά • 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", }
ͬͱ࠷খͰ͏ͨΊͷ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
͕࣌ؒ͋Εαϯϓϧίʔυղઆ
Let’s enjoy Frontend!!