FizzBuzzするものをKnockout.jsで作ってみた

#はじめに
フロントエンジニアとして働き始めて約半年経って、復習＆自力でどこまで書けるのか掴むために、作ってみました。

#書いたコード
HTMLのmain部分とJavascript部分だけ。

```HTML:HTML
    <main>
        <div>
            <fieldset class="conditionsFieldset commonFieldset">
                <legend>出力条件を設定する</legend>
                <div class="conditions">
                    <div class="numberOfLines">
                        <div class="numberOfLinesTitle">
                            <span>行数(1-1000)：</span>
                        </div>
                        <div>
                            <input type="text" class="numberOfLinesInput" data-bind="value: numberLine"/>
                        </div>
                    </div>
                    <div class="valueAndChar" data-bind="foreach: conditionsList">
                        <div class="valueAndCharItems">
                            <div class="value">
                                <div>
                                    <span>値：</span>
                                </div>
                                <div>
                                    <input type="text" class="valueInput" data-bind="value: conditionValue" />
                                </div>
                            </div>
                            <div class="char">
                                <div>
                                    <span>文字列：</span>
                                </div>
                                <div>
                                    <input type="text" class="charInput" data-bind="value: char" />
                                </div>
                            </div>
                            <div>
                                <button type="button" data-bind="click: $parent.delete出力条件.bind($parent, $data)">削除</button>
                            </div>
                        </div>

                    </div>
                    <div class="addButton">
                        <button type="button" data-bind="click: add出力条件">追加</button>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <fieldset class="commonFieldset outputFieldset">
                <legend>出力結果</legend>
                <ol data-bind="foreach: numberCount">
                    <li data-bind="text: value"></li>
                </ol>
            </fieldset>
        </div>
    </main>
```

```Javascript:Javascript
$(document).ready(function () {
    FizzBuzz2ViewModel = (function () {
        var FizzBuzz2ViewModel = function (initData) {
            var self = this;

            self.numberLine = ko.observable(50).extend({
                validation: [{
                    validator: function (value) {
                        if (value !== null && value > 1000 || value <= 0) {
                            return false;
                        } else {
                            return true;
                        }
                    },
                    message: "行数は1から1000までの値を入力してください"
                }]
            });
            self.conditionsList = ko.mapping.fromJS([
                { conditionValue: 3, char: "Fizz" },
                { conditionValue: 5, char: "Buzz" }
            ]);

            self.numberCount = ko.pureComputed(function () {
                var resultList = [];

                if (self.numberLine() > 1000 || self.numberLine() <= 0) {
                    return false;
                }

                for (var i = 1; i <= self.numberLine(); i++) {
                    var result = "";
                    for (var j = 0; j < self.conditionsList().length; j++) {
                        if (i % self.conditionsList()[j].conditionValue() === 0) {
                            result += self.conditionsList()[j].char();
                        }
                    }
                    if (result === "") {
                        result = i ;
                    }
                    resultList.push({ value: result });
                }
                return resultList;
            }, self);
        }

        FizzBuzz2ViewModel.prototype.add出力条件 = function () {
            var self = this;

            self.conditionsList.push(ko.mapping.fromJS({ conditionValue: null, char: "" }));
        }

        FizzBuzz2ViewModel.prototype.delete出力条件 = function (target出力条件) {
            var self = this;
            
            self.conditionsList.remove(target出力条件);
        }

        return FizzBuzz2ViewModel;
    }());
}());
```

#課題とか
* knockout.validation.jsをどうにかいじって、バリデーションをアラートで出したい（けど怖くて触れなかった）
* 行数以外の出力条件にバリデーションついてないのでどうにかしたい
* computedとpureComputedの違いがイマイチよくわかっていない感