Web Design

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

2021年7月15日

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

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

 本記事の内容

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

 本記事の信頼性

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

本記事では、職業訓練校で学んだJavaScriptの配列についてまとめました。

この記事を読むことで、JavaScriptの配列の基礎(定義方法、出力方法)がわかります。

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

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

JavaScript配列

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

配列について

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

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

いっぽう、変数はデータを格納しておく箱のようなもの。
変数一つに対して、データを一つしか代入できません。

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

変数の使い方については、下記記事で詳しく解説しています。
» 参考:【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

配列の定義方法

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

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

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

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

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

配列の出力方法

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

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

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

記述例は、以下のとおり。

index.html

<script>
 const hairetsu = [ 'データ1' ,  'データ2' , 10 , ' データ4 ' ];
 console.log(hairetsu[2]);
</script>

//出力結果: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の配列で、今日の日付を出力

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配列をコピーしておく

まとめ:JavaScriptの配列をうまく使えるようになろう

JavaScript配列

「配列がうまく使える人がプログラムがうまい人」と職業訓練校の先生がおっしゃっていたのが心に残っています。

プログラミングはルールがシンプル。
シンプルゆえに応用の仕方がたくさんある。

熟練のプログラマーは驚くほど、シンプルなコードを書くと聞いたことがあります。

まずは基礎の徹底から。
基礎なくしては必ず行き詰まります。

こーいち
砂上の楼閣にならないよう、基礎を深く理解していきましょう。

こーいちより

P.S. JavaScriptの配列をうまく使えるように基礎理解を徹底しよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.