編集履歴

回答編集履歴

ロジックと回答文を大リファクタリング

2018/03/19 16:38

投稿

スコア21472

answer CHANGED Viewed

@@ -1,6 +1,39 @@
-まず、３の倍数でアホになる人は関数化しましょう。
+まず、今回の質問文の改良点的な所が幾つか見受けられます。
-3という文字が含まれる時というのは後で対応していくので、まずは3の倍数に集中してくださいね。
+- document.writeは非推奨なのでやめよう
+- 数字がアホになるか否かの判定ロジックは関数として切り分けよう
+- 数字を入れるとアホ、もしくは数字を返すロジックも関数として切り分けよう
+- タイマー機能を改良しよう
+---
+> document.writeは非推奨なのでやめよう
+document.writeはJavaScript(以下JS)黎明期の書き方ですが、
+これは様々な箇所で不具合が出るダメな子です。
+結果、どのJSの書籍でも「document.write」は使うな！と明記される程嫌われている機能なので忘れてください。
+DOMツリー構造を動的に変更するやり方を覚えましょう。
+jQueryというライブラリを扱うのが初心者にはオススメです。
+[jQueryのDOMを挿入](https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9)を覚えてください。
+この反映は質問者さんへの課題として残しておきます。
+従って、今回の回答文では`console.log`とデベロッパーツールによる簡易的な表示方法を利用していきます。
+F12キーを押すと、デベロッパーツールが立ち上がります。
+`console.log(123)`という風に実行すると、デベロッパーツールのconsoleタブに結果を出力してくれます。
+---
+> 数字がアホになるか否かの判定ロジックは関数として切り分けよう
+３の倍数でアホになる判定ロジックは関数として外部に切り出してください。
+関数にしてしまえば、結果の確認がとても楽になりますよ。
+`isナベアツ`です！
+numという数値の引数を要求しており、アホになりそうだったら`true`
+普通の回答で数字を教えてくれそうなら`false`になります。
 ```JavaScript
 var isNabeatsu = function (num) {
   return num % 3 === 0;
@@ -8,209 +41,196 @@
 console.log(isNabeatsu(1)); // false
 console.log(isNabeatsu(2)); // false
 console.log(isNabeatsu(3)); // true
+console.log(isNabeatsu(4)); // false
+console.log(isNabeatsu(5)); // false
+console.log(isNabeatsu(6)); // true
 ```
-早速これを質問文に組み込みましょう。
+よしよし、うまく動作しているようですね。
-…と、document.writeは推奨されてない書き方なので、[jQueryのDOMを挿入](https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9)を覚えてください。
+ですが、これはまだ3の倍数だけで判定するので、肝心の13や23等で反応しなさそうです。
-とりあえずはデベロッパーツールのコンソールに表示するやり方で作っていきます。
-コードを下記のように変えて、F12キーでデベロッパーツールを起動してみてください。
-(タイマー機能は一旦潰しています。これも後で復活させますからね。)
 ```JavaScript
 var isNabeatsu = function (num) {
   return num % 3 === 0;
 }
-var start = function () {
-  var suuji = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  for (var it of suuji) {
-    var output = isNabeatsu(it) ? 'AHO！' : ''+it;
+console.log(isNabeatsu(13)); // false
-    console.log(output);
+console.log(isNabeatsu(23)); // false
-  }
-}
-start();
-// 1
-// 2
-// AHO！
+console.log(isNabeatsu(31)); // false
-// 4
-// 5
-// AHO！
-// 7
-// 8
-// AHO！
-// 10
 ```
+あらら、全滅です…
-うん、上手く動いているようですね。
+では、これを改良して完成させましょうか。
-では、次の章で3という文字が含まれた時にアホになる対応も入れていきます。
+「数字の3が含まれている場合はfalseではなくtrueになる」が条件です。
----
+この数字の3を探す…といった風な用途は「文字列検索」といいます。
+JSには[数値型や文字列型、配列、オブジェクト…など、様々な型](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)が存在します。
+それらの型には値を加工するのに使う便利な機能(メソッド)が用意されています。
-文字を検索するには正規表現が便利です！
+先程3の倍数か否かを確認する為に、`num % 3`と入力しましたね。
+数値型は数値計算に利用される型であり、他の型では数値計算は不可能です。
-ですが、今回は[String.prototype.split](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)という機能を使ってやってみましょう。
+でも数字の3を探したい……こういう要望は文字列型が得意とする仕事なので数値型から文字列型へ変換(キャスト)する必要があります。
-まず、JavaScriptには型によって使えるメソッドが決まっています。
+プログラマのテクニックの一つとして、数値として判断出来る値は基本的には数値型として所持しておき、
-例えば文字列ならば`.split`というメソッドが利用可能になっています。
+文字列検索がしたくなったらその時だけ、文字列型にキャストする使い方が分かりやすくオススメです。
-デベロッパーツールのコンソールで下記のコマンドを入力して動作を確かめてみましょう。
+今回は[String.prototype.match](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)を利用することにしました。
+正規表現を使って文字列を探す少々高難度の手法ですが、3という文字列を探すだけの正規表現は`/3/`とわりと簡単なので採用しました。
+（他にも様々な方法で解決することが可能で、１０人に頼めば１０人共がちょっとずつ違う判定ロジックを持ってくると思います。探してみてね！！）
 ```JavaScript
-// この書き方はエラー
-// 数字の直後に.があると、小数点として認識しようとするがアルファベットなので構文エラーとなる
+// 文字列検索を行うmatchメソッドは文字列型限定のメソッド
+var num = 123;
-30.split("3")
+num.match(/3/);
-// Uncaught SyntaxError: Invalid or unexpected token
+// Uncaught TypeError: num.match is not a function
-// カッコで包めば大丈夫…でもこの書き方もエラー
-// 数値型にはsplitというメソッドは存在しない
-(30).split("3")
-// Uncaught TypeError: 30.split is not a function
+// JSでは.toString()を使えば全ての値が文字列型にキャストされる
+num.toString().match(/3/);
+// ["3", index: 2, input: "123", groups: undefined]
+// 値をカッコで包んだりしてそのまま.toString()で文字列型にして使うことも可能
+(17).toString().match(/3/);
-// 文字列ならOK
+// null
-"15".split("3")
-// ["15"]
-// 3の付く文字の場合、配列が分断される事を確認
+// 論理型にキャストするにはBooleanを使う
-"130".split("3")
-// ["1", "0"]
-// 数値が文字列になってくれればなぁ…
-// JSではどんな型にも.toString()が用意されてて、文字列に変換できる！
-(130).toString().split("3")
+Boolean((31).toString().match(/3/));
+// true
-// ["1", "0"]
+Boolean((16).toString().match(/3/));
+// false
 ```
+これを元に`isナベアツ`関数を完成させましょう。
+「３で割り切れる数字」もしくは「数字の3がある」場合ですので、
-実現できそうな気がしてきましたね。
+論理和であるor演算子`||`を利用します。
-`.split`を通った文字列は、`3`という文字列があろうがなかろうが必ず配列に変化します。
-そして、配列には`length`という要素数を調べるプロパティが存在します。
 ```JavaScript
+var isNabeatsu = function (num) {
+  return (num % 3 === 0) || Boolean(num.toString().match(/3/));
+}
+console.log(isNabeatsu(1)); // false
+console.log(isNabeatsu(2)); // false
-(15).toString().split("3").length
+console.log(isNabeatsu(3)); // true
-// 1
-(130).toString().split("3").length
+console.log(isNabeatsu(13)); // true
-// 2
+console.log(isNabeatsu(23)); // true
+console.log(isNabeatsu(31)); // true
+console.log(isNabeatsu(25)); // false
 ```
-そうなんです、130のように途中に3がある文字列はそこでぶった切られる為に配列の要素数が1を超えるんですね。
-念のため13や31でも挙動を確認してみましょうか
+いい感じに動作してますね。
+isナベアツ関数完成です。
-```JavaScript
+---
-(13).toString().split("3")
-// ["1", ""]
-(13).toString().split("3").length
-// 2
-(31).toString().split("3")
-// ["", "1"]
+> 数字を入れるとアホ、もしくは数字を返すロジックも関数として切り分けよう
-(31).toString().split("3").length
-// 2
-```
-これを`isNabeatsu`関数に反映してみましょうか。
+今度は`toナベアツ`関数を作成しましょうか。
+これも切り分ける事でテストが非常にしやすくなります。
+もうアホになるべき数字か否かを判定する関数は出来ていますね？
+今回は「特定条件でAHO!」か「そうでなければ数字をそのまま使う」ので、三項演算子を使ってみましょうか。
+ついでに、`AHO!`という文字列が返ってくる可能性がある以上、もう片方の数字も文字列型にキャストして同じ文字列型に合わせておいたほうが使いやすそうですね。
 ```JavaScript
 var isNabeatsu = function (num) {
-  if (num % 3 === 0) {
-    return true;
-  } else if (num.toString().split('3').length > 1) {
+  return (num % 3 === 0) || Boolean(num.toString().match(/3/));
-    return true;
-  } else {
-    return false;
-  }
 }
+var toNabeatsu = function (num) {
-console.log(isNabeatsu(11)); // false
+  return isNabeatsu(num) ? 'AHO!' : num.toString();
+}
-console.log(isNabeatsu(12)); // true
+console.log(toNabeatsu(1)); // 1
+console.log(toNabeatsu(2)); // 2
+console.log(toNabeatsu(3)); // AHO!
-console.log(isNabeatsu(13)); // true
+console.log(toNabeatsu(13)); // AHO!
+console.log(toNabeatsu(23)); // AHO!
+console.log(toNabeatsu(31)); // AHO!
 ```
+はい完了。
+このように同じ数字を入れると、必ず同じ値が返ってくるような処理は関数化しておくと、
-うん、いい感じに動作していますね。
+このように動作確認が楽ですね。
+---
+早速これを質問文に組み込みましょう。
+suuji変数に入っている配列を全て消化したら完了というロジックに変更しています。
 ```JavaScript
 var isNabeatsu = function (num) {
-  if (num % 3 === 0) {
-    return true;
-  } else if (num.toString().split('3').length > 1) {
+  return (num % 3 === 0) || Boolean(num.toString().match(/3/));
-    return true;
-  } else {
-    return false;
-  }
 }
-var start = function () {
+var toNabeatsu = function (num) {
+  return isNabeatsu(num) ? 'AHO!' : num.toString();
+}
-  var suuji = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var suuji = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var aaa = 0;
+var bbb = setInterval(start, 1000);
+function start() {
+  // 表示したい文字列は今回はconsole.logを使って表示
+  console.log(toNabeatsu(suuji[aaa]));
+  aaa++;
-  for (var it of suuji) {
+  if (aaa >= suuji.length) {
-    var output = isNabeatsu(it) ? 'AHO！' : ''+it;
+    clearInterval(bbb); // タイマー停止
-    console.log(output);
   }
 }
-start();
+// 1
+// 2
+// AHO!
+// 4
+// 5
+// AHO!
+// 7
+// 8
+// AHO!
+// 10
 ```
+１秒おきにconsole.logが実行されて、表示されていく様が分かります。
+１０秒後に数字の値が全て表示されて、これで完了ですね。
 ---
-最後にタイマー機能を復活させて終わりましょうか。
+【おまけ】
-そのまえに`suuji`の手打ちが面倒なのでさくっと数値の配列作ってくれる関数でも用意しましょうかね。
-これはイディオムというおまじない的なものなので、興味が出たら調べてみてください。
-```JavaScript
-var range = function (start, end) {
-  return Array(end - start + 1).fill(0).map(function (it, i) {
-    return i + start;
+> タイマー機能を改良しよう
-  })
-}
-console.log(range(1, 3)); // [1, 2, 3]
-console.log(range(5, 8)); // [5, 6, 7, 8]
-```
+見事動くようになりましたが、
+関数はともかく、この`suuji`、`aaa`、`bbb`がキモいんですよねぇ……
-これを使ってstart時に外から埋め込むようにします。
+何がキモいって、start関数の中から決め打ちで読みにいってるあたりです。
-まずは完成形をドン！
+こういう変数は「状態変数」といって、
+出来るだけ減らした方がかっこいいのです。
+そのためのテクニックはいくつかありますが、今回は2つ加えます。
+- ループの仕組みをsetTimeoutを使った再起ループ化
+- start関数は引数の配列を監視して続けるかやめるか選ぶように
 ```JavaScript
 var isNabeatsu = function (num) {
-  if (num % 3 === 0) {
-    return true;
-  } else if (num.toString().split('3').length > 1) {
+  return (num % 3 === 0) || Boolean(num.toString().match(/3/));
-    return true;
-  } else {
-    return false;
-  }
 }
-var range = function (start, end) {
+var toNabeatsu = function (num) {
-  return Array(end - start + 1).fill(0).map(function (it, i) {
+  return isNabeatsu(num) ? 'AHO!' : num.toString();
-    return i + start;
-  })
 }
 var start = function (numbers) {
-  if (numbers.length < 1) return;
+  if (numbers[0] == null) return;
-  var it = numbers[0];
-  var output = isNabeatsu(it) ? 'AHO！' : ''+it;
-  console.log(output);
+  console.log(toNabeatsu(numbers[0]));
   setTimeout(start.bind(null, numbers.slice(1)), 1000);
 }
-start(range(1, 13));
+start([1, 2, 3, 4, 5, 6, 7, 8, 9, 10,]);
 // 1
 // 2
-// AHO！
+// AHO!
 // 4
 // 5
-// AHO！
+// AHO!
 // 7
 // 8
-// AHO！
+// AHO!
 // 10
-// 11
-// AHO！
-// AHO！
 ```
-ちゃんと1秒おきに文字がコンソールに表示されましたね。
-setIntervalは1秒毎に時を刻んでくれるので便利ですが、
-変数のハンドリングが超大変です。
-今回はstart関数を一度実行したら、
-2度目以降は毎回setTimeoutを使う仕様にしました。
-いやいや、start関数はnumbersという数字の配列寄越せって言ってるんだから、
-setTimeoutやsetIntervalで使えないでしょ！どうすんの！？
-そんなこともあろうかと、関数には[function.prototype.bind](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)というメソッドが用意されています。
+全ての関数には[function.prototype.bind](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)というメソッドが用意されています。
 まぁ、要するに関数に値を適用しつつ、実行しないで待ってくれるという必殺技があるんです。
 ```JavaScript
@@ -223,12 +243,15 @@
 // 15
 ```
-また、配列には[array.prototype.slice](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)というメソッドが用意されており、
+更に配列には[array.prototype.slice](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)という配列の一部を切り出すメソッドがあります。
-配列を切って減らす事が可能です。
+これを利用して金太郎アメのようにnumbers変数の関数を頭から１個ずつ削り取って利用する作りにしています。
 ```JavaScript
 [1, 2, 3].slice(1)
 // [2, 3]
+[1, 2, 3].slice(1).slice(1)
+// [3]
 ```
 全体的な流れとしてはこうです。