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

JavaScriptJavaScriptBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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

👀 プレビュー

最終的にフォーマットされた表のプレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") subgraph Lab Skills javascript/array_methods -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} javascript/obj_manip -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} javascript/async_prog -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} javascript/dom_select -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} javascript/dom_manip -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} javascript/http_req -.-> lab-445634{{"Vue.js を使ったデータのフォーマットと可視化"}} end

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

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

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

├── 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に割り当てる
    });
  }
}
  1. Vueインスタンスの mountedgetTableData 関数を呼び出します。
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;
   });
}
  1. 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";
      });
   });
}
  1. データをフォーマットした後、resData 配列を tableData プロパティに割り当てます。
getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

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

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

データをフォーマットする
✨ 解答を確認して練習

まとめ

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