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
970
今風のフロントエンド開発をする最短で最小限の装備
PHP関西2017 スライドです。
Nobuhiko Futagami
July 15, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
Quarto Tips for Academic Presentation
nicetak
0
890
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
140
あなたと 「|」 したい・・・
track3jyo
PRO
2
1k
T3 Stack and TypeScript ecosystem
quramy
3
680
低レイヤーから始める GUI
fadis
18
9.2k
Workshop on Jetpack compose
aldefy
0
140
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
330
「自律型開発組織」を目指すCTOの、試行錯誤の記録
ar_tama
1
200
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
290
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
300
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
TokyoR#103_DataProcessing
kilometer
0
470
Featured
See All Featured
Thoughts on Productivity
jonyablonski
49
2.7k
Designing for humans not robots
tammielis
245
24k
It's Worth the Effort
3n
177
26k
Bootstrapping a Software Product
garrettdimon
299
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Web development in the modern age
philhawksworth
197
9.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
In The Pink: A Labor of Love
frogandcode
132
21k
Atom: Resistance is Futile
akmur
256
24k
How to train your dragon (web standard)
notwaldorf
66
4.2k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
560
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!!