この実験では、学生たちは JavaScript における関数の定義と呼び出しの基本概念を探求します。この実験では、関数の基本を包括的に紹介し、単純な関数の作成、パラメータの操作、関数の戻り値の理解などの必須スキルをカバーしています。参加者は、関数をどのように構築し、実行し、コンソール出力を使用してその機能を示すかを学びます。
一連の実践的な演習を通じて、学習者は戻り値のない関数の作成、パラメータを持つ関数の実装、関数の呼び出しと利用のさまざまな方法の探求を練習します。実験が終了するまでに、学生たちは再利用可能なコードブロックの作成、関数の構文の理解、JavaScript プログラミングにおける関数の概念の適用に関する実践的な経験を得るでしょう。
このステップでは、JavaScript における関数の基本概念を学びます。関数は、特定のタスクを実行し、プログラミングロジックを整理するための再利用可能なコードブロックです。
関数は、functionキーワードを使用して定義され、その後に名前、丸括弧()、および波括弧{}で囲まれたコードブロックが続きます。以下は基本的な関数構造です：
function functionName() {
// 実行するコード
}関数の基本を示す簡単な例を作成しましょう。WebIDE を開き、~/projectディレクトリにfunctions.jsという新しいファイルを作成します。
// 簡単な関数を定義する
function greet() {
console.log("Hello, JavaScript Functions!");
}
// 関数を呼び出す
greet();このコードを実行すると、以下の出力が表示されます：
出力例：
Hello, JavaScript Functions!関数について理解すべき重要なポイント：
functionキーワードを使用して定義されますgreet()関数を複数回呼び出して、その機能を確認してみましょう。
このステップでは、値を返さずにアクションを実行する関数を作成する方法を学びます。これらの関数は、特定のタスクを実行したり、情報を表示したりするためによく使用されます。
WebIDE を開き、~/projectディレクトリにsimple_functions.jsという新しいファイルを作成します。戻り値のない関数のいくつかの例を作成しましょう。
// 歓迎メッセージを表示する関数
function displayWelcome() {
console.log("Welcome to JavaScript Functions!");
}
// 掛け算表を表示する関数
function printMultiplicationTable(number) {
console.log(`${number}の掛け算表:`);
for (let i = 1; i <= 10; i++) {
console.log(`${number} x ${i} = ${number * i}`);
}
}
// 関数を呼び出す
displayWelcome();
printMultiplicationTable(5);このコードを実行すると、以下の出力が表示されます：
出力例：
Welcome to JavaScript Functions!
5の掛け算表:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50戻り値のない関数に関する重要なポイント：
console.log()を使用しますreturnキーワードを使用しません独自の関数を作成したり、既存の関数を変更して異なるメッセージを表示したり、さまざまなタスクを実行したりする実験を試してみましょう。
このステップでは、パラメータを受け取り、値を返す関数を作成する方法を学びます。これらの関数は、より汎用性が高く、計算や変換を行うことができます。
WebIDE を開き、~/projectディレクトリにparameter_functions.jsという新しいファイルを作成します。パラメータと戻り値を示す関数を作成します。
// 長方形の面積を計算する関数
function calculateRectangleArea(length, width) {
return length * width;
}
// 数値が偶数かどうかをチェックする関数
function isEven(number) {
return number % 2 === 0;
}
// 人を迎える関数
function createGreeting(name) {
return `Hello, ${name}! Welcome to JavaScript.`;
}
// 関数呼び出しと戻り値の示す
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`長方形の面積：${rectangleArea}平方単位`);
let checkNumber = 6;
console.log(`${checkNumber}は偶数ですか？ ${isEven(checkNumber)}`);
let personalGreeting = createGreeting("Alice");
console.log(personalGreeting);このコードを実行すると、以下の出力が表示されます：
出力例：
長方形の面積: 15平方単位
6は偶数ですか？ true
Hello, Alice! Welcome to JavaScript.パラメータと戻り値を持つ関数に関する重要なポイント：
returnキーワードにより関数から値が返されます異なるパラメータと戻り値の型を持つ独自の関数を作成して実験してみましょう。
このステップでは、さまざまな関数の技術を示す小さなプログラムを作成することで、関数の実装を練習します。関数の実装の理解を強化するために、簡単な電卓アプリケーションを作成します。
WebIDE を開き、~/projectディレクトリにcalculator.jsという新しいファイルを作成します。いくつかの数学関数を実装します：
// 2 つの数を加算する関数
function add(a, b) {
return a + b;
}
// 2 つの数を減算する関数
function subtract(a, b) {
return a - b;
}
// 2 つの数を乗算する関数
function multiply(a, b) {
return a * b;
}
// エラーハンドリング付きで 2 つの数を除算する関数
function divide(a, b) {
if (b === 0) {
return "エラー：ゼロでの除算";
}
return a / b;
}
// 数の二乗を計算する関数
function square(x) {
return x * x;
}
// 電卓関数を示す
console.log("加算：5 + 3 =", add(5, 3));
console.log("減算：10 - 4 =", subtract(10, 4));
console.log("乗算：6 * 7 =", multiply(6, 7));
console.log("除算：15 / 3 =", divide(15, 3));
console.log("4 の二乗 =", square(4));
console.log("ゼロでの除算：", divide(10, 0));このコードを実行すると、以下の出力が表示されます：
出力例：
加算：5 + 3 = 8
減算：10 - 4 = 6
乗算：6 * 7 = 42
除算：15 / 3 = 5
4の二乗 = 16
ゼロでの除算：エラー：ゼロでの除算関数の実装に関する重要なポイント：
さらに数学関数を追加したり、既存の関数を変更したりして実験してみましょう。
このステップでは、JavaScript における関数の呼び出し方法とさまざまな出力技術を学びます。複数の関数呼び出し戦略と出力方法を示す包括的な例を作成します。
WebIDE を開き、~/projectディレクトリにfunction_output.jsという新しいファイルを作成します。
// 個別化された挨拶を生成する関数
function createGreeting(name, time) {
return `Good ${time}, ${name}!`;
}
// 税込みの合計金額を計算する関数
function calculateTotalPrice(price, taxRate = 0.1) {
return price + price * taxRate;
}
// 複数のパラメータとデフォルト値を持つ関数
function displayUserInfo(name, age = "Not specified", city = "Unknown") {
console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`City: ${city}`);
}
// さまざまな関数呼び出し技術を示す
let morningGreeting = createGreeting("Alice", "morning");
console.log(morningGreeting);
let eveningGreeting = createGreeting("Bob", "evening");
console.log(eveningGreeting);
let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Product Price: $${productPrice}`);
console.log(`Total Price (with tax): $${totalPrice}`);
// 異なるパラメータの組み合わせで関数を呼び出す
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "New York");このコードを実行すると、以下の出力が表示されます。
出力例：
Good morning, Alice!
Good evening, Bob!
Product Price: $100
Total Price (with tax): $110
Name: Charlie
Age: Not specified
City: Unknown
Name: David
Age: 30
City: Unknown
Name: Eve
Age: 25
City: New York関数の呼び出しと出力に関する重要なポイント：
console.log()は関数の結果を表示するのに便利ですより複雑な関数呼び出しと出力シナリオを作成して実験してみましょう。
この実験では、参加者は JavaScript 関数の基本概念を探り、さまざまな特性を持つ関数を定義、作成、呼び出す方法を学びました。この実験では、関数の基本、つまり関数の構文、宣言、実行を理解するよう学習者を導き、特定のタスクを実行できる再利用可能なコードブロックを作成することに焦点を当てました。
学習の旅は、戻り値のない単純な関数を作成し、パラメータを持つ関数を実装し、関数をどのようにプログラミングロジックを整理し、出力を印刷し、計算を実行するために使用できるかを示すことをカバーしました。関数の実装を練習し、さまざまな関数呼び出し技術を探ることで、参加者はモジュール化された効率的な JavaScript コードを書く実践的なスキルを身につけました。
