LoginSignup
0

More than 5 years have passed since last update.

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

Posted at

はじめに

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

書いたコード

HTMLのmain部分とJavascript部分だけ。

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
$(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の違いがイマイチよくわかっていない感

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0