こんにちは。21新卒のエンジニアの劉東慶です。jQueryの時代が過去になりつつある現在、Angular、React、Vueの3大フレームワークが主流になっています。最近ある案件でもVueを使っている例があるので、今日は最新のVue3をご紹介していきます。

まずはVueJSの導入です、以下のCDNの方法がお勧めです、下記の一行だけで済みます。

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

ではさっそく簡単にVueを試してみましょう。

<div id="app">
<p>{{name}}</p>
</div>

<script>
const app = {
setup(){
let name = '一郎'

return{
name
}
}
}

Vue.createApp(app).mount('#app')
</script>

上記のHTMLを実行したら、画面で「一郎」が表示されます。

実際のフロントエンドプロジェクトでは、Vue CLIを使ってプロジェクトを構築します。npmを使うため、nodejsのインストールは前提です。

順に下記のコマンドを実行すれば自動的にプロジェクトが構築されます、かなり簡単です。

⑴Vue CLIのインストール

npm install -g @vue/cli

⑵Vue3プロジェクトの構築

vue create app

今回はVue3のプロジェクトを構築するため、ここで二行目の「Default (Vue 3) ([Vue 3] babel, eslint)」を選択します。

⑶プロジェクトの実行

cd app
npm run serve

ローカルURLにアクセスし、サイトを見ましょう

ワクワクしますよね！初めてのVueプロジェクト！

ファイルの構造の説明が正式のドキュメントの参考になります

https://cli.vuejs.org/guide/

パス「app\src\components\」の配下にMyFirstVue.vueファイルを作ります。vueファイルが<template>、<script>、<style>の三つの要素から構造されています。<template>がhtml部分、<script>がJavaScript（またはTypeScript）の部分、<style>がスタイルの部分です。

MyFirstVue.vue

<template>
<h3>名前：{{person.name}}</h3>
<h3>年齢：{{person.age}}</h3>
<h3>
趣味：
<ul>
<li v-for='(h,index) in person.hobby' :key='index'>
{{h}}
</li>
</ul>
</h3>
<button @click="changeInfo">変更</button>
</template>

<script>
import { reactive } from 'vue'

export default {
name:'MyFirstVue',
setup(){
let person = reactive({
name:'一郎',
age:20,
hobby:['ゲーム', '読書']
})

function changeInfo(){
person.name='二郎'
person.age=18
person.hobby=['バスケ','漫画']
}

return{
person,
changeInfo
}
}
}
</script>

<style>
</style>

変更ボタンを押したら、情報が変わります

いかがでしたでしょうか。

簡単なVue3が分かればある程度Vue3のプロジェクトでも読み解けるようになるので、Vue3に興味がある方の助けになっていれば幸いです。