🙆‍♀️

最近nuxt3(vue系を触るのも初)をさわり始めたので覚えたことをつらつらと備忘録として記述します。

むー

2024/05/29に公開

よく出てくる関数たち

vueを触っててよく出てくる関数たちです。v-if, v-forは文字通りif文とfor文だったので割愛します。

v-model

v-modelは、Vue.jsでフォーム要素とデータを双方向にバインドするためのディレクティブです。これにより、フォーム入力の値がVueインスタンスのデータプロパティと常に同期されます。v-modelを使用することで、入力フィールドの値が自動的にデータに反映され、データが更新されると入力フィールドの値も更新されるようになります。

なにする

v-modelは、フォーム要素（例えば、<input>, <textarea>, <select>）の値をVueインスタンスのデータプロパティにバインドし、これらの値が相互に自動的に更新されるようにします。

いつ使う

こんな時に使うイメージです

フォーム入力の値をリアルタイムでデータプロパティに反映したいとき
チェックボックスやラジオボタンの状態を管理したいとき
ドロップダウンリストの選択を管理したいとき

使用例

単純な入力フィールド

<template>
  <div>
    <input v-model="message" placeholder="Enter a message">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

チェックボックス

<template>
  <div>
    <input type="checkbox" v-model="isChecked"> Check me
    <p>Checkbox is: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

ラジオボタン

<template>
  <div>
    <input type="radio" v-model="picked" value="Option 1"> Option 1
    <input type="radio" v-model="picked" value="Option 2"> Option 2
    <p>Picked: {{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    };
  }
};
</script>

ドロップダウンリスト

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  }
};
</script>

v-modelまとめ

v-modelは、Vue.jsでフォーム要素とデータプロパティを双方向にバインドするための非常に便利なディレクティブです。これにより、ユーザー入力とデータの同期が簡単になり、リアクティブなフォーム管理が可能になります。実際にコードを書きながら学習すると理解が深まりますので、様々なシナリオで試してみてください。

v-bind

v-bindは、Vue.jsでHTML属性やプロパティを動的にバインドするために使用されるディレクティブです。v-bindを使用することで、JavaScriptのデータをHTMLの属性にバインドし、動的に変更することができます。

なにする

v-bindは、以下のような用途で使用されます：

HTML属性のバインド:

クラス (class)
スタイル (style)
その他の標準HTML属性（href, src, id, alt, など）

カスタムプロパティのバインド:

Vueコンポーネントのプロパティ（props）へのバインド

いつ使う

v-bindを使用するタイミングは、HTML属性やコンポーネントのプロパティに動的なデータをバインドしたいときです。例えば、ユーザー入力に応じてクラスを変更したり、動的に生成されたデータを使って画像のソースを変更したりする場合に使用します。

使用例

<template>
  <div>
    <a v-bind:href="url">Visit Link</a>  
  </div>
</template>

<script>
const  url = 'https://www.example.com'

</script>

短縮記法

v-bindには短縮記法として:を使用できる

<!-- これ -->
<a v-bind:href="url">Visit Link</a>
<!-- はこれと同じ -->
<a :href="url">Visit Link</a>

v-bindまとめ

v-bindはVue.jsにおいて非常に強力なディレクティブで、HTML属性やコンポーネントのプロパティを動的にバインドするために使用されます。これにより、アプリケーションのインタラクティブ性と柔軟性が大幅に向上します。具体的な使用例を試しながら学習することで、v-bindの理解を深めることができます。

v-slot

v-slotは、Vue.jsでスロット（slots）を扱うためのディレクティブです。スロットは、親コンポーネントから子コンポーネントに渡すテンプレートをカスタマイズするための仕組みです。これにより、親コンポーネントは子コンポーネントの一部を動的に変更できます。

なにする

v-slotは、スロットにテンプレートを渡すために使われます。これにより、子コンポーネントの特定の部分を親コンポーネントでカスタマイズできます。v-slotは、名前付きスロットやスコープ付きスロットを作成するためにも使われます。

いつ使う

v-slotを使用するのは、以下のような状況です：

コンポーネントの一部を親コンポーネントからカスタマイズしたいとき:
親コンポーネントが子コンポーネントの一部の内容を動的に変更したい場合。
複数のスロットを持つ子コンポーネントを作りたいとき:
子コンポーネントの異なる部分に異なるテンプレートを渡したい場合。
スコープ付きスロットを使いたいとき:
子コンポーネントのデータをスロットのテンプレートで使用したい場合。

使用例

基本的なスロット

まず、基本的なスロットの例です。

ChildComponent.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

ParentComponent.vue

<template>
  <div>
    <ChildComponent>
      <p>これは親コンポーネントに記載しています</p>
    </ChildComponent>
  </div>
</template>

この例では、<slot>内の内容は親コンポーネントから渡されます。

名前付きスロット

次に、名前付きスロットの例です。

ChildComponent.vue

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>

    <main>
      <slot></slot> 
    </main>

    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

ParentComponent.vue

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'
</script>
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>name: header</h1>
      </template>

      <p>デフォルトのslot</p>

      <template v-slot:footer>
        <p>name: footer</p>
      </template>
    </ChildComponent>
  </div>
</template>

この例では、<slot name="header">と<slot name="footer">に対応するコンテンツを親コンポーネントから渡しています。

スコープ付きスロット

スコープ付きスロットを使うと、子コンポーネントのデータを親コンポーネントのテンプレートで利用できます。

ChildComponent.vue<script>

export default {
  data() {
    return {
      user: { name: "むー", age: 35 }
    };
  }
};
</script>

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

ParentComponent.vue

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'
</script>

<template>
  <div>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>User Name: {{ slotProps.user.name }}</p>
        <p>User Age: {{ slotProps.user.age }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

この例では、slotPropsという変数を使って、子コンポーネントのデータ（user）にアクセスしています。

v-slotまとめ

v-slotは、Vue.jsでスロットを扱うためのディレクティブで、親コンポーネントから子コンポーネントにテンプレートを動的に渡すために使います。これにより、コンポーネントの柔軟性が大幅に向上し、再利用可能でカスタマイズ可能なコンポーネントを作成することができます。スロットの基本的な使い方から、名前付きスロット、スコープ付きスロットまで、さまざまなシナリオで活用できます。

v-on

v-onは、Vue.jsでイベントリスナーを登録するためのディレクティブです。これにより、ユーザーの操作（クリック、キーボード入力など）に対して特定の処理を実行することができます。

なにする

v-onは、指定したイベントが発生したときに、特定のメソッドを呼び出すことができます。v-onディレクティブを使って、HTML要素に対してイベントリスナーを設定します。これにより、ユーザーインタラクションに応じてアプリケーションの状態を更新したり、他の処理を実行したりすることができます。

いつ使う

v-onを使用するタイミングは、ユーザーが何らかの操作を行ったときに反応して処理を実行したいときです。例えば、ボタンがクリックされたときにメッセージを表示したり、入力フィールドに文字が入力されたときにデータを更新したりする場合に使います。

使用例

基本的な使用例

ボタンクリックイベント

<template>
  <div>
    <button v-on:click="showMessage">Click me</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    showMessage() {
      this.message = 'クリックされたら表示されるメッセージです。';
    }
  }
};
</script>

この例では、ボタンがクリックされると、showMessageメソッドが呼び出され、messageプロパティが更新されます。

短縮記法

v-onには短縮記法があります。v-on:を@に置き換えることができます。

<template>
  <div>
    <button @click="showMessage">Click me</button>
    <p>{{ message }}</p>
  </div>
</template>

イベントオブジェクトの使用

イベントハンドラにイベントオブジェクトを渡すこともできます。イベントオブジェクトは、ユーザーの操作に関する情報を提供します。

<template>
  <div>
    <input @keyup.enter="onEnter">
  </div>
</template>

<script>
// エンターキーが押されたらalertメソッドが発火
export default {
  methods: {
    onEnter(event) {
      alert(`You pressed Enter! The input value is: ${event.target.value}`);
    }
  }
};
</script>

この例では、Enterキーが押されたときにonEnterメソッドが呼び出され、入力フィールドの値をアラートで表示します。

イベント修飾子

v-onディレクティブには、イベント修飾子を追加して、イベントの動作を制御することができます。

prevent 修飾子

デフォルトのイベント動作（例えば、リンクのクリックでページが移動する）を防ぐために使います。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
// フォームの送信が防止され、ページのリロードが発生しません。
// 代わりに、onSubmitメソッドが呼び出され、アラートダイアログが表示されます。
export default {
  methods: {
    onSubmit() {
      alert('Form submitted!');
    }
  }
};
</script>

stop 修飾子

イベントのバブリングを止めるために使います。これは、イベントが親要素に伝播しないようにします。

<template>
  <div @click="parentClick">
    <button @click.stop="childClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
      alert('Parent clicked!');
    },
    childClick() {
      alert('Button clicked!');
    }
  }
};
</script>

この例では、ボタンをクリックしても親のdivのクリックイベントは発生しません。

v-onまとめ

v-onは、Vue.jsでイベントリスナーを登録するためのディレクティブです。
ユーザーの操作に対して特定のメソッドを呼び出すことができます。
短縮記法として、v-on:を@に置き換えて使用することができます。
イベントオブジェクトを使用して、ユーザーの操作に関する詳細情報を取得することができます。
イベント修飾子を使って、イベントのデフォルト動作やバブリングを制御することができます。
これらの知識を使って、ユーザーインタラクションに反応するインタラクティブなVue.jsアプリケーションを作成することができます。

v-show

v-showは、Vue.jsで要素の表示/非表示を制御するためのディレクティブです。v-ifと似ていますが、要素をDOMから完全に削除するのではなく、display CSSプロパティを使って表示/非表示を切り替えます。

なにする

v-showは、指定された条件が真 (true) である場合に要素を表示し、偽 (false) である場合に要素を非表示にします。v-ifとは異なり、v-showは要素をDOMから削除せず、CSSのdisplayプロパティを操作して要素の表示状態を変更します。

いつ使う

使用例

v-showを使用するタイミングは、以下のようなシナリオです：

要素の表示/非表示を頻繁に切り替えたい場合：
　　　　頻繁に表示/非表示を切り替える必要がある場合には、v-showの方がパフォーマンスが良いことがあります。
初期レンダリング時に要素を保持したい場合：
　　　　要素が初期レンダリング時に存在することが重要で、その後の表示状態のみを変更したい場合。

基本的な使用例

単純な表示/非表示

<template>
  <div>
    <button @click="isVisible = !isVisible">
      Toggle Visibility
    </button>
    <p v-show="isVisible">Now you see me!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

この例では、ボタンをクリックするたびにisVisibleが切り替わり、isVisibleがtrueの場合にのみ<p>要素が表示されます。

v-ifとの比較

v-ifとv-showの違い

<template>
  <div>
    <button @click="toggleVisibility">
      Toggle Visibility
    </button>
    
    <p v-if="isVisible">This is controlled by v-if</p>
    <p v-show="isVisible">This is controlled by v-show</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

ボタン押す前

ボタン押したあと

この例では、v-ifによって制御される要素はisVisibleがfalseになるとDOMから削除され、v-showによって制御される要素はDOMに残ったままdisplayプロパティがnoneに設定されて非表示になります。

v-showまとめ

v-showは、要素の表示/非表示をCSSのdisplayプロパティで制御するディレクティブです。
頻繁に表示/非表示を切り替える場合には、v-showを使用する方がパフォーマンスが良いことがあります。
v-ifは要素をDOMから完全に追加/削除するのに対し、v-showは要素をDOMに残したまま表示状態を変更します。
これらの特性を理解して、適切な状況でv-ifとv-showを使い分けることが重要です。これにより、Vue.jsを使ったアプリケーションのパフォーマンスとユーザー体験を最適化できます。

ref関数

Vue3のコンポジションAPIの一部であるref関数です。Vueコンポーネントの状態管理をより直感的かつ強力に行うことができます。

なにする

ref関数は、リアクティブな参照（つまりリアクティブなデータオブジェクト）を作成します。これにより、Vueの再レンダリングシステムがデータの変更を監視し、データが変更されたときに自動的にUIを更新します。

いつ使う

refは、以下のようなシナリオで使用します：

単純なデータのリアクティブ管理：
基本的な変数をリアクティブに管理したいとき。
DOM要素の参照：
特定のDOM要素にアクセスし、それに対する操作を行いたいとき。

使用例

基本的な使用例

リアクティブなデータの管理

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    return {
      count,
      increment
    };
  }
};
</script>

この例では、countというリアクティブな変数を定義し、その値をボタンのクリックイベントで増加させています。countの値が変更されると、自動的にUIも更新されます。

DOM要素の参照

DOM要素へのアクセス

<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="focusInput">Focus the input</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myInput = ref(null);

    const focusInput = () => {
      myInput.value.focus();
    };

    onMounted(() => {
      // 初期表示時にフォーカスを設定
      myInput.value.focus();
    });

    return {
      myInput,
      focusInput
    };
  }
};
</script>

ボタン押す前

ボタン押した後

この例では、myInputという変数をrefで作成し、特定のDOM要素（ここでは入力ボックス）を参照しています。focusInput関数を呼び出すことで、入力ボックスにフォーカスを設定します。また、onMountedライフサイクルフックを使って、コンポーネントがマウントされたときに自動的に入力ボックスにフォーカスを設定しています。

ref関数まとめ

ref関数は、リアクティブな参照を作成するために使用します。
単純なデータやDOM要素をリアクティブに管理するのに役立ちます。
refを使って作成されたオブジェクトは、.valueプロパティを通じてその値にアクセスし、更新できます。
refを使うことで、Vue 3での状態管理がシンプルかつ効果的になります。コンポジションAPIの他の部分と組み合わせることで、より複雑なリアクティブロジックも簡単に扱えるようになります。

computed

computedは、Vue.jsで計算プロパティを作成するために使用される機能です。計算プロパティは、依存しているデータの変更に基づいて自動的に再計算されるキャッシュされたプロパティです。これにより、複雑な計算やデータの変換を効率的に管理することができます。

なにする

computedプロパティは、依存しているデータが変更されたときにのみ再計算されます。これにより、不要な再計算を避け、アプリケーションのパフォーマンスを向上させることができます。

いつ使う

computedプロパティを使用するタイミングは以下のようなシナリオです：

データの変換：表示するデータを特定の形式に変換したいとき。
複雑な計算：複数のデータを元にした計算結果を表示したいとき。
データの依存関係：複数のデータが連動して変化する必要があるとき。

使用例

基本的な使用例

計算プロパティを使用してデータを変換する例

<template>
  <div>
    <p>元のメッセージ: {{ message }}</p>
    <p>大文字のメッセージ: {{ uppercaseMessage }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    // `message`の内容を大文字に変換する計算プロパティ
    const uppercaseMessage = computed(() => {
      return message.value.toUpperCase();
    });

    return {
      message,
      uppercaseMessage
    };
  }
};
</script>

この例では、messageというリアクティブな変数を定義し、その変数を元にした大文字変換されたメッセージを計算プロパティuppercaseMessageで提供しています。messageが変更されると、uppercaseMessageも自動的に更新されます。

依存データの計算

複数のデータを元に計算する例

<template>
  <div>
    <p>数値A: <input v-model.number="numberA" type="number"></p>
    <p>数値B: <input v-model.number="numberB" type="number"></p>
    <p>合計: {{ sum }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const numberA = ref(0);
    const numberB = ref(0);

    // `numberA`と`numberB`の合計を計算する計算プロパティ
    const sum = computed(() => {
      return numberA.value + numberB.value;
    });

    return {
      numberA,
      numberB,
      sum
    };
  }
};
</script>

numberAの数値をさわる

numberBの数値を触る

この例では、numberAとnumberBという二つの数値入力フィールドがあります。それらの合計を計算する計算プロパティsumを定義しています。ユーザーが入力フィールドの値を変更すると、sumも自動的に更新されます。

computedまとめ

computedプロパティは、依存するデータが変更されたときにのみ再計算されるキャッシュされたプロパティです。
データの変換や複雑な計算を効率的に管理するために使用されます。
計算プロパティを使用することで、コードの読みやすさとパフォーマンスが向上します。
computedプロパティを適切に使用することで、Vue.jsアプリケーションのデータ処理をより効率的に行うことができ、UIの再レンダリングを最適化できます。

watch

watchは、Vue.jsでリアクティブなデータの変更を監視し、その変更に応じて特定の処理を実行するための機能です。watchは、特定のデータが変わるたびにその変化を検知して、コールバック関数を実行するのに使用されます。

なにする

watchは、以下のような操作を行います：

リアクティブデータの監視：指定したデータの変更を監視します。
コールバックの実行：監視しているデータが変更されたときに指定した関数を実行します。
非同期処理：データの変更に対して非同期処理を行うことができます。

いつ使う

watchを使用するタイミングは以下のようなシナリオです：

データの変化に応じて処理を実行したいとき：
あるデータが変更されたときに、それに応じて他のデータを更新したり、外部APIを呼び出したりする場合。
非同期データの監視：
データの変更に応じて非同期処理を行いたい場合。
複雑なロジックの処理：
複数のデータを監視して、複雑な条件に基づいて処理を実行したい場合。

使用例

基本的な使用例

単純なデータの監視

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

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

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

    // `count`が変わるたびに実行される関数を設定
    watch(count, (newCount, oldCount) => {
      message.value = `Count changed from ${oldCount} to ${newCount}`;
    });

    return {
      count,
      increment,
      message
    };
  }
};
</script>

この例では、countが変わるたびにwatchで設定された関数が実行されます。newCountには新しい値、oldCountには以前の値が渡され、それに基づいてメッセージが更新されます。

watchまとめ

watchは、特定のリアクティブデータが変更されたときに、その変更を監視してコールバック関数を実行します。
データの変化に応じた処理や非同期操作を実行する場合に便利です。
単純なデータの監視から複雑な非同期処理まで、幅広い用途で使用できます。
watchを適切に使うことで、リアクティブなデータの変化に柔軟に対応し、必要な処理を自動的に実行することができます。これにより、Vue.jsアプリケーションのインタラクティブ性とリアクティブ性が向上します。

まとめ

いろいろな関数がありそれぞれの特性を活かした使い方をしたいと思いました。これからも勉強頑張ります。

レスキューナウテックブログPublication

日本で唯一の危機管理情報を専門に取り扱う防災・BCPの専門企業、(株)レスキューナウです。当社で活躍するエンジニアの技術ブログを中心に公開していきます。

よく出てくる関数たち

v-model

なにする

いつ使う

使用例

単純な入力フィールド

チェックボックス

ラジオボタン

ドロップダウンリスト

v-modelまとめ

v-bind

なにする

HTML属性のバインド:

カスタムプロパティのバインド:

いつ使う

使用例

短縮記法

v-bindまとめ

v-slot

なにする

いつ使う

使用例

基本的なスロット

名前付きスロット

スコープ付きスロット

v-slotまとめ

v-on

なにする

いつ使う

使用例

基本的な使用例

ボタンクリックイベント

短縮記法

イベントオブジェクトの使用

イベント修飾子

prevent 修飾子

stop 修飾子

v-onまとめ

v-show

なにする

いつ使う

使用例

基本的な使用例

単純な表示/非表示

v-ifとの比較

v-showまとめ

ref関数

なにする

いつ使う

使用例

リアクティブなデータの管理

DOM要素の参照

ref関数まとめ

computed

なにする

いつ使う

使用例

基本的な使用例

計算プロパティを使用してデータを変換する例

依存データの計算

複数のデータを元に計算する例

computedまとめ

watch

なにする

いつ使う

使用例

基本的な使用例

単純なデータの監視

watchまとめ

まとめ

Discussion