【基礎】JavaScriptの配列の定義方法【今日の日付を出力】

JavaScriptの配列の定義方法を知りたい
JavaScriptの配列を使用した具体例は？
配列を使って今日の日付を組むプログラムを知りたい

この記事はそんな方へ向けて書いています。

本記事の内容

JavaScriptの配列の定義方法、出力方法
配列を使って「今日の日付」を出力する

本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます（6ヶ月コース）
使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」
ブログ歴：2019年1月にWordPressで開設（月間最高62,000PV、52,000円）

本記事では、職業訓練校で学んだJavaScriptの配列についてまとめました。
この記事を読むことで、JavaScriptの配列の基礎（定義方法、出力方法）がわかります。

記事後半では「今日の日付」をif構文や配列で出力しています。

Contents

【基礎】JavaScriptの配列の定義方法
JavaScriptの配列で、今日の日付を出力
まとめ：JavaScriptの配列を使えるようになろう

【基礎】JavaScriptの配列の定義方法

配列を使うと複数データの代入ができます。

配列について

配列では複数のデータをひとまとめにして管理できます。

たとえるなら、配列は箱に仕切りをつけて複数のデータを入れられるようにしたものです。

いっぽう変数はデータを格納しておく箱です。
変数1つにデータを1つしか代入できません。

変数で管理しようとすると、1つの変数には1つの情報しか入れられないのです。

変数の使い方については「【JavaScriptの入力】変数の使い方、変数の3つの種類を解説」で解説しています。

配列の定義方法

配列は、全体を角カッコ[ ] でくくります。
1つ1つのデータは、半角カンマ（ , ）で区切って入れていきます。

const hairetsu = [ '値1' , '値2' , '値3' , '値4' ];

配列内の個々の値を「要素」といいます。
要素は、数値でも文字列でも何でもかまいません。

文字列と数値を混同しても大丈夫。

配列の中に配列を入れてもOKです。

配列の出力方法

配列の中のデータを取得する方法は、データの順番を [ ] で指定して出力します。

なおデータの順番は、0からスタートします。
以下の変数hairetsuに[1]で出力すると2番目のデータ2が出力されます。

const hairetsu = [ 'データ1' , 'データ2' , 'データ3 ' ];
console.log(hairetsu[1]);
//出力結果：データ2

記述例

index.html

//出力結果：10

【解説】
配列hairetsuを定義して、データを格納。
3番目の数値データ10を、hairetsu[2]で出力。

プログラムの世界は、0からスタートするのですね。

配列の要素を書き換える

配列に格納した要素を、個別に書き換えられます。
書き換える要素を指定し、代入するだけです。

index.html

const hairetsu = ['データ1', 'データ2', 10, 'データ4'];
hairetsu[0] = '値1';
console.log(hairetsu);

//出力結果：（4）["値1", "データ2", 10, "データ4"]

【解説】
変数hairetsuの0番目のデータ1を「値1」に書き換える。
変数hairetsuをコンソールに表示。
インデックスをつけずに出力すると、配列全体が表示されます。

表示された配列横の数字をクリックすると、配列の詳細が確認できます。

JavaScriptの配列で、今日の日付を出力

配列を使って「今日の日付」を出力するプログラムを組みます。

日時を扱うDateオブジェクト【if構文で出力するパターン】

日付を扱うためには「new Date( )を変数に代入する」というのが決まりです。

const today = new Date( ); //正確には代入ではなく、インスタンス化といいます。
console.log(today);

//出力結果：Thr Jul 15 2021 19:35:07 GMT+0900 (日本標準時)

また、年、月、日という情報は、getFullYear( )、getMonth( )、getDate( )のように特別な記述で取得できます。

const year = today.getFullYear( );
const month = today.getMonth( ) + 1;
const date = today.getDate( );
const day = today.getDay( );

console.log(year);
console.log(month);
console.log(date);
console.log(day);

//出力結果（今日が2021年7月15日（木）の場合）
2021
7
15
4

※月は取得する数字が0から始まるので、1を足す必要があります（0月が1月、1が2月を意味します）。
※曜日は数値で出力されます（日：0、月：1、火：2、水：3、木：4、金：5、土：6）

上記で指定した変数（year、month、date、day）を使いつつ、今日の日付（○○年○○月○○日（曜日））を出力します。

let now_date = year + '年' + month + '月' + date + '日' ;

最後に曜日を追記するので、constではなくletを使います（変数可変のため）。
»【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

曜日のgetDay( )の値は0〜6の数値なので、if文で分けます。
なお文字列の結合の応用で「＋＝」を使うと追記できます。

if構文、文字列については下記記事にまとめています。
»【JavaScriptの分岐】if構文の書き方、うるう年の判定方法
 »【JavaScriptの文字列】概要から連結・結合をまとめました

if(day == 0){
　now_date += '（日）';
　}else if(day == 1){
　now_date += '（月）';
　}else if(day == 2){
　now_date += '（火）';
　}else if(day == 3){
　now_date += '（水）';
　}else if(day == 4){
　now_date += '（木）';
　}else if(day == 5){
　now_date += '（金）';
　}else if(day == 6){
　now_date += '（土）';
}

console.log(now_date);

//出力結果：2021年7月15日（木）

よく使う記述

年：getFullYear( )
月：getMonth( )
日：getDate( )
曜日：getDay( )
時間：getHours( )
分：getMinutes( )
秒：getSeconds( )
ミリ秒：getMilliseconds( )

今日の日付を、配列で出力するパターン

配列を使うとif構文を省略できます。
以下の記述例のように、コードを短くできます。

index.html

const week = [ '日' , '月' , '火' , '水' , '木' , '金' , '土' ];
const today = new Date( );
const year = today.getFullYear( );
const month = today.getMonth( ) + 1;
const date = today.getDate( );
const day = today.getDay( );
const now_date = year + '年' + month + '月' + date + '日' + '（' + week[day] + '）';

console.log(now_date);

【解説】
配列weekを定義して、日〜土までのデータを格納。
変数now_dateをつくり、年月日と曜日を結合。
配列の値を取り出すには、インデックス（添え字）という番号を指定します。
week[番号]で、変数dayに曜日の番号が入ります。
day＝3の場合は、配列「水」が出力されます（0番目から始まるため）。

その他の配列の操作

配列を操作するための便利なメソッドです。

配列名．length	配列の要素数を返す
配列名．push()	配列の末尾に要素を追加する
配列名．pop()	配列の最後の要素を削除する
配列名．remove(要素)	配列から値と一致する要素を削除する
配列名．sort()	配列の要素を並べ替える
配列名．shift()	配列の先頭の要素を削除する
配列名．unshift(要素)	配列の先頭に要素を追加する
配列名．splice(1,2)	指定した場所の値をまとめて消す（例：1番目のインデックスから2件削除）
配列名．indexOf	配列の何番目に入ってるか確認
配列名．slice	配列をコピーしておく