JavaScript

【課題】JavaScriptで3種類の関数を定義する【復習】

どうも、つよぽんです!

今回は、「JavaScriptの関数定義」についての理解度を確認するために用意した演習課題の紹介記事となります。

演習課題にチャレンジしてクリアすることで、関数の定義についての知識を定着させることが出来ます。

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

演習課題で確認する内容
  1. JavaScriptの「関数宣言」を使った関数定義の知識
  2. JavaScriptの「関数式」を使った関数定義の知識
  3. JavaScriptの「アロー関数」を使った関数定義の知識
  4. 引数の知識
  5. 戻り値の知識

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

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

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

あわせて読みたい
【エクササイズ】JavaScriptで3つの関数を作るここまで学習してきた関数の知識の定着度を確認するための課題を用意しました。この課題をこなすことで、「①関数宣言」、「②関数式」、「③アロー関数」、「④引数」、「⑤戻り値」の復習も出来るので、関数についての知識をより強固なものに出来るでしょう。...

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

想定読者
  • JavaScriptの「関数宣言」「関数式」「アロー関数」を正しく理解しているか確かめたい
  • 関数の引数を正しく使えるか確かめたい
  • 関数の戻り値を正しく使えるか確かめたい

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

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

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

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

課題クリアの参考となる記事
  1. JavaScriptでBoolean値を取得【比較演算子・論理演算子】
  2. JavaScriptでループ処理をする【While・forループ】
  3. JavaScriptの関数定義の方法【関数宣言・関数式・アロー関数】
  4. JavaScriptの引数の使い方【関数定義時・実行時の方法】
  5. JavaScriptの関数で戻り値をセットする【return文】

JavaScriptでBoolean値を取得【比較演算子・論理演算子】

あわせて読みたい
JavaScriptでBoolean値を取得【比較演算子・論理演算子】ループ処理や条件分岐などで必要になってくる「真偽値(boolean)」の主の取得方法を3つ解説します。①true・falseを直接使う、②比較演算子を使う、③論理演算子を使う。複雑な処理をしたいときに比較演算子・論理演算子を使うことになります。...

今回の課題で作る関数の中に、引数に渡した数値が「奇数」であれば「true」、「偶数」であれば「false」を返す関数があります。

この「true」「false」を取得する際に、上記記事で解説している「比較演算子」を利用します。」

JavaScriptでループ処理をする【While・forループ】

あわせて読みたい
JavaScriptのwhileでループを行う【無限ループに注意】JavaScriptでループ処理を行うための1つの手段である「while」について解説をします。whileを使うことで、何回も繰り返して行いたい処理を実装できます。しかし無限ループも発生しやすいのでwhileを使うときは注意が必要です。...
あわせて読みたい
JavaScriptのforループの書き方【whileとの比較】前回の「while」に引き続き「for」を使ったループ処理について解説します。ループ処理を実装したいときには「while」よりも「for」を使うことのほうが多いです。whileよりもforを使うことが多い理由についても解説します。...

今回の課題で作成する関数の1つに、数学の「階乗」を実装するものがあります。

例えば、この階乗の関数を実行する際に「5」を引数として渡すとします。

関数内では、「5×4×3×2×1」の計算を行い「120」という結果を返すことになります。

階乗を実現する方法としては、シンプルに実装するのであれば上記のforやwhileを使ったループ処理で実装することが可能です。

もしくはforやwhileを使わず「再帰関数」で実現する方法もあります。

難しい方にチャレンジしたい方は「再帰関数」を使って階乗の関数を実装してみてください。

JavaScriptの関数定義の方法【関数宣言・関数式・アロー関数】

あわせて読みたい
【入門】JavaScriptで関数を定義する【関数宣言・意義】JavaScriptでは関数の定義方法が3つあります。①関数宣言、②関数式、③アロー関数。この3つの内、今回は①関数宣言を使った関数の定義方法を取り上げます。その他にも「関数の実行方法」「なぜ関数を作るのかの意義」についても解説します。...
あわせて読みたい
JavaScriptの関数式で関数を作る【使う時の注意点も解説】どうも、つよぽんです! 今回は、JavaScriptの関数式について解説をします。 今回解説する「関数式」はJavaScri...
あわせて読みたい
JavaScriptのアロー関数とは【ES2015からの新機能】今回はアロー関数の話です。JavaScriptで関数を定義する方法は昔までは「function」キーワードを使った方法しかありませんでした。しかし、ES2015という仕様が作られてから新たに「アロー関数」という新しい関数定義の方法が追加されました。...

今回の課題のメインテーマでもある、「3種類の関数を定義する」については、上記のそれぞれの記事で解説しています。

具体的には次の3種類となります。

3つの関数定義方法
  1. 関数宣言
  2. 関数式
  3. アロー関数

関数を定義する文法を忘れてしまった場合は、上記記事をふりかえると良いでしょう。

JavaScriptの引数の使い方【関数定義時・実行時の方法】

あわせて読みたい
JavaScriptの引数の使い方【関数定義時・実行時の方法】どうも、つよぽんです! 今回は、JavaScriptの「引数」について解説をします。 今回の記事は次のような方に向けて書きま...

今回は3つの関数を作る課題を用意しており、全ての関数は引数を受け取ります。

引数について忘れてしまった場合は、上記記事を参考にするとよいでしょう。

JavaScriptの関数で戻り値をセットする【return文】

あわせて読みたい
JavaScriptの関数で戻り値をセットする【return文】今回はJavaScriptの戻り値のお話です。関数の実行結果を呼び出し元に返したいときは「return」というキーワードを使います。関数は①入力、②処理、③出力の3つの機能に大きく分けられます。このうち戻り値は「③出力」の役割を果たします。...

今回は3つの関数を作る課題を用意しており、全ての関数は戻り値を使います。

戻り値について忘れてしまった場合は、上記記事を参考にするとよいでしょう。

まとめ

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

課題クリアの参考となる記事
  1. JavaScriptでBoolean値を取得【比較演算子・論理演算子】
  2. JavaScriptでループ処理をする【While・forループ】
  3. JavaScriptの関数定義の方法【関数宣言・関数式・アロー関数】
  4. JavaScriptの引数の使い方【関数定義時・実行時の方法】
  5. JavaScriptの関数で戻り値をセットする【return文】

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

演習課題で確認する内容
  1. JavaScriptの「関数宣言」を使った関数定義の知識
  2. JavaScriptの「関数式」を使った関数定義の知識
  3. JavaScriptの「アロー関数」を使った関数定義の知識
  4. 引数の知識
  5. 戻り値の知識
あわせて読みたい
【エクササイズ】JavaScriptで3つの関数を作るここまで学習してきた関数の知識の定着度を確認するための課題を用意しました。この課題をこなすことで、「①関数宣言」、「②関数式」、「③アロー関数」、「④引数」、「⑤戻り値」の復習も出来るので、関数についての知識をより強固なものに出来るでしょう。...

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

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

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

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

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

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

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

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

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

無料特典を受け取る

 

COMMENT

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