Vue.js を使ったデータのフォーマットと可視化

はじめに

このプロジェクトでは、ユーザーにとって使いやすい形式で表示するために表データを変換およびフォーマットする方法を学びます。これは、フロントエンド開発者がバックエンドからのデータを扱う際に頻繁に遭遇する一般的なタスクです。

👀 プレビュー

🎯 タスク

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

• JSONファイルからデータを取得するためのHTTPリクエストを送信する方法
• 表示に必要な形式に合うようにデータをフォーマットする方法
• Vue.jsとElement UIを使ってHTMLテーブルにフォーマットされたデータをレンダリングする方法

🏆 成果

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

• axios を使ってHTTPリクエストを送信してデータを取得する
• データを操作して望ましい形式に変換する
• Vue.jsとElement UIを統合して、応答性が高く視覚的に魅力的なテーブルコンポーネントを作成する

Skills Graph

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

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

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

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

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

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

データを取得するためのリクエストを送信する

このステップでは、fetchTableData.json ファイルからデータを取得するためのHTTPリクエストを送信する方法を学びます。

1. コードエディタで index.html ファイルを開きます。
2. <script> セクションで、Vueインスタンスの methods に新しい getTableData() メソッドを追加します。
3. getTableData() メソッドの中で、axios.get() 関数を使って fetchTableData.json ファイルにGETリクエストを送信します。

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: データをフォーマットしてtableDataに割り当てる
    });
  }
}

4. Vueインスタンスの mounted で getTableData 関数を呼び出します。

mounted() {
  this.getTableData();
},

データをフォーマットする

このステップでは、データを必要な形式にフォーマットして tableData プロパティに割り当てる方法を学びます。

1. コードエディタで index.html ファイルを開きます。
2. <script> セクションで、Vueインスタンス内の getTableData() メソッドを見つけます。
3. getTableData() 関数の then() メソッドの成功コールバック内で、レスポンスオブジェクトから data プロパティを取得します。

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. resData 配列をループして、要件に応じてデータをフォーマットします。
   • datetime フィールドの場合、形式を YYYYMMDD から YYYY-MM-DD に変換します。
   • sex フィールドの場合、値を 1 から "Man" に、0 から "Woman" に変換します。
   • vip フィールドの場合、値を 1 から "Yes" に、0 から "No" に変換します。

データをフォーマットするコードは以下の通りです。

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
      resData.forEach((item) => {
         item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
         item.sex = item.sex? "Man" : "Woman";
         item.vip = item.vip? "Yes" : "No";
      });
   });
}

5. データをフォーマットした後、resData 配列を tableData プロパティに割り当てます。

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

これで、データがフォーマットされて tableData プロパティに割り当てられ、HTML内のテーブルをレンダリングするために使用されます。

最終的な結果は以下の通りです。

まとめ

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