javascriptの配列について知りたい。
arrayみたいなの使うみたいだけど、どうやって書けば良いか分からない。
未経験者にも分かりやすく教えてほしい。
上記のお悩みを解決します。
■本記事の内容
本記事で以下の内容をお伝えします。
・arrayにあるメソッドとプロパティ
・データベースのデータの扱いでよく使用する
■本記事の信頼性
この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。
javascriptの配列（array）について初心者向けに分かりやすく説明していきます。
変数には配列といって情報をリストのように複数の値を保持することができます。
javascript以外のプログラミング言語にもこの配列というものが存在します。
しかも、よく使用するので配列の基本的な使用方法を理解しておくといいでしょう。
javascriptのarrayの基本的な使い方
まず、基本的な配列の考え方を説明してから、javascriptで実際どのように書くかをお伝えします。
そもそも配列とは？
考え方的には以下のような箱があって、その箱に値を入れていくイメージです。
上記の箱には番号が振られおり、0番から開始します。
配列を使用する際は、この振られた番号を指定して扱うことになります。
ただ、注意してほしいのが番号が0番からはじまります。
なので、もし1番目の値を取得したい場合は指定する際に1番を指定してもはじめの箱に入った値を取得することができません。
0番を指定する必要があります。
例えば、干支の情報をもった配列を保持したい場合、以下のような感じです。
もし、ネズミの情報を取りたい場合は0番の箱を指定する、虎の情報を取りたい場合は2番の箱を指定して取得する形です。
1番目と3番目と指定したいところですが、0番から振られるので1つずれるイメージです。
配列の書き方
では、具体的にjavascriptでどのように書くのか説明していきます。
const eto = ['ネズミ','ウシ','トラ','ウサギ','タツ','ヘビ'];
console.log(eto[0]);上記のように[]の中に複数の要素を入れていく形になります。
先ほどお伝えした通り、始めの要素は0番目から始まりますのでネズミを取得する場合は、変数名に[0]といったように0番を指定することになります。
他にも以下のような指定をすることができます。
const eto = [];
eto.push('ネズミ','ウシ','トラ','ウサギ','タツ','ヘビ');
console.log(eto2[0]);1行目は空の配列を定義して、pushのメソッドを使用することで配列要素を後から追加することができます。
pushというのはArray型に用意されているメソッドで配列に対する要素追加を行ってくれます。
他にも配列要素を操作するメソッドがたくさん用意されています。
他にも定義の仕方はたくさんあるのですが、はじめは上記の内容を押さえておけばいいかと思います。
多くの情報を仕入れると頭がパンクしてしまうので、基本的なところをまず理解しましょう。
arrayにあるメソッドとプロパティ
先ほどお伝えした通り、javascriptのarrayでよく使用するメソッドやプロパティをご紹介します。
ただ、メソッドとプロパティはたくさんありすぎるのでその中で使用頻度の高いものをご紹介します。
今回は「length」と「forEach」をご紹介します。
上記は配列を使用する上でほぼ必ずと言っていいほど登場します。
後、上記の２つほど頻度は高くないですが、仕様によっては要素内を検索する「find」や要素内のあるデータのみを抽出する「filter」もよく使用します。
必要に応じて調べてみると良いです。
length
要素数を取得するプロパティです。
const eto = ['ネズミ','ウシ','トラ','ウサギ','タツ','ヘビ'];
console.log(eto.length);上記の場合、6が出力されます。
よくif文で上記配列の要素数でチェックする実装を行うことが多いので覚えておきましょう。
forEach
配列要素の繰り返し処理です。
const eto = ['ネズミ','ウシ','トラ','ウサギ','タツ','ヘビ'];
eto.forEach(data => {
console.log(data);
});
forEachを使用することで上記のetoに入っている値を前から順に実行していきます。
上記を実行すると以下の出力になります。
> "ネズミ"
> "ウシ"
> "トラ"
> "ウサギ"
> "タツ"
> "ヘビ"データベースのデータの扱いでよく使用する
複数データを扱う性質上、データベースの複数取得した場合によく使用されます。
むしろ、データベースの取得部品自体が配列で返すことがほとんどです。
そのため、バックエンドの開発でもよく使用するのはもちろんですが、そのデータを受け取るフロントエンドの開発でもよく使用することになります。
WEBアプリ開発をされる際は配列について、早い段階で理解しておくといいでしょう。
最後に
javascriptの配列ついて説明しました。
今回は必要最低限の情報だけお伝えしましたが、配列のメソッドやプロパティは他にもたくさんあるので、必要に応じて調べてみるといいです。
いきなり全部覚えるのは大変なので、本記事でよく使用するものだけ知っておいて、後は使用したいときにその都度覚えていくほうが良いかと思います。
コメント