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.FFU6QTQFBLFS!Z@UFNQ
   

   View Slide

2. ࣗݾ঺հ
   w :VLJ5FSBTIJNBʢࣉౢ༞كʣ
   w "-*4Ͱಇ͍͍ͯΔ
   w /VYUྺ͸൒೥͘Β͍
   
   
   

   View Slide

3. 
   
   IUUQTBMJTNFEJBKQ
   

   View Slide

4. IUUQTTQFBLFSEFDLDPNZ@UFNQKTFSEPUJOGPUINFNPSJBMFWFOU
   
   

   View Slide

5. /VYUΛ࢖ͬͯͯ

   ʢ஍ຯʹʣϋϚͬͨ͜ͱ
   

   View Slide

6. ஍ຯʹϋϚΓϙΠϯτ͕͋Δ
   w ৽نαʔϏε։ൃͰ/VYUΛར༻։࢝ʢdʣ
   w ͦͷͱ͖͔ΒϋϚ͖ͬͯͨϙΠϯτ͕͍͔ͭ͋͘Δ
   w ࠓճ͸ͦΕΒͷղܾํ๏Λ͝঺հ͠Α͏ͱࢥ͍·͢
   
   
   

   View Slide

7. (5.ͷઃఆ
   

   View Slide

8. (5.ͷઃఆ
   w (5.ʢ(PPHMF5BH.BOBHFSʣͷઃఆͰएׯͯͣͬͨ͜
   w ("͸ઐ༻ͷϓϥάΠϯʢ@nuxtjs/google-analyticsʣΛ

   ࢖͑͹͍͍͚Ͳɺ(5.͸ͪΐͬͱ໘౗
   
   
   

   View Slide

9. (5.ͷઃఆ݁࿦
   w IUUQTKBOVYUKTPSHGBRHPPHMFBOBMZUJDTΛࢀߟʹ
   ࣮૷ͨ͠
   w "-*4Ͱ͸ҎԼͷϑΝΠϧͰରԠ͍ͯ͠Δ
   w IUUQTHJUIVCDPN"MJT1SPKFDUGSPOUFOE
   BQQMJDBUJPOCMPCEFWFMPQBQQQMVHJOTHUNKT
   w ΍ͬͺΓ/VYUͷQMVHJOT͸ศར
   
   
   

   View Slide

10. -BNCEB্Ͱಈ͔͢
    

    View Slide

11. -BNCEB্Ͱಈ͔͢
    w "-*4ͷ/VYU͸"84ͷ-BNCEB্Ͱಈ͍͍ͯΔ
    w ౰࣌ࣄྫ͕΄΅ͳ͘ɺͲͷΑ͏ʹ࣮૷͢Ε͹Α͍͔ࠔͬͨ
    
    
    

    View Slide

12. -BNCEB্Ͱಈ͔݁͢࿦
    w NZBBLFOVYUPOMBNCEBΛࢀߟʹ࣮૷ͨ͠
    w ͍·͸"-*4ͷ࣮૷ྫ΋ࢀߟʹͳΔ͔΋ʁ
    
    
    

    View Slide

13. -BNCEB্Ͱಈ͔͢஫ҙ఺
    w QBDLBHF͢Δͱ͖ʹআ֎͢Δ

    ϑΝΠϧͷࢦఆ
    w σϓϩΠύοέʔδΛখ͘͞

    ͢ΔͨΊʹnode_modules ಺ͷෆཁͳ

    ϑΝΠϧΛআ֎͢Δඞཁ͕͋Δ
    w େ͖͍ϑΝΠϧΛ༏ઌతʹ

    আ֎͍ͯ͠Δ
    
    
    

    View Slide

14. Τϥʔͷڍಈ
    

    View Slide

15. Τϥʔͷڍಈ
    w /VYU͸layouts/error.vue Λ௥Ճͯ͠ΤϥʔϖʔδΛ

    ΧελϚΠζͰ͖Δ
    w ͨͩ͠ɺ443Λ͍ͯ͠Δͱ͖͸ܥΤϥʔൃੜ࣌ʹ

    ͜ͷϑΝΠϧ͕ಡΈࠐ·Εͳ͍
    w 443͍ͯ͠Δͱ͖΋ΧελϚΠζͨ͠ΤϥʔϖʔδΛ

    ද͍ࣔͨ͠ʂ
    
    
    

    View Slide

16. ௐ΂ͨ݁Ռ
    w IUUQTHJUIVCDPNOVYUOVYUKTJTTVFT

    ΛݟΔͱɺͲ͏΍Βapp/views/error.htmlͰઃఆ͢Δ

    Β͍͠
    
    
    

    View Slide

17. ഑ஔͯ͠Έ͕ͨʜ
    w ࢦఆ௨Γ഑ஔ͕ͨ͠ɺͳ͔ͥ͏·͘൓ө͞Εͳ͍
    w ͳΜ͔ϛε͍ͬͯΔʁ
    w ͍Ζ͍Ζࢼ͕ͨ͠ɺ͏·͍͔͘ͳ͍
    
    
    

    View Slide

18. ΋͔ͯ͠͠ŋŋŋ
    w "-*4͸nuxt.config.jsͷ

    srcDir ͷઃఆΛappʹͯ͠
    ͍ͨ
    w ͜Ε͕ݪҼ͡ΌͶʁ
    
    
    

    View Slide

19. ಈ͍ͨ
    w app/app/views/error.htmlʹ഑ஔͨ͠Βಈ͍ͨʜ
    w มͳϙΠϯτͰ஍ຯʹϋϚͬͯ͠·ͬͨ
    w /VYUͷύεઃఆ͸஍ຯʹϋϚΔ͜ͱ͕͋ΔͷͰ

    ஫ҙ͍ͨ͠
    
    
    

    View Slide

20. ·ͱΊ
    w มͳͱ͜ΖͰϋϚΔ͜ͱ΋͕͋ͬͨɺجຊతʹ/VYU͸

    ࢖͍΍͍͢ҹ৅
    w /VYU͸ެࣜυΩϡϝϯτ͕ॆ࣮͍ͯ͠ΔͷͰɺ͜ΕΛ

    ಡΊ͹େ఍ͷ͜ͱ͕೺ѲͰ͖Δ
    w มͳͱ͜ΖͰϋϚΓͦ͏ͩͬͨΒɺ"-*4ͷ࣮૷΋

    ࢀߟʹͯ͠Έ͍ͯͩ͘͞ʂˡॏཁ
    w IUUQTHJUIVCDPN"MJT1SPKFDUGSPOUFOEBQQMJDBUJPO
    
    
    

    View Slide