JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが解説【初心者向け】

JavaScript で複雑な処理を書くようになると、関数の引数を利用することが増えます。

その引数を扱う上でとても便利な方法として「arguments オブジェクト」というものがあります。

今回は「arguments オブジェクト」の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• argumentsオブジェクトとは
• argumentsオブジェクトの使い方
• argumentsオブジェクトの使用上の注意点
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

argumentsオブジェクトとは

arguments オブジェクトはその関数に与えられた引数の情報（値、引数の数など）を持つ特別なオブジェクトです。

アロー関数を除くすべての関数内で利用可能な特別なローカル変数となっていて、特に自分で定義しなくても利用可能です。

argumentsオブジェクトの使い方

argumentsオブジェクトの使い方として、３つのプロパティをご紹介します。

• lengthプロパティ
• calleeプロパティ
• Symbolプロパティ

それぞれのプロパティの概要について以下で解説します。

lengthプロパティ

引数の個数を示すプロパティです。

例えば以下コードを実行すると引数を3つであること、それぞれの引数の内容が確認できますは

（配列と同じように添え字（インデックス）を利用して参照することができます）

function displayArguments() {
    console.log(`渡された引数の数は ${arguments.length} 個です`);
    console.log(`1個目の引数は ${arguments[0]} です`);
    console.log(`2個目の引数は ${arguments[1]} です`);
    console.log(`3個目の引数は ${arguments[2]} です`);
}

displayArguments("1個目", "2個目", "3個目");

呼び出し結果は以下のようになります。

渡された引数の数は 3 個です
1個目の引数は 1個目 です
2個目の引数は 2個目 です
3個目の引数は 3個目 です

calleeプロパティ

arguments.callee プロパティは現在実行中の関数を示します。

主に再帰処理に用いることが多いです。

再帰処理は少し複雑な処理なので、こちらの記事を読んでみると理解が深まると思います。

実際に arguments.callee プロパティを利用したコードは以下になります。

let currentValue = 0;
const functionObject = function() {
    console.log(`今の値は ${currentValue++} です。`);
    if (currentValue < 10) {
        arguments.callee();
    }
};
 
functionObject();

実行結果は以下のようになります。

今の値は 0 です。
今の値は 1 です。
今の値は 2 です。
今の値は 3 です。
今の値は 4 です。
今の値は 5 です。
今の値は 6 です。
今の値は 7 です。
今の値は 8 です。
今の値は 9 です。

Symbolプロパティ

引数を列挙できるイテレータを作成するメソッドです。

次のように for-of で使用します。

引数の数が可変である場合はイテレーターを利用すると柔軟にプログラムを組むことができます。

function displayArguments() {
    for (let argument of arguments[Symbol.iterator]() ) {
        console.log(argument);
    }    
}

displayArguments("1個目", "2個目", "3個目");

実行結果は以下のようになります。

1個目
2個目
3個目

argumentsオブジェクトを使用してみよう

では実際に arguments オブジェクトを利用したコードを書いてみましょう。

引数に名前と年齢を与えると、それらをコンソールに出力してくれるプログラムです。

引数は2個と決まっているので、3つ以上指定された場合はエラーになるようにしてあります。

function registerProfile() {
    if (arguments.length > 2) {
        throw new Error("2つ以上の引数は指定できません。")
    }
    console.log(`私の名前は ${arguments[0]} です。`);
    console.log(`私の年齢は ${arguments[1]} です。`);
}

try {
    registerProfile("きらめき太郎", "22");
} catch (error) {
    console.error(error);
}

上記の場合は以下のような結果になります。

私の名前は きらめき太郎 です。
私の年齢は 22 です。

引数をわざと増やして

registerProfile("きらめき太郎", "22", "東京都");

とするとエラーになり、以下のような結果になります。

Error: 2つ以上の引数は指定できません。

[PR] コーディングで副業する方法とは

argumentsオブジェクトの使用上の注意点

非常に便利な arguments オブジェクトなのですが、実はいくつか利用する際に注意点があります。

アロー関数では使用できない

ES6から導入されたアロー関数では利用することができません。

例えば、以下のようなコードではエラーになってしまいます。

const displayArguments = () => {
    console.log(`渡された引数の数は ${arguments.length} 個です`);
    console.log(`1個目の引数は ${arguments[0]} です`);
    console.log(`2個目の引数は ${arguments[1]} です`);
    console.log(`3個目の引数は ${arguments[2]} です`);
}

displayArguments("1個目", "2個目", "3個目");

上記を実際に実行すると以下のようなエラーが出ます。

Uncaught ReferenceError: arguments is not defined

厳密には配列ではないので、配列と同じことはできない

arguments オブジェクトは配列のように添え字（インデックス）でアクセスできますが、配列と完全に同じものではありません。

例えば配列であれば forEach が利用できますが、実際に利用しようとするとエラーになってしまいます。

function displayArguments() {
    arguments.forEach(argument => {
        console.log(argument);
    }); 
}

displayArguments("1個目", "2個目", "3個目");

Uncaught TypeError: arguments.forEach is not a function

ただし、配列に変換することはできるので、以下のようにするとエラーは発生しなくなります。

function displayArguments() {
    const argumentsArray = [...arguments]; // 配列（Array）に変換
    argumentsArray.forEach(argument => {
        console.log(argument);
    }); 
}

displayArguments("1個目", "2個目", "3個目");

まとめ

本記事では、Javascriptにおけるargumentsオブジェクトについて解説しました。

• argumentsオブジェクトとは
• argumentsオブジェクトの使い方
• argumentsオブジェクトの使用例
• argumentsオブジェクトの使用上の注意点

argumentsオブジェクトを理解することで、効率的な関数内データの扱い方を実現できます。

ぜひ使いこなせるように覚えておきましょう。

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！