【第7回】直してほしい場所を名指しできるようになる｜関数（嫁子が教えるTS講座）

学ぶ2026/08/17 公開

今回のゴール

関数の引数と戻り値が何を指すか分かる
function とアロー関数（=>）が同じものだと分かる
AIへの指示を「関数単位」で出せるようになる

前回（条件分岐とループ）までで、処理の書き方はひととおり出ました。今回はそれをまとめて名前をつける回です。全体の流れは講座の目次へ。

嫁子: 今日の回は、AIに指示を出す単位そのものの話だと思って。

「サイト全体をいい感じにして」って頼むと、たいてい残念な結果になるでしょ。範囲が広すぎて、AIも何を優先すればいいか分からないの。

でも「税込み価格を返す関数を作って」なら、入口と出口がはっきりしてる。仕事を関数の大きさに切って渡せる人が、AIをいちばんうまく使えるんだよ。

① 関数とは「入れたら、出てくる」もの

処理に名前をつけて、何度でも呼び出せるようにしたものです。

function addTax(price) {
  return price * 1.1;
}

console.log(addTax(1000));  // 1100
console.log(addTax(250));   // 275

ここで押さえるのは2つだけです。

引数（ひきすう） — 括弧の中に渡すもの。上の例では price
戻り値（もどりち） — return で返すもの。上の例では計算結果

addTax(1000) と書いた場所が、そのまま 1100 に置き換わると考えてください。

return を書き忘れると undefined が返ります。第5回に出てきたあの undefined で、これも静かに壊れるパターンです。

② 引数は複数渡せる

function total(price, count) {
  return price * count;
}

console.log(total(250, 3));  // 750

順番が意味を持ちます。total(3, 250) と書けば「3円のものを250個」という計算になり、エラーは出ません。

数が増えてきたら、第5回でやったオブジェクトで渡す書き方もあります。

function total({ price, count }) {
  return price * count;
}

total({ price: 250, count: 3 });

名前で渡すので順番を気にせずに済み、読む側も何を渡しているか分かります。

嫁子: 引数が3つ以上になったら、オブジェクトで渡すほうが安全だよ。

f(true, false, true) みたいなコードを3ヶ月後に読んだら、まず意味が分からないでしょ。引数の順番を覚えているのは、書いた瞬間の自分だけなんだよね。

③ アロー関数 — 同じことの別の書き方

実際のコードでは、こちらのほうがよく見ます。

const addTax = (price) => {
  return price * 1.1;
};

処理が1行なら、さらに短く書けます。

const addTax = (price) => price * 1.1;

この形では return を省略でき、書かなくても結果が返ります。

第5回の map や filter に出てきた (item) => item.name も、これと同じアロー関数です。

書き方	特徴
`function 名前() {}`	昔からある書き方。今も普通に使う
`const 名前 = () => {}`	現在の主流。React系ではほぼこちら

嫁子: 2つあると「どっちが正しいの？」って思うよね。どっちでもいいのが答えだよ。

細かい違いはあるんだけど、それが問題になる場面には当分こないと思う。今は「=> を見たら関数だ」と分かれば十分だね。

④ なぜ関数に分けるのか

同じ処理を何度も書かずに済む、というのが教科書的な答えです。ただ、AIと作業する場合はもう1つ大きな理由があります。

直したい場所を、名前で指し示せるようになります。

関数に分かれていない	分かれている
「合計のところがおかしいです」	「`total` の戻り値がおかしいです」
AIが該当箇所を探す	AIが直接そこを直す

指示の精度は、コードの構造にそのまま依存します。200行が1つのかたまりになっていると、こちらも指し示せず、AIも周辺を巻き込んで書き換えます。

嫁子: だから「関数に分けて」ってお願いするの、ぜんぜんアリなんだよ。

AIは頼まないと1つの大きな関数で書いてくることがあるの。動くけど、あとで直しにくい。最初から「機能ごとに関数を分けて」と言っておくと、後の自分が助かるよ。

つまずきポイント

関数は「呼ばないと動きません」。定義しただけでは何も起きず、addTax(1000) のように呼び出して初めて実行されます。

addTax と addTax() は別物です。括弧なしは関数そのもの、括弧つきは実行した結果です。この違いは、あとでReactを触るときに効いてきます。

console.log(addTax);      // 関数の中身が表示される
console.log(addTax(100)); // 110

嫁子: 「ボタンを押したら動くはずなのに、ページを開いた瞬間に動いてしまう」というバグ、原因はたいていこれなの。

括弧をつけるとその場で実行されるからね。今すぐ理解しなくていいけど、第4部でボタンを扱うときに戻ってくるといいよ。

今回のまとめ

関数は処理に名前をつけたもの。引数を受け取り、return で戻り値を返す
return を書き忘れると undefined が返る
引数が3つ以上になったら、オブジェクトで渡すと安全
function とアロー関数（=>）は書き方の違いで、どちらも関数
関数に分かれていると、AIに直してほしい場所を名前で指定できる

次にやること

次回は非同期処理の入口です。「サーバーに問い合わせて、返事が来るまで待つ」という、Webでは避けて通れない仕組みを扱います。第2部でいちばん難しい回ですが、その前提が今日の関数でした。

今回の宿題：addTax を書いて、return を消したら何が返るか確認してください。undefined が出ます。これが「関数は何かを返すもの」という感覚につながります。

嫁子: return の消し忘れ、AIもたまにやるよ。人間だけの問題じゃないの。

「なぜか undefined が出る」と思ったら、まず return を疑う。この順番を覚えておくと、原因にたどり着くのが早くなるよ。