【Vue.js】Vue.jsの基本をおさらいしてみる

ライフマップ開発チームの石上です。
つい最近Vue.jsの学習を始め、ちょいちょいプロジェクトでも使い始めました（かなり今更ではありますが、いかんせん今まで必要となる場面があまり無く…）

備忘録・社内資料も兼ねて、この記事ではVueの簡単な解説から導入、マスタッシュ構文による文字列出力・JavaScript式の展開までを行っていきたいと思います。

Vue.jsって？

Vue.jsはJavaScriptフレームワークの一つです。
シンプルな構文や双方向データバインディング、SPA開発の行いやすさなどの特徴が挙げられます。他のフレームワークと比較して学習コストが低く、小規模から大規模なプロジェクトまで広く適用されています。ここ数年需要が伸びており、日本国内でも一定のシェアを誇っています。

非常にざっくりしていて理解が浅いところもありますが、概要としてはこんな感じでしょうか。

Vue.jsを導入してみる

では早速Vue.jsを導入してみましょう。導入方法はいくつかありますが、一番お手軽なのはCDN形式でのファイル読み込みですね。
HTMLファイルを用意したら、bodyの閉じタグ直前に以下のように記述しましょう。

<!-- Vue.jsをCDNから読み込む -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

これでVue.jsの使用準備が完了しました。
（その他の方法は公式サイトでも解説されているのでよろしければぜひ。）

文字列をデータバインディングして出力してみる

Vue.jsでは「マスタッシュ構文」と呼ばれる記法が採用されており、データバインディングの基本の形式になります。（そもそもデータバインディングってなに？という方は、こちらの記事をどうぞ。）

これだけではピンと来ないと思いますので、試しにコードを書いてみましょう。
"app"というidの要素の中に、Vue側で定義した文字列「Hello Vue.js!」を出力させてみます。先にHTML・Javascriptのサンプルコードだけ掲載します。

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

const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js'
  })
})
app.mount('#app')

---

コードの解説をしていきますね。
まずはVueの適用範囲を設定する必要があります。新規Vueインスタンスを定数に格納し、続けて「定数名.mount('#適用箇所のID')」という風に書けば設定完了です。

// #app内がVueの適用範囲
const app = Vue.createApp({

})
app.mount('#app')

次に、Vueインスタンス内にdataプロパティを作り、画面上に表示させたい値を格納しておきます。ここでは「message: 'Hello Vue.js'」が該当します。

const app = Vue.createApp({
  // プロパティとその中身をdata内で定義しておく
  data: () => ({
    message: 'Hello Vue.js'
  })
})
app.mount('#app')

最後はHTMLに移ります。出力したい文字列のプロパティを、{{}}で囲んで書いてあげましょう。ここでは、div要素内の<p>{{ message }}</p>が該当します。

<div id="app">
  // 出力したい文字列のプロパティを、{{}}で囲む
  <p>{{ message }}</p>
</div>

「message」に設定した値（＝Hello Vue.js!）がブラウザに出力されたら成功です！

JavaScript式を展開してみる

さて、マスタッシュ構文ではJavaScriptの式を展開することもできます。例えば、HTMLにて以下のように書いてみてください。

<div id="app">
  <p>{{ 2 + 3 }}</p>
</div>

通常であれば「{{ 2 + 3 }}」という文字列がそのままブラウザに出力されますが、Vueの適用範囲ではマスタッシュ構文として扱われますので、この数式の解である「5」が出力されることになります。

その他、三項演算子を用いることもできます。

<!-- ユーザーのスコアが80より上かどうかを判定し表示する -->
<div id="app">
  <p>{{ userScore > 80 ? '合格' : '不合格' }}</p>
</div>

ただし、単一の式しか含めることができない点には注意が必要です。なので、例えば以下のような式は正常に動きません。

//  これは動きません！
{{ if (true) { return 'OK!' } }}

終わりに

文字通り、基本中の基本の内容でたいへん恐縮です。
次回は、Vue.js特有の属性であるディレクティブについての記事を書きたいと思います。

ではまた次回！石上でした〜