Vue.js入門1ヶ月で自作の技術ブログをリリースした話

7c3b3366947123ba6772698b09edf4e2?s=47 subroh_0508
October 17, 2019

 Vue.js入門1ヶ月で自作の技術ブログをリリースした話

Yumemi.vue #2の10分枠LT資料です。
https://yumemi.connpass.com/event/148953/

技術ブログ: https://subroh0508.net
Github: https://github.com/subroh0508/techblog

7c3b3366947123ba6772698b09edf4e2?s=128

subroh_0508

October 17, 2019
Tweet

Transcript

  1. 7VFKTೖ໳ϲ݄Ͱ ࣗ࡞ͷٕज़ϒϩάΛϦϦʔεͨ͠࿩ :VNFNJWVF ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

  2. "CPVU.F w ʹ͜͠Γ͞ͿΖʙ w ౦ژ౎ɾҏ౾େౡग़਎ w גࣜձࣾ#FBS5BJM w "OESPJEΤϯδχΞ ,PUMJO+BWB

    ˑ w 8FCΤϯδχΞ 3BJMT3FBDU  w 7VFྺ໿ϲ݄
  3. "HFOEB w ࡞ͬͨϞϊ঺հ w ࣮૷ղઆ w σΟϨΫτϦߏ੒ w 7VFKT 4FSWFS4JEF3FOEFSJOHͷղઆ

    w ·ͱΊɺࠓޙͷల๬
  4. ࡞ͬͨϞϊ w ԣਢլୈ؅۠৘ใہ w 7VFKT 8FCQBDL w WVFSPVUFSΛ࢖ͬͨ41" w 4&0ରࡦͱͯ͠443

    w WVFTFSWFSSFOEFSFS w &YQSFTTKT ϦϯΫTVCSPIOFU (JUIVCTVCSPIUFDICMPH
  5. ߏ੒ਤ

  6. -JHIUIPVTFͷϨϙʔτ ͜͜·Ͱߴ଎Խ͢Δͷͳ͔ͳ͔େมͩͬͨʜ ʋТA ˞8FCQBDLͱͷ֨ಆͷ࿩ʹͳΔͷͰׂѪ

  7. ࣮૷ղઆ σΟϨΫτϦߏ੒ w "UPNJD%FTJHOͬΆ͍ߏ੒ BUPNTNPMFDVMFT w υϝΠϯʹґଘ͠ͳ͍$PNQPOFOU w ྫ0VUMJOFE#VUUPOɺ4IBSF#VUUPO QBHFT

    w 63-ͱରͷରԠ͕औΕΔը໘ PSHBOJTNTUFNQMBUFT w ͦΕҎ֎ ࠶ར༻ੑͦ͜·Ͱߴ͘ͳ͍$PNQPOFOU
  8. 7VFKTྑ͔ͬͨͱ͜Ζ ςϯϓϨʔτߏจ࠷ߴʂ w )5.-ɾ$44ɾ+BWBTDSJQU͕ϑΝΠϧʹ·ͱ·ΔˠಡΈ΍͍͢ʂ w 3FBDUͰ΋Ͱ͖Δ͕ɺTUZMFEDPNQPOFOUͷಋೖඞਢ w "UPNJD%FTJHOʹԊͬͨ͜ͱͰɺελΠϧͷ؅ཧ͕ΑΓָʹʂ w λάͰͭͷཁૉ͕͖ͬͪΓ෼ׂ͞ΕΔ

    w 3FBDUͰ͋Γ͕ͪͳʮ)5.-ͷதʹෳࡶͳ+BWBTDSJQU͕ࠞೖͯ͠ർฐʯ ͢Δ͜ͱ͕গͳ͍ʂ ϑϩϯτΤϯυͷ։ൃ͸αΫαΫʂɹ൒݄΄ͲͰ6*͸΄΅׬੒ʂ
  9. ҙؾ༲ʑͱϦϦʔεʜ͔͠͠ʜ w ʮγΣΞͨ࣌͠ʹهࣄλΠτϧ͕൓ө͞ΕΜͷ͕ͩʜ ɾТɾʆ ʯ ॳճϦϦʔε࣌ͷ ͸ͯϒը໘ ͜͏ͳͬͯཉ͍͠

  10. ݪҼௐࠪ w NFUBλάͷߋ৽ॲཧ w "QQWVFͷNPVOUFE ͱ SPVUFΦϒδΣΫτͷߋ৽ͰൃՐ w ௚઀هࣄϖʔδʹΞΫηεͨ͠৔߹ɺ λάߋ৽લͷ)5.-͕ಡ·Εͯ͠·͏

    ˠॳظঢ়ଶͷNFUBλά͕γΣΞ࣌ʹ൓өʂ export default { ... mounted() { updateConfig(this.$route); insertMetaTags(this.$route); }, watch: { '$route': function (to, from) { updateConfig(to); insertMetaTags(to); } } } 41"։ൃͷৗࣝͰ͸ʁ ΅͘ɺ"OESPJEΤϯδχΞ΍͠ʜ
  11. ରࡦ w WVFTFSWFSSFOEFSFSΛ࢖ͬͨ4FSWFS4JEF3FOEFSJOH w ެࣜΨΠυIUUQTTTSWVFKTPSH w ରԠखॱ w 7VFΠϯελϯεͷॳظԽΛؔ਺Խ w

    ΫϥΠΞϯτ༻αʔόʔ༻ͷΤϯτϦϑΝΠϧΛ࡞੒ w αʔόʔ༻ͷόϯυϧ+40/ͷੜ੒ w &YQSFTTKT WVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷
  12. ରԠखॱ w 7VFΠϯελϯεͷॳظԽΛؔ਺Խ export const createApp = () => {

    const router = createRouter(); const app = new Vue({ router, render: h => h(App), }); return { app, router }; }; new Vue({ router, el: '#app', components: { App }, template: '<app/>', }); CFGPSF BGUFS
  13. ରԠखॱ w ΫϥΠΞϯτ༻αʔόʔ༻ͷΤϯτϦϑΝΠϧΛ࡞੒ FOUSZDMJFOUKT FOUSZTFSWFSKT const { app, router }

    = createApp(); router.onReady(() => { app.$mount('#app'); }); export default (context) => { return new Promise((resolve, reject) => { const { app, router } = createApp(); router.push(context.url); router.onReady(() => { resolve(app); }); }); }; ˞8FCQBDLͷFOUSZʹࢦఆ͢ΔϑΝΠϧ
  14. ରԠखॱ w αʔόʔ༻ͷόϯυϧ+40/ͷੜ੒ w 7VF4434FSWFS1MVHJOΛ௥Ճ w ZBSOSVOXFCQBDL࣮ߦ w TFWFSCVOEMFKTPO͕ੜ੒ module.exports

    = merge(common, { ... plugins: [ ... new VueSSRServerPlugin({ filename: 'server-bundle.json', }), ], }); XFCQBDLTFSWFSKT
  15. ରԠखॱ w &YQSFTTKT WVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, {

    template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080'));
  16. ରԠखॱ w &YQSFTTKT WVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, {

    template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); લͷखॱͰੜ੒ͨ͠+40/
  17. ରԠखॱ w &YQSFTTKT WVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, {

    template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); NFUBλάੜ੒ؔ਺
  18. ରԠखॱ w &YQSFTTKT WVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, {

    template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); DPOUFYUͱόϯυϧ+40/͔Β ΠΠײ͡ʹ)5.-ੜ੒ͯ͘͠ΕΔؔ਺
  19. 443ରԠޙ w ࠷ॳͷ)5.-ͷϩʔυͰNFUBλά͕൓ө͞Εͨʂ

  20. ޙ೔ஊ w /VYUKTͱ͍͏ͷ͕͋ΔΒ͍͠Ͱ͢Ͷʁʁʁ w OVYUCVJME OVYUTUBSUͰ443ϞʔυͰOPEFαʔόʔىಈʂਆͰ͸ʁ w /VYUKTͷίʔυɺࣗ෼͕ॻ͍ͨϞϊͱ΄΅ಉ͜͡ͱ͍ͯͨ͠ w BTZOD%BUBؔ਺ϖʔδίϯϙʔωϯτͷϩʔυલʹݺ͹ΕΔʂਆͰ͸ʁ

    ݁࿦7VFKTͰͷ443͸େਓ͘͠/VYUKT࢖͏΂͖
  21. ·ͱΊ w 7VFKTΛ࢖ٕͬͯज़ϒϩάΛࣗ࡞ͨ͠ w 8FCΞϓϦ։ൃͷϊ΢ϋ΢ෆ଍͕ݪҼͰԕճΓͯ͠͠·ͬͨ w 7VFKTͰͷ443ͷ࢓૊ΈΛਂΊʹ௥͏͜ͱ͕Ͱ͖ͨ w 6*ͷ࣮૷ͰຆͲ٧·Δ͜ͱ͕ͳ͔ͬͨɺςϯϓϨʔτߏจ࠷ߴʂ w

    ࠓޙͷల๬ w /VYUKT৮ͬͯΈΔˠҠߦ໰୊ͳͦ͞͏ͳΒҠߦ͢Δ ٕज़ϒϩάͷ%*:ɺແݶʹ஌ݟͨ·ΔͷͰΦεεϝʂ