JavaScript ふりかえり [2] fizzbuzz編

久しぶりにfizzbuzz 書いてみました。

今回勉強したこと

  • for (var i = 0; i < hoge; i++) {...} 構文(まぁ普通のfor 文)
  • for (hoge of piyo) {...} 構文
  • JSDoc コメント
  • strict モード

fizzbuzz用のファイルについて

同じ階層に2つのファイルは配置しています。

fizbuzz.js

ソースの前に

ara1yu さん のコメントを受けまして、 全体のスコープで 'use strict'; を効かせたものを追記してみました。
動作可否に影響があったので、もう一つ書いてみました。
ちなみに strict モードとは、 現在使っている参考書の説明では、仕様としては存在するが、現在では安全性や効率面の問題で利用すべきない構文をエラーで通知してくれる モードのことです。 通知対象になる主な構文には、以下の様なものがあります。

  • var 命令の省略を禁止
  • 将来的に追加予定のキーワードを予約後に追加
  • 引数、プロパティ名の重複を禁止
  • undefined/ null への 代入を禁止
  • with 命令の利用を禁止
  • arguments.callee プロパティへのアクセスを禁止
  • eval 命令で宣言された変数を 周囲のスコープに拡散しない
  • 関数配下のthis は グローバルオブジェクトを参照しない
  • 0~ の8 進数表記を禁止

また、メリットとしては、以下です。

  • 非Strict モードのコードよりも高速に動作する場合がある。
  • 将来のJavaScript で変更される点を禁止することで今後の移行が簡単になる。
  • JavaScript の べからず を 理解する手がかりになる。

有効にする方法ですが、以下の一文を関数内、あるいは、他のいかなる文より前で宣言することです。

'use strict';

関数内で宣言することで Strict モードの適用範囲を関数内に留められます。全体で利用したい場合は、他のいかなる文よりも前で宣言してください。

参考: mozilla による Strict モードのドキュメント

fizzbuzz メソッドの内部のみ strict

// fizzbuzz.js
/**
 * 1からcount までの fizzbuzz を 実行するメソッド
 * @param {number} count いくつまでfizzbuzz を行うかを指定する数値.
 * @return {Array} fizzBuzzResult fizzbuzz の結果を 詰めた配列.
 */
function fizzBuzz(count) {
    'use strict';
    let fizzBuzzResult = []; // []で宣言してあげないとコケる.
    // new Array(hoge) という 宣言も可能。その場合、 hoge は int で、 長さが hoge の array を宣言したことになる。
    for (var i = 1; i <= count; i++) {
        if (i % 15 == 0) {
            fizzBuzzResult.push('FizzBuzz');
        } else if (i % 5 == 0) {
            fizzBuzzResult.push('Buzz');
        } else if (i % 3 == 0) {
            fizzBuzzResult.push('Fizz');
        } else {
            fizzBuzzResult.push(i);
        }
    }
    return fizzBuzzResult; // ruby ばっかり書いていて、return を 書くのを 最初は忘れてた。
}

let result = fizzBuzz(100);

for (value of result) {
    console.log(value);
}

for (value of result) {
    document.write(value);
    document.write('<br />')
}

全体が strict

'use strict'; // strict モードで書いていく
// 久しぶりすぎて普通にスネークケースで変数名を書いていたので修正した。
/**
 * 1からcount までの fizzbuzz を 実行するメソッド
 * @param {number} count いくつまでfizzbuzz を行うかを指定する数値.
 * @return {Array} fizzBuzzResult fizzbuzz の結果を 詰めた配列.
 */
function fizzBuzz(count) {
    let fizzBuzzResult = []; // []で宣言してあげないとコケる.
    // new Array(hoge) という 宣言も可能。その場合、 hoge は int で、 長さが hoge の array を宣言したことになる。
    for (var i = 1; i <= count; i++) {
        if (i % 15 == 0) {
            fizzBuzzResult.push('FizzBuzz');
        } else if (i % 5 == 0) {
            fizzBuzzResult.push('Buzz');
        } else if (i % 3 == 0) {
            fizzBuzzResult.push('Fizz');
        } else {
            fizzBuzzResult.push(i);
        }
    }
    return fizzBuzzResult; // ruby ばっかり書いていて、return を 書くのを 最初は忘れてた。
}

let result = fizzBuzz(100);

/** この記法は、 strict モードでは 動かなかった。
for (value of result) {
    console.log(value);
}
for (value of result) {
    document.write(value);
    document.write('<br />')
}
*/

// 以下、 strict で 動作するように上記のコメントアウトを書き換えたもの.
// 最初 result.length(); と書いていたが、 lentgh は メソッドではなく、 プロパティだから動作しなかった。
let resultLength = result.length;

for (var i = 0; i < resultLength; i++) {
    console.log(result[i]);
    document.write(result[i]);
    document.write('<br />');
}

fizzbuzz.html

<!-- fizzbuzz.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fizzbuzz</title>
    </head>
    <body>
        <script type="text/javascript" src="./fizzbuzz.js"></script>
        <noscript>JavaScriptが利用できません。</noscript>
    </body>
</html>

出力

改行入れたせいでとても長くなってしまった。

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

動かし方

clone して chrome で HTML Fileの方を オープンしてみてね.

リポジトリ
https://github.com/Natsukingdom/JS

所感

GitHubにソース上げながらブログ更新するのいいですね。 実際に手を動かしているんで、妄想垂れ流しにならずに済みます。
あとは書いてないと、記法のルールとかすぐ忘れますね。まぁ、何種類もないので平気です。
次はクラスとかについてやってい来ます。

使っている本