JavaScript の関数を文字にする toString の基本
プログラミングを始めたばかりだと「関数は黒い箱」に見えますよね。toString() は、その箱のフタを開けて「中身のコードをそのまま文字にして見せてくれる」メガネです。まずは、何が起きるのかを体験しましょう。
function add(x, y) {
return x + y;
}
console.log(add.toString());
// => "function add(x, y) {\n return x + y;\n}"
- ポイント:
add.toString()は「関数のソースコード」を文字列で返します。画面にそのまま関数の定義が出てくるので、中身を確認できます。
いろいろな関数で試す
関数の書き方はいくつかあります。形が違えば、文字の出方も少し変わります。
// 1. 関数宣言
function greet(name) {
return "Hello " + name;
}
console.log(greet.toString());
// 2. 関数式（無名関数を変数に代入）
const multiply = function (a, b) {
return a * b;
};
console.log(multiply.toString());
// 3. アロー関数
const square = (n) => n * n;
console.log(square.toString());
// 4. Function コンストラクタ（あまり使わない）
const sum = new Function("a", "b", "return a + b");
console.log(sum.toString()); // "function anonymous(a, b) { return a + b }"
- 見え方の違い:
- 宣言:
function greet(...) { ... }の形。 - 式:
function (...) { ... }で「名前なし」。 - アロー:
(引数) => { ... }または省略形のまま。 - コンストラクタ:
anonymous（無名）と表示されます。
- 宣言:
例題で理解を深める
例題 1: 関数の中身をログに出す
- 目的: バグ調査で「今使ってる関数の中身」をすぐ見たい。
function formatUser(user) {
// データを整形
return `${user.lastName} ${user.firstName}`;
}
function debugFunction(fn) {
console.log("=== function source ===");
console.log(fn.toString());
}
debugFunction(formatUser);
- 学び: デバッグ用に関数を受け取り、
toString()で中身を確認できます。
例題 2: 関数の定義を画面に表示する
- 目的: 学習アプリやチュートリアルで、関数の定義をそのまま見せたい。
<div id="code"></div>
<script>
const codeBox = document.getElementById("code");
function hello() {
console.log("Hello world");
}
codeBox.textContent = hello.toString();
</script>
- 学び: 文字列になったコードは、HTML にそのまま表示できます。
例題 3: 関数の「違い」を目で確かめる
- 目的: 同じ動作でも書き方の違いが文字列にどう出るか比較する。
function make1(x) { return x + 1; }
const make2 = function (x) { return x + 1; };
const make3 = (x) => x + 1;
console.log(make1.toString());
console.log(make2.toString());
console.log(make3.toString());
- 学び: それぞれのスタイルで文字列化される形が違うことがわかります。
よくある疑問とつまずきポイント
- 見た目が完全一致するの？
- 基本: 開発者が書いたソースの形がそのまま出ます（空白や改行、コメントが含まれることもあります）。
- 例外: 組み込み関数や一部の環境で定義された関数は
"[native code]"のように表示され、ソースは見えません。
- いつ使うの？
- デバッグ: 「この関数、今どう定義されてる？」を即確認。
- 学習用途: 画面に関数のコードを見せたり、保存したり。
- コード生成系: 関数を文字列として扱い、別処理へ渡すとき。
- 注意点は？
- 実務で乱用しない: 関数の中身を見るために本番で使うことはほぼありません。主に学習・デバッグ用の道具です。
- セキュリティ: ユーザーに関数の内容を表示する場合、内部ロジックを晒すことになるので用途は慎重に。
- 可読性: 長い関数をそのまま文字にすると読みづらいので、必要な部分だけ抜き出す・整形する工夫が必要です。
すぐ使える小ワーク
- ワーク 1: 自分の関数を 3 種類で書いて toString で比較
- 宣言, 式, アロー の3パターンで同じ処理を作る。
console.log(fn.toString())をそれぞれ出して違いを確認する。
- ワーク 2: コメントを入れて出力を観察
function demo() {
// ここはコメント
return "ok";
}
console.log(demo.toString());
観察: コメントや改行がどう出るかをチェック。
- ワーク 3: 失敗例から学ぶ
const obj = {
run() { return 42; }
};
console.log(obj.run.toString());
学び: メソッドでも toString() は効く。オブジェクトの中の関数も「関数オブジェクト」だからです。
一言まとめ
- 結論:
toString()は「関数のソースをそのまま文字列にする」機能。学ぶとき・調べるときに強い味方です。 - 次の一歩: まずは自分の関数を 3 パターンで書いて、出力を見比べてみましょう。自分のコードへの理解が一段深まります。