ショートハンド構文、意味不明な省略まとめ【Day27 of 100】

これ、これ！コード読んでて

こんなの教科書で見たことない書き方や！

というのの多くは省略形だったんですね。

JavaScriptのショートハンド構文ってなんですか？

JavaScriptの**ショートハンド（Shorthand）構文**とは、コードをより短く、簡潔に記述するための書き方のことです。

「省略記法」とも呼ばれます。これを使うことで、タイピング量が減るだけでなく、コードの見通し（可読性）が良くなるというメリットがあります。

代表的なものをいくつかご紹介しますね。

---

## 1. オブジェクトのプロパティ名の省略

変数名とオブジェクトのプロパティ名が同じ場合、コロン以降を省略できます。これが一番よく使われるショートハンドかもしれません。

* **通常の書き方:**
```javascript
const name = "Gemini";
const user = {
  name: name,
  age: 1
};

```


* **ショートハンド:**
```javascript
const name = "Gemini";
const user = { name, age: 1 }; // name: name を省略

```



## 2. アロー関数

`function` キーワードを省略して `=>` で記述します。処理が1行なら `{}` や `return` も省略可能です。

* **通常の書き方:**
```javascript
const add = function(a, b) {
  return a + b;
};

```


* **ショートハンド:**
```javascript
const add = (a, b) => a + b;

```



## 3. テンプレートリテラル

文字列の結合を `+` で繋ぐのではなく、バッククォート（ ``` ）を使って直感的に書けます。

* **通常の書き方:**
```javascript
const greeting = "こんにちは、" + name + "さん！";

```


* **ショートハンド:**
```javascript
const greeting = `こんにちは、${name}さん！`;

```



## 4. 三項演算子

簡単な `if...else` 文を1行で記述できます。

* **通常の書き方:**
```javascript
let message;
if (age >= 20) {
  message = "成人です";
} else {
  message = "未成年です";
}

```


* **ショートハンド:**
```javascript
const message = age >= 20 ? "成人です" : "未成年です";

```



---

### メリットと注意点

| メリット | 注意点 |
| --- | --- |
| **コードがスッキリする** | 慣れていない人には読みづらい場合がある |
| **バグの削減**（記述量が減るため） | 複雑な処理を無理に1行にまとめると可読性が下がる |
| **モダンな開発環境に馴染む** | 古いブラウザ（IEなど）では動かないものがある |

> **💡 ポイント**
> ショートハンドは「短く書くこと」そのものよりも、**「意図を明確にし、ノイズを減らすこと」**を目的に使うのがベストです！

次は、これらの構文を実際のコード（例えば配列の操作など）でどう活用するか具体例を作ってみましょうか？

forEachのショートハンド、アロー関数バージョンとノーマル関数バージョン

        let staff2 = [
          ["A", "化学", "平岡"],
          ["B", "物理", "平柳"],
          ["C", "社会", "蝦名"],
          ["D", "英語", "尾崎"],
          ["E", "体育", "張替"],
        ];
        // staff2.forEach(function (classes) {
        //   document.write("<tr>");
        //   classes.forEach(function (detail) {
        //     document.write("<td>");
        //     document.write(detail);
        //     document.write("</td>");
        //   });
        //   document.write("</tr>");
        // });

        staff2.forEach((classes) => {
          document.write("<tr>");
          classes.forEach((detail) => {
            document.write(`<td>${detail}</td>`);
          });
          document.write("</tr>");
        });

AIによる添削

staff2.forEach(classes => {
  document.write("<tr>");
  // 処理が1行なので { } を省略し、テンプレートリテラルで結合
  classes.forEach(detail => document.write(`<td>${detail}</td>`));
  document.write("</tr>");
});