JavaScript関数：初めてのガイド
こんにちは、未来のJavaScript開発者たち！JavaScript関数の素晴らしい世界への旅に導いてくれるガイドとして、私はとても兴奋しています。プログラミングを教えて数年間、関数がコードのスイスアーミーナイフのように、多様で強力で絶対に必要不可欠であることをお伝えすることができます。それでは、さっそく始めましょう！
関数とは何か？
関数は特定のタスクを行う小さな機械だと考えてください。何かを入れると、それを加工し、よくある話ですが、何かを返してくれます。トースターのようなものです。パンを入れると、それをトーストし、カリカリで美味しいトーストを返してくれます！
関数の定義
まず、関数を作成する方法、つまり「定義」する方法を学びましょう：
function greetStudent(name) {
console.log("Hello, " + name + "! Welcome to JavaScript class!");
}ここで起こっていることは以下の通りです：
-
functionキーワードを使用して、JavaScriptに関数を作成していることを伝えます。 - 関数に名前を付けます（この場合は
greetStudent）。 - 括弧内に、関数が必要な情報（「パラメータ」と呼ばれる）をリストアップします。
- 波括弧
{}の内部に、関数が実行するコードを記述します。
関数の呼び出し
関数を定義するのはレシピを書くようなものです。しかし、実際に使用するためには、関数を「呼び出す」必要があります：
greetStudent("Alice");
// 出力: Hello, Alice! Welcome to JavaScript class!
greetStudent("Bob");
// 出力: Hello, Bob! Welcome to JavaScript class!同じ関数を異なる名前で使用できるのが見えますか？これが関数の力です – 一度書いて、何度も使用できます！
関数のパラメータ
パラメータはレシピの材料のようなものです。関数がその仕事をできるように与える情報です。より複雑な例を見てみましょう：
function calculateArea(length, width) {
let area = length * width;
console.log("The area is: " + area + " square units");
}
calculateArea(5, 3);
// 出力: The area is: 15 square units
calculateArea(10, 7);
// 出力: The area is: 70 square unitsこの例では、lengthとwidthはパラメータです。関数を呼び出すたびに異なる値を渡すことができ、非常に柔軟です！
return文
時々、関数が後で使用できる値を返してほしいことがあります。その場合、returnが役立ちます：
function addNumbers(a, b) {
return a + b;
}
let sum = addNumbers(5, 3);
console.log("The sum is: " + sum);
// 出力: The sum is: 8
let anotherSum = addNumbers(10, 20);
console.log("Another sum is: " + anotherSum);
// 出力: Another sum is: 30return文は呼び出された場所に値を送り返します。これにより、コードの他の部分で結果を使用することができます。
関数を変数の値として
これは頭を悩ませることかもしれませんが、JavaScriptでは関数が値として扱えるんです！変数に格納したり、他の関数に渡したり、乃至は関数から返したりできます。見てみましょう：
let greet = function(name) {
console.log("Hi there, " + name + "!");
};
greet("Charlie");
// 出力: Hi there, Charlie!
let sayHello = greet;
sayHello("Dana");
// 出力: Hi there, Dana!これは「関数式」と呼ばれます。レシピをcookbookに保存するようなものです – 何时でも使用できます！
一般的な関数メソッド
以下はJavaScriptで一般的に使用される関数メソッドの表です：
| メソッド | 説明 | 例 |
|---|---|---|
call() |
指定されたthis値と個別に提供された引数で関数を呼びます |
greet.call(null, "Eve") |
apply() |
指定されたthis値と配列として提供された引数で関数を呼びます |
greet.apply(null, ["Frank"]) |
bind() |
新しい関数を作成し、呼び出されるときに指定されたthis値を設定します |
let boundGreet = greet.bind(null, "Grace") |
これらのメソッドは関数の使用方法をさらに柔軟にしますが、今は複雑に考えなくても大丈夫です。後で詳しく説明します！
締め括り
おめでとうございます！あなたはJavaScript関数の素晴らしい世界の第一歩を踏み出しました。実践が大事ですので、学んだことを実験的に試してみましょう。自分で関数を作成し、パラメータとreturn値を遊びながら、何が作れるか見てみてください！
私が教えてきた年間、数多くの生徒が関数に関する混乱から自信に満ちた理解へと移行してきました。光がついたように、突然すべてが理解できるようになります。それで、がんばり続けてください。そして、間もなくあなたも夢中で関数を書くようになるでしょう（実際に寝ている間にコーディングするのはお勧めしません – 私も試してみましたが、結果は...興味深いものでした）。
楽しくコーディングを続け、次のレッスンで会いましょう！
Credits: Image by storyset