はじめに

前回はプログラミングをする上で最低限必要な基礎知識のたくさん学びました。

今回の記事では実際に前回学んだパーツを使用して実際に動くプログラムを作成していきます。

まだ実用性はなく、なんのためにしているかわからない段階ですが、

あくまでJavaScriptになれるためにしていると割り切ってください！

何度も言うようですが、プログラミングはスキルですのでご自身で考えながら実際に手を動かしてください。

今回、実装するアルゴリズムは「FizzBuzz」と「素数判定」です。

FizzBuzz

FizzBuzzは初心者用のプログラミングのアルゴリズムの中ではかなり有名です。

FizzBuzzでは１から１００の数字を表示します。ただし

３の倍数の際はFizz
５の倍数の際はBuzz
１５の倍数の際はFizzBuzz

というふうに出力する。というものです。

ぜひ、５分ぐらいわからなくてもご自身なりにコードを書いてみてください。

プログラミングをするさいは細かく段階をつけて書いていくのがコツです。

まず、FizzBuzzに必要なことの第１段階としては１から１００を出力するところです。

それは以下のようにして書くことができます。

for (var i = 1; i < 101; i++) {
  console.log(i); 
}

繰り返し処理のforループですね。

これがなにか思い出せないひとは是非、前回の記事を見直してみてください。

実際に実行してみると１から１００の数字が出力されると思います。

それでは、段階として数字の倍数を確認することだと思います。

プログラミングで倍数を確認するには余り算を使用します。

// 余り算
// 10を2で割ったあまり（偶数だったら０、奇数だったら１）
console.log(10 % 2) // => 0

// 10が３の倍数か確かめる
(10 % 3) === 0

余り算を使用することで、数の倍数を確かめることができます。

それではこれを利用して３の倍数だった場合はFizzと出力してみましょう。

for (var i = 1; i < 101; i++) {
  if (i % 3 == 0) { // 3の倍数だったら
    console.log("Fizz");
  } else { // それ以外の数字では
    console.log(i);
  }
}

ここで一度上記を参考に「５の倍数だとBuzz」「１５の倍数だとFizzBuzz」というふうにご自身で実装してみましょう。

以下のようになった方が多いと思います。

for (var i = 1; i < 101; i++) {
  if (i % 3 == 0) {
    console.log("Fizz");
  } else if (i % 5 == 0) {
    console.log("Buzz");
  } else if (i % 15 == 0) {
    console.log("FizzBuzz");
  } else {
    console.log(i);
  }
}

パッとコードだけ見るぶんには問題がないようにみます。

ですが、実際にコードを走らせてみてください。

１５の倍数の際に「FizzBuzz」と表示されていないと思います。

頭でコードを動かして書いていく力も大事ですが、

このように実際にコードを動かしてみないとバグに気づかないことが多々あります。

ではどうして「FizzBuzz」は表示されないのでしょうか？

それは１５の倍数は３の倍数でも５の倍数でもあるからです。

なので、これを解決するには３の倍数と５の倍数の場合分けよりも前に１５の倍数をチェックしてあげる必要があります。

for (var i = 1; i < 101; i++) {
  if (i % 15 == 0) {
    console.log("FizzBuzz");
  } else if (i % 5 == 0) {
    console.log("Buzz");
  } else if (i % 3 == 0) {
    console.log("Fizz");
  } else {
    console.log(i);
  }
}

これでFizzBuzzは完成です。

素数判定

FizzBuzzは驚くほど意味がないものでしたが、FizzBuzzで使用した知識があれば素数判定をすることができます。

これも一度ご自身で作成してみてください。

素数というのは自分と１以外の数で割ることができない数字です。

一見難しそうに見えますが、これを確認するのはとても簡単です。

２からその調べたい数字まで全て割ってみて、どの数字でも割り切れなかったら素数なのですから

以下回答になります。しつこいようですが、本当にご自身で一度作成することをおすすめします！！

それでは実際に作成してみましょう。

まず、素数を判定するための関数を用意します。

// isPrimeという名前の関数を作成
// isPrimeはnumberを引数として受け取る
function isPrime(number) {
  // 素数だったらtrue
  // 素数じゃなかったらfalse
}

この関数では引数として受け取る数字をnumberと名付けています。

numberは実際に調べたい数字を表すということですね。

ひとまず、２からその数字の一つ手前までの数字の全ての数字のあまりを見てみましょう。

function isPrime(number) {
  for (var i=2; i<number; i++) {
    // 2から調べたい数字の一つ前までのループ
    console.log(i)
  }
}

あとは簡単ですね。

割り切れたらFalseを返す
最後までループして割けれなかったらTrueを返す

ことを実装しましょう。

function isPrime(number) {
  for (var i=2; i<number; i++) {
    if (number % i == 0) { // 調べたい数字をiで割りあまりがなかったら...
      // すぐにfalseを返す
      // returnをするとコードがここで終わる
      return false;
    }
  }

  // ループが終わって、ここまでコードが来たら素数
  return true
}

これで素数かどうかを判定する関数の出来上がりです。以下のように使用できますね。

// 100までの素数全て表示するプログラム
for(var i=0; i<101; i++) {
  if (isPrime(i)) { // 素数だったら...
    console.log(i)
  }
}

お疲れ様です。これで素数かどうか調べる関数が作ることができましたね。

ですが、実は現在のアルゴリズムはかなり遅く、改善の余地はまだまだあります。

例えば、調べたい数字の数の１つ手前までのあまりを見ていますが、実際は調べたい数の半分までで充分です。

他にも２の倍数でないことがわかったら、４の倍数でもないと必ずわかるので調べなくていい数字はたくさんあります。

興味がある方はぜひ、ご自身でコードを変更してみてください！

ひとまず、JavaScript 超入門のシリーズはこれで終わりです。

これらのアルゴリズムがご自身でかけるようになったのであれば、JavaScriptの言語の超入門はできたといっても過言ではないでしょう。これからはこれらの知識を生かして、JavaScriptを使用するライブラリなどを勉強していくようになります。

僕もJavaScript超入門の続きとして、Vueの入門を書く予定ですのでお楽しみにしてください！

Javascript 超入門 #3

はじめに

FizzBuzz

素数判定

コメント