|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
|
|
|
"translation_date": "2025-10-24T14:46:01+00:00",
|
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# JavaScriptの基本: メソッドと関数
|
|
|
|
|
|
|
|
|
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## 講義前のクイズ
|
|
|
[講義前のクイズ](https://ff-quizzes.netlify.app)
|
|
|
|
|
|
同じコードを繰り返し書くことは、プログラミングで最もよくあるイライラの原因の一つです。関数はコードを再利用可能なブロックにまとめることで、この問題を解決します。関数を、ヘンリー・フォードの組立ラインを革命的にした標準化された部品のように考えてみてください。一度信頼できるコンポーネントを作成すれば、必要な場所で再構築することなく使用できます。
|
|
|
|
|
|
関数を使うことで、コードをまとめてプログラム全体で再利用することができます。同じロジックをあちこちにコピー＆ペーストする代わりに、一度関数を作成して必要なときに呼び出すことができます。このアプローチはコードを整理し、更新をはるかに簡単にします。
|
|
|
|
|
|
このレッスンでは、自分の関数を作成し、情報を渡して有用な結果を得る方法を学びます。関数とメソッドの違い、モダンな構文アプローチ、そして関数が他の関数とどのように連携するかを学びます。これらの概念を一歩ずつ構築していきます。
|
|
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
|
|
|
|
|
> 🎥 上の画像をクリックして、メソッドと関数についての動画をご覧ください。
|
|
|
|
|
|
> このレッスンは[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)で受講できます！
|
|
|
|
|
|
## 関数
|
|
|
|
|
|
関数は特定のタスクを実行する自己完結型のコードブロックです。必要なときに実行できるロジックをカプセル化します。
|
|
|
|
|
|
プログラム全体で同じコードを何度も書く代わりに、関数にまとめて必要なときに呼び出すことができます。このアプローチはコードをきれいに保ち、更新をはるかに簡単にします。コードベースの20箇所に散らばったロジックを変更する必要があるとしたら、その保守の課題を考えてみてください。
|
|
|
|
|
|
関数にわかりやすい名前を付けることが重要です。適切に名前付けされた関数はその目的を明確に伝えます。例えば、`cancelTimer()`という名前を見れば、何をする関数なのかすぐに理解できます。これは、明確にラベル付けされたボタンがクリックしたときに何が起こるかを教えてくれるのと同じです。
|
|
|
|
|
|
## 関数の作成と呼び出し
|
|
|
|
|
|
関数の作成方法を見てみましょう。構文は一貫したパターンに従います。
|
|
|
|
|
|
```javascript
|
|
|
function nameOfFunction() { // function definition
|
|
|
// function definition/body
|
|
|
}
|
|
|
```
|
|
|
|
|
|
これを分解してみましょう:
|
|
|
- `function`キーワードはJavaScriptに「これから関数を作るよ！」と伝えます。
|
|
|
- `nameOfFunction`は関数に説明的な名前を付ける場所です。
|
|
|
- 括弧`()`はパラメータを追加する場所です（これについては後で説明します）。
|
|
|
- 中括弧`{}`は関数を呼び出したときに実行される実際のコードを含みます。
|
|
|
|
|
|
簡単な挨拶関数を作成して、これを実際に見てみましょう:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting() {
|
|
|
console.log('Hello, world!');
|
|
|
}
|
|
|
```
|
|
|
|
|
|
この関数はコンソールに「Hello, world!」を表示します。一度定義すれば、必要なだけ何度でも使用できます。
|
|
|
|
|
|
関数を実行（または「呼び出し」）するには、その名前の後に括弧を付けます。JavaScriptでは、関数を呼び出す前でも後でも定義することができます。JavaScriptエンジンが実行順序を処理します。
|
|
|
|
|
|
```javascript
|
|
|
// calling our function
|
|
|
displayGreeting();
|
|
|
```
|
|
|
|
|
|
この行を実行すると、`displayGreeting`関数内のすべてのコードが実行され、ブラウザのコンソールに「Hello, world!」が表示されます。この関数は何度でも呼び出すことができます。
|
|
|
|
|
|
> **Note:** このレッスンでは**メソッド**を使用してきました。`console.log()`はメソッドです。つまり、`console`オブジェクトに属する関数です。メソッドはオブジェクトに付属しているのに対し、関数は独立しています。多くの開発者はカジュアルな会話でこれらの用語を混同して使用します。
|
|
|
|
|
|
### 関数のベストプラクティス
|
|
|
|
|
|
優れた関数を書くためのいくつかのヒントを紹介します:
|
|
|
|
|
|
- 関数に明確で説明的な名前を付けましょう。未来の自分が感謝します！
|
|
|
- 複数の単語を含む名前には**キャメルケース**を使用しましょう（例: `calculateTotal`、`calculate_total`ではなく）。
|
|
|
- 各関数を一つのことに集中させましょう。
|
|
|
|
|
|
## 関数に情報を渡す
|
|
|
|
|
|
`displayGreeting`関数は制限があります。すべての人に「Hello, world!」しか表示できません。パラメータを使用すると、関数をより柔軟で便利にすることができます。
|
|
|
|
|
|
**パラメータ**は、関数を使用するたびに異なる値を挿入できるようにするプレースホルダーのようなものです。この方法で、同じ関数が呼び出しごとに異なる情報で動作します。
|
|
|
|
|
|
関数を定義するときに括弧内にパラメータをリストします。複数のパラメータはコンマで区切ります:
|
|
|
|
|
|
```javascript
|
|
|
function name(param, param2, param3) {
|
|
|
|
|
|
}
|
|
|
```
|
|
|
|
|
|
各パラメータはプレースホルダーのように機能します。関数を呼び出すときに、実際の値を提供してこれらの場所に差し込むことができます。
|
|
|
|
|
|
挨拶関数を更新して、名前を受け取れるようにしてみましょう:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting(name) {
|
|
|
const message = `Hello, ${name}!`;
|
|
|
console.log(message);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
名前をメッセージに直接挿入するために、バックティック（`` ` ``）と`${}`を使用していることに注目してください。これはテンプレートリテラルと呼ばれ、変数を混ぜた文字列を作成する非常に便利な方法です。
|
|
|
|
|
|
次に関数を呼び出すときに、任意の名前を渡すことができます:
|
|
|
|
|
|
```javascript
|
|
|
displayGreeting('Christopher');
|
|
|
// displays "Hello, Christopher!" when run
|
|
|
```
|
|
|
|
|
|
JavaScriptは文字列`'Christopher'`を受け取り、それを`name`パラメータに割り当て、パーソナライズされたメッセージ「Hello, Christopher!」を作成します。
|
|
|
|
|
|
## デフォルト値
|
|
|
|
|
|
一部のパラメータをオプションにしたい場合はどうすればよいでしょうか？その場合、デフォルト値が役立ちます！
|
|
|
|
|
|
例えば、挨拶の言葉をカスタマイズできるようにしたいけれど、指定がない場合は「Hello」を使いたいとします。デフォルト値は、変数を設定するのと同じようにイコール記号を使用して設定できます:
|
|
|
|
|
|
```javascript
|
|
|
function displayGreeting(name, salutation='Hello') {
|
|
|
console.log(`${salutation}, ${name}`);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
ここでは、`name`は必須ですが、`salutation`には誰も別の挨拶を指定しない場合のバックアップ値として`'Hello'`があります。
|
|
|
|
|
|
この関数を2つの異なる方法で呼び出すことができます:
|
|
|
|
|
|
```javascript
|
|
|
displayGreeting('Christopher');
|
|
|
// displays "Hello, Christopher"
|
|
|
|
|
|
displayGreeting('Christopher', 'Hi');
|
|
|
// displays "Hi, Christopher"
|
|
|
```
|
|
|
|
|
|
最初の呼び出しでは、挨拶が指定されていないため、JavaScriptはデフォルトの「Hello」を使用します。2回目の呼び出しでは、カスタムの「Hi」を使用します。この柔軟性により、関数はさまざまなシナリオに適応できます。
|
|
|
|
|
|
## 戻り値
|
|
|
|
|
|
これまでの関数はコンソールにメッセージを表示するだけでしたが、計算を行い結果を返したい場合はどうすればよいでしょうか？
|
|
|
|
|
|
その場合、**戻り値**が役立ちます。関数は何かを表示する代わりに、結果を返して変数に保存したり、コードの他の部分で使用したりできます。
|
|
|
|
|
|
値を返すには、`return`キーワードを使用し、その後に返したいものを記述します:
|
|
|
|
|
|
```javascript
|
|
|
return myVariable;
|
|
|
```
|
|
|
|
|
|
重要なポイント: 関数が`return`文に到達すると、直ちに実行を停止し、その値を呼び出し元に返します。
|
|
|
|
|
|
挨拶関数を修正して、メッセージを表示する代わりに返すようにしてみましょう:
|
|
|
|
|
|
```javascript
|
|
|
function createGreetingMessage(name) {
|
|
|
const message = `Hello, ${name}`;
|
|
|
return message;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
これで、この関数は挨拶を作成し、それを私たちに返します。
|
|
|
|
|
|
返された値を使用するには、他の値と同じように変数に保存できます:
|
|
|
|
|
|
```javascript
|
|
|
const greetingMessage = createGreetingMessage('Christopher');
|
|
|
```
|
|
|
|
|
|
これで`greetingMessage`には「Hello, Christopher」が含まれ、コードのどこでも使用できます。例えば、ウェブページに表示したり、メールに含めたり、別の関数に渡したりできます。
|
|
|
|
|
|
## 関数を関数のパラメータとして渡す
|
|
|
|
|
|
関数は他の関数のパラメータとして渡すことができます。この概念は最初は複雑に感じるかもしれませんが、柔軟なプログラミングパターンを可能にする強力な機能です。
|
|
|
|
|
|
このパターンは、「何かが起こったら、このコードを実行する」という状況で非常に一般的です。例えば、「タイマーが終了したら、このコードを実行する」や「ユーザーがボタンをクリックしたら、この関数を呼び出す」といった場合です。
|
|
|
|
|
|
`setTimeout`を見てみましょう。これは組み込み関数で、一定時間待機してからコードを実行します。どのコードを実行するかを指定する必要があります。関数を渡すのにぴったりのケースです！
|
|
|
|
|
|
このコードを試してみてください。3秒後にメッセージが表示されます:
|
|
|
|
|
|
```javascript
|
|
|
function displayDone() {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}
|
|
|
// timer value is in milliseconds
|
|
|
setTimeout(displayDone, 3000);
|
|
|
```
|
|
|
|
|
|
`setTimeout`に`displayDone`（括弧なし）を渡していることに注目してください。関数を自分で呼び出しているのではなく、`setTimeout`に渡して「3秒後にこれを呼び出して」と指示しています。
|
|
|
|
|
|
### 無名関数
|
|
|
|
|
|
時々、特定の用途のためだけに関数が必要で、名前を付けたくない場合があります。考えてみてください。一度しか使わない関数に名前を付けるのは、コードを余計に煩雑にするだけです。
|
|
|
|
|
|
JavaScriptでは**無名関数**を作成できます。名前のない関数を必要な場所で直接定義できます。
|
|
|
|
|
|
タイマーの例を無名関数を使って書き直してみましょう:
|
|
|
|
|
|
```javascript
|
|
|
setTimeout(function() {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}, 3000);
|
|
|
```
|
|
|
|
|
|
これで同じ結果が得られますが、関数は`setTimeout`呼び出し内で直接定義され、別の関数宣言が不要になります。
|
|
|
|
|
|
### 短い矢印関数
|
|
|
|
|
|
モダンなJavaScriptには、**矢印関数**と呼ばれるさらに短い方法で関数を書く方法があります。`=>`（矢印のように見えますよね？）を使用し、開発者に非常に人気があります。
|
|
|
|
|
|
矢印関数を使うと、`function`キーワードを省略して、より簡潔なコードを書くことができます。
|
|
|
|
|
|
タイマーの例を矢印関数を使って書き直してみましょう:
|
|
|
|
|
|
```javascript
|
|
|
setTimeout(() => {
|
|
|
console.log('3 seconds has elapsed');
|
|
|
}, 3000);
|
|
|
```
|
|
|
|
|
|
`()`はパラメータを置く場所です（この場合は空）、次に矢印`=>`が続き、最後に中括弧内に関数の本体が記述されます。この構文で同じ機能をより簡潔に提供します。
|
|
|
|
|
|
### 各戦略を使うタイミング
|
|
|
|
|
|
どのアプローチを使うべきか？実用的なガイドラインとして、関数を複数回使用する場合は名前を付けて別々に定義してください。特定の用途のためだけなら、無名関数を検討してください。矢印関数と従来の構文はどちらも有効な選択肢ですが、矢印関数はモダンなJavaScriptコードベースで広く使われています。
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 チャレンジ
|
|
|
|
|
|
関数とメソッドの違いを一文で説明できますか？挑戦してみてください！
|
|
|
|
|
|
## GitHub Copilot Agent チャレンジ 🚀
|
|
|
|
|
|
Agentモードを使って以下のチャレンジを完了してください:
|
|
|
|
|
|
**説明:** このレッスンで取り上げたさまざまな関数の概念を示す数学関数のユーティリティライブラリを作成してください。これには、パラメータ、デフォルト値、戻り値、矢印関数が含まれます。
|
|
|
|
|
|
**プロンプト:** `mathUtils.js`というJavaScriptファイルを作成し、以下の関数を含めてください:
|
|
|
1. 2つのパラメータを取り、それらの合計を返す関数`add`
|
|
|
2. デフォルトのパラメータ値を持つ関数`multiply`（2番目のパラメータはデフォルトで1）
|
|
|
3. 数値を取り、その平方を返す矢印関数`square`
|
|
|
4. 他の関数をパラメータとして受け取り、2つの数値にその関数を適用する関数`calculate`
|
|
|
5. 各関数を適切なテストケースで呼び出す例を示す
|
|
|
|
|
|
[Agentモード](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)について詳しくはこちらをご覧ください。
|
|
|
|
|
|
## 講義後のクイズ
|
|
|
[講義後のクイズ](https://ff-quizzes.netlify.app)
|
|
|
|
|
|
## 復習と自己学習
|
|
|
|
|
|
[矢印関数についてもう少し読む](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があります。コードベースでますます使用されるようになっています。関数を書いてみて、その後この構文で書き直してみてください。
|
|
|
|
|
|
## 課題
|
|
|
|
|
|
[Fun with Functions](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は責任を負いません。 |
