...
スプレッド オア レスト（基本的な構文）
意味 要素や引数の展開
...とは？
オブジェクトや配列の要素を展開したり、関数の引数をまとめて取得する構文。
...の具体的な使い方
配列のスプレッド構文
// スプレッド構文で配列を結合
const fruits = ['りんご', 'バナナ'];
const moreFruits = ['オレンジ', ...fruits, 'ぶどう'];
console.log('結合された配列:', moreFruits);👇出力結果
結合された配列: ['オレンジ', 'りんご', 'バナナ', 'ぶどう']スプレッド構文を使用して配列を結合します。これにより、既存の配列を新しい配列に簡単に組み込むことができます。
配列のレスト構文
// レスト構文で配列を分割代入
const moreFruits = ['オレンジ', 'りんご', 'バナナ', 'ぶどう'];
const [first, second, ...rest] = moreFruits;
console.log('最初の要素:', first);
console.log('2番目の要素:', second);
console.log('残りの要素:', rest);👇出力結果
最初の要素: オレンジ
2番目の要素: りんご
残りの要素: ['バナナ', 'ぶどう']レスト構文を使用して配列を分割代入します。これにより、配列の一部の要素を個別の変数に、残りの要素を別の配列として簡潔に取得できます。
オブジェクトのスプレッド構文
// スプレッド構文でオブジェクトをマージ
const person = { name: '山田太郎', age: 30 };
const job = { company: 'テック株式会社', position: '開発者' };
const fullProfile = { ...person, ...job, location: '東京' };
console.log('完全なプロフィール:', fullProfile);👇出力結果
完全なプロフィール: { name: '山田太郎', age: 30, company: 'テック株式会社', position: '開発者', location: '東京' }スプレッド構文を使用してオブジェクトをマージします。これにより、複数のオブジェクトを簡単に1つのオブジェクトに結合できます。
オブジェクトのレスト構文
// レスト構文でオブジェクトを分割代入
const fullProfile = { name: '山田太郎', age: 30, company: 'テック株式会社', position: '開発者', location: '東京' };
const { name, age, ...workInfo } = fullProfile;
console.log('名前:', name);
console.log('年齢:', age);
console.log('仕事情報:', workInfo);👇出力結果
名前: 山田太郎
年齢: 30
仕事情報: { company: 'テック株式会社', position: '開発者', location: '東京' }レスト構文を使用してオブジェクトを分割代入します。これにより、オブジェクトの一部のプロパティを個別の変数に、残りのプロパティを別のオブジェクトとして簡潔に取得できます。
関数呼び出しでのスプレッド構文
// スプレッド構文で関数に引数を渡す
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log('合計:', sum(...numbers));👇出力結果
合計: 6関数呼び出し時にスプレッド構文を使用して引数を渡します。これにより、配列の要素を個別の引数として関数に渡すことができます。
関数定義でのレスト構文
// レスト構文で可変長引数を受け取る
function logArgs(first, ...rest) {
console.log('最初の引数:', first);
console.log('残りの引数:', rest);
}
logArgs('こんにちは', '世界', '!');👇出力結果
最初の引数: こんにちは
残りの引数: ['世界', '!']関数定義時にレスト構文を使用して可変長引数を受け取ります。これにより、任意の数の引数を柔軟に処理できる関数を定義できます。
...に関するよくある質問
...が学べる書籍の紹介
「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptの...やconst、<=、;、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。
よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。
HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。
JavaScriptを学べる「プログラミング単語帳」アプリ
プログラミング単語帳がアプリになりました！JavaScriptはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。
収録単語は2,000単語以上！
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。
いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。
2024年7月アップデート情報：「Laravel」カテゴリーが追加されましました！
2024年8月アップデート情報：「MySQL」「Linux」カテゴリーが追加されましました！
