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

Nuxtはいいぞ2 / nuxtjs is good 2

Nuxtはいいぞ2 / nuxtjs is good 2

ちげ

May 02, 2020
Tweet

More Decks by ちげ

Other Decks in Programming

Transcript

  1. View Slide

  2. ͪ͛
    ʓө૾੍࡞
    ʓ8FC αΠ
    τ੍࡞
    ʓσβΠ
    ϯ͕ಘҙ
    ʓ࠷ۙ 'JHNBͰ 6* ࡞ͬ
    ͯΔ
    ʓ޷͖ͳήʔ
    Ϝ͸ .JOFDSBGU
    ʓण࢘͸פϒϦ
    ʓು͸͖͢ম͖͕޷͖
    [email protected]

    View Slide

  3. ちげ
    @Chige12_
    フォローする
    DIJHF
    Τΰα

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. ͥΜͿ

    View Slide

  8. View Slide


  9. λΠ
    τϧ
    ʂ

    ͜Μʹͪ͸
    ʂ
    ͪ͛ͬ
    ͯݺΜͰͶ
    ʂ


    ण࢘
    ͖͢ম͖
    ຣ஡


    λΠ
    τϧ
    ʂ
    ͜Μʹͪ͸
    ʂ
    ͪ͛ͬ
    ͯݺΜͰͶ
    ʂ
    ɾ
    ण࢘
    ɾ
    ͖͢ম͖
    ɾ
    ຣ஡

    View Slide


  10. λΠ
    τϧ
    ʂ

    ͜Μʹͪ͸
    ʂ
    ͪ͛ͬ
    ͯݺΜͰͶ
    ʂ


    ण࢘
    ͖͢ম͖
    ຣ஡


    λΠ
    τϧ
    ʂ
    ͜Μʹͪ͸
    ʂ
    ͪ͛ͬ
    ͯݺΜͰͶ
    ʂ
    ɾ
    ण࢘
    ɾ
    ͖͢ম͖
    ɾ
    ຣ஡

    View Slide

  11. h1 {
    background: gray;
    color: white;
    }
    p {
    text-decoration: underline;
    }
    ul {
    list-style-type: decimal;
    }
    λΠ
    τϧ
    ʂ
    ͜Μʹͪ͸
    ʂ
    ͪ͛ͬ
    ͯݺΜͰͶ
    ʂ
    ̍
    ण࢘
    ͖͢ম͖
    ຣ஡

    View Slide

  12. var roop = 5
    var hoge = "ϗήϗήʙ"
    var foo = "ϑΡʙʙ
    ʂ
    "
    for(var i=0; i < roop; i++){
    if(i==3){
    console.log(foo);
    }else{
    console.log(hoge+i);
    }
    }
    ϗήϗήʙ
    ϗήϗήʙ
    ϗήϗήʙ
    ϑ
    Ρʙʙ
    ʂ

    ϗήϗήʙ̐

    View Slide

  13. ϓϩήʔ
    τ
    Ͱֶ΂Δ
    αΠ
    τ੍࡞ͷୈҰา͸
    ͜Ε͕ϕε
    τͩͱࢥ͏ɻ

    View Slide

  14. Ͱ΋͓ߴ͍ΜͰ͠
    ΐ
    ʁ

    View Slide

  15. ͍͍͑ɺ
    ແྉͰ͢
    QSPHDPN

    View Slide

  16. ࠷ॳͷελʔ
    τ͸͍͕ͭ͜Ұ൪Θ͔Γ
    ΍͍͢
    αΠ
    τ࡞Γ
    ΍ͬͯΈΑ
    ͏͔ͳ
    ͬͯਓ͸
    ͍ͭͰ΋๻ʹฉ͍ͯͶ

    View Slide

  17. View Slide

  18. ࠷ۙͷ8FCࣄ৘

    View Slide

  19. View Slide

  20. View Slide

  21. ࠷ۙͷ8FCࣄ৘

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. جຊ͸7VFKT
    ͭͷWVFϑ
    Ν
    Π
    ϧʹ
    )5.- $44 +4Λॻ͘
    7VFͷಠࣗهड़Ξ
    Ϧ



    <br/>// Javas Cript<br/>
    <br/>/* CSS */<br/>
    JOEFYWVF

    View Slide


  27. {{ list }}

    <br/>export default {<br/>data(){<br/>return{<br/>lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]<br/>}}}<br/>
    JOEFYWVF

    View Slide


  28. {{ list }}

    <br/>export default {<br/>data(){<br/>return{<br/>lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]<br/>}}}<br/>
    JOEFYWVF
    ഑ྻΛ͍ΕΔ

    View Slide


  29. {{ list }}

    <br/>export default {<br/>data(){<br/>return{<br/>lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]<br/>}}}<br/>
    JOEFYWVF
    ഑ྻͷத਎
    ల։

    View Slide


  30. {{ list }}

    <br/>export default {<br/>data(){<br/>return{<br/>lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]<br/>}}}<br/>
    JOEFYWVF
    MJTUΛςΩε
    τͰදࣔ

    View Slide


  31. {{ list }}

    ΓΜ͝
    Έ͔Μ
    ͍ͪ͝
    JOEFYWVF
    JOEFYIUNM
    [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]

    View Slide

  32. ΓΜ͝
    Έ͔Μ
    ͍ͪ͝
    JOEFYIUNM

    View Slide


  33. Click!
    MENU

    <br/>export default {<br/>data() {<br/>return {<br/>menu: false<br/>}<br/>},<br/>methods: {<br/>JOEFYWVF<br/>

    View Slide

  34. <br/>export default {<br/>data() {<br/>return {<br/>menu: false<br/>}<br/>},<br/>methods: {<br/>openMenu() { this.menu = true }<br/>}<br/>}<br/>
    JOEFYWVF
    PQFO.FOV ؔ਺͕࣮ߦ
    ͞Εͨ࣌ʹ USVF ʹ͢Δ

    View Slide

  35. DMJDL JOEFYIUNM

    View Slide

  36. .&/6
    JOEFYIUNM
    DMJDL

    View Slide

  37. ˡ֎෦$44ͱ͔ը૾ͱ͔
    ˡίϯϙʔωϯ
    τ ࢠ

    ˡϨΠ
    Ξ΢
    τ
    Λઃఆ
    ˡϖʔδΛ࡞Δ
    ˡ7VFͷϓϥά
    Π
    ϯ
    ˡ੩తϑ
    Ν
    Π
    ϧஔ͖৔
    ˡ7VFY࢖͏
    ͱ
    ͖
    ϑ
    Υϧμߏ଄
    components
    assets
    layouts
    pages
    plugins
    static
    store

    View Slide

  38. JOEFYWVF
    BCPVUWVF
    DPOUBDUWVF
    IUUQTIPHFDPNJOEFY
    IUUQTIPHFDPNBCPVU
    IUUQTIPHFDPNDPOUBDU
    ˢQBHFTϑ
    Υϧμʹ7VFϑ
    Ν
    Π
    ϧΛ࡞Δ
    ͱ
    pages
    ͦͷ໊લͰϖʔδ͕Ͱ͖
    Δ

    View Slide

  39. )FBEFSWVF ˡϝχϡʔͷཁૉ͚ͩॻ͘
    component
    Ͳͷϖʔδ͔ΒͰ΋ݺͼग़ͤΔίϯϙʔωϯ
    τԽ



    <br/>JOEFYWVF<br/><template><br/><Header></Header><br/></template><br/><script><br/>BCPVUWVF<br/>

    View Slide

  40. EFGBVMUWVF
    ˡ֤ϖʔδʹڞ௨ͷ
    ɹσβΠ
    ϯ͕͋Δ࣌ʹར༻
    ˡ͜
    ͜ʹ֤ϖʔδ͕ೖΔ
    layouts
    Ͳͷϖʔδʹ΋࡞Δ.FOVͱ͔͸͜
    ͜Ͱॻ͍͓ͯ͘



    <br/>EFGBVMUWVF<br/>

    View Slide

  41. %PDVNFOU)5.-pMF
    -BZPVU
    1BHF
    w BTZOD%BUB
    w NJEEMFXBSF
    w GFUDI
    w TDSPMM5P5PQ
    w IFBE
    w USBOTJUJPO
    w MBZPVU
    w WBMJEBUF
    0QUJPOBM1BHF$IJME
    ίϯϙʔωϯ
    τ

    0QUJPOBM
    1BHF$IJME
    ίϯϙʔωϯ
    τ

    View Slide


  42. import Menu from '~/components/Menu.vue'

    View Slide

  43. View Slide


  44. .hoge pugͱ͔࢖͑·͢

    <br/>.hoge {<br/>font-size: 30px;<br/>}<br/>

    View Slide

  45. View Slide

  46. 5IBOLZPVGPSMJTUFOJOH

    View Slide