この長いメソッドチェーンを改行

Prompt

return [...document.getElementById('matrix').children].map(row => [...row.children].filter(elem => elem.nodeName === "INPUT"));
このなが～いメソッドチェーンを見やすい形に、規則に則る形で改行するとき、どんな形になる？

承知した！その長ーいメソッドチェーンを、読みやすい形に改行するんだね。これは、コードの可読性を高める上で非常に重要な作業だ！

JavaScriptのコーディングスタイルはいくつかあるけど、一般的に使われるのは**「. (ドット) の前で改行する」スタイルと、「=> (アロー) や , (カンマ) の後ろで改行する」**スタイルだね。この2つを組み合わせると、君のメソッドチェーンはぐっと読みやすくなるよ。

読みやすい改行スタイル 📚

ここでは、一般的に採用されている、メソッドチェーンと引数を視覚的に分離するスタイルを提案するね。

JavaScript

return [...document.getElementById('matrix').children]
  .map(row =>
    [...row.children]
      .filter(elem => elem.nodeName === "INPUT")
  );

---

解説 ✨

このスタイルは、以下のルールに基づいているよ。

1. メソッドチェーンの改行:

   • メソッドチェーンを繋ぐ**. (ドット)** の前で改行する。これにより、各メソッドが独立した行に配置され、一連の処理の流れ（map → filter）が視覚的に追いやすくなるんだ。

2. アロー関数の改行:

   • アロー関数（=>）の本体が一行に収まらない、または複数行になる場合は、アローの後ろで改行し、次の行を字下げする。これにより、関数がどこからどこまでか、その中身が何であるかが明確になるよ。

3. 字下げ（インデント）:

   • 改行した行は、前の行よりも一段階深い字下げを行う。これにより、コードの階層構造（mapの中にfilterがある、など）が視覚的に表現され、一目で把握できるようになるんだ。

他の書き方も見てみよう

もし、アロー関数の引数が長く、本体が短く簡潔な場合は、以下のように引数と本体の間で改行する方法もあるよ。

JavaScript

return [...document.getElementById('matrix').children]
  .map(
    row => [...row.children]
      .filter(elem => elem.nodeName === "INPUT")
  );

どちらのスタイルも良いけど、最初のスタイルの方が、mapとfilterのネスト構造をより明確に表現しているため、今回のケースにはより適しているかもしれないね。

PrettierやESLintなどのコードフォーマッターツールを使うと、君が指定したルールに基づいて、このような整形を自動で行ってくれるから、チーム開発でも一貫したコードスタイルを簡単に保てるよ！