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個目");

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

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

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

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

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

JavaScriptを学習中の方へ

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

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

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

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

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

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

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する