日本語

VueJS チュートリアル

VueJS - コンポーネント：現代のウェブアプリケーションの構成ブロック

こんにちは、未来のVue.js魔法使いさんたち！Vue.jsコンポーネントの世界にご案内するこの興奮的な旅に、私も一緒に参加できることをとても楽しみにしています。プログラミングを教えてきた年数を考えれば、コンポーネントの理解はレゴブロックを使うことと同じで、一度慣れると素晴らしいものが作れるんです！それでは、一緒に楽しみましょう！

VueJS - Components

Vue.jsコンポーネントとは？

コンポーネントはVue.jsアプリケーションの心臓と魂です。再利用可能なコードの断片として、HTML、CSS、JavaScriptの機能を encapsulate します。レゴブロックを使って城を建てるのと同じように、異なるコンポーネントを使って複雑なウェブアプリケーションを構築できます。

以下はVueコンポーネントの簡単な例です：

<template>
<div class="greeting">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
data() {
return {
message: "Hello, Vue Component!"
}
}
}
</script>

<style scoped>
.greeting {
color: blue;
}
</style>

これを分解すると：

  1. <template> セクションには、コンポーネントのHTML構造が含まれます。
  2. <script> セクションには、コンポーネントのロジックとデータが定義されます。
  3. <style> セクション（scoped 属性付き）には、このコンポーネントにのみ適用されるCSSが含まれます。

コンポーネントの作成と使用

コンポーネントの見た目を理解したので、これから一つ作成し、アプリで使用してみましょう！

ステップ1：新しいコンポーネントを作成する

プロジェクトの components フォルダに Greeting.vue という新しいファイルを作成します：

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ greeting }}</h2>
</div>
</template>

<script>
export default {
data() {
return {
greeting: "Welcome to Vue.js!"
}
}
}
</script>

<style scoped>
.greeting {
font-style: italic;
color: green;
}
</style>

ステップ2：コンポーネントをアプリで使用する

次に、このコンポーネントをメインの App.vue ファイルで使用してみましょう：

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting />
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'

export default {
name: 'App',
components: {
Greeting
}
}
</script>

ここで起こっていることは以下の通りです：

  1. Greeting コンポーネントをインポートします。
  2. Appコンポーネントの components オプションに登録します。
  3. テンプレート内で <Greeting /> タグを使います。

それで、あなたは初めてのVueコンポーネントを作成し、使用しました！

Props：コンポーネントにデータを渡す

Propsは、親コンポーネントから子コンポーネントにデータを送信する魔法のパイプのように機能します。Greeting コンポーネントをカスタムメッセージを受け入れるように強化してみましょう：

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ customGreeting }}</h2>
</div>
</template>

<script>
export default {
props: ['message'],
computed: {
customGreeting() {
return `${this.message} Welcome to Vue.js!`
}
}
}
</script>

これを App.vue で以下のように使用できます：

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting message="Hello, dear student!" />
<Greeting message="Greetings, Vue enthusiast!" />
</div>
</template>

素晴らしいですね！同じコンポーネントを異なるメッセージで再利用できます！

イベントの発信：子から親への通信

Propsは親から子への通信を可能にする一方で、イベントは子から親への通信を可能にします。子が親にアイスクリームを求めるようなものです！

クリック時にイベントを発信する Button コンポーネントを作成してみましょう：

<!-- Button.vue -->
<template>
<button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('button-clicked', 'The button was clicked!')
}
}
}
</script>

これを App.vue で使用します：

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Button label="Click me!" @button-clicked="handleButtonClick" />
<p>{{ message }}</p>
</div>
</template>

<script>
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Button
},
data() {
return {
message: ''
}
},
methods: {
handleButtonClick(msg) {
this.message = msg
}
}
}
</script>

ボタンがクリックされると、イベントが発信され、親コンポーネントがそれを聞いて応答します。まるで家族の調和の取れた会話のようです！

スロット：柔軟なコンポーネントコンテンツ

スロットは、コンポーネント内のプレースホルダーのように、あなたが望むどんなコンテンツでも埋め込むことができるものです。非常に便利で再利用可能なコンポーネントを作成するために役立ちます。

Card コンポーネントにスロットを作成してみましょう：

<!-- Card.vue -->
<template>
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
props: ['title']
}
</script>

<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.card-header {
background-color: #f1f1f1;
padding: 5px;
}
</style>

この Card コンポーネントを使って異なるコンテンツを以下のように使用できます：

<!-- App.vue -->
<template>
<div id="app">
<Card title="Welcome">
<p>Welcome to our Vue.js tutorial!</p>
</Card>
<Card title="About Components">
<ul>
<li>Components are reusable</li>
<li>They can have props</li>
<li>They can emit events</li>
</ul>
</Card>
</div>
</template>

<script>
import Card from './components/Card.vue'

export default {
name: 'App',
components: {
Card
}
}
</script>

ドYNAMICコンポーネント

ダイナミックコンポーネントは、異なるコンポーネントを動的に切り替えることができます。まるでスイスアーミーナイフのようなコンポーネントの集合です！

簡単な例を見てみましょう：

<!-- App.vue -->
<template>
<div id="app">
<button @click="currentComponent = 'Greeting'">Show Greeting</button>
<button @click="currentComponent = 'Button'">Show Button</button>
<component :is="currentComponent"></component>
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Greeting,
Button
},
data() {
return {
currentComponent: 'Greeting'
}
}
}
</script>

この例では、<component> タグと is 属性を使って、どのボタンがクリックされたかによって Greeting または Button コンポーネントを動的にレンダリングします。

結論

おめでとうございます！あなたは刚刚、Vue.jsコンポーネントの素晴らしい世界の第一歩を踏み出しました。スキルは練習で完璧になります。実験を恐れず、自分のコンポーネントを作成してみてください。間もなく、複雑でインタラクティブなウェブアプリケーションを簡単に作成できるようになるでしょう！

以下は、私たちがカバーしたコンポーネント機能の簡単な参照表です：

機能 説明
基本構造 テンプレート、スクリプト、スタイルセクション
Props 親から子へのデータの渡し方
イベント 子から親への通信
スロット 柔軟なコンテンツプレースホルダー
ダイナミックコンポーネント コンポーネント間の切り替え

codingを続け、学び続け、そして最も重要なのは、Vue.jsを楽しむことを忘れないでください！

Credits: Image by storyset

前のチュートリアル:
VueJS - テンプレート
次のチュートリアル:
VueJS - 計算プロパティ