メモ化のテクニック
メモ化によって重複した計算を回避します。
「メモ化のテクニック」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
処理量を減らす
パフォーマンスは、変更されていないものを再計算または再レンダリングしないことで向上することがよくあります。Vueには、結果をキャッシュして不要な更新をスキップするメモ化の機能がいくつか用意されています。
computedによるキャッシュ
computedプロパティは結果をキャッシュし、リアクティブな依存関係のいずれかが変化した場合にのみ再計算します。そのため、レンダリングのたびに実行されるメソッドよりも大幅に効率的です。
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}computedとメソッドの比較
メソッドは、入力値が同じでもテンプレートが再レンダリングされるたびに実行されます。一方、computedはキャッシュした値を再利用するため、テンプレートで使う派生データにはcomputedを優先してください。
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }静的コンテンツにv-onceを使う
v-onceディレクティブは要素を一度だけレンダリングし、その後の更新では常にスキップします。決して変化しないコンテンツに使ってください。
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>v-onceを使う場面
フッター、利用規約の文章、固定ヘッダーなど、大きな静的セクションに v-once を適用してください。Vueはレンダリング結果を静的なものとして扱い、その後の差分チェックを一切行いません。
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>負荷の高いリストにv-memoを使う
v-memoディレクティブはサブツリーをメモ化し、依存配列内の値が変化した場合にのみ再レンダリングします。大きなリストで特に効果を発揮します。
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>v-memoの仕組み
各項目は、メモ配列が変化した場合にのみ再レンダリングされます。item.selected が同じ値のままであれば、親が更新されてもVueはその行全体の再レンダリングをスキップします。
不要な再レンダリングを避ける
コンポーネントは、リアクティブなデータまたはpropsが変化すると再レンダリングされます。コンポーネントを小さく、役割ごとに分けておくと、ある箇所の変更によって無関係な部分まで再レンダリングされるのを防げます。
リストで安定したキーを使う
v-for には、必ず安定した一意の :key を指定してください。キーに配列のインデックスを使うと、Vueが誤ったDOMノードを再利用したり、必要以上に再レンダリングしたりすることがあります。
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>リアクティブなデータを最小限にする
テンプレートが依存するデータだけをリアクティブな状態に入れてください。大きなオブジェクトやUI上で決して変化しない値を含めると、リアクティビティの追跡に余計な負荷がかかります。適切な場合は、通常の非リアクティブな変数を使ってください。
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())純粋関数をメモ化する
Vueのリアクティビティの外部で純粋なJavaScriptの計算を行う場合は、単純なmapに結果をキャッシュできます。同じ入力で繰り返し呼び出したときに、結果をすぐに返せるようになります。
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}確認テスト
メモ化についての知識を確認しましょう。
まとめ
キャッシュによって無駄な処理を減らしましょう。computedプロパティは派生値をメモ化し、v-once は静的コンテンツを一度だけレンダリングし、v-memo は大きなリスト内のサブツリーの再レンダリングをスキップします。安定したキーを使い、リアクティブな状態を最小限に保ってください。次は実際のツールを使ってパフォーマンスのボトルネックを見つけ、修正する方法を学びます。
よくある質問
「メモ化のテクニック」レッスンは無料ですか？
はい。「メモ化のテクニック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「メモ化のテクニック」で何を学びますか？
メモ化によって重複した計算を回避します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「メモ化のテクニック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 遅延ロードとコード分割
- メモ化のテクニック
- ボトルネックの特定と解消