JavaScript

【課題】JavaScriptのforループの復習【繰り返し処理】

どうも、つよぽんです!

今回は、「JavaScriptのforループを使った繰り返し処理」の理解度を確認するために用意した演習課題の紹介記事となります。具体的には「FizzBuzz問題」というものを解いていただきます。

演習課題にチャレンジしてクリアすることで、forループの知識を定着させることが出来ます。

今回の課題の内容は以下のとおりです。

演習課題で確認する内容
  1. JavaScriptのforループの理解度チェック
  2. 条件分岐の理解度チェック
  3. 比較演算子の理解度チェック

以下の画像は、今回の課題で作る完成形になります。

今回の演習課題の完成形今回の演習課題の完成形

課題の詳細は以下の記事から確認することが出来るので、今すぐ課題に取り組みたい方は以下の記事から課題ページにアクセスして、早速取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】forループの演習課題【JavaScript】前回学習したJavaScriptのforループをしっかりと使えるようになるために演習課題を用意しました。また今回の課題では、これまでに学んだ「デバッグ方法」「条件分岐」「比較演算子」「論理演算子」の復習も同時に行っています。...

この記事の想定読者は次のとおりです。

想定読者
  • JavaScriptのforを使ったループ処理の知識が定着しているかを確認したい
  • FizzBuzz問題を解いて、これまで学習した内容も合わせて復習したい

課題に取り組む際にはもちろんHTMLファイルとJavaScriptファイルを連携させる方法を知っている必要があります。

もし、HTMLファイルとJavaScriptファイルの連携方法を忘れてしまっている場合は、以下の記事を参考にしましょう。

あわせて読みたい
HTMLでJavaScriptの外部ファイルを読み込み、実行するHTMLでJavaScriptファイルを読み込むことでWebブラウザでJavaScriptを実行することができます。今回はJavaScriptファイルの作成方法から、HTMLで作成したJavaScriptを読み込み、実行するところまでを解説します。...

今回の課題をクリアするために参考になる記事は次のとおりです。忘れてしまっているものがあれば記事を読み返しふり返ってみましょう。

JavaScriptでBooleanを取得する3つの方法

あわせて読みたい
JavaScriptでBooleanを取得する3つの方法Booleanとは「true」「false」の2つの値のことです。true・falseの値を取得するには直接「true」「false」という値を使う他に「比較演算子」「論理演算子」を使う方法があります。それぞれ3つの使い方を覚えていきましょう。...

今回の課題では「比較演算子」を使い、ループによってインクリメントされる数値に応じて「Fizz」「Buzz」「FizzBuzz」をconsole.logを使って出力します。

冒頭でも貼った画像の内容がまさにそれにあたります。以下にもあらためて冒頭に貼った画像と同じものを貼っておきます。

今回の演習課題の完成形今回の演習課題の完成形

比較演算子」の使い方を知らない、もしくは覚えていない方は上記記事で解説しているので一度ふりかえることをオススメします。

JavaScriptの条件分岐の方法【if・else・else if】

あわせて読みたい
JavaScriptの条件分岐の方法【if・else・else if】使われる値に応じて処理内容を切り替えたいときに必要となる「条件分岐」について解説します。JavaScriptでも他のプログラミング言語と同様に「if」「else if」「else」というキーワードを使って条件分岐を実現することができます。...

今回の課題では、前の項目で話した「比較演算子」を使って「条件分岐」処理を行います。

条件分岐とは「if」「else」などを使って、入力された値に応じて処理を切り替えることが出来る機能のことです。

前の項目で貼った画像では数値によって、3の倍数であればFizz」、5の倍数であればBuzz」、3の倍数でもあり5の倍数でもあればFizzBuzz」というメッセージを切り替えて出力しています。

この「Fizz」「Buzz」「FizzBuzz」のメッセージを切り替える処理のところで、今回は「条件分岐」の「if」「else if」を使っています。

条件分岐の書き方を知らない、もしくは忘れてしまったという方は上記の記事で復習してから今回の課題に取り組むと良いでしょう。

JavaScriptのforループの書き方【whileとの比較】

あわせて読みたい
JavaScriptのforループの書き方【whileとの比較】前回の「while」に引き続き「for」を使ったループ処理について解説します。ループ処理を実装したいときには「while」よりも「for」を使うことのほうが多いです。whileよりもforを使うことが多い理由についても解説します。...

今回の課題のメインテーマは「JavaScriptのforループの知識の定着」です。

上記の記事では、その「for」の解説を行っています。

forループを作るときは、whileループと異なり、次の3つの内容を一箇所にまとめて記述しました。

記述する3つの内容
  1. 初期化 : 変数の初期化をする。変数0を代入したものをセットすることが多い。
  2. 条件 : ループを繰り返す条件をセットする。比較演算子を使うことが多い。
  3. 1ループ終わるごとの処理 : 1回ループが終わるごとに実行する処理を記述。で初期化した変数をインクリメントすることが多い。

これにより、「無限ループ」が発生する可能性が「whileループ」と比較してだいぶ低くなります。

forループの書き方を忘れてしまった場合は、上記記事を読み返すと良いでしょう。

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、今回の演習課題で取り組む知識定着のためにも、ぜひチャレンジしましょう!^^

演習課題で確認する内容
  1. JavaScriptのforループの理解度チェック
  2. 条件分岐の理解度チェック
  3. 比較演算子の理解度チェック
あわせて読みたい
【エクササイズ】forループの演習課題【JavaScript】前回学習したJavaScriptのforループをしっかりと使えるようになるために演習課題を用意しました。また今回の課題では、これまでに学んだ「デバッグ方法」「条件分岐」「比較演算子」「論理演算子」の復習も同時に行っています。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です