Vue Academy · レッスン

コンポーネントの作成と登録

Q: 「コンポーネントの作成と登録」で何を学びますか？

コンポーネントをグローバルおよびローカルに定義して登録します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

コンポーネントをグローバルおよびローカルに定義して登録します

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

コンポーネントを使う理由

コンポーネントを使うと、UIを独立した再利用可能な部品に分割できます。

それぞれが独自のテンプレート、ロジック、スタイルを管理します
それらを組み合わせて、より大きな構造を作ります
コードを整理し、保守しやすくします

単一ファイルコンポーネント

単一ファイルコンポーネント（.vue）は、3つのブロックを1つのファイルにまとめたものです。

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

コンポーネントの定義

templateブロックにはマークアップを記述します。scriptブロックにはロジックを記述します。styleブロックにはCSSを記述します。

scopedスタイルは、このコンポーネントにのみ適用されます
テンプレートには、要素の明確な構造が必要です

コンポーネント名

慣例として、コンポーネントのファイル名と使用時の名前にはPascalCaseを使います。

ファイル: UserCard.vue
テンプレート内: <UserCard />
PascalCaseにより、ネイティブHTMLとコンポーネントを区別できます

コンポーネントのインポート

コンポーネントを使用するには、必要な場所でインポートします。

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

ローカル登録（script setup）

script setupでは、コンポーネントをインポートするだけでテンプレートから使用できるようになります。追加の登録手順は必要ありません。

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

ローカル登録（Options API）

Options APIでは、componentsオプションにコンポーネントを登録します。

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

グローバル登録

グローバル登録では、app.componentを使うことで、インポートせずにどこからでもコンポーネントを使用できます。

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

グローバル登録とローカル登録

登録範囲を選ぶ際のポイント:

グローバルは便利ですが、バンドルが肥大化し、使用箇所を追跡しにくくなります
ローカルはインポートが明示的で、tree-shakingの効果が高く、依存関係も明確です

本当にどこでも使う基盤コンポーネントを除き、ローカル登録を優先してください。

コンポーネントの再利用

同じコンポーネントを何度も使用できます。各インスタンスは独立しています。

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

コンポーネントの入れ子

コンポーネントはツリーを形成します。親には子を含めることができ、その子にも独自の子を含められます。

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

理解度チェック

コンポーネントの登録についての理解度を確認しましょう。

まとめ: コンポーネントの作成

コンポーネントの構築と登録について学びました。

.vueファイルには、template、script、styleを記述します
PascalCaseの名前を使用します
script setupでは、インポートしたコンポーネントが自動的に登録されます
Options APIではcomponentsオプションを使用します
app.component()でグローバル登録します

次は、propsとカスタムイベントについて学びます。

よくある質問

「コンポーネントの作成と登録」レッスンは無料ですか？

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

「コンポーネントの作成と登録」で何を学びますか？

コンポーネントをグローバルおよびローカルに定義して登録しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「コンポーネントの作成と登録」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る