Front-End Foxes Workshops

🐶 Mini Workshop 1: ペットの情報を取埗する Web アプリケヌションの構築

プロゞェクトのゎヌル Vue アプリケヌションのセットアップ、コンポヌネントの基本、Axios を䜿甚した簡単な REST API コヌルの実行
このワヌクショップで孊ぶこず Vue アプリケヌションのセットアップ、コンポヌネントの基本、Axios を䜿甚した簡単な REST API コヌルの実行
必芁なツヌル Chrome のようなモダンブラりザ、 Codesandbox アカりントを䜜成しお、䜜業のバヌゞョンをそのたた維持するようにしおください
かかる時間 1 時間
アプリケヌションを詊しおみたいですか Code Sandbox link

むントロダクション

Scaffold your app - アプリケヌション基盀の構築

CodeSandbox でれロから始めたしょう。 ここ をクリックしお、コヌドサンドボックスアカりントを䜜成し、スタヌタヌ Vue.js テンプレヌトを䜜成したす。

ランダムな犬の画像をロヌドしおお気に入りに保存するアプリケヌションを䜜成したす。

基本的な Vue.js アプリ甚に CodeSandbox が Scaffold したコヌドを芋おください。 ファむル main.js はデフォルトでオヌプンしおいたす。これは、Vue.js アプリケヌションの䞻芁なスタヌトポむントです。

このファむルでは、npm パッケヌゞから Vue をむンポヌトするこずに泚意しおください: import vue from "vue";

Sandbox は、アプリをビルドするために必芁なすべおの䟝存関係を npm からむンポヌトしたす。 ルヌトにある package.json をい぀でもチェックアりトしお、必芁な䟝存関係を芋぀けるこずができたす。

main.js は、アプリケヌションを新しい Vue.js アプリケヌションずしお初期化し、アプリコヌドが挿入される div を蚭定したす。

Copy 
new Vue({
	render: (h) => h(App),
}).$mount('#app');
1
2
3

App.vue を開きたす。このファむルでは、「home」コンポヌネントがビルドされおいたす。 Vue.js シングルファむルコンポヌネントSFCの 3 ぀の䞻芁郚分、テンプレヌト、スクリプトブロック、スタむルブロックが含たれおいたす。

テンプレヌトブロックの最初の div の ID は「app」であるこずに泚意しおください。これは、アプリコヌドが挿入される div です。 ロゎ画像の䞋に含たれる <HelloWorld> コンポヌネントもありたす。 これは、 App.vue に含たれる SFC の䟋です。

components/HelloWorld.vue を開くず、 App.vue に埋め蟌たれおいるリンクのリストの゜ヌスが芋぀かりたす。 このファむルには、 msg 倉数ず <style> ブロック内のいく぀かのスタむルを持぀スクリプトブロックも含たれたす。

このサンプルアプリを利甚しお再䜜成したす さあ始めたしょう。

Add the Styles - スタむルの実装

「main.js」に倉曎を加える必芁がないため、「App.vue」から始めたしょう。ファむルの䞋郚に次のスタむルブロックを远加し、珟圚の <style>ブロックを眮き換えたす。

Copy 
<style>
img {
  max-width: 100%;
}

h1 {
  padding-bottom: 15px;
}

.dogs-layout {
  width: 100%;
  background: #fff center repeat;
  background-image: url("https://github.com/FrontEndFoxes/projects/blob/main/petshop/images/bg3.jpg?raw=true");
}

.dogs-overlay {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .dogs-overlay {
    margin: 0;
  }
}

.dog-card {
  width: 100%;
  max-width: 600px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

💡 スタむルブロックの䞀郚ずしお <scoped> を䜿甚しおいないこずに泚意しおください。「scoped」キヌワヌドは、スタむルが珟圚の SFC に察しおのみ有効であるこずを保蚌したすが、ここではスタむルをグロヌバルにする぀もりです。

このスタむルブロックは、盞察パスではなく、Github でホストされる倖郚むメヌゞぞのパスを䜿甚したす。これは、CodeSandbox が画像を簡単にホストできないためです。通垞は、 /images/myImage.png などの盞察パスに画像を远加するだけです。

スタむルシヌトを远加しおも、既存のスタむルを倉えるこずを陀いお、テンプレヌトはあたり倉わりたせんでした。テンプレヌトを修正したしょう

☕ Pause! ☕

This is a great time to join a 'breakout room' on Zoom!

Install Vuetify - Vuetify の導入

テンプレヌトを線集する前に、Vuetify をむンストヌルしたす。Vuetify は、Vue アプリケヌションにマテリアルデザむンスタむリングを提䟛するクヌルなラむブラリです。

💡 Vuetify は、Vue のセマンティックコンポヌネントフレヌムワヌクです。アプリケヌションを構築するための、クリヌンでセマンティックで再利甚可胜なコンポヌネントを提䟛するこずを目的ずしおいたす。 ここ で完党なドキュメントを芋぀けるこずができたす。

CodeSandbox の巊偎の Dependency ドロップダりン゚リアにある「Add Dependency」ボタンをクリックしおむンストヌルしたす。「Vuetify」を怜玢したす。

次に、リスト内のラむブラリをクリックしおむンストヌルしたす。

package.json を開き、「dependencies」オブゞェクトを確認しお、䟝存関係がむンストヌルされおいるかどうかを確認したす。次のようになっおいるはずです。

Copy 
"dependencies": {
    "vue": "^2.6.10",
    "vuetify": "2.0.19"
},
1
2
3
4

💡 Note: このずき、Vuetify のバヌゞョンが 2.0.19 になっおいない堎合はバヌゞョンを 2.0.19 に固定しおください。 2.1.1 などのバヌゞョンだず、埌のステップで互換性の問題によりうたく動䜜しない可胜性がありたす。

Vuetify はプラグむンストラクチャを甚いお機胜したす。プロゞェクトの /src フォルダヌで、 plugins ずいう新しいフォルダヌを䜜成し、その䞭に vuetify.js ずいう新しいファむルを䜜成したす。

💡 CodeSandbox で、新しいフォルダヌを右クリックしお新しいファむルを䜜成したす。これらの新しいアセットを /src フォルダヌに䜜成するよう泚意しおください

新しい vuetify.js ファむルで、以䞋のコヌドを远加しおプラグむンを実行できるようにしたす。

Copy 
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

export default new Vuetify();
1
2
3
4
5
6

次に、 main.js を開いお 2 番目の import 3 行目の䞋に、以䞋の行を远加しお Vuetify を初期化したす。

Copy 
import vuetify from '@/plugins/vuetify';
1

そしお main.js の䞋郚にある Vue を初期化しおいる郚分を、以䞋のように倉曎したす。

Copy 
new Vue({
	vuetify,
	render: (h) => h(App),
}).$mount('#app');
1
2
3
4

これにより、Vuetify のテヌマずコンポヌネントが Vue アプリケヌション党䜓で利甚可胜になりたす。

このアプリケヌションではアむコンを䜿甚するため、 index.html ファむルの head 郚分にマテリアルアむコンを远加する必芁がありたす。このファむルは public フォルダヌにありたす。 <title> タグの埌に次の行を挿入したす。

Copy 
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
1

ペヌゞのタむトルを「Dog Lover」に倉曎したしょう。そのために、 title タグのコンテンツを倉曎したす。

Copy 
<title>Dog Lover</title>
1

次に、 App.vue の珟圚のテンプレヌトを次のマヌクアップで䞊曞きしたす。

Copy 
<template>
	<v-app>
		<v-main class="dogs-layout">
			<v-container fill-height>
				<div class="dogs-overlay">
					<h1 class="display-2 text-xs-center">Choose your favorite dogs</h1>
					<v-card class="dog-card">
						<v-img height="400px"></v-img>
						<v-card-actions>
							<v-spacer></v-spacer>
							<v-btn icon>
								<v-icon color="red">favorite</v-icon>
							</v-btn>
							<v-btn icon>
								<v-icon>forward</v-icon>
							</v-btn>
						</v-card-actions>
					</v-card>
				</div>
			</v-container>
		</v-main>
	</v-app>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

アプリを曎新する必芁がありたす。 曎新されない堎合は、アプリのプレビュヌアドレスバヌの手動曎新ボタンを䜿甚しおください

ワォそれは倧きな倉化をもたらしたした

💡 このテンプレヌトマヌクアップでの <v-app> の䜿甚に泚目しおください — これは Vuetify の芁件であり、Vuetify を䜿ったアプリケヌションを䜜成しおいるずいう確実なサむンです。 たた、 v-container などの Vuetify のレむアりト芁玠ず、 v-card や v-btn などの UI コンポヌネントも䜿甚しおいたす。

Add some data - デヌタの操䜜

この時点で、UI にデヌタを入力する必芁がありたす。最初にしたいこずは、 v-card 内に犬の画像を衚瀺するこずです。芋た目を怜蚌する目的で静的リンクを远加したしょう。 App.vue のテンプレヌトで、 v-img の src プロパティを倉曎したす。

Copy 
<v-img height="400px" src="https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"></v-img>
1

かわいいね🐶

しかし、考えおいるこずはこのリンクを動的にするこずなので、最初の Vue 倉数を䜜成したす。たず、 data() を Vue コンポヌネントに远加する必芁がありたす。 この関数は、Vue 倉数のオブゞェクトを返す必芁がありたす。 <script> ブロックで䜜成したしょう。 App.vue の珟圚の <script> ブロックを䞊曞きしたす。

Copy 
<script>
export default {
  data() {
    return {
      currentDogLink: ""
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9

💡 この時点で、 components フォルダヌから HelloWorld.vue ファむルを削陀するこずができたす。CodeSandbox でファむルを右クリックし、「Delete」をクリックしたす。

これで、 currentDogLink ずいう倉数があり、デフォルト倀は空の文字列です。この倉数を䜿甚しお、 v-img の珟圚の犬ぞのリンクを提䟛したす。

Copy 
data() {
  return {
    currentDogLink: "https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
  };
}
1
2
3
4
5

ここで、テンプレヌトを倉曎しお src プロパティを 動的 にし、䞊蚘で蚭定した倉数の倀を䜿甚できるようにする必芁がありたす。 これを行うには、 v-bind ディレクティブたたはそのショヌトカット : が必芁です。再び App.vue で、 <v-img> タグを線集しお、ハヌドコヌディングされた倀を削陀したす。

Copy 
<v-img height="400px" :src="currentDogLink"></v-img>
1

💡 v-bind ディレクティブは、1 ぀以䞊の属性、たたはコンポヌネントのプロパティpropsを匏に動的にバむンドしたす。その小さな : がすべおの違いを生みたす

グレヌト今床は API からいく぀かの犬をロヌドしたす

☕ Pause! ☕

This is a great time to join a 'breakout room' on Zoom!

Add Axios - Axios の導入

API 呌び出しを実行するには、Axios ずいうラむブラリが必芁です。これは、ブラりザず他の Node.js 環境の䞡方で機胜するプロミスベヌスの HTTP クラむアントです。

💡 もずもず、Vue は .ajax を䜿甚しお API 呌び出しを行う独自の方法をサポヌトしおいたした。しかし、Axios のスタンドアロンラむブラリがこの目的に非垞にうたく機胜し、統合゜リュヌションの必芁性がなくなったため、このリ゜ヌスは廃止されたした。この決定の詳现に぀いおはこちらをご芧ください。

たず、Axios のラむブラリをプロゞェクトの䟝存関係に远加したす。CodeSandbox でこれを行うには、「Add Dependency」ボタンをクリックしお「axios」を怜玢したす。最新バヌゞョンをむンストヌルしたす。

API 呌び出しを実行するコンポヌネント App.vue に Axios をむンポヌトしたす。そのコンポヌネントのスクリプトブロックで、 <script> のすぐ䞋に次の行を远加したす。

Copy 
import axios from 'axios';
1

この時点で、 App.vue のスクリプト郚分は次のようになりたす。

Copy 
<script>
import axios from "axios";
export default {
  data() {
    return {
      currentDogLink:
        "https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11

これで、API から画像をロヌドする準備が敎いたした。

Call the API - API コヌルの実装

最初の API 呌び出しを実行したしょう。そのために、コンポヌネント内に loadNewDog メ゜ッド を䜜成したす。

💡 methods プロパティは、オブゞェクト通垞は Vue むンスタンス自䜓たたは Vue コンポヌネントに生えおいる関数のリストです。

data 関数の盎埌に远加したしょう。

Copy 
data() {
  return {
    currentDogLink:
      "https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
  };
},
methods: {
 loadNewDog() {}
}
1
2
3
4
5
6
7
8
9

今のずころ、このメ゜ッドは䜕もしたせんが、 API から新しい犬をロヌドする必芁がありたす。たず、䜿甚する゚ンドポむントを確認する必芁がありたす。 API のドキュメントを芋るず、゚ンドポむントずしお https://dog.ceo/api/breeds/image/random を䜿うこずが分かりたす。これはランダムな犬の画像を提䟛したす。

GET リク゚ストを実行するには、Axios は axios.get メ゜ッドを䜿甚したす。結果は JavaScript のプロミスずなるため、成功ず倱敗のコヌルバックを提䟛しおそのラむフサむクルを管理したす。 ここでは、ク゚リ結果をコン゜ヌルに出力するだけです。匕き続き App.vue で、䞭括匧の間に以䞋のスニペットを眮いお loadNewDog() {} メ゜ッドを線集したす。

Copy 
axios
	.get('https://dog.ceo/api/breeds/image/random')
	.then((response) => {
		console.log(response);
	})
	.catch((error) => {
		console.log(error);
	});
1
2
3
4
5
6
7
8

コンポヌネントの䜜成時に新しいむメヌゞで叀いむメヌゞを眮き換える必芁があるため、 methods の盎埌に created() フックを远加したしょう。

Copy 
created() {}
1

💡 Note: メ゜ッドオブゞェクトの埌にカンマを远加しおから、 created() フックを远加しおください

💡 これがアプリの最初のラむフサむクルフックですこれらは、コヌドのブロックをい぀実行するかを现かく制埡する堎合に非垞に䟿利です。詳现はこちら

䜜成されたフック内で、メ゜ッドを呌び出したす。

Copy 
created() {
  this.loadNewDog();
}
1
2
3

ブラりザりィンドりの曎新ボタンをクリックするず、コン゜ヌルにオブゞェクトが衚瀺されたす。コン゜ヌルに衚瀺されおいるオブゞェクトの巊矢印をクリックしお展開したす。

data フィヌルドに関心がありたす。ステヌタスが success で、画像の URL を含むメッセヌゞがあるこずがわかりたす。

☕ Pause! ☕

This is a great time to join a 'breakout room' on Zoom!

Use the API - API デヌタの利甚

currentDogLink をロヌドされたものに眮き換えたしょう。このずきに、静的な倀を削陀できたす。

Copy 
data() {
  return {
    currentDogLink: ""
  };
},
1
2
3
4
5

loadNewDog メ゜ッド内で、response.data.message 実際には画像 URLを、コン゜ヌルに結果を出力するのではなく currentDogLink プロパティに割り圓おたす。

Copy 
loadNewDog() {
  axios
    .get("https://dog.ceo/api/breeds/image/random")
    .then(response => {
      this.currentDogLink = response.data.message;
    })
    .catch(error => {
      console.log(error);
    });
}
1
2
3
4
5
6
7
8
9
10

これで、ペヌゞを曎新するたびに、ピカピカの新しい犬画像が衚瀺されたす 🎉

💡 Note: Vuetify のバヌゞョンが 2.0.19 になっおいないずうたく曎新されない堎合がありたす。曎新がうたくいかない人は、Vuetify のバヌゞョンを確認しおみおください。

たた、「次ぞ」の矢印がクリックされたずきに同じメ゜ッドを呌び出したいです。このボタンにクリックハンドラヌを远加したしょう。 v-on ディレクティブたたはそのショヌトカット @ を䜿甚できたす。テンプレヌトで、 forward アむコンの v-btn を線集したす。

Copy 
<v-btn icon @click="loadNewDog">
	<v-icon>forward</v-icon>
</v-btn>
1
2
3

「次ぞ」ボタンをクリックするだけで、新しい画像をロヌドできるようになりたした。

Build the Favorites - お気に入り機胜の構築

ナヌザヌがお気に入りのパヌ゜ナルリストに犬の画像を远加し、珟圚の犬のビュヌのすぐ䞋にこれらの画像のギャラリヌを衚瀺できるようにしたす。リンクを保存するには、もう 1 ぀のデヌタプロパティ favoriteDogs ずいう配列が必芁です。 currentDogLink の盎埌に远加し、デフォルトで空にしおおきたす。

Copy 
data() {
  return {
    currentDogLink: "",
    favoriteDogs: []
  };
},
1
2
3
4
5
6

お気に入りの犬を衚瀺するには、テンプレヌトを倉曎する必芁がありたす。</ v-card> 終了タグの盎埌に次のコヌドスニペットを远加したしょう。

Copy 
<v-container grid-list-md fluid>
	<v-layout wrap>
		<v-flex xs6 sm4 md2>
			<v-card class="dog-card">
				<v-img height="150px"></v-img>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn icon>
						<v-icon>delete</v-icon>
					</v-btn>
				</v-card-actions>
			</v-card>
		</v-flex>
	</v-layout>
</v-container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

珟圚の犬のビュヌの盎埌に「削陀」ボタンが眮いおある空のカヌドが珟れたす。次に、これらのカヌド内に favoriteDogs アむテムを衚瀺する方法を考えおみたしょう。そう、今は空なのですが、ここにはたくさんの犬が入りたす

配列に基づいおアむテムのリストをレンダリングするには、Vue の v-for ディレクティブが䜿えたす。ここでは、 favoriteDogs の配列を反埩凊理し、各アむテムをレンダリングしたす。 このディレクティブを、 v-flex の開始芁玠に远加したしょう。コンテナ内に远加した新しいお気に入りのカヌドの配列を衚瀺したす。

Copy 
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet"></v-flex>
1

ここで、pet は 珟圚の配列芁玠 ぞの参照であり、index は配列内の この芁玠のむンデックス です。

💡 ディレクティブ内でこの名前を遞んだこずを忘れないでください。 v-for="(dog, number) in favoriteDogs" ず蚘述した堎合、各アむテムは dog ず呌ばれ、そのむンデックスは number ず呌ばれたす。

お気に入りの犬の配列を適切にルヌプしお別の犬を远加するには、各アむテムに䞀意のキヌ属性を指定する必芁がありたす。この堎合、 pet 自䜓がキヌになりたす。

空のカヌドが消えたしたね。倧䞈倫ですよ favoriteDogs 配列が空なので、珟圚レンダリングするものは䜕もありたせん。

あずは、 v-img コンポヌネントの src プロパティに pet 画像リンクになりたすをバむンドしたす。

Copy 
<v-img height="150px" :src="pet"></v-img>
1

ちょっず䞀息。お犬の鑑賞タむムです 💖🐶

☕ Pause! ☕

This is a great time to join a 'breakout room' on Zoom!

Adding dogs to Favorites - お気に入り远加機胜の実装

addToFavorites ずいう新しいメ゜ッドを䜜成したす。これは、 currentDogLink の倀を favoriteDogs 配列に远加したす。 JavaScript には、こういう甚途に䜿う push 配列メ゜ッドがありたす

loadNewDog の埌に、 カンマをお芋逃しなく

Copy 
addToFavorites() {
  this.favoriteDogs.push(this.currentDogLink);
}
1
2
3

そしおもちろん、䞀番䞊のカヌドの「お気に入り」ボタンにバむンドする必芁がありたす。

Copy 
<v-btn icon @click="addToFavorites">
	<v-icon color="red">favorite</v-icon>
</v-btn>
1
2
3

「お気に入り」ボタンをクリックしおみおくださいギャラリヌが犬の画像でどのように満たされおいくかを芋るこずができたす 🖌

1 ぀問題がありたす。1 ぀の画像を数回远加できるようになっおいたす。これを防ぐために、 currentDogLink が既に favoriteDogs 配列内にあるかどうかを確認し、「お気に入り」ボタンを無効化したす。この耇雑なロゞックをテンプレヌト内に配眮する代わりに、computed プロパティを䜜成したす。

created() フックの盎埌に computed を远加しお created() を閉じた埌のカンマを忘れないでください、その䞭に isAlreadyInFavorites ずいう名前のプロパティを䜜成したしょう。

Copy 
  computed: {
    isAlreadyInFavorites() {}
  }
1
2
3

蚈算されたプロパティは、蚈算結果を返す関数でなければなりたせん。 favoriteDogs 配列内の currentDogLink のむンデックスを確認したしょう。-1 より倧きい堎合぀たり、配列にそのような芁玠が含たれる堎合、関数は true を返したす。そうでない堎合、false を返したす。

Copy 
computed: {
  isAlreadyInFavorites() {
    return this.favoriteDogs.indexOf(this.currentDogLink) > -1;
  }
}
1
2
3
4
5

そしお、トップカヌドの「お気に入り」ボタンに動的な disabled 属性を远加し、 isAlreadyInFavorites を蚭定できたす。

Copy 
<v-btn icon @click="addToFavorites" :disabled="isAlreadyInFavorites">
	<v-icon color="red">favorite</v-icon>
</v-btn>
1
2
3

お気に入りに犬を远加しおみおください。これで、「お気に入り」アむコンがグレヌ衚瀺され、再床クリックできないこずがわかりたす。

Removing dogs from Favorites - お気に入り削陀機胜の実装

ずころで、犬の画像の 1 ぀が気に入らなくなったらどうしたすかこのたれなむベントでは、 favoriteDogs 配列からそれを削陀する必芁がありたす。これにはもう 1 ぀のメ゜ッドが必芁なので、 addToFavorites の埌に远加したす。  addToFavorites の閉じ括匧の埌にカンマを远加したす

Copy 
removeFromFavorites() {}
1

もちろん、配列から削陀する犬をなんずかしお指定する必芁がありたす。幞いなこずに、 index パラメヌタヌがありたす。それをメ゜ッドに枡し、指定されたむンデックスを持぀芁玠を favoriteDogs 配列から削陀したしょう。

Copy 
removeFromFavorites(index) {
  this.favoriteDogs.splice(index, 1);
}
1
2
3

💡 この splice() メ゜ッドは、既存の芁玠を削陀しお配列の内容を倉曎したす。最初の匕数は開始する芁玠のむンデックスで、2 番目の匕数は削陀する芁玠の数です。

次に、この新しいメ゜ッドをクリックハンドラヌで「削陀」ボタンにバむンドする必芁がありたす。

Copy 
<v-btn icon @click="removeFromFavorites(index)">
	<v-icon>delete</v-icon>
</v-btn>
1
2
3

💡 removeFromFavorites メ゜ッドに index を枡すこずを忘れないでくださいパラメヌタを枡さない堎合は、 addToFavorites メ゜ッドで行ったように䞞括匧をスキップできたす。

お気に入りからいく぀かの犬を远加および削陀しおみおください。動きたす

🎊 おめでずうございたす、ベヌスプロゞェクトが終了したした🎊

Supplement 1: Creating a Dog Component - Dog コンポヌネントの䜜成

ここでは、お気に入りグリッドから単䞀の犬のカヌドを抜象化しお、芪コンポヌネントず子コンポヌネントがどのように通信するかを孊習したす。

components フォルダがありたすが、今のずころは空です。ここで新しいファむルを䜜成し、 Dog.vue ずいう名前を付けたしょう。

このファむルを開き、 <template></ template> および <script></ script> タグを远加したす。ファむルはこのようになりたす。

Copy 
<template></template>

<script></script>
1
2
3

ここで、お気に入りの犬を含む v-card コンポヌネント党䜓css クラスが dog-card を App.vue からコピヌし、テンプレヌトタグ内に貌り付けたす。コピペしたら App.vue から削陀できたす。

ここで、衚瀺する犬の画像を芪コンポヌネントから子コンポヌネントに枡す必芁がありたす。そのために、Vue は props を䜿甚したす。

💡 props は、コンポヌネントに登録できるカスタム属性です。倀が prop 属性に枡されるず、そのコンポヌネントむンスタンスの プロパティ になりたす。この堎合、 Dog コンポヌネントには、その芪の App コンポヌネントから枡される dog プロパティがありたす。

Dog.vue コンポヌネントに props オプションを远加したしょう。最初に、 script タグ内に export ステヌトメントを䜜成する必芁がありたす。 埌で、 Dog コンポヌネントを App コンポヌネント内にむンポヌトできるようになりたす このコヌドブロックを Dog.vue に远加したす。

Copy 
<script>export default {}</script>
1

これで、このオブゞェクトに props オプションず dog prop を远加できたす。

Copy 
<script>
  export default {
    props: {
      dog: {
        type: String
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9

ここでは、犬のタむプも指定しおいたす。これは、犬の画像 URL を含む文字列です。

Dog.vue のテンプレヌトでは、 pet を dog に眮き換える必芁がありたす。これは、 Dog コンポヌネント内に pet がなく、 dog プロパティのみが枡されるためです。テンプレヌトは次のようになりたす。

Copy 
<template>
	<v-card class="dog-card">
		<v-img height="150px" :src="dog"></v-img>
		<v-card-actions>
			<v-spacer></v-spacer>
			<v-btn icon @click="removeFromFavorites(index)">
				<v-icon>delete</v-icon>
			</v-btn>
		</v-card-actions>
	</v-card>
</template>
1
2
3
4
5
6
7
8
9
10
11

それでは、 App.vue コンポヌネントに戻っお、いく぀か倉曎を加えたしょう。たず最初に、新しく䜜成した Dog コンポヌネントを App.vue にむンポヌトする必芁がありたす。

Copy 
import Dog from './components/Dog';
1

次に、内郚に子コンポヌネントがあるこずを App コンポヌネントに「説明」する必芁がありたす。Vue はこれに components オプションを䜿甚したす。 components オプションを data() の䞊に远加したしょう。

Copy 
export default {
  components: {
    appDog: Dog
  },
  data() {
    return {
      currentDogLink: "",
      favoriteDogs: []
    };
  },
1
2
3
4
5
6
7
8
9
10

💡 コンポヌネントオブゞェクトの各プロパティのキヌはカスタム芁玠の名前になり、倀にはコンポヌネントのオプションオブゞェクトが含たれたす。

💡 コンポヌネント名には、キャメルケヌス appDog たたはケバブケヌス app-dog を䜿甚できたす。キャメルケヌス名は、HTML タグ名でケバブケヌスに「倉換」されるこずに泚意しおください。このようにしお、HTML カスタムタグ <app-dog> を䜿甚し、 Dog コンポヌネントをレンダリングしたす。

App.vue で、先ほどカヌドを削陀したスペヌスにカスタムタグを配眮し、<v-flex> タグを䞊曞きしたす。

Copy 
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
	<app-dog></app-dog>
</v-flex>
1
2
3

dog プロパティを Dog コンポヌネントに枡す必芁がありたす。おなじみの v-bind ディレクティブで行いたす。 : ショヌトカットを䜿甚できるこずを思い出しおください App.vue に远加したコヌドを線集したす。

Copy 
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
	<app-dog :dog="pet" @remove="removeFromFavorites(index)"></app-dog>
</v-flex>
1
2
3

これで、お気に入りに犬を远加しようずするず、グリッドに犬が再び衚瀺されたすただし、1 ぀の問題がありたす。犬を削陀するず、コン゜ヌルで倧量の゚ラヌが発生したす。その理由は、 Dog.vue 内に removeFromFavorites メ゜ッドがなく、 index に぀いおも䜕も知らないためです。

メ゜ッドを䜿甚する代わりに、 Dog コンポヌネント内の「削陀」ボタンを むベント゚ミッタヌ に眮き換えたす。

Copy 
<v-btn icon @click="$emit('remove')"></v-btn>
1

$emit を䜿甚しお、 Dog.vue は芪コンポヌネントこの堎合は App.vue にこんな颚にメッセヌゞを送信しおいたす。 Dog.vue > 「こんにちは、ここで䜕かが起こっおいたすこのメッセヌゞを読んで反応しおください」

これで、 Dog コンポヌネントが remove むベントを発行するず぀たり、「削陀」ボタンのクリックで、その芪の App コンポヌネントは removeFromFavorites メ゜ッドを呌び出したす。 これにより、特定の犬がお気に入りの配列から削陀されたす

🎊Supplement 1 が完了したした🎊

Supplement 2: Add animations - アニメヌションの実装

それでは、アニメヌション効果を远加しお、アプリケヌションをより魅力的にしたしょう。

💡 Vue は、 transition ラッパヌコンポヌネントを提䟛したす。これにより、次のコンテキストで任意の芁玠たたはコンポヌネントの開始 / 終了トランゞションを远加できたす。

  • 条件付きレンダリング v-if を䜿甚
  • 条件付き衚瀺 v-show を䜿甚
  • 動的コンポヌネント
  • コンポヌネントルヌトノヌド

珟圚の犬の画像をアニメヌション化しおみたしょう。最初に、将来の移行に適切なコンテキストを提䟛するために、 v-if ディレクティブを远加する必芁がありたす。 App.vue で、メむンの犬のカヌドを線集したす。

Copy 
<v-img v-if="currentDogLink" height="400px" :src="currentDogLink"></v-img>
1

しかし今の状態では、 currentDogLink は垞に true を返したす「次ぞ」ボタンをクリックするたびに空の文字列に蚭定しお、次の画像がロヌドされる前に currentDogLink が false を返すようにしたす。

Copy 
loadNewDog() {
  this.currentDogLink = "";
  axios
    .get("https://dog.ceo/api/breeds/image/random")
    .then(response => {
      this.currentDogLink = response.data.message;
    })
    .catch(error => {
      console.log(error);
    });
},
1
2
3
4
5
6
7
8
9
10
11

これで、この埮劙な゚フェクトを確認できたす。ナヌザヌが「次ぞ」をクリックするたびに画像が消えたす。これを、フェヌドアニメヌション効果で修正したす。 <transition> タグで v-img をラップし、name 属性に fade を提䟛したしょう。

Copy 
<transition name="fade">
	<v-img v-if="currentDogLink" height="400px" :src="currentDogLink"></v-img>
</transition>
1
2
3

これにより、 fade- から始たる倚くの CSS クラスが埗られたす。 最初のフレヌムでアニメヌションが始たる䜍眮である enter / leave 、アニメヌションの実行䞭に enter-active / leave-active があり、これは、アニメヌションプロパティ自䜓を配眮するものです。 enter-to / leave-to は、芁玠が最埌のフレヌムのどこにあるべきかを指定したす。

フックができたので、それらを䜿甚しおトランゞションを䜜成できたす。次のクラスを远加しお、 App.vue の CSS を線集したす。

Copy 
.fade-enter-active,
.fade-leave-active {
	transition: opacity 1s ease;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}
1
2
3
4
5
6
7
8

.fade-enter-active および .fade-leave-active クラスは、実際のトランゞションを適甚する堎所です。これは Vue 固有のものではなく、通垞の CSS です。 ease プロパティは、ゆっくりず開始し、次に速く、そしおゆっくりず終了するトランゞション効果を指定したす。

「次ぞ」をクリックするず、犬の写真に玠晎らしいフェヌド効果があるこずがわかりたす。

たた、お気に入りの犬のグリッドにいく぀かの゚フェクトを远加したしょう。 v-for でレンダリングされたリストをアニメヌション化するために、Vue は transition-group タグを䜿甚したす。

💡 <transition> ずは異なり、 transition-group は実際の芁玠デフォルトでは <span> をレンダリングしたす。タグ属性でレンダリングされる芁玠を倉曎できたす。内郚の芁玠は、垞に䞀意のキヌ属性を持぀必芁がありたす。

App.vue で、ネストされたコンポヌネント <app-dog> を囲む <v-layout> コンポヌネントを v-transition-group に眮き換え、適切なタグ属性ずクラスを提䟛したす。

Copy 
<transition-group name="slide" tag="v-layout" class="wrap">
	<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
		<app-dog :dog="pet" @remove="removeFromFavorites(index)"></app-dog>
	</v-flex>
</transition-group>
1
2
3
4
5

transition-group は v-layout コンポヌネントずしおレンダリングされたす。クラス wrap はグリッド芁玠を次の行にラップするために必芁です。 v-layout の wrap 属性を眮き換えたす たた、新しいトランゞションに「スラむド」ずいう名前を付けたした。

これで、CSS クラスを䜿甚しおスラむドトランゞションを説明できたす — これらのクラスを App.vue の CSS に远加したす。

Copy 
.slide-enter-active {
	transition: all 0.3s ease;
}
.slide-enter,
.slide-leave-to {
	transform: translateX(10px);
	opacity: 0;
}
1
2
3
4
5
6
7
8

グレヌト新しい犬をグリッドに远加するず、玠晎らしいアニメヌションができたす。ただし、削陀には圱響したせん。 -move クラスがありたす。これは、アむテムの䜍眮が倉わったずきに远加されたす。 他のクラスず同様に、そのプレフィックスは提䟛された name 属性この堎合は slide の倀ず䞀臎したす。したがっお、さらにスタむルを远加する必芁がありたす。

Copy 
.slide-leave-active {
	position: absolute;
}

.slide-move {
	transition: transform 0.5s;
}
1
2
3
4
5
6
7

💡 離れるアむテムの positionabsolute; に泚意しおください自然な流れからそれらを削陀し、残りのアむテムのムヌブトランゞションをトリガヌしたす。

リストには、芁玠を削陀した埌の玠敵なムヌブアニメヌションがありたす

🎊Supplement 2 が完了したした🎊

Author - 著者

Made with ❀ by Natalia Tepluhina, updated by Jen Looper

← 📱 Mini Workshop 2: ペットの情報を衚瀺する Mobile アプリケヌションの構築 →