Vue.js の検索機能をマスターする

はじめに

このプロジェクトでは、Vue 2 を使って簡単な検索機能を作成する方法を学びます。検索機能により、ユーザーはコンテンツを検索し、関連する結果を表示できます。このプロジェクトを通じて、Vue.js の基本と Web アプリケーションにおける検索機能の実装方法を理解することができます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

プロジェクト構造を設定し、必要なファイルとフォルダを準備する方法
index.htmlファイルに HTML 構造を追加する方法
検索機能を処理するための JavaScript ロジックを実装する方法
CSS を使って検索入力と検索結果をスタイリッシュにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js を使って応答性とインタラクティブなユーザーインターフェイスを作成する
関連するコンテンツをフィルタリングして表示する検索機能を実装する
HTML、CSS、JavaScript を統合して完全な Web アプリケーションを作成する
Vue.js におけるデータとコンピュートドプロパティを使って作業する

プロジェクト構造をセットアップする

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

この問題の初期コードは既に提供されています。コーディング環境を開き、ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

cssフォルダには、検索入力と検索結果のスタイル設定に使用されるstyle.cssファイルが含まれています。imagesフォルダには、検索結果に表示される画像が含まれています。index.htmlファイルはプロジェクトのメイン HTML ファイルであり、vue.min.jsファイルは Vue.js ライブラリです。

プロジェクトの主な目標は、検索機能を実装するために必要な HTML 構造、JavaScript ロジック、CSS スタイルを追加することでindex.htmlファイルを完成させることです。

HTML 構造を追加する

このステップでは、index.htmlファイルに HTML 構造を追加します。

index.htmlファイルを開き、以下のコードを追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Function</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Please search" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      // JavaScript コードは次のステップで追加します
    </script>
  </body>
</html>

この HTML 構造には、検索入力フィールドと検索結果を表示するためのラッパーが含まれています。検索入力フィールドはsearchデータプロパティにバインドされており、検索結果はfilteredList配列を反復処理するためのv-forディレクティブを使用して表示されます。

JavaScript ロジックを追加する

このステップでは、index.htmlファイルに JavaScript ロジックを追加します。

<script>タグの中に、以下のコードを追加します。

class Post {
  constructor(title, link, img) {
    this.title = title;
    this.link = link;
    this.img = img;
  }
}

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post(
        "kitty",
        "https://unsplash.com/s/photos/cat",
        "./images/cat.png"
      ),
      new Post("puppy", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "polar bear",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "little lion",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "little bird",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "fox",
        "https://unsplash.com/@introspectivedsgn",
        "./images/fox.png"
      )
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.includes(this.search);
      });
    }
  }
});

この JavaScript コードは、Postクラスを定義し、検索機能を処理するための必要なデータとコンピュートドプロパティを持つ新しい Vue インスタンスを作成します。

Postクラスは、タイトル、リンク、画像プロパティを持つ投稿のインスタンスを作成するために使用されます。
Vue インスタンス（app）は以下のプロパティで作成されます。
- el：Vue インスタンスをマウントする要素を指定します。
- data：検索入力用のsearchプロパティとpostListアイテムの配列を含みます。
- computed：検索入力に基づいてpostListをフィルタリングするfilteredListコンピュートドプロパティを定義します。

CSS スタイルを変更する

css/style.css には初期のスタイルが用意されています。

もしさらにスタイルをカスタマイズしたい場合は、CSS ファイルを変更して検索入力と検索結果の外観を変更できます。

あるいは、スタイルをそのままにして次のステップに進むこともできます。

プロジェクトを実行する

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行ってみてください。

Vue.js を使った検索機能の開発