Javascript 超入門 #3

はじめに

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

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

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

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

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

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

 

FizzBuzz

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

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

  1. 3の倍数の際はFizz
  2. 5の倍数の際はBuzz
  3. 15の倍数の際はFizzBuzz

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

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

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

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

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

 

ここで一度上記を参考に「5の倍数だとBuzz」「15の倍数だと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);
  }
}

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

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

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

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

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

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

それは15の倍数は3の倍数でも5の倍数でもあるからです。

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

 

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で使用した知識があれば素数判定をすることができます。

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

 

あとは簡単ですね。

  1. 割り切れたらFalseを返す
  2. 最後までループして割けれなかったら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)
  }
}

 

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

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

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

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

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

 

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

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

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

大阪桐蔭高校中退。TECH::CAMP梅田でプログラミングを学習する。 同じくTECH::CAMPでメンターを経験する。 その後、渡米しカリフォルニアの大学に行きながら シリコンバレーで現役のエンジニアとして働いている。 同時にTECHACADEMYのメンターをしている
投稿を作成しました 9

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る
%d人のブロガーが「いいね」をつけました。