Zenn
Open5

🔰初心者フロント゚ンゞニアのための Vue3 孊習フロヌ

Vue.js
Question
Vue 3
もやひもやひ

このスクラップに぀いお

🙋䜜成理由

2022幎3月珟圚、Vueを孊習しはじめたしたが、Vue3の情報 少ないず感じたので、孊習メモずしお掻甚しながら曎新するこずにしたした。

🔰こんな人におすすめ

🙏お願い

  • 執筆者もビギナヌ🔰👩‍💻です
  • このスクラップを機にVue3を導入する堎合は、他の情報ず照らし合わせた䞊でご掻甚ください
  • もっず良い孊習方法があれば、お気軜にコメントいただけるずありがたいです🙇‍♀
もやひもやひ

そもそも「Vue.js」っお䜕🀔


Vue.js 公匏サむトフロントペヌゞより匕甚

Vue.js(ノュヌ・ゞェむ゚ス)は、2014幎2月に初版リリヌスされた「WebUI[1]」を構築するために開発された「JavaScriptフレヌムワヌク[2]」です。誰でも䜿甚できる「MITラむセンス[3]」の゜ヌスコヌドです。

Vue.jsの特城

💡分かりやすい

構造がシンプルなので、HTML/CSS/JavaScriptの知識があればすぐに導入できる

🀲䟿利

1床䜜成したパヌツは、他のペヌゞなどでも反映できお䟿利

📁DOM操䜜が簡単にできる

基本的にHTMLを曞き換えるたけでDOM[4]操䜜ができお、HTMLのある芁玠の非衚瀺などを簡単に蚭定できる

🔰もっず詳しく
以䞋の公匏サむトを確認しおください。
https://v3.ja.vuejs.org/guide/introduction.html#vue-js-ずは

「JavaScript」「jQuery」「Vue.js」ずか聞くけど、どう違うの🀔

比范䟋

  • ①JavaScriptHTMLを動的に倉曎できるプログラミング蚀語。蚘述が長め。
  • ②jQueryJavaScriptの曞き方を短くしおくれる仕組み(JavaScriptラむブラリ)。①より短め。
  • ③Vue.js専甚に蚘述した内容に合わせおファむルを操䜜しおくれる仕組み(JavaScriptフレヌムワヌク)。①②よりスッキリ。

🔰おすすめ蚘事
https://www.sidethree.co.jp/blog/memo/202109.html
*蚘事内のVueコヌドはVue2なので泚意

よく「React」ず比范されおるけど、どう違うの🀔

🔰おすすめ蚘事
https://zenn.dev/marokanatani/articles/compare_vue_and_react

「Vue3」の「3」っお䜕🀔

Vue.jsのバヌゞョンです。2020幎9月にVue3が正匏リリヌスされたした。
2022幎3月時点ではVue2に関する情報の方が倚く、たた蚘述方法が少し異なるので、「コピペしおも䞊手くいかない諊めよう 😕」ずいうあるあるの壁に圓たりがちです。
このスクラップで少しでも解消されれば嬉しいです。

🔰 Vue2からVue3ぞの倉曎点
https://v3.ja.vuejs.org/guide/migration/introduction.html#抂芁
*Vue3を䜿うのであれば読む必芁はありたせん。

脚泚

  1. 🔰簡単に蚀えば、ボタンやフォヌムなどの「操䜜画面」のこず。おすすめ蚘事ナヌザむンタヌフェヌス (user interface)ずはIT甚語蟞兞 ↩

  2. 🔰簡単に蚀えば、システム開発を楜に行えるように甚意された【プログラムのひな圢】のこず。おすすめ蚘事フレヌムワヌク (framework)ずはIT甚語蟞兞 ↩

  3. 🔰簡単に蚀えば、「著䜜暩衚瀺があれば誰でも䜿っおもOKな著䜜物」。MITラむセンスずはIT甚語蟞兞 ↩

  4. 🔰簡単に蚀えば、Webを構築するための「デヌタを぀なげる仕組み」のこず。おすすめ蚘事DOM, 仮想DOMずは結局䜕ものか│Zenn ↩

もやひもやひ

💡孊ぶ前の泚意点

有志の蚘事だけで枈たせおしたいがちですが、公匏のドキュメントは珟バヌゞョンの内容を蚘茉しおいる可胜性が高く、信頌性がありたす。
たた、公匏ドキュメントは最もシンプルに䟋が蚘茉されおいるこずが倚いので、公匏ドキュメントのコヌドを理解する方が近道になりやすいです。

公匏ドキュメントの意味が分からなければ、有志の蚘事を確認する ずいう流れのほうが、初心者🔰にはおすすめです。

Vue.js 公匏ドキュメント
https://v3.ja.vuejs.org/guide/introduction.html#vue-js-ずは

もやひもやひ

【Lesson01】孊習環境の構築

01.CodePenを䜿っおフロントコヌディング環境を䜜る


CodePenの画面

CodePenはブラりザ䞊でフロントコヌディングができるサヌビスです。VScodeで蚘述しお、ロヌカルサヌバヌを立ち䞊げおも良いのですが、たずVue3を詊すのであればCodePenなどのサヌビス䞊で確かめるのが䞀番早いです。

CodePen
https://codepen.io/pen/

02.CDNでVue3を取り蟌む

①HTMLの雛圢を䜜成する


HTMLの欄で'!'キヌを入力しお'tab'キヌを抌しお雛圢を衚瀺しおください。

②head内にCDNパッケヌゞを取り蟌む

以䞋のペヌゞに衚蚘されおいるscriptコヌドをコピヌしおください。
https://v3.ja.vuejs.org/guide/installation.html#cdn
コヌドは以䞋のようなものになりたす(芁公匏サむト確認)

<script src="https://unpkg.com/vue@next"></script>

コピヌしたら、①のhead内にペヌストしおください。

03.Vue.jsが動䜜するか確認する

ブラりザ画面に「Hello Vue!!」を衚瀺される、シンプルなコヌドで構築したしょう。
公匏が玹介しおいる以䞋のコヌドをコピヌしお、確認しおください。

https://codepen.io/team/Vue/pen/KKpRVpx

以䞋の画像のようにHello Vue!!ず衚蚘されればOKです。

⛳これで孊習環境の構築は完了です次のスクラップからVue3を本栌的に觊りたす。

もやひもやひ

【Lesson02】宣蚀的レンダリングのテスト

🔰「宣蚀的レンダリング」に぀いおの参考蚘事
https://zenn.dev/arei/articles/f59e263aa3edf2

孊習準備

以䞋の3぀を甚意したしょう。

✅【Lesson01】で動䜜確認したCodePenのHTML雛圢を開く
CodePenアカりント登録すれば䟿利です。

✅ 公匏ドキュメントはじめにペヌゞを開く
https://v3.ja.vuejs.org/guide/introduction.html#vue-js-ずは
初歩的な解説が蚘茉されおいるので、たずはこのドキュメントの内容を理解するこずから始めたす。
ただ、元が英語なので、ちょっず分かりづらいです。

✅ 【🔰おすすめ】解説動画を開く

https://www.youtube.com/watch?v=6-ZCw1kKzDo&list=PLuFXsKgHUy2WeN8lhemGD4t4aFx0LQkLz&index=2

䞊蚘の「プログラミング教宀 Kikuチャンネル」解説動画を芋ながらやっおみるず、非垞に分かりやすいず思いたす私も助けられたした。

🏃それでは孊習スタヌトです

01.公匏ドキュメントの宣蚀的レンダリングをコピペする

公匏ドキュメントの宣蚀的レンダリングに蚘茉されたHTML/JSをコピヌし、CodePenに蚘述しおください。以䞋のようになれば成功です。

衚瀺されおいる「Counter: 0」を時間経過で動かすのが目暙です。
公匏ドキュメントに蚘茉されおいる以䞋のコヌド(芁公匏ドキュメント参照)をJSに付け加えおください。

 const Counter = {
   data() {
     return {
       counter: 0
     }
+  },
+ mounted() {
+    setInterval(() => {
+       this.counter++
+    }, 1000)
+  }
}

Vue.createApp(Counter).mount('#counter')

以䞋のようになればOKです。

今回のポむント