Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Yuki Terashima

October 18, 2018
Tweet

More Decks by Yuki Terashima

Other Decks in Programming

Transcript

  1. Λ࢖͍ͬͯͯ

    地味にϋϚͬͨখωλͷ঺հ
    /[email protected]

    View Slide

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


    View Slide



  3. IUUQTBMJTNFEJBKQ

    View Slide

  4. 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