vueのコードを修正する④ 〜クラスをimportする〜

vueのコードを修正する④

半年ほど前に、栄養価を確認できるレシピサイトをつくりました。
その為にがむしゃらに書きちらしてしまったコードを改善していきます。

この記事はその第四弾。

今回修正することになるコード

今回は↓のコードが修正されます。

import axios from "axios";
export default {
  data: function () {
    return {
      show: false,
      post: {},
      posts: [],
      allIngredients: [],
      keyword: "",
      errors: "",
      uploadFile: null,
    };
  },

〜省略〜
  computed: {
    addNutrients: function () {
      let sum_nutrients = {
        Energy: "0",
        Protein: "0",
        Lipid: "0",
        Carbohydrate: "0",
        Dietary_fiber: "0",
        Potassium: "0",
        Calcium: "0",
        iron: "0",
        Zinc: "0",
        VitaminA: "0",
        VitaminB1: "0",
        VitaminB2: "0",
        VitaminC: "0",
        Salt_equivalent: "0",
      };
      let sn_keys = Object.keys(sum_nutrients);
      for (let ingrd in this.ingrd_sum) {
        let bfr_num3 = ingrd.quantity;
        for (let i = 0; i < 14; i++) {
          let sn_key = sn_keys[i];
          let num1 = parseFloat(sum_nutrients[sn_key]);
          let num2 = parseFloat(ingrd[sn_key]);
          let num3 = parseFloat(bfr_num3);
          if (Number.isNaN(num2)) {
            num2 = 0;
          }
          if (num3 < 0 || 1000 < num3) {
            num3 = 1;
          } else {
            num2 = num2 * num3;
          }
          sum_nutrients[sn_key] = num1 + num2;
          );
        }
      }
      return sum_nutrients;
    },
  },

〜省略〜

 methods: {
〜省略〜
    Reflect_Nutrients: function (post) {
      console.log(`this.post.Energy: ${this.post.Energy}`);
      console.log(`this.sum_nutrients: ${JSON.stringify(this.sum_nutrients)}`);
      this.post.Energy = this.addNutrients.Energy;
      this.post.Protein = this.addNutrients.Protein;
      this.post.Lipid = this.addNutrients.Lipid;
      this.post.Carbohydrate = this.addNutrients.Carbohydrate;
      this.post.Dietary_fiber = this.addNutrients.Dietary_fiber;
      this.post.Potassium = this.addNutrients.Potassium;
      this.post.Calcium = this.addNutrients.Calcium;
      this.post.iron = this.addNutrients.iron;
      this.post.Zinc = this.addNutrients.Zinc;
      this.post.VitaminA = this.addNutrients.VitaminA;
      this.post.VitaminB1 = this.addNutrients.VitaminB1;
      this.post.VitaminB2 = this.addNutrients.VitaminB2;
      this.post.VitaminC = this.addNutrients.VitaminC;
      this.post.Salt_equivalent = this.addNutrients.Salt_equivalent;
    },

クラスの作成とインポート

色々楽になりそうだし勉強になりそうだったので、栄養価のクラスを作成してみることにしました。各栄養価毎に処理を回すことも多かったので、栄養価名を配列で取得できるようなクラスメソッド(keyname)も定義しました。
●作成したクラス

export default class Nutrients {
  constructor(
    Energy = "0",
    Protein = "0",
    Lipid = "0",
    Carbohydrate = "0",
    Dietary_fiber = "0",
    Potassium = "0",
    Calcium = "0",
    iron = "0",
    Zinc = "0",
    VitaminA = "0",
    VitaminB1 = "0",
    VitaminB2 = "0",
    VitaminC = "0",
    Salt_equivalent = "0"
  ) {
    this.Energy = Energy;
    this.Protein = Protein;
    this.Lipid = Lipid;
    this.Carbohydrate = Carbohydrate;
    this.Dietary_fiber = Dietary_fiber;
    this.Potassium = Potassium;
    this.Calcium = Calcium;
    this.iron = iron;
    this.Zinc = Zinc;
    this.VitaminA = VitaminA;
    this.VitaminB1 = VitaminB1;
    this.VitaminB2 = VitaminB2;
    this.VitaminC = VitaminC;
    this.Salt_equivalent = Salt_equivalent;
  }
  keyname() {
    return Object.keys(this);
  }
}

このクラスをimportして利用していきます。
併せて変数名や、冗長な変数への格納工程も削除しました。
●修正後コード

<script>
import Nutrients from "./nutrientsClass.js";
import axios from "axios";
export default {
  data: function () {
    return {
      show: false,
      post: {},
      posts: [],
      allIngredients: [],
      keyword: "",
      errors: "",
      uploadFile: null,
    };
  },
〜省略〜
  computed: {
    addNutrients: function () {
      let totalNutrients = new Nutrients();
      for (let i in this.allIngredients) {
        for (let j = 0; j < 14; j++) {
          let oneOfNutrientsName = totalNutrients.keyname()[j];

          totalNutrients[oneOfNutrientsName] =
            Number(totalNutrients[oneOfNutrientsName]) +
            Number(this.allIngredients[i][oneOfNutrientsName]) *
              Number(this.allIngredients[i].quantity);
        }
      }
      return totalNutrients;
    },
  },

〜省略〜

  methods: {
〜省略〜
    Reflect_Nutrients: function (post) {
      for (let i = 0; i < 14; i++) {
        let sampleNutrients = new Nutrients();
        let oneOfNutrientsName = sampleNutrients.keyname()[i];
        this.post[oneOfNutrientsName] = this.addNutrients[oneOfNutrientsName];
      }
    }

配列の作成とインポート

HTTPのpushメソッドを利用する際のコードも冗長に見えたので、pushするプロパティの配列を予め作成してインポートすることにしました。
●作成した配列

const postParameters = [
  "rname",
  "rinformation",
  "ingredient",
  "procedure_1",
  "procedure_2",
  "procedure_3",
  "rimage",
  "Energy",
  "Protein",
  "Lipid",
  "Carbohydrate",
  "Dietary_fiber",
  "Potassium",
  "Calcium",
  "iron",
  "Zinc",
  "VitaminA",
  "VitaminB1",
  "VitaminB2",
  "VitaminC",
  "Salt_equivalent",
];
export default postParameters;