72955


### やりたいこと

  * ファイルを実行するとhtml形式のfizzbuzzを表示したい
  * fizzbuzz表示の要件としては、3の倍数のときは「fizz」、5の倍数のときは「buzz」、3と5の公倍数のときは「fizzbuzz」に変換されている
  * 実行するコードと出力したいもの

[code]

    const fb = new FizzBuzz();
    fb.toHtml(1, 10);
    
    出力
    // =>
     <html>
       <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>fizz</li>
            <li>4</li>
            <li>buzz</li>
        </ul>
       </body>
     </html> 
    
[/code]

現状のコード

[code]

    function FizzBuzz() {
    }
    
    FizzBuzz.prototype.toArrayNumbers = function(from, to) {
      const array = [];
      [...Array(to - from + 1).keys()].map( i => {
        const num = i + from;
        if (num % 15 === 0) {
          array.push('fizzbuzz');
        } else if (num % 5 === 0) {
          array.push('buzz');
        } else if (num % 3 === 0) {
          array.push('fizz');
        } else {
          array.push(num);
        }
      })
      return array;
    }
    
    FizzBuzz.prototype.toHtml = function(a, b) {
      const numbers = this.toArrayNumbers(a, b);
      const lists = [];
      numbers.forEach(element => {
        lists.push(`<li>${element}</li>`);
      });
    
      const html = `
      <html>
        <body>
          <ul>
            ${lists}
          </ul>
        </body>
      </html>`;
      console.log(html);
    };
    
    
    
    const fb = new FizzBuzz();
    fb.toHtml(1, 10);
    
    現状のうまくいっていない出力
    // => 
      <html>
        <body>
          <ul>
            <li>1</li>,<li>2</li>,<li>fizz</li>,<li>4</li>,<li>buzz</li>,<li>fizz</li>,<li>7</li>,<li>8</li>,<li>fizz</li>,<li>buzz</li>
          </ul>
        </body>
      </html>
    
[/code]

html定数の中でlist配列をうまいこと展開できないかと試行錯誤していましたが  
うまくいかないので、ヒントなどいただけると嬉しいです。

そもそもプロトタイプを使った方が良いのかや、どういう書き方をするとより綺麗にかけるのかなどもご存知でしたら知りたいです。  
よろしくお願いします。


CC BY-SA 4.0
2020-12-29T02:53:49.330
72954
2020-12-29T03:13:48.617
43337
question
javascript node.js
javascriptでCLI上にhtml形式のfizzbuzzを表示したい


`lists`の埋め込み時にうまいことやるなら、以下のように`join()`すればよいかと。

[code]

          <ul>
            ${lists.join('\n        ')}
          </ul>
    
[/code]

`lists`を配列ではなく文字列にすれば良いのではという気もします。

[code]

      const lists = '';
      numbers.forEach(element => {
        lists += `<li>${element}</li>\n        `;
      });
    
[/code]

`FizzBuzz` はまったく状態を持たいないので、現状ではprototypeやclassを使うメリットはほとんどないかと思います。


CC BY-SA 4.0
2020-12-29T03:13:48.617
72955
2020-12-29T03:13:48.617
3475
72954
answer