ボトルネックの特定と解消
プロファイリングを行い、パフォーマンスのボトルネックを解消します。
「ボトルネックの特定と解消」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
最適化の前に測定する
アプリの遅い箇所を推測しても時間を無駄にします。プロフェッショナルな進め方は、まず測定して実際のボトルネックを見つけ、修正してからもう一度測定することです。主なツールはVue DevToolsとブラウザーのプロファイラーです。
Vue DevTools
Vue DevToolsのブラウザー拡張機能を使うと、コンポーネントツリー、リアクティブな状態、イベントを調べられます。Performanceタブでは、コンポーネントのレンダリングにかかった時間を記録できるため、遅いコンポーネントを見つけられます。
Performanceタブを使う
記録を開始してアプリを操作し、その後停止してください。DevToolsには、コンポーネントのレンダリングのタイムラインが表示されます。レンダリングバーが長い、または頻繁に表示されるコンポーネントが、まず調べるべき候補です。
ブラウザープロファイラー
ブラウザーのDevToolsにあるPerformanceパネルでは、スクリプト処理、レンダリング、ペイントを含むページ全体を記録できます。黄色いスクリプト処理ブロックが長い場合は、レンダリング中に負荷の高いJavaScript処理が行われている可能性があります。
過剰な再レンダリングを見つける
よくあるボトルネックは、コンポーネントが想定以上の頻度で再レンダリングされることです。小さな変更によって大きなサブツリーが再レンダリングされる場合は、共有されたリアクティブな状態や、コンポーネントの境界が不足していないか確認してください。
大きなリストのレンダリング
何千ものDOMノードを一度にレンダリングすると、処理が遅くなりメモリも大量に消費します。リストの行数が数百、数千に及ぶ場合は、データのロジックではなくDOM自体がボトルネックになります。
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>仮想スクロールの考え方
仮想スクロールでは、ビューポート内で現在見えている行と少量の余裕分だけをレンダリングし、ユーザーのスクロールに合わせてDOMノードを再利用します。10,000項目のリストでも、DOM内に保持されるノードは数十個だけです。
仮想リストライブラリを使う
vue-virtual-scrollerのようなライブラリを使えば、この処理を任せられます。全データと1行の高さを渡すだけで、表示範囲の管理を行ってくれます。
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>キーが原因の再レンダリングバグ
動的なリストで配列のインデックスを :key に使うと、項目の追加、削除、並べ替えが行われたときにVueがDOMノードを誤って再利用することがあります。その結果、内容が誤ったり、余分な再レンダリングが発生したりします。
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>キーに関するバグを修正する
安定した一意の識別子をキーとして使うと、更新の前後でVueが要素とデータを正しく対応付けられます。
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>実践的なワークフロー
手順をまとめると、DevToolsで記録し、最も遅いコンポーネントを見つけ、過剰な再レンダリングや巨大なリストがないか確認し、適切な修正（computedによるキャッシュ、v-memo、仮想スクロール、安定したキー）を適用して、改善を確認するために再測定します。
確認テスト
ボトルネックの見つけ方についての知識を確認しましょう。
まとめ
まずVue DevToolsとブラウザーのプロファイラーで測定し、実際のボトルネックを対象に最適化します。対象となるのは、過剰な再レンダリング、巨大なリスト（仮想スクロールで改善）、インデックスをキーに使うバグ（安定したキーで改善）です。必ず再測定して効果を確認してください。次はVueアプリケーションのテスト方法を学びます。
よくある質問
「ボトルネックの特定と解消」レッスンは無料ですか？
はい。「ボトルネックの特定と解消」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「ボトルネックの特定と解消」で何を学びますか？
プロファイリングを行い、パフォーマンスのボトルネックを解消します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「ボトルネックの特定と解消」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 遅延ロードとコード分割
- メモ化のテクニック
- ボトルネックの特定と解消