Vue.js、アプリケーションの初期化とDOM操作基本概念の基本

Vue.js
2025.01.25

Vue.jsの基本概念を学ぶ

data：データオブジェクトを定義する

Vue.jsでは、コンポーネントが保持するリアクティブなデータをdataオプションで定義します。dataはメソッドであり、オブジェクトを返す必要があります。

export default {
  data() {
    return {
      title: "Vue.jsの基本",
      counter: 0,
    };
  },
};
JavaScript

ポイント:

  • テンプレート内でデータを参照するには、{{ title }}や{{ counter }}のような構文を使用します。
  • リアクティブデータは変更されると、自動的にビューに反映されます。

props：親コンポーネントからのデータを受け取る

propsは、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。子コンポーネントはpropsオプションで受け取るデータを宣言します。

// 親コンポーネント
<ChildComponent message="こんにちは、Vue!" />

// 子コンポーネント
export default {
  props: {
    message: String,
  },
};
JavaScript

ポイント:

  • propsは親子間のデータの流れを制御します。
  • データ型を指定することで、受け取るデータの形式を明確にできます。

methods：コンポーネントの動作を定義する

methodsは、イベントハンドリングやロジックを記述するために使用されます。methods内の関数は、テンプレートやスクリプト内で呼び出せます。

export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
  },
};
JavaScript

ポイント:

  • テンプレートでイベントをバインドするには、@click=”increment”のように記述します。
  • thisを使用してdata内のデータにアクセスできます。

computed：計算プロパティの活用

computedは、依存するデータの変更に応じて自動的に再計算されるプロパティを定義します。これにより、効率的に動的データを処理できます。

export default {
  data() {
    return {
      firstName: "太郎",
      lastName: "山田",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
JavaScript

ポイント:

  • computedはキャッシュされるため、パフォーマンスが向上します。
  • テンプレートでは{{ fullName }}のように使用できます。

Composition APIの導入

Vue 3では、従来のオプションAPIに加えて、新しいComposition APIが導入されました。これにより、より柔軟でモジュール化された方法でロジックを管理できます。

ref()：単一のリアクティブデータを作成

refは、単一のデータをリアクティブにするための基本的な方法です。
テンプレートやロジック内でリアクティブな値として使用できます。

例:

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
JavaScript

ポイント:

  • refで作成されたデータは.valueを使ってアクセス・更新します。
  • テンプレート内では.valueは不要で、{{ count }}のように利用可能です。

reactive()：オブジェクト全体のリアクティブ化

reactiveは、複数のプロパティを持つオブジェクトや配列をリアクティブにする場合に使用します。

例:

import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      name: "Vue.js",
      version: 3,
    });

    const updateVersion = () => {
      state.version++;
    };

    return {
      state,
      updateVersion,
    };
  },
};
JavaScript

ポイント:

  • オブジェクト全体をリアクティブに管理するために便利です。
  • 配列やネストされたプロパティもリアクティブに動作します。

computed()：計算プロパティの作成

Composition APIでは、computedを使ってリアクティブデータから派生データを計算します。

例:

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("太郎");
    const lastName = ref("山田");

    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};
JavaScript

ポイント:

  • computedは依存データが変更されるたびに再計算されます。
  • テンプレート内で{{ fullName }}として使用できます。

アプリケーション全体の管理とライフサイクル

Vue.jsでは、アプリケーション全体を管理し、ブラウザ上で動作させるためにライフサイクルメソッドとアプリケーションインスタンスを活用します。

createApp()：アプリケーションインスタンスの作成

createAppは、Vueアプリケーションを初期化するためのメソッドです。このメソッドは、アプリ全体のエントリーポイントとして機能します。

例:

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
JavaScript

ポイント:

  • createAppはアプリケーション全体を管理するインスタンスを生成します。
  • 一つのアプリケーションには、一つのcreateAppが基本です。

app.mount()：DOMへのマウント

mountメソッドは、アプリケーションを特定のDOM要素に関連付けて表示します。

例:

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
JavaScript

ポイント:

  • マウント対象は通常、<div id=”app”></div>のようにHTMLに記述します。
  • マウントされると、VueアプリケーションがそのDOM要素の管理を開始します。

app.unmount(): アプリケーションのアンマウント

unmountメソッドは、アプリケーションをDOMから削除する場合に使用します。これにより、VueがそのDOM要素の管理を停止します。

例:

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

// アンマウント
setTimeout(() => {
  app.unmount();
}, 5000); // 5秒後にアプリをアンマウント
JavaScript

ポイント:

  • アンマウント後、DOMは静的な状態に戻ります。
  • 特定の条件下でアプリケーションを終了させる際に便利です。

app.component(): グローバルコンポーネントの登録

app.componentメソッドを使用すると、Vueアプリケーション内で再利用可能なグローバルコンポーネントを登録できます。これにより、アプリケーション全体でどのコンポーネントからでも使用できるようになります。

例:

import { createApp } from "vue";

// グローバルコンポーネント
const MyButton = {
  template: `<button @click="handleClick">クリック</button>`,
  methods: {
    handleClick() {
      alert("ボタンがクリックされました！");
    },
  },
};

const app = createApp({});
app.component("MyButton", MyButton); // グローバル登録
app.mount("#app");
JavaScript

ポイント:

  • グローバルに登録したコンポーネントは、<MyButton></MyButton>のようにどこでも利用できます。
  • 小規模なアプリケーションでは便利ですが、コンポーネント数が多い場合はローカル登録を優先することをおすすめします。

createSSRApp()：サーバーサイドレンダリング用のアプリ作成

createSSRAppは、サーバーサイドレンダリング（SSR）に特化したアプリケーションインスタンスを作成します。SSRを使用すると、HTMLをサーバーで生成し、クライアントに提供することでパフォーマンスやSEOを向上させることができます。

例:

import { createSSRApp } from "vue";
import App from "./App.vue";

// サーバーサイド用のアプリケーションインスタンスを作成
const app = createSSRApp(App);

// サーバーサイドレンダリングエンジンに渡す
export { app };
JavaScript

ポイント:

  • createSSRAppは、クライアントサイドのcreateAppに似ていますが、SSRに適した設定を持ちます。
  • サーバーサイドレンダリングには、追加でVue Server Rendererやフレームワーク（例: Nuxt.js）が必要になる場合があります。

コンポーネントフォルダの作成と構成

Vue.jsプロジェクトでは、再利用可能なコンポーネントを効率的に管理するために、専用のフォルダを作成し、それらを適切にインポートして使用します。以下に必要なファイル、関数、機能、簡単な構成例を説明します。実際にプロジェクトを作成するとわかりやすいかと思います。

Vue.jsインストール、プロジェクトの作成
Vue.jsは、UIとSPA（Single Page Application）の構築を容易にするために設計されたオープンソースのJavaScriptフレームワークです。2014年にエヴァン・ユーによって作成され、宣言的な
pretty-cute.info

必要なファイルと機能

  1. コンポーネントファイル
    • 各コンポーネントは.vueファイルとして作成されます。
    • コンポーネント名は基本的にパスカルケース（例: MyComponent.vue）で命名します。
  2. エクスポート
    • コンポーネントをモジュールとしてエクスポートする必要があります。
    • 通常、export defaultを使用します。
  3. グローバル/ローカルインポート
    • ローカルに使用する場合は、特定のコンポーネントでインポート。
    • グローバルに使用する場合はapp.componentで登録。
  4. 基本的な機能
    • 入力（props）と出力（イベントまたはスロット）を持つ。
    • 必要に応じてスタイルをスコープ化。

コンポーネントフォルダ構成例

src/
├── components/
│   ├── Header.vue
│   ├── ParentComponent.vue
│   ├── Button.vue
├── App.vue
Bash

インポートと使用の方法

  • ローカル登録（特定のコンポーネントで使用）
<template>
  <div>
    <Header />
    <Button @click="handleClick">クリック</Button>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Button from "@/components/Button.vue";

export default {
  components: {
    Header,
    Button,
  },
  methods: {
    handleClick() {
      console.log("ボタンがクリックされました");
    },
  },
};
</script>
Vue
  • グローバル登録（アプリ全体で使用）
import { createApp } from "vue";
import App from "./App.vue";
import Header from "@/components/Header.vue";
import Button from "@/components/Button.vue";

const app = createApp(App);

// グローバル登録
app.component("Header", Header);
app.component("Button", Button);

app.mount("#app");
JavaScript

簡単なプロジェクト構成例

  • Header.vue
<template>
  <header>
    <h1>{{ title }}</h1>
  </header>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
header {
  background-color: #f5f5f5;
  padding: 10px;
}
</style>
Header.vue
  • Button.vue
<template>
  <button @click="$emit('click')">
    <slot></slot>
  </button>
</template>

<script setup>
defineProps();
</script>

<style scoped>
button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>
Button.vue
  • ParentComponent.vue
<template>
  <div>
    <Header title="Vue.jsの応用" />
    <Button @click="handleClick">クリックしてください</Button>
  </div>
</template>

<script setup>
import Header from "./Header.vue";
import Button from "./Button.vue";

function handleClick() {
  alert("ボタンがクリックされました！");
}
</script>

<style scoped>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 画面全体の高さを占める */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
ParentComponent.vue
  • App.vue
<script setup>
import ParentComponent from "./components/ParentComponent.vue";
</script>

<template>
    <ParentComponent />
</template>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
App.vue

推奨される記法

推奨: <script setup>

  • Vue 3で公式推奨される簡潔で高速な記法。
  • 注意：<script setup>を使う場合、export defaultは使えません。

まとめ

  • フォルダ構成: componentsフォルダを作成し、整理された名前空間を確保。
  • ローカル/グローバル登録: 必要に応じてインポート方法を選択。
  • スコープ化と再利用性: スコープCSSやスロット、イベントを活用して再利用可能な設計。

この構成を基にプロジェクトを進めることで、効率的なコンポーネント管理が可能です！

コメント

タイトルとURLをコピーしました