yarn create vite で自動作成されるコードでVueを解説してみる
- 説明
- yarn create vite をするとアプリのひな形が作られる
- 参考ページとしてHelloWorld.Vueなどが入っている
- その内容をもとにVue3、特にCompositionAPIの解説をしてみる（学習のため）
ひな形についての基礎知識
-
基本はHTMLなので
index.htmlを表示している- 中には以下の二つの記述
<div id="app"></div> <script type="module" src="/src/main.ts"></script>- ポイントは
- idがappの要素があること(伏線)
- /src/main.tsを読み込んでいること
main.ts
- 名前が出てきたのでsrc/main.tsを見てみる
- これもまたシンプルで以下の内容
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
- 各行の意味は
- vueからcreateAppという名前でexportされたものをimport
- ./style.cssをimport
- ./App.vueからexport defaultをimport
- import時につけた名前はApp
- AppをもとにcreateAppして、appというidを持った要素にmount(ここさっきの伏線回収)
App.vue
- また名前のでてきたApp.vueについて見ていく
- ここはいろいろ書かれているが、おおまかな構造は以下の３つのタグ
- script
- template
- style
- scriptとstyleはHTMLを知っていれば見たことあるはず
- 見たことのないtemplateはvueの機能
- templateの中を見ていこう
- 気になるのは（見たことがないのは）HelloWorldタグ
- 実はこれはscriptに書いてある以下と関係している
import HelloWorld from "./components/HelloWorld.vue";
components/HelloWorld.vue
- また上で現れたHelloWorld.vueを見ていこう
- これも大まかな流れはApp.vueと同様
- script
- template
- style
- ここからがVueの機能を紹介する本番
template内のVueの機能紹介
- templateを上から見て気になる所を選んで見ていこう
- templateの中で気になる部分はこれくらいだと思う
- 次はscriptのほうを見ていこう
script内のVueの機能紹介
-
defineProps<{ msg: string }>()- ここを紹介するために、HelloWorld.vueがApp.vueでimportされるとどうなるかを説明する
- App.vueでHelloWorld.vueをimportすると、
<HelloWorld>タグが使える - そのタグの中身はHelloWorld.vueのtemplateで定義されているもの
- そこに引数を渡そうとするときに
definePropsが使われる - つまり
defineProps<{ msg: string }>()によって<HelloWorld>のなかでmsg=...という属性が使えるようになる - （このtemplateを読み込んで、次のtemplateを書くという作業は入れ子構造なので、小さい部品から徐々に大きくという設計ができる。AtomicDesign)
-
const count = ref(0)- refはリアクティブな変数を定義するのに使われる
- リアクティブとは、その変数が書き換わったときに、表示も更新されるもの
- （逆にリアクティブでないと、変数が更新されてもページでの表示は勝手には変わらない）
- これは変数１個だったが、reactiveという関数を使用すると、JavaScriptのオブジェクトを丸ごとリアクティブにもできる
最後に
ここでは本当にHelloWorld.vueにある機能しか紹介しなかった。
しかし、Vueにはほかにも色々な機能があるので、探して使ってみてほしい。(computed, watchなど)
というか私も使いこなしたい。
それと、今回の機能というか書き方はCompositionAPIというVueの新しい記述方法で、vue3では主流になるらしい。
vue2でnew Vue({el: "#app", ...})などと書いていた人からは、大分違和感があると思うが、例えば今回の例だと、リアクティブな変数が明示的になるなど、分かりやすくなることもあると思う。