Vue基本②（ファイル、JSのデータ表示方法）

では今回から数回にわたってVueの特徴を見ていきます。
まず初めにメインファイルはindex.htmlで、その中の

 <script type="module" src="/src/main.js"></script>

でsrcフォルダのmain.jsのJavaScriptが実行されます。
ここまでは普通のJavaScript。
そしてmain.jsの内容は最初に名前付きimport文で

import { createApp } from 'vue'

を書き込みます。
これはViteがnode_modulesの中にあるVueフォルダの中のcreateAppからimport（輸入）して使えるようにしています。
このcreateAppは関数になっていて、

import { createApp } from 'vue'
createApp()

このように関数として使用することができます。
このcreateApp()関数を呼び出すことがVueでアプリを作る第一ステップになります。
そして前回コンポーネントの説明をしましたが、このcreateApp()の関数に引数として単一ファイルコンポーネントを渡す必要があります。
srcフォルダ内にApp.vueコンポーネントファイルを作成し、JavaScriptにデフォルトインポート文でApp.vueファイルを呼び出して表示するようにします。

import App from './App.vue'

これをmain.jsに追加し、createApp()の関数に引数として入れます。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App)

これはざっくり言うとViteがJavaScriptでいい感じにコンポーネントが使えるようにしている処理になります。
（VueのファイルをJavaScriptのデータとして使用することができる）
createApp()の引数のコンポーネントを基にしてVue.jsの基本であるユーザーインターフェースを作ると言う処理が行われるので必ず必要になる。
そしてここでユーザーインターフェースは作られただけで表示はされません。
表示する処理を書くには

const app = createApp(App)
app.mount('#app')

この.mount()にCSSの文字列を入れる必要があります。
index.htmlの

<div id="app"></div>

このid="app"を.mount()に入れて.mount('#app')のように書きます。
まとめると

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

このような書き方になります。

次に具体的なユーザーインターフェースをどこで組み立てていくのかを紹介します。
App.vueファイルが一番大きなコンポーネントで、このApp.vueは

<script></script>
<template></template>
<style></style>

の三つのブロックで構成され、HTMLのタグのようなもので書いていきます。
厳密にscriptタグにはsetupを入れ（HTMLの属性のようなもの）
ここにはJavaScriptを書いていきます。

<script setup>
const userName='nyan'
console.log(userName)
</script>

templateタグにはHTMLを、styleタグにはCSSを書いていきます。

<template>
<h1>MainTitle</h1>
</template>

<style>
h1{
color: green;
}
</style>

ここまでできたら一度ブラウザで見てみましょう。
ターミナルでnpm run devを入力してブラウザで見ると

このようにh1タグで書かれたMainTitleとstyleのCSSが当たっていて、検証ツールで見るとconsole.log(userName)も出力されています。

ちなみにElementsを見てみるとHTMLだけだとHTMLで記載したものが表示されますが、Vueによって様々な処理が実行されています。

で、よく見ると先程main.jsに記載した

createApp(App).mount('#app')

ここの#appで入れた

 <div id="app"></div>

が入っています。（大元はHTMLなので当たり前ですが）

そして３つの

<script></script>
<template></template>
<style></style>

を入れると言いましたが、scriptとstyleはなくても表示はされます。
templateは無いとエラーになってしまいますのでtemplateは必須になります。

先程、VueのファイルはViteでJavaScriptに変換されると言いましたが、
こちらも検証ツールで見れます。
VueのファイルにはJavaScriptでいろいろ書かれています。
これをViteが自動で変換してくれているということです。

話が逸れましたが、.vueコンポーネントファイルで非常に重要なのは
<script></script>
<template></template>
になり、うまく組み合わせることによって複雑なユーザーインターフェースを作ることが可能になります。

では次にJavaScriptの<script>と<template>を組み合わせる方法を記載していきます。
App.vueファイルを一度綺麗にして

<script setup>
const title = 'Nyan programer'
</script>

<template>
  <h1>Title: {{ title }}</h1>
</template>

<style>
h1 {
  color: green;
}
</style>

このように<script>で定数として設定したtitleを<template>内の使用したいところに{{}}で入れ込んで保存をするとリロードしなくてもViteが自動的に処理をして表示することができます。（ホットモジュールリプレイスメント）
※保存しても変化無い場合はリロードしてください。

これはもちろん変数も可能で、下記のようにできます。

<script setup>
const title = 'Nyan programer'
let number = 9999
</script>

<template>
  <h1>Title: {{ title }}</h1>
  <h2>Number: {{ number }}</h2>
</template>

<style>
h1 {
  color: green;
}
h2 {
  color: red;
}
</style>

そしてこの{{}}の中にはJavaScriptの式も入れることができます。

<h2>Number: {{ number - 1000 }}</h2>

これは

let number = 9999 - 1000

これと同じ意味になります。

次回からクリックされた時の処理を実行する方法から進めていきます。