はじめに
フロントエンジニアとして働き始めて約半年経って、復習&自力でどこまで書けるのか掴むために、作ってみました。
書いたコード
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の違いがイマイチよくわかっていない感