デザイナーの私がVue.jsを触ってみた

2018年6月30日(土)に開催された「Vue.js / Nuxt.js Meetup Osaka #0」
(https://kfug.connpass.com/event/90962/)
にて登壇しました。

「デザイナーの私がVue.jsを触ってみた」というタイトルでお話しました。デモが多めだったので、スライド内容でわかりづらい部分があるかもしれませんが、codePenの内容を参考にしていただければと思います。

ほぼVue初心者の私が、Vueを触ってみた手順や感想をまとめました。
Vue学びたいけど最初の環境構築で心が折れてしまった方や、初めてでとりあえず触ってみたいなと思っている方のお役に立てればと思います、

1.なぜVue.jsを学ぼうと思ったか？
2.Vueを学びたいと思った理由
3.デザイナーが学ぶメリット
4.Vueを学ぶ必要性は人それぞれ
5.CodePenを使ってVue.jsを触ってみた
　- なぜCodePenを使った？
　- Hello Worldを書いてみよう

6.Vue.jsを使って簡単なタスクリストを作ってみよう
　- タスクのリストを作ってみよう
　　- 配列の作り方
　　- v-forの使い方

　- タスクのフォームやボタンを作ってみよう
　　- v-modelの使い方
　　- v-on:clickの使い方、methodsの書き方

7.まとめ

Transcript

1. σβΠφʔͷࢲ͕ 7VFKTΛ৮ͬͯΈͨ  IUUQTLGVHDPOOQBTTDPNFWFOU 7VFKT
   
   /VYUKT
   .FFUVQ
   0TBLB
    :BTVJ
   3JTB
2. :BTVJ
   3JTB 吳䒭⠓爡
   DIBUCPY رؠ؎ش٦ؿٗٝزؒٝسؒٝآص، !DPUPMJFS@SJTB DPUPMJFS3JTB
3. ͳͥ7VFKTΛ ֶ΅͏ͱࢥ͔ͬͨʁ ͸͡·Γ
4. ۀ຿Ͱ7VFΛ৮Δػձ͕૿͑ͨ 7VFͷ࢓૊Έ΍Կ͕Ͱ͖Δ͔Λ ΋ͬͱ஌Γ͍ͨʂ 7VFΛֶͼ͍ͨͱࢥͬͨཧ༝
5. ࢓૊ΈΛߟྀͨ͠σβΠϯ͕Ͱ͖Δ ޻਺࡟ݮʹڠྗͰ͖Δ ࢓૊ΈΛ׆͔ͨ͠σβΠϯ͕࡞ΕΔ σβΠφʔ͕7VFΛ஌ΔϝϦοτ
6. σβΠφʔ΋ίʔσΟϯά΍ ϓϩάϥϛϯά͕Ͱ͖Δ΂͖ʁʁ ͱ͍͏ͱ
7. ඞͣ͠΋Ͱ͖Δඞཁ͸ͳ͍ͱࢥ͍·͢ʂ ຊਓͷ໨ࢦ͢εΩϧ ೚͞Ε͍ͯΔ࢓ࣄ಺༰ νʔϜͷεΩϧηοτ ͳͲͳͲɾɾɾ ؀ڥ࣍ୈͰඞཁʹͳΔεΩϧ͸ҟͳΔ
8. $PEF1FOΛ࢖ͬͯ 7VFKTΛ৮ͬͯΈͨ ͱͬͯ΋ॳ৺ऀ޲͚
9. 7VFʹඞཁͳ খ೉͍͠؀ڥߏஙͳ͠Ͱ ͱΓ͋͑ͣ৮Δ͜ͱ͕Ͱ͖Δʂ ͳͥ$PEF1FOͳͷ͔ʁ
10. $PEF1FOΛ։͍ͯઃఆ͢Δ +4ͷࣃंϚʔΫΛΫϦοΫ 2VJDLBEE͔ΒʮK2VFSZʯͱʮ7VFʯΛબ୒ ͦΕͧΕͷ$%/ΛಡΈࠐΉ
11. σϞɿ7VFͷ࿅श@)FMMP8PSMEΛॻ͍ͯΈΔ IUUQTDPEFQFOJPZBVTJSJTBQFOH,;,#K ެࣜυΩϡϝϯτ IUUQTKQWVFKTPSHWHVJEFJOEFYIUNM ̎)FMMP
    8PSMEΛॻ͍ͯΈΔ
12. 
    7VFߏจʹ͍ͭͯ 
    7VFͰܭࢉͨ͠Γɺऔಘͨ͠σʔλΛ
    
    
    )5.-ʹ൓ө͢Δ͜ͱ͕Ͱ͖Δ ίί·ͰͰΘ͔ͬͨ͜ͱ
13. 7VFKTΛ࢖ͬͯ ؆୯ͳλεΫϦετΛ࡞Δ ॳ৺ऀ޲͚7VFϨοεϯ
14. λεΫϦετ׬੒Πϝʔδ
15. σϞɿ7VFͷ࿅श@Ϧετͷ࡞੒ IUUQTDPEFQFOJPZBVTJSJTBQFO8Z-Z:# 
    )5.-ͰϦετදݱ 
    λεΫϦετͷ഑ྻΛ࡞Δ ·ͣ͸Ϧετͷ෦෼Λ࡞ͬͯΈΔ
16. ࢦఆ͞ΕͨཁૉΛ܁Γฦͯ͠ ഑ྻ಺ͷσʔλΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ WGPS
    Λ࢖ͬͯΈΑ͏
17. 
    7VFଆͰ༷ʑͳσʔλΛอ࣋Ͱ͖Δ 
    7VFͷ഑ྻΛར༻ͯ͠ಉ͡ίϯϙʔωϯτ ɹΛ܁Γฦ͢͜ͱ͕؆୯ʹͰ͖Δ ίί·ͰͰΘ͔ͬͨ͜ͱ
18. σϞɿ7VFͷ࿅श@ϑΥʔϜͷ࡞੒ IUUQTDPEFQFOJPZBVTJSJTBQFO+;X#C. 
    )5.-ͰϑΥʔϜදݱ ̎λεΫ௥ՃϑΥʔϜͷ෦෼Λ࡞ͬͯΈΔ
19. WNPEFM
    Λ࢖ͬͯΈΑ͏ ϑΥʔϜʹೖྗ͞Εͨ஋Λ औಘ͢Δ͜ͱ͕Ͱ͖Δ
20. ΫϦοΫΠϕϯτΛऔಘͯ͠ ॲཧΛݺͼग़͢ WPODMJDL
    Λ࢖ͬͯΈΑ͏
21. 
    )5.-ଆͰೖྗ͞Εͨ஋Λ؆୯ʹѻ͑Δ 
    WPOΛ࢖͑͹༷ʑͳΠϕϯτΛͱΕΔ 
    NFUIPETΛݟΕ͹ͲΜͳॲཧΛ ɹߦ͍ͬͯΔ͔͕Θ͔Δ ίί·ͰͰΘ͔ͬͨ͜ͱ
22. 
    $PEF1FOΛ࢖͑͹ϋʔυϧͷߴ͍
    
    
    ؀ڥߏஙͳ͠Ͱ7VFΛ৮Δ͜ͱ͕Ͱ͖Δ 
    ίʔυ͕γϯϓϧͰΘ͔Γ΍͍͢ 
    ·ͣ͸؆୯ͳ͜ͱ͔ΒॳΊͯΈΔͱ ɹֶָ͘͠Ϳ͜ͱ͕Ͱ͖Δ ɹ ·ͱΊʂ
23. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ͓ΘΓ