Vue.js を使った柔軟なスケルトン画面の構築

はじめに

このプロジェクトでは、Vue.js を使って柔軟なスケルトン画面コンポーネントを作成する方法を学びます。スケルトン画面は、実際のコンテンツが読み込まれる前に、ユーザーインターフェイスの簡略化されたバージョンを表示する UI パターンであり、従来のロードインジケータと比較して、より良いユーザーエクスペリエンスを提供します。

👀 プレビュー

Skeleton screen animation preview

🎯 タスク

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

Vue.js を使って再利用可能なスケルトン画面コンポーネントを作成する方法
提供されたデータに基づいてスケルトン画面の構造を実装する方法
スケルトン画面要素に点滅アニメーションを適用する方法

🏆 成果

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

Vue.js を使って柔軟なスケルトン画面コンポーネントを作成する
スケルトン画面要素に動的なスタイルとクラスを適用する
スケルトン画面に点滅アニメーション効果を実装する

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

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── components
│   ├── List
│   │   ├── content.js
│   │   └── index.js
│   └── Skeleton
│       ├── index.js
│       └── item.js
├── css
│   └── style.css
├── index.html
└── lib
    └── vue.min.js

その中で：

index.html はメインページです。
components/list は提供されたリストコンポーネントです。
components/Skeleton はスケルトン画面コンポーネントです。
lib はプロジェクト依存関係を格納するフォルダです。
css はプロジェクトのスタイルを格納するフォルダです。

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

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

Initial Effect

スケルトン画面コンポーネントを作成する

このステップでは、index.html から渡されるデータ paragraph を使い、Vue の再帰コンポーネントの知識を組み合わせて、スケルトン画面コンポーネントの記述を完了する方法を学びます。

components/Skeleton/item.js ファイルを開きます。
ItemTemplate 変数に、以下のコードを追加します。

let ItemTemplate = ``;
// TODO
ItemTemplate += `
<div :class="'ske-'+paragraph.type+'-container'">
  <div v-for="item in arrIs(paragraph)" :class="classIs(item)" :style="styleIs(item)" >
    <item :paragraph="item" :active="active"></item>
  </div>
</div>
`;

このコードは、paragraph データに基づいてスケルトン画面の構造を作成します。

Vue.component("item", {...}) セクションで、以下のメソッドを実装します。

data() {
  return {
    typeList: ["rect", "circle"],
    classPrefix: "ske ske-",
    activeClass: " ske-ani"
  };
},
methods: {
  arrIs(obj) {
    if (obj?.rows) return obj.rows;
    else if (obj?.cols) return obj.cols;
    else return [];
  },
  classIs(obj) {
    if (this.typeList.includes(obj.type)) {
      return (
        this.classPrefix + obj.type + (this.active? this.activeClass : "")
      );
    } else {
      return this.classPrefix + obj.type;
    }
  },
  styleIs(obj) {
    if (obj?.style && obj?.rowStyle) return {...obj.style,...obj.rowStyle };
    else if (obj?.style) return obj.style;
    else if (obj?.rowStyle) return obj.rowStyle;
    else if (obj?.colStyle) return obj.colStyle;
    else return {};
  }
}

arrIs メソッドは、ネストされたコンポーネントをレンダリングするために、paragraph オブジェクトの rows または cols プロパティを使用するかどうかを判断します。classIs メソッドは、type プロパティに基づいてスケルトン画面要素に適用する CSS クラスを判断します。styleIs メソッドは、style、rowStyle、および colStyle プロパティに基づいてスケルトン画面要素に適用するスタイルを判断します。

item.js ファイルを保存します。

完了後のエフェクトは以下の通りです。

Image description

まとめ

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