2023年4月14日(金)2023年11月21日(火) 投稿者: iwbjp

Vue.jsの「はじめに」が理解できなかった初心者向け解説

Vue.jsの「はじめに」は初見殺し
Vue.js用の開発環境の作成
ファイルをビルドするには
開発環境のファイル構成
Vueファイルの編集について
Vue.jsの学習はチュートリアルがオススメ

Vue.jsの「はじめに」は初見殺し

Vue.jsを使ったことがない人に「何か良い参考書はありませんか」と聞かれたので、基礎だけなら公式サイトにドキュメントがあると返信したのだが、「はじめに」の最小限のサンプルを見たが、よくわからなかったと回答があった。

確かにVue.jsの公式サイトの「はじめに」には、いきなり以下のコードが書かれており初見殺しになっている。

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

これだと理解しづらいので最初の学習手順について記事に書きました。

Vue.js用の開発環境の作成

Vue.jsの学習には開発環境の作成が必要です。

Vue.jsはCDNでJavaScriptファイルを読み込んで実行させることも可能ですが、一般的には開発環境をnpmでインストールして作業します。

npmはターミナル(黒い画面)で「npm -v」を実行してもバージョンが表示されない場合はインストールされていないのでNode.jsの公式サイトで「推奨版」のボタンを押してインストールします。

インストールしたらターミナルで以下のコマンドを実行して開発環境を作成します。

npm create vite@latest my-vue-app -- --template vue

開発環境にはViteが使われています。

Vite(ヴィート)は現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

※ Vue.jsの公式サイトだと「npm init vue@latest」を実行するよう書かれていますが、初心者向きではないのでオススメしません。

実行したら以下のコマンドを実行するよう表示されるので実行してください。

cd my-vue-app
npm install
npm run dev

npm run devを実行するとサーバーが起動して以下のような表示が出ます。

  VITE v4.2.1  ready in 441 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Local: のURLにアクセスするとサンプルのページが表示されます。

試しに「count is 0」のボタン部分を押してみてください。

カウントが増えて「count is 1」になります。

ファイルをビルドするには

ファイルをビルド(HTML, CSS, JavaScript, 画像などの生成) するには「npm run build」を実行します。

「npm run build」を実行するとdistディレクトリにHTMLファイルなどが生成されます。

index-4e2cce79.js などのランダムの英数字部分はキャッシュ対策のために自動的に付きます。

「npm run build」で生成したファイルのassetsディレクトリへのパスは /assets/〜になっているため、./assets/ にしたい場合はvite.config.jsに「base: ''」を追記します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: '',
  plugins: [vue()],
})

ビルドしたファイルをFTPなどでアップロードすればブラウザで誰でも閲覧可能になります。

https://iwb.jp/s/javascript-vuejs-explanation-for-beginners/

開発環境のファイル構成

my-vue-appディレクトリ内の第一階層のファイル構成は以下のようになっています。

dist
index.html
node_modules
package-lock.json
package.json
public
README.md
src
vite.config.js

WebサイトをVue.jsで作成する場合、srcディレクトリ内のファイルを編集します。

srcディレクトリ内の第一階層のファイル構成は以下のようになっています。

App.vue
assets
components
main.js
style.css

srcディレクトリ内にはhtmlファイルは存在しません。

main.js内の処理でindex.htmlにApp.vueを読み込ませて表示させるからです。

Vueファイルの編集について

Vue.jsではHTMLはvueファイル内に記述します。

試しにApp.vueを開いて中身を見るとJavaScript, HTML, CSSが記述されていることが確認できます。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

App.vueを以下のようにするとHelloだけが表示されます。

<template>
  <h1>Hello</h1>
</template>

vueファイル内のHTML部分の一番外側はtemplateタグで囲みます。

CSSはmain.js内の「import './style.css'」で読み込んだものが適用されているので、この部分を削除すればstyle.cssは適用されなくなります。

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

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

App.vueの内容はmain.js内の「createApp(App).mount('#app')」でindex.htmlに入れられて表示されます。

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

ちなみにApp.vueを以下のようにするとボタンをクリックするために数字が増えるカウンターが作成できます。

少しコードが違いますが、「はじめに」のカウンターのコードを流用しています。

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">
    Count is: {{ count }}
  </button>
</template>