前回はアロー関数とコールバック関数をChatGPTに変換してもらおうについて紹介しました。
今回は関数をChatGPTと練習しようについて紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
関数の基本！宣言・呼び出し・引数・戻り値をChatGPTと練習しよう
こんにちは！この記事では、JavaScriptの学習で欠かせない「関数」について、ChatGPTとの対話形式で分かりやすく解説していきます。関数はプログラミングにおいて非常に重要な仕組みですが、最初は「宣言」や「呼び出し」「引数」「戻り値」といった用語が多くて戸惑うこともあるでしょう。
そこで本記事では、関数の基礎を順を追って分解し、それぞれの要素を実際にChatGPTへ質問しているかのように進めていきます。JavaScriptの基本文法（変数宣言や条件分岐など）をご存じの方であればスムーズに読み進められるはずです。関数についてしっかり理解し、開発をより効率的にしていきましょう！
目次
1. 関数とは何か？
ユーザー: そもそも関数って何ですか？いろんなコードサンプルを見ても「function」の文字をよく見かけますが、いまいちピンときません。
ChatGPT: 関数とは、ある特定の「処理」をまとめて名前を付けたものです。例えば、同じ処理を何度も書かなければならないとき、関数にまとめておくことで、必要なときに呼び出すだけで同じ処理を実行できます。これはコードの重複を避けられますし、修正があった場合もその修正を関数ひとつに加えるだけで済むので、保守性が高くなります。
つまり、プログラミングを効率良く行うための「部品」のようなものが関数です。JavaScriptでは、functionというキーワードを使って宣言し、ブロック（{ }）の中に「やらせたい処理」を書き込みます。
2. 関数の宣言（定義）
ユーザー: 関数の宣言とは具体的に何をするのでしょうか？
ChatGPT: 関数の宣言（定義）は、プログラム上でJavaScriptに「こういう処理をする関数を作りますよ」という宣言を行うことです。基本形は以下のとおりです。
function 関数名(仮引数1, 仮引数2, ...) {
// この中に行いたい処理を書きます
// ...
}
たとえば、単純にコンソール画面にメッセージを表示するだけの関数を宣言するなら、こんなふうに書けます。
function greet() {
console.log("Hello, world!");
}
この例では、greetという名前の関数を宣言しました。()の中に何も書かないのは、引数を受け取らないことを意味します。この時点ではただ「greetという名前の関数がある」という定義だけが済んだ状態で、実行はされていません。
ここで関数の名前について補足すると、JavaScriptの変数名と同様に、先頭に数字を使えなかったり、ハイフン（-）などが使えなかったりと、いくつかルールがあります。慣例として、greetやcalculateTotalなど動詞の形でわかりやすい名前をつけると、可読性が向上します。
3. 関数の呼び出し（実行）
ユーザー: 宣言しただけでは動かないみたいですが、どうやって実行させるんですか？
ChatGPT: はい、宣言（定義）しただけでは動きません。関数を使うには、呼び出し（実行）を行う必要があります。JavaScriptでは関数名に()を付けるだけで呼び出せますよ。先ほどのgreet関数を例にすると、以下のように書きます。
greet();
// これでコンソールに "Hello, world!" と表示される
関数を呼び出すと、ブロック内（{ }）に書かれた処理が実行されます。呼び出しは何度でも行えますから、同じ処理を複数箇所で使いたい場合に大変便利です。
また、関数を呼び出すタイミングを制御することで、ユーザーがボタンをクリックしたときだけ関数を呼び出すといった実装もできるようになります。例えばHTML上のボタンにonclick属性を設定して、そこに関数名を指定すれば簡単にイベント駆動の処理を実現可能です。
4. 関数の引数
ユーザー: なるほど、同じ処理をまとめられるのは便利ですね。でも、たとえば挨拶の関数で「相手の名前」を変えたいときはどうすればいいでしょうか？
ChatGPT: そこで引数の登場です。引数（パラメータ）とは、関数に渡す値のことを指します。関数の宣言時に、()内に変数を定義しておけば、呼び出し側で任意の値を渡せるようになります。さっそくコード例を見てみましょう。
function greet(name) {
console.log("Hello, " + name + "!");
}
// 関数の呼び出し
greet("太郎"); // Hello, 太郎!
greet("花子"); // Hello, 花子!
この例では、greet関数の宣言時にnameという仮引数を用意しました。呼び出すときには実際の値（ここでは"太郎"や"花子"）を渡します。このようにして、同じ関数でも呼び出すたびに異なる処理を行わせることができるわけです。
なお、複数の引数を受け取りたい場合は、function add(a, b)のようにカンマで区切って並べます。引数の数だけ呼び出し時に値を渡せば、関数内でそれらの値を使った処理ができるようになります。
5. 関数の戻り値
ユーザー: 戻り値ってよく耳にするんですが、これは何ですか？
ChatGPT: 戻り値とは、関数が呼び出し元に返す値のことです。JavaScriptではreturnキーワードを使って指定します。return文が実行されると、その段階で関数の処理が終了し、returnで指定した値が呼び出し元に返ります。
function add(a, b) {
return a + b;
}
// 戻り値を変数で受け取る
let result = add(3, 5);
console.log(result); // 8 と表示される
この例では、a + bの計算結果をreturn文で返しています。呼び出し側ではadd(3, 5)の結果が8になるため、result変数に8が代入されます。何か計算させた結果を使いたい場合や、特定の処理結果を返したい場合は戻り値が非常に便利です。
もしreturnがない場合、その関数はデフォルトでundefinedという値を返します。「何も値を返さない関数」として扱われるイメージですね。
6. ChatGPTを活用した練習方法
ユーザー: ここまでで基本的な仕組みはなんとなく分かりました。とはいえ、どう実践すればいいのかイメージが湧きません。もう少し踏み込んだ練習をしてみたいです。
ChatGPT: ここで私の出番です！ChatGPTを活用した実践的な練習方法をいくつかご紹介します。
- Q&Aで理解を深める
実際に「JavaScript 関数 サンプル」のような質問をしてみてください。コード例を提案してもらい、疑問点があればさらに掘り下げて聞くことで理解が深まります。「この関数の戻り値は何ですか？」や「呼び出し時にエラーが出るのはなぜですか？」など、具体的な疑問を投げかけてみましょう。 - チャット形式でコード修正
自分で書いたコードを貼り付けて、「エラーが出るけど原因を教えて」などと尋ねると、修正例を示してくれます。特に関数の引数や戻り値まわりでエラーが起きやすいので、実際にエラーが起きたときこそ学習のチャンスです。 - タスクを与えてみる
例：「複数の値を引数にとって、最大値を返す関数を書いて」といった具体的なタスクを出すのも良い練習になります。ChatGPTからコード例が得られたら、自分なりに改造し、挙動を確かめてみてください。
こうしたやり取りを通して、頭で理解するだけでなく、手を動かして試す経験が積めます。エラーに遭遇した際も、ただエラーを直すだけでなくChatGPTに「どうしてこのエラーが起きたの？」と掘り下げれば、より本質的な理解へと繋がります。
7. さらにステップアップ！応用的な関数の活用
関数の宣言・呼び出し・引数・戻り値の基本を押さえたら、次はもう少し応用的なトピックに挑戦してみましょう。
- アロー関数:従来の
functionキーワードではなく、=>を使って関数を宣言できる記法が「アロー関数」です。より短い文法で書けるため、モダンなJavaScriptコードではよく使われます。const greet = (name) => { console.log("Hello, " + name); }; - コールバック関数:ある処理が完了した後に呼び出す関数のことを「コールバック関数」と呼びます。非同期処理やイベント駆動型のプログラミングでは頻繁に登場します。例えば、サーバからデータを取得した後に実行したい処理をコールバック関数として渡す、といった使い方があります。
- 即時関数:
(function(){ ... })();のように書いて、宣言と同時に呼び出す関数です。スコープを汚さないためのテクニックとして昔から利用されています。
これらを理解していくと、JavaScriptの魅力をさらに実感できるはずです。実際にプロジェクトに取り入れるときは、ChatGPTにサンプルコードを依頼し、メリット・デメリットを聞いてみると良いでしょう。
8. 初心者が陥りがちな失敗例
ここで、関数について初心者がよく陥るミスをまとめておきます。失敗例を知っておくことで、同じ轍を踏むことを防ぎやすくなります。
- 呼び出しの丸括弧を忘れてしまう
functionName;と書くだけでは関数は実行されません。必ずfunctionName();のように丸括弧を付けて呼び出しましょう。 - 複数の引数を定義しているのに1つしか渡していない
例えばfunction add(a, b)と定義したのに、呼び出し時にadd(3)と書いてしまうとbがundefinedになります。意図通りに処理するには、引数の数に注意しましょう。 - return文の書き忘れ
何かしらの値を返す関数にしたいのに、returnを書くのを忘れていると、いつの間にかundefinedが返ってくることがあります。計算結果などを返したい場合は必ずreturnを使いましょう。 - 関数スコープにおける変数宣言のトラブル
関数の中でvarやlet、constを適切に使わないと、想定外のスコープで変数が参照されたり上書きされたりする可能性があります。スコープの概念も早めに押さえておくと安心です。
9. まとめ
以上、JavaScriptにおける関数の基本（宣言・呼び出し・引数・戻り値）を、ChatGPTとの対話形式で解説してきました。ここで学んだポイントを簡単におさらいしてみましょう。
- 関数の宣言：
function 関数名(引数) { ... }で定義。 - 関数の呼び出し：
関数名();で実行。複数回呼び出し可能。 - 引数：呼び出し時に関数へ渡す値。仮引数と実引数の対応に注意。
- 戻り値：
returnで呼び出し元へ返す値。returnがない場合はundefinedが返る。
これらを正しく理解し使いこなせるようになると、同じ処理を何度も書く必要がなくなり、コードをより読みやすく、保守しやすくできます。さらに、ChatGPTを活用して「この関数は正しく書けているか」「別の引数に対応したらどうなるか」などの質問を投げかけると、学習を加速させられるでしょう。
加えて、本記事の後半で紹介したアロー関数やコールバック関数、即時関数などを学ぶことで、より高度な場面でも柔軟に関数を使いこなすことが可能になります。ぜひ自分なりの実践プロジェクトやチャレンジを通じて、JavaScriptの世界を楽しんでください！
最後までお読みいただきありがとうございました。引き続き、ChatGPTやドキュメントを活用しながら、関数の理解をさらに深めていきましょう。
以上が関数をChatGPTで練習使用でした。
次回はChatGPTとjavascriptを連携させるプロンプトについて紹介します。
