Newer
Older
hello-programmer-world / src / pages / drafts / tips / beautiful-coding.mdx
@h.sakamoto h.sakamoto 5 days ago 4 KB draft
---
layout: "@/layouts/MarkdownLayout.astro"
---

export const title = "きれいなコードってなに?";

# {title}

パット見で、なにをするソースコードかわかりますか?  
3秒以内に答えてください。

---

<details>
<summary>ソースコードを見る</summary>

```js
function main() {
  const data = [
    { name: "もつに", scores: { math: 124, english: 34 } },
    { name: "なおき", scores: { math: 56, english: 78 } },
    { name: "たかし", scores: { math: 90, english: 12 } },
    // ...
  ];

  for (let i = 0; i < data.length; i++) {
    for (let j = i + 1; j < data.length; j++) {
      if (data[i].total === undefined) {
        data[i].total = data[i].scores.math + data[i].scores.english;
      }
      if (data[j].total === undefined) {
        data[j].total = data[j].scores.math + data[j].scores.english;
      }
      if (data[i].total > data[j].total) {
        const temp = data[i];
        data[i] = data[j];
        data[j] = temp;
      }
    }
  }

  console.log(data);
}

main();
```

</details>

---

誰かがこっちのほうが早いと言って、以下のように修正しました。  
出力結果は同じです。

さてもう1度質問します。なんのソースコードだったでしょうか?

---

<details>
<summary>ソースコードを見る</summary>

```js
function main() {
  const data = [
    { name: "もつに", scores: { math: 124, english: 34 } },
    { name: "なおき", scores: { math: 56, english: 78 } },
    { name: "たかし", scores: { math: 90, english: 12 } },
    // ...
  ];

  for (let i = 0; i < data.length - 1; i++) {
    for (let j = 0; j < data.length - i - 1; j++) {
      if (data[j].total === undefined) {
        data[j].total = data[j].scores.math + data[j].scores.english;
      }
      if (data[j + 1].total === undefined) {
        data[j + 1].total = data[j + 1].scores.math + data[j + 1].scores.english;
      }
      if (data[j].total > data[j + 1].total) {
        const temp = data[j];
        data[j] = data[j + 1];
        data[j + 1] = temp;
      }
    }
  }

  console.log(data);
}

main();
```

</details>

<br />

これかな?と想像まではついたかもしれませんが、確信は持てないのではないでしょうか?

---

では、これではわかるのではないでしょうか?

---

<details>
<summary>ソースコードを見る</summary>

```js
function sort(data) {
  for (let i = 0; i < data.length - 1; i++) {
    for (let j = 0; j < data.length - i - 1; j++) {
      if (data[j].total === undefined) {
        data[j].total = data[j].scores.math + data[j].scores.english;
      }
      if (data[j + 1].total === undefined) {
        data[j + 1].total = data[j + 1].scores.math + data[j + 1].scores.english;
      }
      if (data[j].total > data[j + 1].total) {
        const temp = data[j];
        data[j] = data[j + 1];
        data[j + 1] = temp;
      }
    }
  }
}

function main() {
  const data = [
    { name: "もつに", scores: { math: 124, english: 34 } },
    { name: "なおき", scores: { math: 56, english: 78 } },
    { name: "たかし", scores: { math: 90, english: 12 } },
    // ...
  ];

  sort(data);

  console.log(data);
}

main();
```

</details>

<details>
<summary>出力結果を見る</summary>

```plain
[
  { name: 'たかし', scores: { math: 90, english: 12 }, total: 102 },
  { name: 'なおき', scores: { math: 56, english: 78 }, total: 134 },
  { name: 'もつに', scores: { math: 124, english: 34 }, total: 158 }
]
```

</details>

<details>
<summary>答えを見る</summary>

これは、テストの点数の合計で生徒を昇順に並び替えるソースコードです。

</details>

ことろで、こんな不具合報告が来たとします。

> 合計がおかしいです!

さて、今のソースコードを見て、どこを直せばよいかわかりますか?

<details>
<summary>ソースコードを見る</summary>

```js
function sort(data) {
  for (let i = 0; i < data.length - 1; i++) {
    for (let j = 0; j < data.length - i - 1; j++) {
      if (data[j].total === undefined) {
        data[j].total = data[j].scores.math + data[j].scores.english;
      }
      if (data[j + 1].total === undefined) {
        data[j + 1].total = data[j + 1].scores.math + data[j + 1].scores.english;
      }
      if (data[j].total > data[j + 1].total) {
        const temp = data[j];
        data[j] = data[j + 1];
        data[j + 1] = temp;
      }
    }
  }
}

function main() {
  const data = [
    { name: "もつに", scores: { math: 124, english: 34 } },
    { name: "なおき", scores: { math: 56, english: 78 } },
    { name: "たかし", scores: { math: 90, english: 12 } },
    // ...
  ];

  sort(data);

  console.log(data);
}

main();
```

</details>