JavaScriptでArrayオブジェクトを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptの組み込み関数の1つ【Arrayオブジェクト】を使う方法を解説した記事です。具体的な使い方がわかるように、「slice」など3つのメソッドと1つのプロパティを例に説明します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptの組み込み関数の1つ、JavaScriptでArrayオブジェクトを使う方法について解説します。
また、入門向けのJavaScriptの学習サイトもまとめて紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
- 組み込み関数のArrayオブジェクトとは
- Arrayオブジェクトを実際に生成してみよう
- Arrayオブジェクトのプロパティ・メソッドを呼び出してみよう
- プロパティ1. length（配列の長さを取得する）
- メソッド1. slice()（配列の要素を取り出す）
- メソッド2. reverse()（要素の順番をひっくり返す）
- メソッド3. push()（末尾に新しい要素を追加する）
- Arrayオブジェクトの任意の箇所を削除する
- 多次元配列を作成してみよう
組み込み関数のArrayオブジェクトとは
組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Arrayオブジェクトは、組み込み関数の1つで、配列を扱う際に使います。
参考までに、組み込み関数の代表的なものには次のようなものがあります。
<組み込み関数（代表的なもの）>
はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。
組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。
var オブジェクト名= new object();
Arrayって配列のことですよね？配列もオブジェクトなんでしょうか？
JavaScriptでは配列はオブジェクトなんだよね。
配列は無いんですか？
配列をオブジェクトで包んで、関数を追加したりしてるんだよね。なので純粋な配列ではなくて、配列のような感じになってるんだよね。では、Arrayオブジェクトを生成してみよう！
Arrayオブジェクトを実際に生成してみよう
適当なオブジェクト名（family）をつけ、Arrayオブジェクトを生成してみます。配列に関する様々なプロオパティやメソッドを出力することができます。
var family = new Array();
これでArrayオブジェクトが1つ生成されましたが、まだfamilyの箱の中身はからっぽの状態です。Taro・Jiro・Saburoを加え、console.logで呼び出してみます。
<!DOCTYPE html>
<html lang = “ja”>
<head>
<meta charset = “utf-8″>
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family);
</script>
</body>
</html>
※文字列の場合、「” “」や「’ ‘」で囲うのを忘れずに！
ここまでできたら、console.logを使って配列に関する様々なプロオパティやメソッドを呼び出してみましょう。
Arrayオブジェクトのプロパティ・メソッドを呼び出してみよう
Arrayオブジェクトでの配列の扱い方を、1つのプロパティと3つのメソッドを例に見ていきましょう。
- プロパティ1. length（配列の長さを取得する）
- メソッド1. slice()（配列の要素を取り出す）
- メソッド2. reverse()（要素の順番をひっくり返す）
- メソッド3. push()（末尾に新しい要素を追加する）
プロパティ1. length（配列の長さを取得する）
オブジェクトのプロパティを呼び出すやり方の確認です。
変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。
配列の長さを取得したいときは、lengthを使ってこのように書きます。
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family.length);
</script>
配列amilyのなかにはTaro・Jiro・Saburoの3つの要素が入っているので、「3」が取得されました。
lengthとプロパティについて
配列のlengthプロパティに要素数を代入することで、代入後の要素数が代入前の要素数より小さい場合、要素も削除されます。
今回は、元々、[‘Taro’, ‘Jiro’, ‘Saburo’]だった配列のlengthプロパティに2を代入することで、[‘Taro’, ‘Jiro’, ]にします。
それでは各コードを説明します。
初期値は次のとおりです。
var family = ['Taro', 'Jiro', 'Saburo'];
今回は、インデックス3の配列familyのlengthプロパティを2にします。
family.length = 2;
配列familyの要素が削除され、配列の値2が表示されるコードです。
この時の配列の値は、[‘Taro’, ‘Jiro’]となっています。
この時の配列要素を表示するコードです。
表示結果は0, 1です。
console.log(Object.keys(family));
現在の配列数を表示するコードです。
表示結果は2です。
console.log(family.length);
インデックス1番目の要素を表示しようとするコードです。
しかし、文法が違っているためエラーになります。
エラー内容は Uncaught SyntaxError: missing ) after argument list です。
console.log(family.1);
現在の2番目要素である、インデックス1の値を表示する正しい文法のコードです。
結果として、Jiroが表示されます。
console.log(family[1]);
配列familyのlengthプロパティから1減らした数番目である、インデックス1番目の要素を表示するコードです。
結果として、Jiroが表示されます。
console.log(family[family.length - 1]);
現在の3番目要素でインデックス2の値を表示するコードです。
しかし、lengthプロパティを2にしたことで削除されているため表示されません。
表示結果は、 undefined です。
console.log(family[2]);
lengthとプロパティのプログラム全体
var family = ['Taro', 'Jiro', 'Saburo']; console.log(Object.keys(family)); console.log(family.length); console.log(family.1); console.log(family[1]); console.log(family[family.length - 1]); console.log(family[2]);
実行結果
0,1 2 Uncaught SyntaxError: missing ) after argument list Jiro Jiro undefined
メソッド1. slice()（配列の指定した要素を取り出す）
slice()メソッドでは、インデックスを指定することで、指定した要素を取得することができます。
（※インデックスとは、配列の要素にふられた背番号のようなもので、0からはじまり0,1,2……と増えていきます）
要素を取り出すときは、( )内で、開始位置と終了位置のインデックス両方を指定する必要があります。指定位置を指定しない場合は、開始位置から最後の要素までが取り出されます。
では、TaroとJirtoを取り出してみましょう。
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family.slice(0,2));
</script>
slice(0,2)と指定すると、０番目のTaroから2番目のひとつ前まで、つまり1番目のJiroまでが取得されます。(0,1)ではないので注意です！
ちなみに、( )のなかを次のように指定すると……
0 → Taro・Jiro・Saburo
0,1 → Taro
1 → Jiro・Saburo
2 → Saburo
少々ややこしいかもしれませんが、ご自分でいろいろと試してみてくださいね。
メソッド2. reverse()（配列内の順番をひっくり返す）
reserve() を使うと、配列内の要素の順番をひっくり返すことができます。
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family.reverse());
</script>
Taro・Jiro・Saburo が逆になり、Saburo・iro・Taro となりました。
メソッド3. push()（新しい要素を追加し、要素数を取得する）
push()では、配列末尾に新しい要素を追加し、追加後の要素数を取得することができます。
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family.push("Haruka", "Natsumi"));
</script>
HarukaとNatsumiが追加され、要素数が「3」から「5」に増えました。
念のため、console.logで全体を呼び出してみると……
<script>
var family= new Array("Taro", "Jiro", "Saburo");
console.log(family.push("Haruka", "Natsumi"));
console.log(family);
</script>
Taro・Jiro・Saburo・Haruka・Natsumiの5人が取得されましたね。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
その他のArrayオブジェクトサンプル
配列の末尾の要素を削除する
プログラム
var family= new Array("Taro", "Jiro", "Saburo");
// 配列の末尾の要素 "Saburo" を削除
var last = family.pop();
console.log(family);
実行結果
["Taro", "Jiro"];
配列の先頭に要素を追加する
プログラム
var family= new Array("Taro", "Jiro", "Saburo");
// 配列の先頭にZero追加
var newLength = family.unshift("Zero");
console.log(family);
実行結果
["Zero","Taro","Jiro", "Saburo"];
要素のインデックスを取得する
プログラム
var family= new Array("Taro", "Jiro", "Saburo");
//要素のインデックスを取得
var ban = family.indexOf("Saburo");
console.log(ban);
実行結果
2
インデックス位置を指定して要素を削除する
プログラム
var family= new Array("Taro", "Jiro", "Saburo");
//インデックス位置を指定して1番目の要素のTaroを削除する
var removedFamily = family.splice(pos, 1);
console.log(family);
実行結果
["Jiro", "Saburo"];
配列をコピーする
プログラム
var family= new Array("Taro", "Jiro", "Saburo");
//配列をコピーする
var familyCopied = family;
console.log(familyCopied);
実行結果
["Taro", "Jiro", "Saburo"];
空の配列を定義する方法
空の配列とは、何も入っていない空っぽの配列を定義する事です。
最初に、空っぽの配列を定義する習慣を付けておくことで、不要なデータが混じらない配列操作につながります。
//空の配列を定義しています。
var family = new Array();
1番目の配列である、要素数0の配列にTaroを代入します。
msgArray[0] = "Taro";
100番目の配列である、要素数99の配列に、100roを代入します。
msgArray[99] = "100ro";
//配列の要素数が100存在する場合にconsole.logを実行
if (family.length === 100) {
console.log("配列の length は 100 です。");
}
Arrayオブジェクトの任意の箇所を削除する
配列の任意の箇所を削除する場合は、delete文を使用します。
var array =["A", "B","C","D","E","F"] //1番目の要素を削除 delete array[1]; //5番目の要素を削除 delete array[5];
多次元配列を作成してみよう
多次元配列とは、2つ以上の種類の要素を組み合わせて配列を作るものです。
JavaScriptでは、多次元配列用のメソッドは用意されていませんが、配列の中に配列を入れることで扱うことが可能です。
上記で説明してきた配列は以下のようなものです。
一方で多次元配列は、次のようなものです。
実際に配列の中にいくつか配列があるというプログラムを書いてみましょう。
var array = [ [1,2,3], [4,5,6], [7,8,9] ]; var array1 = array[2];
array1という変数の中には、配列arrayの中にある2の要素に入っている値[7,8,9]という配列が代入されることになります。
多次元配列は、慣れるまでに多少時間がかかるかもしれませんが、使えるようになれば非常に便利でしょう。
JavaScriptの組み込み関数の記事は他に、JavaScriptでMathオブジェクトを使う方法もあるので合わせてご覧ください。
配列オブジェクトを生成すると、最初から組み込まれている、配列に関連した関数も使うことが出来るんですね。
そうそう。そういうのを裏側でやってくれていたりするんだよね。
スクリプト言語って裏側で色々動作してるんですね。後、多次元配列というのもあるんですね！
多次元配列はJavaScriptによるミニゲームのマップ何かにも使われるんだよ！書き方を工夫しておかないとわかりづらくなるから注意が必要なんだ。
JavaScriptの組み込み関数の1つ、JavaScriptでArrayオブジェクトを使う方法については以上です。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
