1からn までの連続した数値を表示させるシンプルな書き方を知りたいです

Question

質問させてください。
下のように 1 から n までの連続した数値をhtmlに表示させたいです。

12345678910

下のようなコードを作成しまして、これでも思い通りの表示にはなったのですが、少し長すぎてもう少しシンプルにできればなと思っております。

const test = document.querySelector('.test');
const n = 10;
for (let i = 1; i <= n; i++) {
  const t = document.createTextNode(i);
  test.appendChild(t);
}

もし良さそうな方法がありましたらご教授いただけますと助かります。
よろしくお願いいたします。

Comments

[m.ts10806]

十分シンプルかと思います。分かりやすいですし、そう長くもない。
もう少し「シンプル」部分をきちんと書かないと、ループも何もなく単に12345678910と直に書かれた大喜利コードが出てきても文句は言えないかと思います。htmlに表示させるだけなら何かの要素にappendする必要もないわけですし。

[takopo]

すみません、確かにおっしゃる通りでした。
なんとなくfor文を使わず、1行ぐらいで書ける方法がありそうな気がしたもので・・・
この書き方でシンプルとおっしゃっていただけて安心しました。

Answer 1

少し長すぎてもう少しシンプルにできれば

コードの長さとしては読みやすく、十分 です。

が、もう少し「短く」というのであれば、

1. カンマ演算子 Const文で一気に定数宣言する
2. createTextNode() の返り値を直接 appendChild() する
3. for ブロックを文にする（ブロック内が１文のときは{、}を省略できる）。

const
  test = document.querySelector('.test'),
  n = 10
;
for (let i = 1; i <= n; i++)
  test.appendChild( document.createTextNode(i) );

もうすこし、トリッキーに書くと、

1. 定数 n は1度しか参照されてないので、for の conditionにハードコードする。
2. i++ も後置インクリメントなら、for の final-expressionで書ける。

const test = document.querySelector('.test');
for (let i=1; i<=10; test.appendChild( document.createTextNode(i++) ) );

ここまで短くすると、文法を熟知した経験豊富な人にも疎ましがられます。

minify を自動化するのが当たり前の開発では、コードの短さよりも読みやすさを優先したほうが良いと思います。

Comments

[takopo]

ご回答ありがとうございます。興味深く拝見しました。
このようなコードは普段書かないかもしれませんがとても勉強になります。
「短さよりも読みやすさを優先」ということを今後は意識して書いていきたいと思います。

[otn]

> カンマ演算子で一気に定数宣言する

宣言文で変数を区切るカンマはカンマ演算子じゃ無いです。

[AkitoshiManabe]

otn さん、ご指摘ありがとうございます（回答欄、訂正させていただきます）。
const構文で「カンマ区切り」になっていました（宣言子 + 代入文 , ..　と間違った覚え方をしておりました）。

Answer 2

const test = document.querySelector('.test');
const n = 10;
test.textContent=Array(n).fill("").map((x,y)=>y+1).join("")

Comments

[takopo]

ご回答ありがとうございます！ご返信遅くなってすみません。
新しい配列を作ってそれを加工する方法があるのですね。シンプルにまとまっていてとても勉強になります。こういうコードをすらすらかけるのはすごいと思いました。
コードの意味を調べるのになかなか苦戦しているのですが、なんとか頑張って読み解いていきたいと思います。

Answer 3

作成したコードが問題なさそうでしたので、解決済みにさせていただきます。
大変お騒がせしました。

Comments

[m.ts10806]

早々と締める議題ではないと思います。
問題があるかないかで言えばありませんが、やろうと思えばいくらでもどこまでもできますし、要件、目的次第なところもあります。

[takopo]

遅くなってすみません。
おっしゃる通り諦めるのが少し早かったなと反省しております。
今後はもう少し粘り強く考えてみたいと思います。