Steg JavaScript Tutorial

Appearance

関数を作成する ​

この章では、JavaScriptの重要な概念である「関数」について学習します。関数を使うことで、コードを再利用可能な形にまとめ、より効率的なプログラムを書けるようになります。

関数とは何か？ ​

関数とは、特定の処理をまとめて名前を付けたものです。一度定義しておけば、その名前を使って何度でもその処理を呼び出すことができます。

料理に例えると、「カレーを作る」という手順をレシピとしてまとめておけば、そのレシピを使って何度でもカレーを作ることができますね。関数も同じような考え方です。

基本的な関数を作成してみよう ​

まずは、シンプルな関数から始めましょう。combineNamesという名前で、二つの名前を結合する関数を作成します。

js
// combineNamesという名前で関数を宣言
const combineNames = () => {
  return '山田' + '太郎'
}

// 関数を呼び出して結果を変数に格納
const result = combineNames()

// 結果を表示: 山田太郎
console.log(result)

このコードをindex.jsに記述して、以下のコマンドで実行してみましょう：

bash
node index.js

実行すると、ターミナルに山田太郎と表示されます。

コードの解説 ​

  1. 関数の定義: const combineNames = () => { ... } で関数を定義
  2. 関数の実行: combineNames() で関数を呼び出し
  3. 戻り値の取得: return で返された値を result 変数に格納
  4. 結果の表示: console.log() で結果を出力

関数は同じ処理を何度でも呼び出すことができる便利な機能です。また、さまざまな書き方で同じ結果を得ることができるので、いくつかのパターンを見ていきましょう。

引数を使用してより柔軟な関数を作ろう ​

先ほどの関数は常に「山田太郎」しか作れませんでした。今度は、**引数（ひきすう）**を使って、どんな名前でも結合できるより柔軟な関数を作ってみましょう。

引数とは？ ​

引数とは、関数に渡すデータのことです。関数を呼び出すときに、処理に必要な情報を外部から提供できます。

js
// combineNamesという名前で関数を宣言（引数を受け取る）
const combineNames = (firstName, lastName) => {
  return firstName + lastName
}

// 引数に具体的な値を渡して関数を呼び出し
const result = combineNames('山田', '太郎')

// 結果を表示: 山田太郎
console.log(result)

引数を使った関数の利点 ​

引数を使うことで、同じ関数で異なる結果を得ることができます：

js
const combineNames = (firstName, lastName) => {
  return firstName + lastName
}

// さまざまな名前の組み合わせが可能
console.log(combineNames('田中', '花子'))  // 田中花子
console.log(combineNames('佐藤', '次郎'))  // 佐藤次郎
console.log(combineNames('鈴木', '三郎'))  // 鈴木三郎

このように、一つの関数でさまざまなデータを処理できるようになります。

戻り値を使わない書き方 ​

関数には、値を返さずに直接処理を実行する書き方もあります。この方法では、関数内で直接結果を出力します。

関数設計における考え方

関数は「一つの責任」を持つように設計しましょう。名前を結合する関数なら結合だけを行い、表示は呼び出し側で行うという分離が重要です。

まとめ ​

この章で学習した内容を振り返ってみましょう。

学習できたこと ​

  • 関数の基本概念と役割
  • 関数の定義と呼び出し方法
  • 引数を使った柔軟な関数の作成

次のステップ ​

次のステップでは、作成した関数を別のファイルから呼び出す方法について紹介します。