DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 配列を返す関数をつくり、Fizz Buzz問題を解こう ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.11】

配列を返す関数をつくり、Fizz Buzz問題を解こう ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.11】

今回は新たな文法仕様を学ばず、今までの知識を総動員して練習問題形式でコードを書いていきましょう。

まず問題を出しますので、すぐに答えを見ないでテキストエディタに書いてみてください。暗記テストではないので、前の講座を見たり、検索したりするのは可能です。

問題1

1から100までの整数が順番に入っている配列を返す関数をつくってください。関数名はcreateIntList()とします。

var lst = createIntList();
console.log(lst);

実行すると

[1, 2, 3, 4, 5, 6, 7…]

と1から100までの整数が入った配列が出力されるイメージです。

問題2

問題1で作った関数を使い、Fizz Buzz問題を解いてみてください。
1から100までの整数で、3で割り切れる場合は「Fizz」、5で割り切れる場合は「Buzz」、両者で割り切れる場合は「Fizz Buzz」、それ以外は整数がそのまま出力されるようなコードを書いてください。

問題3

ランダムな整数(0から10未満までとします)が10個格納された配列をつくる関数を定義してください。関数名はcreateRandomInt()とします。

var lst = createRandomInt();
console.log(lst);

実行すると

[4, 3, 8, 7, 6, 0, 5, 7, 9, 0]

と出力されるイメージです。

ヒント:ランダムな数字は、Math.random()で0から1未満の小数点が得られます。実際にconsole.log(Math.random())とJavaScriptコンソールに書いて出力結果を確認するとよいでしょう。Math.floor()を使うと、小数点を切り捨てて整数にしてれます。

問題1と問題2の回答例

問題1と問題2をまとめた解答例のコードを下記に書いておきます。
//はコメントなので、実際に書く必要はありません。
解答例は他にも考えれます。同じ出力結果であれば正解とします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
    function createIntList() {
      let tmp_lst = [];
        for(let i = 1; i <= 100; i++) {
          tmp_lst.push(i);
        }
      return tmp_lst;
    }

    var lst = createIntList();
    console.log(lst);

    //Fizz Buzz問題
    for(let num of lst){
      if(num % 15 === 0){
        console.log("Fizz Buzz");
      } else if (num % 3 === 0) {
        console.log("Fizz");
      } else if (num % 5 === 0) {
        console.log("Buzz");
      } else {
        console.log(num);
      }
    }
    </script>
  </body>
</html>

if else if文は条件式の書く順番に注意が必要でした(「条件分岐 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.5】」を参照)。また変数の宣言は可能な限りletを使いなるべく狭いブロックスコープに封じ込めるのがコツです。

出力結果は以下のとおりです。

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
Fizz Buzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
Fizz Buzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz
41
Fizz
43
44
Fizz Buzz
46
47
Fizz
49
Buzz
Fizz
52
53
Fizz
Buzz
56
Fizz
58
59
Fizz Buzz
61
62
Fizz
64
Buzz
Fizz
67
68
Fizz
Buzz
71
Fizz
73
74
Fizz Buzz
76
77
Fizz
79
Buzz
Fizz
82
83
Fizz
Buzz
86
Fizz
88
89
Fizz Buzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz

問題3の回答例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
    function createRandomInt() {
      let tmp_lst = [];
        for(let i = 1; i <= 10; i++) {
          let random_num = Math.floor(Math.random() * 10);
          tmp_lst.push(random_num);
        }
      return tmp_lst;
    }

    var lst = createRandomInt();
    console.log(lst);

    </script>
  </body>
</html>

出力結果は以下の通りです。ランダムな整数(0から10未満までとします)が10個格納されていればOKです。ランダムなので、Google Chromeを更新するたびに結果は異なります。

[4, 3, 8, 7, 6, 0, 5, 7, 9, 0]

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを運営。
お問い合わせ