vue.js入門-プログラミング初心者向け解説-

vue.jsをこれから始める方向けに解説していきます。あまり用語がわからないという人向けに解説しています。

vueの特徴

vueの特徴は下記２つになります。

• 宣言的レンダリング: 宣言的レンダリングは事前にこのパーツにはこういう処理をしますと宣言し、操作すること。例えばidがappのdivにhelloという文字をだします。みたいに宣言し、処理をします。
• リアクティビティー: Vue は JavaScript の状態の変化を自動的に追跡し、変化が起きると効率的に DOM を更新します。

SFCとは？

SFC (Single File Components)は、vue.js特有のファイル形式でHTML、JavaScript、および CSS を単一のファイル内にまとめることができる構造を指します。これにより、コンポーネントベースの開発を容易にし、プロジェクトの構造を整理し、保守しやすくします。各SFCは .vue 拡張子を持つファイル内に配置され、以下の3つのセクションで構成されます。

• templateセクション：このセクションには、コンポーネントのHTMLマークアップが含まれています。コンポーネントの見た目や構造を定義します。
• scriptセクション：このセクションには、コンポーネントのロジックが含まれています。データ、メソッド、コンピューテッドプロパティなど、コンポーネントの動作を定義します。
• styleセクション：このセクションには、コンポーネントのスタイルが含まれています。CSS またはプリプロセッサ（例：SCSS、LESSなど）を使用してコンポーネントのデザインを定義します。

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

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

<style scoped>
button {
  font-weight: bold;
}
</style>

2つのAPIスタイル

上記のSFCは.vueでビルドできる場合に使える形式ですが、railsなどに組み込む場合は下記２種類の方法があります。

• Options API
• Composition API

選び方としては公式は基本どちらも同じとしつつ、

• ビルドツールを利用しない予定の場合や、プログレッシブエンハンスメントなどの複雑性の低いシナリオで主に Vue を使う予定の場合は、Options API を選択します。
• アプリケーション全体を Vue で構築する予定の場合は、Composition API と単一ファイルコンポーネントの組み合わせを使用します。

としており、railsなどに組み込む場合は前者のOptions APIのほうが向いています。railsなど他フレームワークに組み込む際は.vueのファイル形式ではない事が多いため。また、Options APIのほうがオブジェクト指向プログラミングなのでその辺に馴染みのある方はおすすめ。

簡単なvueのコード解説

下記はoptions APIでの記述になります。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script type="module">
import { createApp } from 'vue'

createApp({
  // component options
  // declare some reactive state here.
  data(){
    return{
      message: "hello"
    }
  }
}).mount('#app')
</script>

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

すべての Vue アプリケーションは createApp 関数で新しい アプリケーションのインスタンス を作成することから始まります。

上記ではまずCDNでvuejsをおとしてきて、VueからcreateAppを宣言しています。このcreateappとdomを紐付けることでVueが使えます。（createAppはオブジェクト）

dataオプションは最初のステータスを返す関数。上記ではmessageにhelloを入れて返すように宣言しています。

そのcreateAppをmountで#appに紐づけてhelloを表示させています。