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

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

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

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
   
   4FSWFS
   4JEF
   3FOEFSJOHͷղઆ
   w ·ͱΊɺࠓޙͷల๬
4. ࡞ͬͨϞϊ w ԣਢլୈ؅۠৘ใہ
   w 7VFKT
   
   8FCQBDL
   w WVFSPVUFSΛ࢖ͬͨ41"
   w 4&0ରࡦͱͯ͠443
   w WVFTFSWFSSFOEFSFS
   w &YQSFTTKT ϦϯΫ
   TVCSPIOFU
   (JUIVC
   TVCSPIUFDICMPH
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Λ࢖ͬͨ4FSWFS
    4JEF
    3FOEFSJOH
    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 ZBSO
    SVO
    XFCQBDL࣮ߦ
    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 OVYU
    CVJME
    
    OVYU
    TUBSUͰ443ϞʔυͰOPEFαʔόʔىಈʂਆͰ͸ʁ
    w /VYUKTͷίʔυɺࣗ෼͕ॻ͍ͨϞϊͱ΄΅ಉ͜͡ͱ͍ͯͨ͠
    w BTZOD%BUBؔ਺
    ϖʔδίϯϙʔωϯτͷϩʔυલʹݺ͹ΕΔʂਆͰ͸ʁ ݁࿦
    7VFKTͰͷ443͸େਓ͘͠/VYUKT࢖͏΂͖
21. ·ͱΊ w 7VFKTΛ࢖ٕͬͯज़ϒϩάΛࣗ࡞ͨ͠
    w 8FCΞϓϦ։ൃͷϊ΢ϋ΢ෆ଍͕ݪҼͰԕճΓͯ͠͠·ͬͨ
    w 7VFKTͰͷ443ͷ࢓૊ΈΛਂΊʹ௥͏͜ͱ͕Ͱ͖ͨ
    w 6*ͷ࣮૷ͰຆͲ٧·Δ͜ͱ͕ͳ͔ͬͨɺςϯϓϨʔτߏจ࠷ߴʂ
    w ࠓޙͷల๬
    w /VYUKT৮ͬͯΈΔˠҠߦ໰୊ͳͦ͞͏ͳΒҠߦ͢Δ ٕज़ϒϩάͷ%*:ɺແݶʹ஌ݟͨ·ΔͷͰΦεεϝʂ