Nuxtを使っていて 地味にハマった小ネタの紹介 / NuxtMeetUp#5

スライド内のURL：

ALIS：https://alismedia.jp
過去の登壇スライド：https://speakerdeck.com/y_temp4/jser-dot-info-400th-memorial-event
Google Analyticsの使い方：https://ja.nuxtjs.org/faq/google-analytics/
GTMの設定：https://github.com/AlisProject/frontend-application/blob/develop/app/plugins/gtm.js
カスタム500ページのissue：https://github.com/nuxt/nuxt.js/issues/2120
ALISのフロントエンドのリポジトリ：https://github.com/AlisProject/frontend-application

Transcript

1. 
   
   
   
   
   
   
   Λ࢖͍ͬͯͯ
 地味にϋϚͬͨখωλͷ঺հ 
   
   /VYU.FFU6Q
   
   TQFBLFS
   !Z@UFNQ
2. ࣗݾ঺հ w :VLJ
   5FSBTIJNBʢࣉౢ༞كʣ
   w "-*4Ͱಇ͍͍ͯΔ
   w /VYUྺ͸൒೥͘Β͍
   
3. 
    IUUQTBMJTNFEJBKQ
4. IUUQTTQFBLFSEFDLDPNZ@UFNQKTFSEPUJOGPUINFNPSJBMFWFOU
   
5. /VYUΛ࢖ͬͯͯ
 ʢ஍ຯʹʣϋϚͬͨ͜ͱ
6. ஍ຯʹϋϚΓϙΠϯτ͕͋Δ w ৽نαʔϏε։ൃͰ/VYUΛར༻։࢝ʢdʣ
   w ͦͷͱ͖͔ΒϋϚ͖ͬͯͨϙΠϯτ͕͍͔ͭ͋͘Δ
   w ࠓճ͸ͦΕΒͷղܾํ๏Λ͝঺հ͠Α͏ͱࢥ͍·͢
   
7. 
   (5.ͷઃఆ
8. 
   (5.ͷઃఆ w (5.ʢ(PPHMF
   5BH
   .BOBHFSʣͷઃఆͰएׯͯͣͬͨ͜
   w ("͸ઐ༻ͷϓϥάΠϯʢ@nuxtjs/google-analyticsʣΛ
 ࢖͑͹͍͍͚Ͳɺ(5.͸ͪΐͬͱ໘౗
   
9. 
   (5.ͷઃఆ
   
   ݁࿦ w IUUQTKBOVYUKTPSHGBRHPPHMFBOBMZUJDT
   Λࢀߟʹ ࣮૷ͨ͠
   w "-*4Ͱ͸ҎԼͷϑΝΠϧͰରԠ͍ͯ͠Δ
   w IUUQTHJUIVCDPN"MJT1SPKFDUGSPOUFOE BQQMJDBUJPOCMPCEFWFMPQBQQQMVHJOTHUNKT
   w ΍ͬͺΓ/VYUͷQMVHJOT͸ศར
   
10. 
    -BNCEB্Ͱಈ͔͢
11. 
    -BNCEB্Ͱಈ͔͢ w "-*4ͷ/VYU͸"84ͷ-BNCEB্Ͱಈ͍͍ͯΔ
    w ౰࣌ࣄྫ͕΄΅ͳ͘ɺͲͷΑ͏ʹ࣮૷͢Ε͹Α͍͔ࠔͬͨ
    
12. 
    -BNCEB্Ͱಈ͔͢
    
    ݁࿦ w NZBBLFOVYUPOMBNCEB
    Λࢀߟʹ࣮૷ͨ͠
    w ͍·͸"-*4ͷ࣮૷ྫ΋ࢀߟʹͳΔ͔΋ʁ
    
13. 
    -BNCEB্Ͱಈ͔͢
    
    ஫ҙ఺ w QBDLBHF͢Δͱ͖ʹআ֎͢Δ
 ϑΝΠϧͷࢦఆ
    w σϓϩΠύοέʔδΛখ͘͞
 ͢ΔͨΊʹ
    node_modules ಺ͷෆཁͳ
 ϑΝΠϧΛআ֎͢Δඞཁ͕͋Δ
    w େ͖͍ϑΝΠϧΛ༏ઌతʹ
 আ֎͍ͯ͠Δ
    
14. 
    Τϥʔͷڍಈ
15. 
    Τϥʔͷڍಈ w /VYU͸
    layouts/error.vue Λ௥Ճͯ͠ΤϥʔϖʔδΛ
 ΧελϚΠζͰ͖Δ
    w ͨͩ͠ɺ443Λ͍ͯ͠Δͱ͖͸ܥΤϥʔൃੜ࣌ʹ
 ͜ͷϑΝΠϧ͕ಡΈࠐ·Εͳ͍
    w 443͍ͯ͠Δͱ͖΋ΧελϚΠζͨ͠ΤϥʔϖʔδΛ
 ද͍ࣔͨ͠ʂ
    
16. ௐ΂ͨ݁Ռ w IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT
 ΛݟΔͱɺͲ͏΍Β
    app/views/error.html
    Ͱઃఆ͢Δ
 Β͍͠
    
17. ഑ஔͯ͠Έ͕ͨʜ w ࢦఆ௨Γ഑ஔ͕ͨ͠ɺͳ͔ͥ͏·͘൓ө͞Εͳ͍
    w ͳΜ͔ϛε͍ͬͯΔʁ
    w ͍Ζ͍Ζࢼ͕ͨ͠ɺ͏·͍͔͘ͳ͍
    
18. ΋͔ͯ͠͠ŋŋŋ w "-*4͸
    nuxt.config.js
    ͷ
 srcDir ͷઃఆΛ
    app
    ʹͯ͠ ͍ͨ
    w ͜Ε͕ݪҼ͡ΌͶʁ
    
19. ಈ͍ͨ w app/app/views/error.html
    ʹ഑ஔͨ͠Βಈ͍ͨʜ
    w มͳϙΠϯτͰ஍ຯʹϋϚͬͯ͠·ͬͨ
    w /VYUͷύεઃఆ͸஍ຯʹϋϚΔ͜ͱ͕͋ΔͷͰ
 ஫ҙ͍ͨ͠
    
20. ·ͱΊ w มͳͱ͜ΖͰϋϚΔ͜ͱ΋͕͋ͬͨɺجຊతʹ/VYU͸
 ࢖͍΍͍͢ҹ৅
    w /VYU͸ެࣜυΩϡϝϯτ͕ॆ࣮͍ͯ͠ΔͷͰɺ͜ΕΛ
 ಡΊ͹େ఍ͷ͜ͱ͕೺ѲͰ͖Δ
    w มͳͱ͜ΖͰϋϚΓͦ͏ͩͬͨΒɺ"-*4ͷ࣮૷΋
 ࢀߟʹͯ͠Έ͍ͯͩ͘͞ʂˡॏཁ
    w IUUQTHJUIVCDPN"MJT1SPKFDUGSPOUFOEBQQMJDBUJPO