Vue Academy · レッスン

VueUse：Composableライブラリ

useLocalStorage、useMouse、useWindowSize、useIntersectionObserver――実践的なVueUseの使い方

レッスン 4/413 ステップ

「VueUse：Composableライブラリ」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

VueUseとは

VueUse（@vueuse/core）は、ストレージ、センサー、ブラウザーAPIなど、一般的なタスク向けの既製コンポーザブルを集めた大規模なコレクションです。同じものを自分で作り直す手間を省けます。

npm install @vueuse/core

永続化のためのuseLocalStorage

useLocalStorageはlocalStorageと同期するrefを返します。シリアライズも自動的に処理されるため、変更内容はリロード後も保持されます。

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

リアクティブかつ永続的

返されるrefは他のrefと同じように動作し、v-modelでバインドできます。ただし、VueUseがストレージに書き込むため、その値はページを更新しても保持されます。

<input v-model="name" />

カーソル位置のためのuseMouse

useMouseはポインターを追跡し、カーソルの移動に合わせて更新されるリアクティブなxとyのrefを返します。

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

マウス座標を表示する

テンプレートでrefをバインドします。リスナーを自分で設定しなくても、マウスが移動するたびに更新されます。

<p>Cursor: {{ x }}, {{ y }}</p>

サイズ取得のためのuseWindowSize

useWindowSizeはリアクティブなwidthとheightのrefを提供し、リサイズ時に更新します。スクリプトでレスポンシブなロジックを実装するのに最適です。

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

レスポンシブなロジック

ウィンドウサイズとcomputedを組み合わせ、レイアウトの判断をリアクティブに行います。

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

遅延読み込みのためのuseIntersectionObserver

useIntersectionObserverは要素がビューポートに入ったことを通知します。画像の遅延読み込みや無限スクロールの基盤となります。

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

表示をトリガーにする

テンプレートrefと、交差エントリーを受け取って実行されるコールバックを渡します。対象が表示されたら画像を読み込んだり、追加データを取得したりできます。

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

自動的なクリーンアップ

大きな利点は、VueUseのコンポーザブルがアンマウント時に自身のリスナーやオブザーバーを登録解除・削除してくれることです。正しいクリーンアップを追加の作業なしで実現できます。

VueUseを使う理由

VueUseはツリーシェイキングに対応し、十分にテストされており、TypeScriptを第一に設計されています。ストレージ、センサー、ネットワーク、時間などの一般的な用途では、自分でコンポーザブルを書く前にVueUseを検討してください。

確認問題

refをlocalStorageに永続化するVueUseのコンポーザブルはどれでしょうか。

対話的なレッスンで答える

まとめ

VueUseについて学びました。useLocalStorage（永続的な状態）、useMouse（カーソル位置）、useWindowSize（リアクティブなサイズ）、useIntersectionObserver（遅延読み込みのトリガー）を取り上げました。いずれも自動的なクリーンアップとツリーシェイキングに対応しています。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「VueUse：Composableライブラリ」レッスンは無料ですか？

はい。「VueUse：Composableライブラリ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「VueUse：Composableライブラリ」で何を学びますか？

useLocalStorage、useMouse、useWindowSize、useIntersectionObserver――実践的なVueUseの使い方ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「VueUse：Composableライブラリ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る