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>
Vue.jsの学習はチュートリアルがオススメ
Vue.jsの学習するのにドキュメントを読むことからはじめる人が多いですが、この記事を読んだ人であれば開発環境の作成方法およびApp.vueに書いたものが反映されることを学習しているのでVueのチュートリアルからはじめることをオススメします。
Vueのチュートリアルは全15ページ構成で、すべて学習すればVue.jsの基本が一通り理解できます。
右上のエディタにコードを書くと右下のPREVIEWに表示されます。
チュートリアルのAPI選択はデフォルトだとOptionsになっていますが、最近はCompositionで作成するのが主流なのでCompositionの選択に切り替えてください。
Vue.jsの開発環境があれば実際のブラウザの表示なども確認できますし、チュートリアルに書かれていないことも試せるので学習の幅が広がります。