Vue.js: これまで学んだ知識でアプリを作ってみた

はじめに

これまでに

• Todoアプリ（デモはこちら）で追加・削除・完了状態の管理などの基本操作を学び、
• Dog APIアプリ（デモはこちら）で「APIからデータを取得し表示する流れ」を学びました。

その二つを踏襲し発展させて、

Random Dog API アプリ（デモはこちら）を作成しました。

アプリの概要

このアプリは Vue.js (Vue CLI) を使って構築したWebアプリです。
犬のランダム画像を提供してくれる Dog CEO API を利用していて、ボタンをクリックするたびにランダムな犬の写真を取得し、表示されます。
気に入った画像があれば「★ Favorite」ボタンでお気に入りに登録でき、登録した画像は「Favorite」ページで一覧として確認したり、削除したりすることも可能です。

主な機能

今回のアプリは、「Next Dog」ボタンを押すとランダムに犬の画像を取得して表示できる仕組みになっています。気に入った画像があれば「★ Favorite」ボタンでお気に入りに追加することが可能です。これは前回の Todo アプリで学んだ「追加機能」を応用したものです。

さらに、追加した画像は「Favorite」ページで一覧として確認でき、削除することもできます。
この削除機能も、以前 Todo アプリで学んだ「削除処理」を発展させたものです。

具体的には filter 関数 を使って実装しました。子コンポーネントから渡された id と一致する要素を取り除き、それ以外を配列に残すことで、クリックした画像だけを削除できる仕組みになっています。

このあたりは Todo アプリで何度も書いてきた処理だったので、自然と手が動いてスムーズに書けました。

deleteImgId(id) {
  this.dogArray = this.dogArray.filter(array => array.id !== id)
}

また、ロード中にはスピナーを表示する仕組みも実装しました。
isLoading が true の間はスピナーを表示し、isLoading が false に切り替わったタイミングで取得した犬の画像を反映するようにしています。

<transition name="fade">
  <img v-if="dogImg" :src="dogImg" class="dog-img" />
</transition>

<div v-if="isLoading" class="loading-overlay">
  <div class="loader"></div>
</div>

さらに改善点として、「Favorite」ボタンを何度もクリックできてしまい、同じ画像が複数保存される問題がありました。これに対して、以前 Dog API アプリで学んだ「ダブルクリック防止の制御」を発展させ、以下のような実装をしました。

• 「★ Favorite」がクリックされると、emitFavorite 内で isDone を true に変更し、ボタンを disabled 状態にする
• 「Next Dog」ボタンで新しい画像を取得したタイミングで isDone を false に戻す

  
data() {
  return {
    dogImg: null,
    isLoading: false,
    isDone: false
  }
},
emitFavorite() {
  if (!this.dogImg) return;
  this.isDone = true;
  this.$emit('favorite', {
    id: this.dogImg,
    url: this.dogImg,
  });
},

async randomDogImg() {
  if (this.isLoading) return;
  this.isLoading = true;
  try {
    const url = "https://dog.ceo/api/breeds/image/random";
    const res = await fetch(url);
    const data = await res.json();
    this.dogImg = data.message;
  } catch (e) {
    console.error(e);
  }
  this.isLoading = false;
  this.isDone = false;
}

学んだこと

今回の制作を通して、以前の Todo アプリで学んだ「追加や削除の処理」を実際に応用することができました。クリックひとつで要素を追加したり削除したりする仕組みが、別のアプリでも自然に使えるようになってきたと感じています。

また、Dog API アプリで練習した「fetch を使って API からデータを取得し、それを DOM に反映させる流れ」にも少しずつ慣れてきました。外部 API を扱う処理は最初こそ難しく感じましたが、繰り返し実装していくことで抵抗がなくなってきています。

さらに今回は、Vue Router を導入して「Home」「Favorite」「About」といった複数のページに機能を整理しました。1ページにすべてを詰め込むのではなく、用途ごとにページを分けたことで、アプリ全体の構成がわかりやすくなったと思います。

今後の展望

今後はまず、お気に入りのデータを保持できる仕組みを追加していきたいです。現在はページを遷移したりリロードするとお気に入りが消えてしまいますが、これを localStorage を利用してブラウザに保存することで、再表示しても残るようにしたいなと。

また、次のステップアップとして API を活用した検索機能にも挑戦したいと考えています。クエリパラメータを使って条件を指定できるようにすることで、より実用的で使いやすいアプリへと発展させていきたいです。

ということで、今回はサクッと機能紹介などをまとめてみました。

これまでユーデミーの講座を見ながらでないとアプリを作れなかったのですが、ようやく自作アプリが作れるようになってきたかなと思っています。

大学が少し忙しい時期になってきましたが、これからも学習を続けながらアプリ開発を継続していきたいと思います！

最後まで読んでいただき、ありがとうございました！！