$30 off During Our Annual Pro Sale. View Details »

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

cotolier_risa
June 30, 2018
1.5k

 デザイナーの私が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.まとめ

cotolier_risa

June 30, 2018
Tweet

Transcript

  1. σβΠφʔͷࢲ͕
    7VFKTΛ৮ͬͯΈͨ

    IUUQTLGVHDPOOQBTTDPNFWFOU
    7VFKT/VYUKT.FFUVQ0TBLB
    :BTVJ3JTB

    View Slide

  2. :BTVJ3JTB
    吳䒭⠓爡DIBUCPY
    رؠ؎ش٦ؿٗٝزؒٝسؒٝآص،
    !DPUPMJFS@SJTB DPUPMJFS3JTB

    View Slide

  3. ͳͥ7VFKTΛ
    ֶ΅͏ͱࢥ͔ͬͨʁ
    ͸͡·Γ

    View Slide

  4. ۀ຿Ͱ7VFΛ৮Δػձ͕૿͑ͨ
    7VFͷ࢓૊Έ΍Կ͕Ͱ͖Δ͔Λ
    ΋ͬͱ஌Γ͍ͨʂ
    7VFΛֶͼ͍ͨͱࢥͬͨཧ༝

    View Slide

  5. ࢓૊ΈΛߟྀͨ͠σβΠϯ͕Ͱ͖Δ
    ޻਺࡟ݮʹڠྗͰ͖Δ
    ࢓૊ΈΛ׆͔ͨ͠σβΠϯ͕࡞ΕΔ
    σβΠφʔ͕7VFΛ஌ΔϝϦοτ

    View Slide

  6. σβΠφʔ΋ίʔσΟϯά΍
    ϓϩάϥϛϯά͕Ͱ͖Δ΂͖ʁʁ
    ͱ͍͏ͱ

    View Slide

  7. ඞͣ͠΋Ͱ͖Δඞཁ͸ͳ͍ͱࢥ͍·͢ʂ
    ຊਓͷ໨ࢦ͢εΩϧ
    ೚͞Ε͍ͯΔ࢓ࣄ಺༰
    νʔϜͷεΩϧηοτ
    ͳͲͳͲɾɾɾ
    ؀ڥ࣍ୈͰඞཁʹͳΔεΩϧ͸ҟͳΔ

    View Slide

  8. $PEF1FOΛ࢖ͬͯ
    7VFKTΛ৮ͬͯΈͨ
    ͱͬͯ΋ॳ৺ऀ޲͚

    View Slide

  9. 7VFʹඞཁͳ
    খ೉͍͠؀ڥߏஙͳ͠Ͱ
    ͱΓ͋͑ͣ৮Δ͜ͱ͕Ͱ͖Δʂ
    ͳͥ$PEF1FOͳͷ͔ʁ

    View Slide

  10. $PEF1FOΛ։͍ͯઃఆ͢Δ
    +4ͷࣃंϚʔΫΛΫϦοΫ
    2VJDLBEE͔ΒʮK2VFSZʯͱʮ7VFʯΛબ୒
    ͦΕͧΕͷ$%/ΛಡΈࠐΉ

    View Slide

  11. σϞɿ7VFͷ࿅श@)FMMP8PSMEΛॻ͍ͯΈΔ
    IUUQTDPEFQFOJPZBVTJSJTBQFOH,;,#K
    ެࣜυΩϡϝϯτ
    IUUQTKQWVFKTPSHWHVJEFJOEFYIUNM
    ̎)FMMP8PSMEΛॻ͍ͯΈΔ

    View Slide

  12. 7VFߏจʹ͍ͭͯ
    7VFͰܭࢉͨ͠Γɺऔಘͨ͠σʔλΛ
    )5.-ʹ൓ө͢Δ͜ͱ͕Ͱ͖Δ
    ίί·ͰͰΘ͔ͬͨ͜ͱ

    View Slide

  13. 7VFKTΛ࢖ͬͯ
    ؆୯ͳλεΫϦετΛ࡞Δ
    ॳ৺ऀ޲͚7VFϨοεϯ

    View Slide

  14. λεΫϦετ׬੒Πϝʔδ

    View Slide

  15. σϞɿ7VFͷ࿅श@Ϧετͷ࡞੒
    IUUQTDPEFQFOJPZBVTJSJTBQFO8Z-Z:#
    )5.-ͰϦετදݱ
    λεΫϦετͷ഑ྻΛ࡞Δ
    ·ͣ͸Ϧετͷ෦෼Λ࡞ͬͯΈΔ

    View Slide

  16. ࢦఆ͞ΕͨཁૉΛ܁Γฦͯ͠
    ഑ྻ಺ͷσʔλΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ
    WGPSΛ࢖ͬͯΈΑ͏

    View Slide

  17. 7VFଆͰ༷ʑͳσʔλΛอ࣋Ͱ͖Δ
    7VFͷ഑ྻΛར༻ͯ͠ಉ͡ίϯϙʔωϯτ
    ɹΛ܁Γฦ͢͜ͱ͕؆୯ʹͰ͖Δ
    ίί·ͰͰΘ͔ͬͨ͜ͱ

    View Slide

  18. σϞɿ7VFͷ࿅श@ϑΥʔϜͷ࡞੒
    IUUQTDPEFQFOJPZBVTJSJTBQFO+;X#C.
    )5.-ͰϑΥʔϜදݱ
    ̎λεΫ௥ՃϑΥʔϜͷ෦෼Λ࡞ͬͯΈΔ

    View Slide

  19. WNPEFMΛ࢖ͬͯΈΑ͏
    ϑΥʔϜʹೖྗ͞Εͨ஋Λ
    औಘ͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  20. ΫϦοΫΠϕϯτΛऔಘͯ͠
    ॲཧΛݺͼग़͢
    WPODMJDLΛ࢖ͬͯΈΑ͏

    View Slide

  21. )5.-ଆͰೖྗ͞Εͨ஋Λ؆୯ʹѻ͑Δ
    WPOΛ࢖͑͹༷ʑͳΠϕϯτΛͱΕΔ
    NFUIPETΛݟΕ͹ͲΜͳॲཧΛ
    ɹߦ͍ͬͯΔ͔͕Θ͔Δ
    ίί·ͰͰΘ͔ͬͨ͜ͱ

    View Slide

  22. $PEF1FOΛ࢖͑͹ϋʔυϧͷߴ͍
    ؀ڥߏஙͳ͠Ͱ7VFΛ৮Δ͜ͱ͕Ͱ͖Δ
    ίʔυ͕γϯϓϧͰΘ͔Γ΍͍͢
    ·ͣ͸؆୯ͳ͜ͱ͔ΒॳΊͯΈΔͱ
    ɹֶָ͘͠Ϳ͜ͱ͕Ͱ͖Δ
    ɹ
    ·ͱΊʂ

    View Slide

  23. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ͓ΘΓ

    View Slide