Frontend Academy · レッスン

プラグインシステム：app.use()

installメソッドを持つオブジェクトとしてVueプラグインを作成し、グローバルコンポーネントやディレクティブを登録して、アプリケーション全体に値を提供します。

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

Vueプラグインとは

プラグインは、Vueアプリにインストールする再利用可能な機能です。グローバルコンポーネント、ディレクティブ、provideする値、プロトタイプ形式のヘルパー（router、i18n、pinia）などが含まれます。プラグインは、ライブラリをVueに統合するための仕組みです。

プラグインの形

プラグインはinstall(app, options)メソッドを持つオブジェクトです。installメソッドとして機能する関数にすることもできます。

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

プラグインのインストール

Vueアプリのインスタンスでapp.use(plugin, options)を呼び出します。

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

プラグインのユースケース：グローバルコンポーネント

多くの小さなコンポーネントをグローバルに登録すると、利用側で各コンポーネントをimportする必要がなくなります。

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

プラグインのユースケース：グローバルディレクティブ

カスタムディレクティブを一度登録すると、アプリ全体で利用できます。

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

プラグインのユースケース：provide()

アプリ全体の値をprovideすると、任意のコンポーネントからinjectできます。APIクライアントや設定でよく使われます。

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

実際のプラグイン：Pinia、Vue Router、i18n

Vueエコシステムの主要なライブラリはプラグインです。

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

プラグインのオプション

プラグインはオプションを受け取り、インストール時に動作を設定できます。

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

TypeScriptの型拡張

globalPropertiesやinjectヘルパーを使う場合は、Vueの型を拡張して利用側で自動補完を利用できるようにします。

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — 古いパターン

app.config.globalProperties.$fooを使うと、Options APIのコンポーネントとテンプレートで値をthis.$fooとして公開できます。Composition APIではinject()が推奨されます。

冪等なinstall

2回インストールされてもクラッシュしないようにしてください。フラグを確認するか、自然に重複排除できるSymbolベースのprovideキーを使用します。

独自プラグインの作成

複数のアプリで設定（認証ラッパー、テレメトリーの設定、デザイントークン）を再利用する場合は、プラグインとしてパッケージ化してください。明確なinstall(app, options)シグネチャでnpmに公開するのが、再利用可能な機能をVueらしく提供する方法です。

確認問題

プラグインをインストールするために、Vueアプリのインスタンスで呼び出すメソッドは何ですか？

まとめ：Vueプラグイン

プラグインはinstall(app, options)を持つオブジェクトです。app.use(plugin, options)でインストールします。グローバルコンポーネント、ディレクティブ、provideする値の登録や、ライブラリの設定に使用します。Pinia、Vue Router、i18nはすべてプラグインです。$プレフィックス付きプロパティにはComponentCustomPropertiesの型を拡張します。installは冪等に保ってください。

よくある質問

「プラグインシステム：app.use()」レッスンは無料ですか？

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

「プラグインシステム：app.use()」で何を学びますか？

installメソッドを持つオブジェクトとしてVueプラグインを作成し、グローバルコンポーネントやディレクティブを登録して、アプリケーション全体に値を提供します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「プラグインシステム：app.use()」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る