Vue.jsの基本概念と実践ガイド

Vue.jsの概要

Vue.js（読み方: /vjuː/、ビュー）はユーザーインターフェースを構築するためのプログレッシブフレームワークです。他の大規模フレームワークとは異なり、Vueはボトムアップで段階的に適用できるように設計されています。Vueのコアライブラリはビューレイヤーにのみ焦点を当てており、習得が容易で、サードパーティライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンや各種サポートライブラリと組み合わせることで、Vueは複雑なシングルページアプリケーションの開発も完全にサポートします。公式サイトは: https://jp.vuejs.org/

Vue.jsの特徴

  • シンプルさ: HTMLテンプレートとJSONデータ、そしてVueインスタンスを作成するだけです。
  • データ駆動: テンプレート式と算出プロパティの依存関係を自動的に追跡します。
  • コンポーネント化: 分離された再利用可能なコンポーネントでインターフェースを構築します。
  • 軽量: 約33.46KB（min+gzip）、依存関係なし。
  • 高速: 正確で効率的な非同期バッチDOM更新。
  • モジュールフレンドリー: NPMまたはBowerでインストールし、既存のワークフローにシームレスに統合。

以下の機能を好むなら、Vue.jsも気に入るはずです:

  • 拡張可能なデータバインディングメカニズム
  • ネイティブオブジェクトをモデルとして使用
  • 明確で分かりやすいAPI
  • コンポーネントベースのUI構築
  • 複数の軽量ライブラリの組み合わせ使用

Vue.jsの主要ディレクティブ

テキストの表示

テキストの一部を置き換えるには、変数を{{}}で囲みます:

<div id="app">
    {{ greeting }}
</div>
const app = Vue.createApp({
    data() {
        return {
            greeting: 'こんにちは、Vue'
        }
    }
}).mount('#app')

テキスト全体を置き換えるには、v-textディレクティブを使用します。以下の例では「サンプルテキスト」がgreetingの内容に置き換えられます:

<div id="app">
    <h2 v-text="greeting">サンプルテキスト</h2>
</div>
const app = Vue.createApp({
    data() {
        return {
            greeting: "こんにちは、世界"
        }
    }
}).mount('#app')

生のHTML

二重中括弧はデータを通常のテキストとして解釈しますが、生のHTMLを挿入する場合はv-htmlディレクティブを使用します:

<div id="app">
    <p v-html="htmlContent"></p>
</div>
const app = Vue.createApp({
    data() {
        return {
            htmlContent: '<span style="color:blue">青いテキスト</span>'
        }
    }
}).mount('#app')

属性のバインディング

要素に属性をバインドするには、v-bindディレクティブを使用します。完全な構文はv-bind:属性名="式"で、省略形は:属性名="式"です。これは一方向バインディングです:

<div id="app">
    <h2 v-bind:title="pageTitle">Vue.js 実践ガイド！</h2>
</div>
const app = Vue.createApp({
    data() {
        return {
            pageTitle: "Vue.js 実践ガイド"
        }
    }
}).mount('#app')

条件付きレンダリングとループ

条件付きレンダリングにはv-ifディレクティブを使用します:

<div id="app">
    <p v-if="isVisible">
        表示されています！
    </p>
</div>
const app = Vue.createApp({
    data() {
        return {
            isVisible: true
        }
    }
}).mount('#app')

v-elseディレクティブを使用してv-ifのelseブロックを表すこともできます。v-elseはv-ifまたはv-else-if要素の直後に配置する必要があります:

<div v-if="status === 'success'">
    操作は成功しました
</div>
<div v-else-if="status === 'warning'">
    警告が発生しました
</div>
<div v-else-if="status === 'error'">
    エラーが発生しました
</div>
<div v-else>
    ステータスが不明です
</div>

リストのレンダリングにはv-forディレクティブを使用します。構文は(item, index) in データです:

<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">
            {{ item.name }}
        </li>
    </ul>
</div>
const app = Vue.createApp({
    data() {
        return {
            items: [
                { name: '項目1' },
                { name: '項目2' },
                { name: '項目3' }
            ]
        }
    }
}).mount('#app')

ユーザー入力の処理

ユーザーとアプリケーションの対話には、v-onディレクティブを使用してイベントリスナーを追加します。@記号を使用してv-onを省略することもできます:

<div id="app">
    <p>
        {{ message }}
    </p>
    <button v-on:click="flipMessage">
    <!-- <button @click="flipMessage"> -->
        メッセージを反転
    </button>
</div>
const app = Vue.createApp({
    data() {
        return {
            message: "こんにちは世界"
        }
    },
    methods: {
        flipMessage() {
            this.message = this.message.split('').reverse().join('')
        }
    }
}).mount('#app')

Vue.jsは、DOMイベントの詳細を処理せずに純粋なデータロジックのみを操作するためのイベント修飾子を提供しています:

  • .stop - イベントの伝播を停止
  • .prevent - デフォルトのイベント動作を防止
  • .capture - イベントキャプチャモードを使用
  • .self - イベントが要素自体から発火した場合のみトリガー
  • .once - イベントを一度だけトリガー
  • .passive - パッシブイベントリスナーを追加

フォーム入力とアプリケーション状態の双方向バインディングを実現するには、v-modelディレクティブを使用します:

<div id="app">
    <p>あなたの名前: {{ userName }}</p>
    名前を入力: <input type="text" v-model="userName">
</div>
const app = Vue.createApp({
    data() {
        return {
            userName: "ゲスト"
        }
    }
}).mount('#app')

要素の表示と非表示

要素の表示と非表示を切り替えるには、v-showディレクティブを使用します。式の真偽値に基づいて要素の表示状態を切り替えます:

<div id="app">
    <img src="sample.jpg" v-show="showImage">
</div>
const app = Vue.createApp({
    data() {
        return {
            showImage: true
        }
    }
}).mount('#app')

コンポーネント間の通信

親から子へのデータ渡し (Props)

<!-- 親コンポーネント -->
<template>
  <div>
    <h1>親コンポーネント</h1>
    <child-component :user-name="parentName" :user-age="30"></child-component>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentName = ref('山田太郎')
</script>
<!-- 子コンポーネント -->
<template>
  <div>
    <h1>子コンポーネント</h1>
    <p>親からのデータ: {{ userName }}</p>
    <p>年齢: {{ userAge }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  userName: String,
  userAge: Number
})
</script>

子から親へのイベント通知

<!-- 親コンポーネント -->
<template>
  <div>
    <h1>親コンポーネント</h1>
    <child-component @notify="handleNotification"></child-component>
    <p>子からの通知: {{ notification }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const notification = ref('通知なし')

const handleNotification = (message) => {
  notification.value = message
}
</script>
<!-- 子コンポーネント -->
<template>
  <div>
    <h1>子コンポーネント</h1>
    <button @click="sendNotification">親に通知を送信</button>
  </div>
</template>

<script setup>
const emit = defineEmits(['notify'])

const sendNotification = () => {
  emit('notify', '重要な更新があります！')
}
</script>

子コンポーネントのsendNotification関数が呼び出されると、親コンポーネントのhandleNotificationメソッドがトリガーされ、パラメータ'重要な更新があります！'が渡されます。defineEmits(['notify'])は子コンポーネントがトリガーできるnotifyイベントを定義し、emit('notify', 'データ')でnotifyイベントをトリガーしてデータを親コンポーネントに渡します。親コンポーネントは@notify="handleNotification"カスタムイベントを使用して子コンポーネントからのデータを受け取ります。

5月22日 11:32 投稿

ホットタグ

©2026 異端開発室