【無料配布】10日間で学べるTypeScript学習資料

プログラミングの戻り値とは?意味や引数との違いを初心者向けに解説

プログラミングの基礎であり、関数を使いこなす上で欠かせない「戻り値(返り値)」について、引数との違いからTypeScriptでの実践的な型指定までをわかりやすく解説します。

初心者が陥りがちな「戻り値の無視」という警告への対処法など、実務で役立つ知識を網羅した完全ガイドです。

目次

プログラミングの戻り値とは?

プログラミングの学習を進め、関数について学び始めると登場する重要なキーワードが「戻り値」です。

検索エンジンで「プログラミング 戻り値とは」や「プログラミング 戻り値 意味」と調べる初心者は多く、最近では高校の「情報」の授業でも必須の概念として教えられています。

「プログラミング 戻り値とは一体何なのか?」「引数とはどう違うのか?」と疑問に思う方へ向けて、ここでは「戻り値」の基礎から実務での注意点までをTypeScriptを使って解説します。

プログラミングの戻り値とは?
  • 戻り値とは関数が処理した結果として返してくるデータのこと
  • 戻り値と返り値に違いはある?
  • 戻り値の英語表現とIT用語としての使われ方

戻り値とは関数が処理した結果として返してくるデータのこと

戻り値とは、一言で表すと「関数に処理を頼んだ結果、最終的に外へ返してくれるデータ」のことです。

自動販売機でお金を入れ(引数)、ボタンを押して内部で処理が行われた後、最終的に出てくる「ジュース」や「お釣り」が戻り値にあたります。

関数は処理を行うだけでなく、その結果を別のプログラムで「再利用」するために、この戻り値という仕組みを使います。

初心者がよく陥る致命的な勘違いが、「画面に表示(console.log)しただけで、戻り値を返した気になってしまう」というミスです。

関数の中でいくら計算結果を画面に表示しても、それは単なる「出力」であり、プログラムの他の部分にデータは渡っていません。

データを関数の外に返すには、returnキーワードを使って明示的に「これを戻り値にする」と宣言する必要があります。

これを忘れると、結果はすべてundefined(未定義)になり、後続の計算がバグで崩壊します。

// ❌ 初心者がよくやる間違い(戻り値がない)
// 画面に表示しているだけで、結果のデータを返していない
function calculateBad(price: number): void {
  const result = price * 1.1;
  console.log(`計算結果は ${result} です`); 
}

const finalPriceBad = calculateBad(1000);
// console.log(finalPriceBad); // 🚨 何も返ってきていないので undefined になる!

// ⭕ 正しい書き方(returnで戻り値を返す)
// 引数を受け取り、計算結果を「数値(number)」として外に返す
function calculateGood(price: number): number {
  const result = price * 1.1;
  return result; // return で戻り値を指定する
}

// 戻り値が変数に入るため、次の計算に正しく使い回せる!
const finalPriceGood = calculateGood(1000);
console.log(`合計金額は ${finalPriceGood + 500} 円です。`);

戻り値と返り値に違いはある?

プログラミングの学習記事や実務の現場では、「戻り値(もどりち)」のほかに「返り値(かえりち)」という言葉もよく使われます。

「プログラミング 返り値 戻り値 の違いは何?」と混乱する方も多いでしょう。

結論から言うと、「戻り値」と「返り値」は全く同じ意味です。

どちらを使っても間違いではありません。

単なる呼び方の好みの違いや、企業・チームの文化による違いにすぎません。

言葉の意味は同じですが、実務の現場でやってはいけないのは「1つのプロジェクト(コードや仕様書)の中で、戻り値と返り値の呼称を混在させること」です。

ドキュメントのAページでは「戻り値」、Bページでは「返り値」と表記されていると、後から参加したメンバーが「これは別の概念なのか?」と無用な混乱を招きます。

実務ではチーム内で「戻り値」という表記に統一するなど、用語のルール決め(コーディング規約)を行うのがベストプラクティスです。

// どちらで呼んでも意味は同じですが、実務ではドキュメント等の表記を統一します

/**
 * ユーザーのフルネームを生成する関数
 * @param firstName 名前
 * @param lastName 苗字
 * @returns フルネームの文字列(※チーム内で「戻り値」か「返り値」か表記を統一する)
 */
function getFullName(firstName: string, lastName: string): string {
  // ここで返されるデータが戻り値(返り値)
  return `${lastName} ${firstName}`;
}

const userName = getFullName("太郎", "山田");

戻り値の英語表現とIT用語としての使われ方

「プログラミング 戻り値 英語」では、そのまま “return value”(リターン・バリュー) と表現されます。

プログラム内で戻り値を指定する際にreturn(返す)という英単語を使うことから、このように呼ばれます。

IT用語としてのreturnは単にデータを返すだけでなく、「その関数の処理をそこで終了させる」という非常に重要な役割を持っています。

初心者はif文などの条件分岐で、処理を深くネスト(入れ子に)してしまいがちです。

しかし実務では、このreturnの「処理を終了させる」性質を利用した「早期リターン(Early Return / ガード節)」というテクニックが多用されます。

条件に合わない場合はさっさとreturnして関数を終わらせることで、コードのネストが浅くなり、劇的に読みやすいコード(可読性の高いコード)に生まれ変わります。

// ❌ 悪い例:深くネストされた読みづらいコード(初心者にありがち)
function checkUserAccessBad(age: number, hasTicket: boolean): string {
  let message = "";
  if (age >= 18) {
    if (hasTicket) {
      message = "入場可能です";
    } else {
      message = "チケットがありません";
    }
  } else {
    message = "18歳未満は入場できません";
  }
  return message; // 最後にまとめてreturnしている
}

// ⭕ 良い例:実務で多用される「早期リターン(Early Return)」
function checkUserAccessGood(age: number, hasTicket: boolean): string {
  // 条件を満たさない場合は、即座に return して関数を終了させる!
  if (age < 18) {
    return "18歳未満は入場できません";
  }
  
  if (!hasTicket) {
    return "チケットがありません";
  }

  // エラー条件をすべて通り抜けた場合のみ、正常系の処理を行う
  return "入場可能です";
}

関数における引数と戻り値

プログラミングを学ぶ上で、「関数」の働きを理解することは避けて通れません。

そして、その関数を真に便利で強力なものにしているのが、「引数(ひきすう)」と「戻り値(もどりち)」の存在です。

検索エンジンなどで「プログラミング 関数 戻り値」や「プログラミング 引数 戻り値」と調べている方の多くは、これら2つがどう連動しているのかでつまずきがちです。

関数は基本的に「外から材料を受け取り(引数)、内部で処理をして、結果を外へ返す(戻り値)」という一連のサイクルで成り立っています。

この切っても切れない関係性を、わかりやすい例とTypeScriptのコードで紐解いていきましょう。

関数における引数と戻り値
  • 自動販売機で例える「引数」と「戻り値」
  • TypeScriptで引数を受け取り、戻り値を返す関数の基本構文

自動販売機で例える「引数」と「戻り値」

関数、引数、戻り値の3つの関係性を最も直感的に理解できるのが「自動販売機」の例えです。

  • 引数(お金・ボタンの選択): 外の世界から、自動販売機(関数)の中へ入れるものです。
  • 関数(内部の処理): お金が足りているか計算し、指定されたジュースを準備する機械の働きです。
  • 戻り値(ジュース・お釣り): 処理が終わった後、最終的に機械から外へ出てくるものです。

自動販売機にお金を入れても、ジュースが出てこなかったら不良品です。

プログラミングでも初心者がよくやるのが、「関数の中で計算したのにreturn(戻り値)を返し忘れる」というミスです。

また、引数として「100円玉(数値)」を期待している関数に、「おはじき(文字列)」を入れてエラーを起こすのも実務でよくあるミスです。

TypeScriptでは、こういった「間違った引数(材料)」を入れようとした瞬間にエラーを出して、未然にバグを防いでくれます。

// 自動販売機関数
// 引数: money (投入金額: 数値), button (ボタン: 文字列)
// 戻り値: 文字列 (出てくる商品名やメッセージ)
function vendingMachine(money: number, button: string): string {
  // --- 関数の内部処理 ---
  if (button === "コーラ" && money >= 150) {
    return "コーラが出ました!"; // 戻り値として結果を返す
  } else if (button === "お茶" && money >= 120) {
    return "お茶が出ました!"; // 戻り値として結果を返す
  } else {
    // ❌ よくあるミス:ここで return を書き忘れると、関数は undefined を返してしまいバグになる
    return "お金が足りないか、商品がありません。";
  }
}

// 引数(お金とボタン)を渡して、戻り値(ジュース)を受け取る
const result = vendingMachine(200, "コーラ");
console.log(result); // 出力: コーラが出ました!

TypeScriptで引数を受け取り、戻り値を返す関数の基本構文

実際のTypeScriptの実務では、この引数と戻り値をどのように記述するのでしょうか。

基本構文はシンプルですが、TypeScriptならではの「型(Type)」の指定が重要になります。

  • 引数の型: (変数名: 型) のように指定します。
  • 戻り値の型: (): 型 { ... } のように、引数のカッコの直後に指定します。

TypeScriptの強みは「引数と戻り値の型を厳密に決められること」ですが、初心者がやりがちな実務上のミスが「戻り値の型指定(例:: number)をサボって省略してしまうこと」です。

TypeScriptは賢いため、戻り値の型を書かなくても推論してくれますが、複雑なif文などを書いた際に、意図せず「文字列」と「未定義(undefined)」の両方が返るような不安定な関数になってしまうことがあります。

実務では「引数と戻り値の型はセットで明示的に書く」ことを徹底し、堅牢なコードを保つのがベストプラクティスです。

// ⭕ 良い例:引数と戻り値の型をセットでしっかり定義している
// 引数 (price: 数値, discount: 数値) を受け取り、戻り値 (数値) を返す
function calculateDiscountPrice(price: number, discount: number): number {
  const finalPrice = price - discount;
  return finalPrice; // 数値を返す
}

// 戻り値は「数値」であることが保証されているので、安心して次の計算に使える
const myTotal = calculateDiscountPrice(1000, 200);
console.log(`お支払いは ${myTotal} 円です。`); // 出力: お支払いは 800 円です。


// ❌ 実務でNGな例:戻り値の型が指定されていない
// 引数の型はあるが、戻り値の型が省略されている
function badCalculate(price: number, discount: number) {
  // もし内部の計算ロジックを間違えて文字列になってしまっても、関数定義の時点ではエラーにならない
  // return "計算結果は" + (price - discount); 
}

【TypeScript】戻り値の「型」を明示するメリットと書き方

JavaScriptにはなく、TypeScriptにのみ存在する機能が「型(Type)」のシステムです。

関数の「引数」に型を指定できるのと同様に、関数が返す「戻り値」に対しても「この関数はこの種類のデータを返す」というルール(型注釈)を厳格に決めることができます。

「TypeScriptは自動で型を推測してくれる(型推論)から、わざわざ書かなくてもいいのでは?」と思う初心者も多いですが、実務において戻り値の型を明示することは、バグを防ぐための防波堤となります。

ここでは、戻り値に型をつけるメリットと特殊な型である「void型」について解説します。

戻り値の「型」を明示するメリットと書き方
  • 戻り値に型注釈をつけてバグを未然に防ぐ
  • 何も返さない関数には「void型」を指定する

戻り値に型注釈をつけてバグを未然に防ぐ

TypeScriptで戻り値の型を指定するには、関数の引数を囲むカッコ()の直後に: 型名を記述します。

例えば、計算結果を返すなら: number、テキストを返すなら: string、真偽値を返すなら: booleanとなります。

これを書いておくことで、関数の中身を読む前から「この関数を使えば、最終的に数値が手に入るんだな」と一目で理解できるようになります。

初心者が実務でよく陥るミスが、「TypeScriptの『型推論』を過信して、戻り値の型を省略してしまうこと」です。

確かに簡単な関数なら省略しても問題ありません。

しかし、実務で扱う複雑な関数(ifswitchで何重にも分岐している関数)で型を省略すると、本来「数値」を返すべき関数が、ある特定の条件の時だけ「未定義(undefined)」や「null」を返してしまうバグが混入しやすくなります。

戻り値の型を明示しておけば、間違ったデータを返そうとした瞬間にエディタが警告を出してくれるため、後続のプログラムがクラッシュするのを未然に防ぐことができます。

// ⭕ 良い例:戻り値の型を「: number」と明示している
function calculateDiscount(price: number, isSale: boolean): number {
  if (isSale) {
    return price * 0.8; // 20%オフ(数値を返しているのでOK)
  }
  return price; // そのままの価格(数値を返しているのでOK)
}

const finalPrice = calculateDiscount(1000, true);
console.log(finalPrice); // 出力: 800

// ❌ 悪い例:戻り値の型を省略し、バグに気づけないパターン
function badCalculate(price: number, isSale: boolean) {
  if (isSale) {
    return price * 0.8;
  }
  // 🚨 もしここで return price; を書き忘れた場合...
  // 型を明示していないと、TypeScriptは「あ、この関数は number か undefined を返すんだな」と勝手に推測してしまい、この時点ではエラーになりません。
  // 結果として、別の場所で undefined を計算に使おうとして重大なバグが発生します。
}

// ⭕ 型を明示していれば、書き忘れを防げる!
function safeCalculate(price: number, isSale: boolean): number {
  if (isSale) {
    return price * 0.8;
  }
  // 🚨 ここで return を忘れると「関数に終了の return ステートメントがないため、戻り値の型には 'undefined' が含まれません。」というエラーが出て、ミスに気づかせてくれます!
}

何も返さない関数には「void型」を指定する

すべての関数が、何かしらの計算結果(データ)を返すわけではありません。

例えば、「画面にメッセージを表示するだけの関数」や、「データをデータベースに保存するだけの関数」など、『処理を実行して終わり(何も返さない)』という関数も多数存在します。

このように「戻り値がない」関数を定義する際に使うのが、「void(ボイド)型」です。

初心者が混乱しがちなのが、「void」と「undefined」と「null」の違いです。

TypeScriptでは、「何も返さない」という動作を明示するためにvoidを使います。

ここで誤って戻り値の型を: undefinedにしてしまうと、「明示的にreturn undefined;と書かなければならない」という奇妙なルールが発生してしまいます。

また、実務でのあるあるミスとして、void型の関数の実行結果を、誤って変数に代入して後で使おうとしてしまうというものがあります。

これを防ぐためにも、関数を作った本人が: voidと明記し、「この関数からは何も受け取れませんよ」と他の開発者に伝えることが重要です。

// ⭕ 良い例:何も返さない(returnがない)関数には void を指定する
function showWelcomeMessage(userName: string): void {
  // 画面やログに出力するだけで、外にデータを返さない
  console.log(`ようこそ、${userName}さん!`);
}

// 呼び出して処理を実行させるだけ
showWelcomeMessage("田中"); // 出力: ようこそ、田中さん!


// ❌ 初心者がやりがちな間違い
// void型の関数から無理やりデータを受け取ろうとする
const resultData = showWelcomeMessage("佐藤");
// console.log(resultData); // 🚨 ここには何も入っていない(undefined)ため、後で使えない!

// ❌ 戻り値の型を間違える(void と undefined の混同)
function wrongVoid(): undefined {
  console.log("処理が終わりました");
  // 🚨 「型 'undefined' は返せません」というエラーになる。
  // (どうしてもundefined型にしたい場合は `return undefined;` と書く必要があるが、実務では通常 void を使う)
}

警告「戻り値が無視されました」が出た時の原因と解決策

プログラミング学習中や実務でコードを書いている最中、エディタ画面に「プログラミング 戻り値が無視されました」といった警告が出たことはありませんか?

これはエラーではないため、そのまま実行してもプログラムが止まらないことは多いです。

しかし、この警告は「あなたが意図した通りにプログラムが動いていない可能性が高いですよ」という、システムからの非常に重要なサインです。

ここでは、なぜこの警告が出るのか、TypeScriptの実務においてどのように対処すべきかを解説します。

「戻り値が無視されました」が出た時の原因と解決策
  • なぜ「戻り値が無視されました」と警告されるのか?
  • 戻り値を変数で受け取る、または正しく後続処理に繋げる

なぜ「戻り値が無視されました」と警告されるのか?

この警告が出る理由はシンプルで、「関数がせっかく計算してデータ(戻り値)を返してくれているのに、呼び出し元で誰もそれを受け取らず、空中に捨ててしまっているから」です。

自動販売機で例えると、お金を入れてジュースが出てきたのに、それを取り出し口に放置したまま立ち去ってしまっている状態です。

TypeScriptをサポートするエディタ(VSCodeなど)や構文チェックツール(ESLint)は、これを見て「せっかくジュース(戻り値)が出てきたのに、受け取らなくて本当にいいの?」と親切に警告を出してくれます。

初心者が実務で一番よくやってしまうのが、「配列の非破壊的メソッド(mapfilterなど)の戻り値を無視してしまう」というミスです。

「この関数を呼び出せば、元の配列の中身が書き換わるだろう」と勘違いして、ただメソッドを呼び出すだけで終わってしまい、「画面のデータがいつまで経っても更新されない!」とパニックになるケースが後を絶ちません。

TypeScriptの標準関数の多くは、元のデータを壊さず「新しいデータを戻り値として返す」仕様になっています。

// ❌ 警告が出る悪い例(戻り値が無視されている)
function createGreeting(name: string): string {
  return `こんにちは、${name}さん!`; // 文字列を返している
}

// 🚨 警告: 戻り値が無視されました
// 関数は正しく実行されているが、結果の文字列を誰も受け取っていないため、ただ消滅する
createGreeting("田中"); 


// ❌ 実務で頻発する初心者のミス(配列操作の勘違い)
const numbers = [1, 2, 3];

// 配列の各要素を2倍にするつもりで書いているが...
// map関数は「新しい配列を戻り値として返す」ため、受け取らないと意味がない!
numbers.map(num => num * 2); 

console.log(numbers); // 出力: [1, 2, 3] (元の配列は全く変わっていない)

戻り値を変数で受け取る、または正しく後続処理に繋げる

この警告を消す正しい解決策は、「戻り値を変数(constlet)に代入して受け取る」、または「そのまま次の処理の引数として使う(メソッドチェーンなどで繋げる)」ことです。

変数に代入して受け取ることで、せっかく関数が作ってくれたデータをプログラムの別の場所で正しく再利用できるようになります。

ここで実務的な盲点となるのが、「本当に戻り値を使う予定がなく、関数の実行(例えば画面への描画やデータの送信など)だけが目的なのに、関数側が勝手に仕様で値を返してくる」ケースです。

本当に無視して良い場合は、実務のハックとしてvoid演算子をつけて「意図的に無視している」ことを明示する(例: void someFunction();)というテクニックもあります。

しかし、初心者のうちは「警告が出たら、まずは変数で受け取ってみる(または関数の仕様書を読む)」のが、予期せぬバグを防ぐ安全な設計方針です。

// ⭕ 解決策1:戻り値を変数(受け皿)でしっかりと受け取る
function createGreeting(name: string): string {
  return `こんにちは、${name}さん!`;
}

// 変数 message に戻り値を代入する(これで警告は消え、データも使える!)
const message = createGreeting("佐藤");
console.log(message); // 出力: こんにちは、佐藤さん!


// ⭕ 解決策2:配列操作なども、戻り値を受け取って新しい変数に入れる
const baseNumbers = [1, 2, 3];

// map関数が返してくれた「新しく作られた配列」を doubledNumbers という変数で受け取る
const doubledNumbers = baseNumbers.map(num => num * 2);

console.log(doubledNumbers); // 出力: [2, 4, 6] (意図通りに2倍になったデータが手に入る!)


// ⭕ 解決策3:変数に入れず、そのまま後続の処理に直接繋げる(実務でよく使う)
// createGreeting の戻り値(文字列)を、そのまま console.log 関数の「引数」として直接渡している
console.log(createGreeting("鈴木"));

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 戻り値の役割
    関数での処理が完了した後に、呼び出し元へ返される結果のデータ。
  • 呼称の違い
    「戻り値」と「返り値」は完全に同義であり、実務ではチームやプロジェクト内で表記を統一する。
  • 引数との関係
    引数が関数に対する「入力(材料)」であるのに対し、戻り値は「出力(結果)」にあたる。
  • 型指定の重要性
    TypeScriptでは戻り値の型(: numberなど)を明示することで、予期せぬバグを未然に防ぐ。
  • void型の活用
    データとして何も返さず、処理のみを実行する関数にはvoid型を指定する。
  • 警告への対処
    「戻り値が無視されました」という警告が出た場合は、返ってきたデータを使用するため変数で受け取るか、後続の処理に繋げる。

よくある質問(FAQ)

プログラミングの戻り値とは簡単に言うと何ですか?

関数が処理を終えた後に、関数の外へ渡してくれる「結果のデータ」のことです。

自動販売機で例えると、入れたお金(引数)を使って内部で処理を行い、最終的に出てくる「ジュース」や「お釣り」が戻り値にあたります。

この戻り値を受け取ることで、プログラムの別の場所でそのデータを使い回すことができるようになります。

戻り値と返り値の違いは何ですか?

意味は全く同じです。

どちらも英語の「return value(リターン・バリュー)」を日本語に訳したものであり、プログラミングにおける役割に違いはありません。

開発現場や参考書によって呼び方が変わるだけですが、実務のプロジェクト内では混乱を避けるため、どちらか一方に表記を統一するのが一般的です。

引数と戻り値の違いは何ですか?

関数に対する「入力(渡すもの)」か、「出力(返ってくるもの)」かの違いです。

引数(ひきすう)は、関数に処理をお願いする際に渡す「材料」です。

一方の戻り値は、関数がその材料を使って計算や加工を行った結果として返してくる「完成品」です。

画面に表示する(console.log)ことと、戻り値を返す(return)ことは違いますか?

全く異なります。

ここが初心者の最も陥りやすい落とし穴です。

console.log等による画面表示は、単に人間が見るためにモニターへ文字を出力しているだけで、プログラム上には何のデータも残っていません。

一方return(戻り値)は、計算結果をプログラムの別の部分へデータとして渡し、さらに別の計算に使い回すための仕組みです。

// ❌ 画面に出るだけで、戻り値がない(別の計算に使えない)
function showPrice() {
  console.log(1000); 
}

// ⭕ 戻り値があるため、変数で受け取って次の計算(割引など)に使える
function getPrice(): number {
  return 1000;
}
戻り値がない関数もあるのですか?

はい、存在します。

すべての関数が必ずデータを返すわけではありません。

「画面にメッセージを表示するだけ」「データベースに保存するだけ」といった、処理を実行して終わりの関数には戻り値がありません。

TypeScriptでは、このような「何も返さない関数」の戻り値の型にはvoid(ボイド:空っぽという意味)を指定するのがルールとなっています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次