関数に分けると何が良いのですか

同じ処理を 1 か所にまとめられるので、仕様が変わったときに直す場所が 1 つで済みます。さらに処理に名前が付くため、読む人は中身を読まなくても何をするコードか分かります。行数が減ること以上に、この 2 つの効果が大きいです。

引数はいくつまで書けますか

文法上の上限はありませんが、実務では 3 つまでを目安にします。4 つを超えると呼び出し側で順番を間違えやすくなり、しかも順番違いはエラーにならず静かに誤動作します。増えてきたら第7章で学ぶオブジェクトにまとめて 1 つ渡す設計に切り替えます。

return を書かないとどうなりますか

その関数は undefined を返します。エラーにはならないので、呼び出し側で undefined が混ざった文字列が表示されて初めて気付く、という形になりがちです。値を返す関数を書いたら、必ず return があるか確認してください。

関数宣言｜コードで実践 - ゆめさくコード

このレッスンで分かること

function 名前(引数) { return 値; } で処理に名前を付けて、何度でも呼べます

引数が関数への入口、return が出口です

同じ組み立てを 3 か所に書いてしまう

プロフィールサイトで、作品名と公開年を並べた 1 行を出したいとします。トップにも出す、一覧にも出す、詳細にも出す。同じ組み立てを 3 か所に書いていたら、カッコの形を変えたくなったときに 3 か所を直すことになります。1 か所直し忘れれば、そこだけ表示が食い違うバグです。

そこで使うのが関数です。ひとかたまりの処理に名前を付けて、何度でも呼び出せるようにした道具です。料理でいえばレシピにあたります。名前が付いていれば一言頼むだけで済みますし、レシピを直せば、次から作るぶんは全部いっぺんに変わります。

入口が引数、出口が return

function キーワードを使った書き方を関数宣言と呼びます。

JavaScript

function makeWorkLabel(title, year) {
  return title + "（" + year + " 年公開）";
}

console.log(makeWorkLabel("プロフィールサイト", 2026));
// => プロフィールサイト（2026 年公開）
console.log(makeWorkLabel("自己紹介カード", 2025));
// => 自己紹介カード（2025 年公開）

パーツ	役割
`function`	関数を作りますという合図
`makeWorkLabel`	呼び出すときに使う名前
`( )` の中	引数。関数への入口。カンマ区切りでいくつでも並べられる
`{ }` の中	関数の本体
`return`	戻り値。呼び出した側に値を渡す

引数の並び順は、呼び出す側と一致していなければいけません。逆に渡してもエラーにはならず、間違った文字列が静かに出来上がります。関数名は動詞から始めると意図が伝わります。get は取り出す、make は組み立てる、is は真偽値を返す、といった型があります。

表示しただけでは、返したことにならない

return を書き忘れた関数は undefined を返します。エラーが出ないぶん、いちばん気付きにくい間違いです。

JavaScript

function brokenLabel(title, year) {
  console.log(title + "（" + year + " 年公開）");
}

console.log(brokenLabel("プロフィールサイト", 2026));
// => プロフィールサイト（2026 年公開）
// => undefined

文字列は組み立てていますが、誰にも渡していません。作った料理を皿に盛らずに捨てているようなものです。console.log は人間に見せる表示、return は呼び出し元に値を渡すこと。この 2 つはまったく別の行為で、テストが見ているのは return の値だけです。

return にはもう 1 つ働きがあります。そこで関数を終わらせることです。

JavaScript

function firstOnly(a, b) {
  return a;
  return b; // ここへは決して来ない
}

return に到達した瞬間に関数は終了し、後ろに書いた行は実行されません。この性質は、あとのレッスンで大きな武器になります。

よくある間違い

呼び出すときに丸カッコを忘れる — makeWorkLabel は関数そのもの、makeWorkLabel("自己紹介カード", 2025) が呼び出した結果です。カッコが無いと中身は動きません
return の直後で改行する — JavaScript は行末にセミコロンを補うことがあり、return だけで文が終わったと読まれて undefined が返ります。返したい値は return と同じ行に書き始めます

このレッスンで分かること

function 名前(引数) { return 値; } で処理に名前を付けて、何度でも呼べます

引数が関数への入口、return が出口です

同じ組み立てを 3 か所に書いてしまう

入口が引数、出口が return

function キーワードを使った書き方を関数宣言と呼びます。

JavaScript

function makeWorkLabel(title, year) {
  return title + "（" + year + " 年公開）";
}

console.log(makeWorkLabel("プロフィールサイト", 2026));
// => プロフィールサイト（2026 年公開）
console.log(makeWorkLabel("自己紹介カード", 2025));
// => 自己紹介カード（2025 年公開）

パーツ	役割
`function`	関数を作りますという合図
`makeWorkLabel`	呼び出すときに使う名前
`( )` の中	引数。関数への入口。カンマ区切りでいくつでも並べられる
`{ }` の中	関数の本体
`return`	戻り値。呼び出した側に値を渡す

表示しただけでは、返したことにならない

return を書き忘れた関数は undefined を返します。エラーが出ないぶん、いちばん気付きにくい間違いです。

JavaScript

function brokenLabel(title, year) {
  console.log(title + "（" + year + " 年公開）");
}

console.log(brokenLabel("プロフィールサイト", 2026));
// => プロフィールサイト（2026 年公開）
// => undefined

return にはもう 1 つ働きがあります。そこで関数を終わらせることです。

JavaScript

function firstOnly(a, b) {
  return a;
  return b; // ここへは決して来ない
}

return に到達した瞬間に関数は終了し、後ろに書いた行は実行されません。この性質は、あとのレッスンで大きな武器になります。

よくある間違い

呼び出すときに丸カッコを忘れる — makeWorkLabel は関数そのもの、makeWorkLabel("自己紹介カード", 2025) が呼び出した結果です。カッコが無いと中身は動きません
return の直後で改行する — JavaScript は行末にセミコロンを補うことがあり、return だけで文が終わったと読まれて undefined が返ります。返したい値は return と同じ行に書き始めます

関数宣言

同じ組み立てを 3 か所に書いてしまう

入口が引数、出口が return

表示しただけでは、返したことにならない

よくある間違い

要件

入出力例

ヒント

メモ

関数宣言

同じ組み立てを 3 か所に書いてしまう

入口が引数、出口が return

表示しただけでは、返したことにならない

よくある間違い

要件

入出力例

ヒント

メモ