getDay()メソッドで取得できる数字を曜日に置き換える

Dateオブジェクトには曜日を取得する.getDay()メソッドがあります。
返り値は下記のとおりとなります。

var today = new Date();
var day = today.getDay();
console.log(day); // 4 (=木曜日)

1週間を日曜日からカウントし、それぞれ0~6の番号が割り当てられます。
しかし番号で取得したところで使いづらいのでこの番号を曜日に置きなおしたいと思います。
数字と曜日が対になったオブジェクトを作成します。
そして先ほど取得した番号に対応する曜日を配列から取り出しておしまいです。

var today = new Date();
var day = today.getDay();
var week = {
	'0':'日曜日','1':'月曜日','2':'火曜日','3':'水曜日','4':'木曜日','5':'金曜日','6':'土曜日',
}
console.log('今日は'+week[day]+'です'); // 今日は木曜日です

JavaScriptで過去の特定の日時から現在までの日数を計算してみる

今日(2020年6月7日)は元号が令和になってから何日目なのか計算してみます。

var today = new Date(); //今日の日付
var startDay = new Date(2019,4,1); // 令和が始まった日、取得したいのは5月1日なので実際の月-1をして4をセット
var countDate = Math.floor((today - startDay)/86400000);
console.log(countDate); // 403

new Dateオブジェクト同士で計算をした時、結果はミリ秒で返ってきます。
1日は86400000ミリ秒なので、86400000でこの値を割ってあげれば求めたい日数が取得できます。
実際に計算してみると403.598…となりますが、これは403日と.593時間ということで404日には到達していないため切り捨てます。
数値を切り捨てるために、Mathオブジェクトのfloorメソッドを使用します。

Dateオブジェクトで日時を取得してみる(JavaScript)

Dateオブジェクトを使うと現在の日時を取得することができます。
過去や未来の日時を取得することもできるので、未来の日時から現在の日時を引いて未来の特定の日付までの時間や日数を取得するといったこともできるようになります。
この機能を使用すればカウントダウンタイマーやアクセス時間によって表示を分けたりすることが可能となります。

現在の時刻を取得する

const now = new Date();
console.log(now); // Sun Jun 07 2020 13:06:15 GMT+0900 (日本標準時)

new Date()にパラメータを付与しなければ現在の時刻を取得することができます。
現在時刻を変数nowに格納して、コンソールに表示しています。
「Sun Jun 07 2020 13:06:15 GMT+0900 (日本標準時)」と現在時刻が取得できました。

過去の日時を取得する

過去の特定の日時を取得するには、new Date()のパラメータに取得したい日付を入れます。
今回は令和の始まった日時を取得します。
令和が始まった日は2019年4月1日なので、new Date(2019,4,1)と指定して変数に格納します。
すると「Wed May 01 2019 00:00:00 GMT+0900 (日本標準時)」という結果が返ってきました。

var startDay = new Date(2019,4,1);
console.log(startDay);
console.log('令和は'+startDay.getFullYear()+'年'+startDay.getMonth()+'月'+startDay.getDate()+'日に始まりました'); //令和は2019年4月1日に始まりました

主なメソッド

先ほどnew Date()で取得した現在の日時を色々な形式で表示してみます。
デフォルトの出力形式だと曜日や月が英語になっていたり(日本標準時)などのいらない表記があったりでわかりづらいので、わかりやすい形式に変換してみます。

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
console.log('今日は'+year+'年'+month+'月'+date+'日です'); //今日は2020年6月7日です

西暦を取得

var today = new Date();
console.log(today.getFullYear()); //2020

月を取得

var today = new Date();
console.log(today.getMonth() + 1); //6

Dateオブジェクトでは「月」の扱いに注意

Dateオブジェクトの「月」は「実際の月-1」となっています。
なので、正しくは上記のようにtoday.getMonth()の値に1を足すと正しい月の値が取得できます。

日を取得

var today = new Date();
console.log(today.getDate()); //7


JavascriptのforEachメソッドでオブジェクトの中身を<li>タグの中に1つずつ出力する方法

前回の記事ではforEachを使って配列の中身を<li>の中に1つずつ出力するやり方を紹介しました。
今回はオブジェクトのキーや値を出力するやり方をまとめます。

エラーになる書き方

配列と同じような下記の書き方だとエラーが出てしまいます。

var obj = {
  a:'エー',
  b:'ビー',
  c:'シー',
}
obj.forEach(function(data,index){
	console.log(index+':'+data);
});
//Uncaught TypeError: obj.forEach is not a function

Object.keys() メソッドを使用することでエラーを回避

javascriptのオブジェクトの構造は上記の例でいうと、a、b、cが「キー」、エー、ビー、シーが「値」となり、それぞれついになって変数objに格納されています。この1セットのことを「プロパティ」と呼びます。

var obj = {
a:'エー',
b:'ビー',
c:'シー',
};
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});
//a エー
//b ビー
//c シー

Object.keyメソッドを使用することで、値を取得することができました。

JavascriptのforEachメソッドで配列の中身を<li>タグの中に1つずつ出力する方法

forEach文を使えば配列の要素を1つずつ取り出せる

配列の中身を1つずつ取得して<li>中に出力したい時forEachメソッドが便利です。
forEachメソッドは配列に含まれるデータひとつひとつに対して同じ処理を行います。

forEachメソッド

配列.forEach(function(data,index){
//実行する処理
});

forEach()は()の中にfunction()が入っているのがポイントです。
このfunctionは処理を実行するときにdata、indexという2つのパラメータを受け取ります。
var array = ["あ", "い", "う", "え", "お"];
array.forEach(function(data,index){
	console.log(index+':'+data);
	//	0:あ
	//	1:い
	//	2:う
	//	3:え
	//	4:お
});
//パラメータを1つだけ指定すると以下のようになる
array.forEach(function(value){
	console.log(value);
	//	あ
	//	い
	//	う
	//	え
	//	お
});

上記の例を見てもわかる通りfor文では、i++といったカウンターを設定する必要がありましたが、forEach文ではそれがいらない分見やすくすっきりとした書き方ができます。

Javascriptの配列のいろいろなメソッドまとめ

javascriptで配列を操作するメソッドをまとめてみます。
1つずつ処理を確認していきます。

配列.push(追加したいデータ)

.push()は対象の配列の末尾に指定したデータを追加することができます。

var array = ['あ','い','う','え','お'];
array.push('か');
console.log(array); // ["あ","い","う","え","お","か"]

配列.pop(削除したいデータ)

.pop()は対象の配列の末尾の1つを削除します。
.push()とは違い()の中には何も記述はしません。
.pop()削除したデータを変数に保存することもできます。

var array = ['あ','い','う','え','お'];
var text = array.pop();
console.log(array); // ["あ", "い", "う", "え"]
console.log('削除したのは「'+text+'」です。'); // 削除したのは「お」です。

配列.unshift(追加したいデータ)

配列の先頭にデータを追加する場合.unshift()を使います。

var array = ['あ','い','う','え','お'];
var text = array.unshift('ん');
console.log(array); // ["ん", "あ", "い", "う", "え", "お"]

配列.shift()

配列の先頭のデータを削除する場合.shift()を使います。

var array = ['あ','い','う','え','お'];
var text = array.shift();
console.log(array); // ["い", "う", "え", "お"]
console.log('削除したのは「'+text+'」です。'); // 削除したのは「あ」です。

配列.concat(配列A,配列B,…)

配列Aと配列Bを結合して新しい配列を作ります。

var array01 = ['あ','い'];
var array02 = ['う','え'];
var array03 = ['お'];
var array = array01.concat(array02,array03);
console.log(array); // ["あ", "い", "う", "え", "お"]

配列.toString()

配列のデータを「,(カンマ)」で区切って文字列にします。

var array = ["あ", "い", "う", "え", "お"];
var array = array.toString();
console.log(array); // あ,い,う,え,お

HTMLリストを独自ルールでソートしてみる(javascript)

つい最近の仕事でページに記載されているリストを50音順に並び変えたいという要望がありました。
例としては以下のような感じです。
data-name属性にそれぞれのローマ字読みの値をセットします。この値を基準に並び替えをしていきます。

<ul class="myList"> 
	<li data-name="kimura">木村</li>
	<li data-name="aizawa">相澤</li>
	<li data-name="tanaka">田中</li>
	<li data-name="ueda">上田</li>
	<li data-name="itou">伊藤</li>
</ul>

<!-- /↓以下のように並べ替えたい -->

<ul class="myList"> 
	<li data-name="aizawa">相澤</li>
	<li data-name="itou">伊藤</li>
	<li data-name="ueda">上田</li>
	<li data-name="kimura">木村</li>
	<li data-name="tanaka">田中</li>
</ul>

それぞれのdata属性の持つ値を配列に格納する

配列を操作するメソッドがJavascriptにはいろいろありますが、「sort」という並び替えを実現するメソッドもあります。
このsortメソッドは配列を操作するメソッドなのでまずは、各<li>タグのdata-name属性の値を配列にセットするというところから始めます。

//data-name属性の値を取得
var kana = $('.myList li').map(function(){
	return $(this).data('name');
});
//配列に保存
var kana = kana.toArray();
console.log(kana); // (5) ["kimura", "aizawa", "tanaka", "ueda", "itou"]

ソートしてみる

kana.sort();
console.log(kana); // (5) ["aizawa", "itou", "kimura", "tanaka", "ueda"]

実現したい並びと違うのがわかると思います。
これはアルファベット順に並んでいますね。これをどうにかしてローマ字の順番に並べるにはどうしたらよいか…?

独自のソートルールを作る

ローマ字を基準に並び替えをするルールは見当たらなかったので、自分でルールを作ってしまいます。
日本語の発音をローマ字に直した値を変数に定義します。
今回母音以外を最初の2文字に限定したのは3文字目まで入れると配列に入れる要素数がとてつもない数になるからです。
2文字目までだけでも重複はないので、正しくソートすることができます。

const orderRule = ['a','i','u','e','o','ka','ca','ga','ki','ky','gi','gy','ku','cu','gu','ke','ge','ko','co','go','sa','za','jy','ja','ju','jo','sh','si','ci','zi','ji','ja','sh','su','zu','se','ce','ze','so','zo','ta','da','ti','ch','ty','ji','di','ts','tu','zu','du','te','de','to','do','na','ni','ny','nu','ne','no','ha','ba','pa','hi','bi','hy','by','py','pi','hu','pu','bu','he','be','pw','ho','bo','po','ma','mi','my','mu','me','mo','ya','yu','yo','ra','ri','ry','ru','re','ro','wa','wo'];

先ほど定義した変数kanaには以下の要素がセットされています。
[“kimura”, “aizawa”, “tanaka”, “ueda”, “itou”]
これを独自のルールに照らし合わせるために、[“ki”, “a”, “ta”, “u”, “i”]という形で保存できるように配列の中身を調整します。

独自ルールに基づいた形に配列を修正

今回作成した独自ルールは母音は1文字、それ以外は最初の2文字の文字要素でできています。
なので、[“ki”, “a”, “ta”, “u”, “i”]という形の配列にしたいと思います。

//data-name属性の最初の1文字(母音の場合)or2文字を取得
var kana = listElm.map(function(){
	var firstLetter = $(this).data('name').slice(0,1);
	if(firstLetter === 'a' || firstLetter === 'i' || firstLetter === 'u' || firstLetter === 'e' || firstLetter === 'o' ) {
		return $(this).data('name').slice(0,1);
	}
	else {
		return $(this).data('name').slice(0,2);
	}
});

//配列に保存
var kana = kana.toArray();
console.log(kana); // (5) ["ki", "a", "ta", "u", "i"]

独自のルールでソートしてみる

kana.sort(function(a, b) {
	if (orderRule.indexOf(a) > orderRule.indexOf(b)) return 1;
	if (orderRule.indexOf(a) < orderRule.indexOf(b)) return -1;
	return 0;
});
console.log(kana); // (5) ["a", "i", "u", "ki", "ta"]

先ほどとは違って、希望通りローマ字の順で並び替えができました。

PHPの連想配列の書き方を覚える

2通りの書き方ができる

PHPで連想配列(通常の配列も)を作成する時、2通りの書き方ができます。
1つはarray()を使うやり方。もう1つは[]で作成する方法です。

パターン1

$array_country = array(
	'日本' => '東京',
	'ロシア' => 'モスクワ',
	'アメリカ' => 'ワシントン'
);

array()を使うやり方ですね。wordpressの構築などで参考サイトを見ているとこの書き方が良く使われている印象です。

パターン2

$array_city = [
	'宮城県' => '仙台市',
	'栃木県' => '宇都宮市',
	'兵庫県' => '神戸市',
];

[](角括弧)を使うやり方です。こちらはPHP5.4以降に追加された構文です。javascriptの配列の指定方法に似ていますね。個人的にはこちらの方が覚えやすいのかなと思います。

連想配列の中身を出力

foreach ($array_country as $key => $value) {
	echo '<li>'.$key.'の首都は'.$value.'です。</li>';
}

foreach ($array_city as $key => $value) {
	echo '<li>'.$key.'の県庁所在地は'.$value.'です。</li>';
}

<li>日本の首都は東京です。</li>
<li>ロシアの首都はモスクワです。</li>
<li>アメリカの首都はワシントンです。</li>
<li>宮城県の県庁所在地は仙台市です。</li>
<li>栃木県の県庁所在地は宇都宮市です。</li>
<li>兵庫県の県庁所在地は神戸市です。</li>

javascriptのfor…ofで配列の中身をすべて表示する

どんな時に使うか

この構文は配列の中身をすべて表示するときに使います。
ES6から使用が可能となったので比較的新しい構文となります。そのためかわかりませんがIE11では使用することができません。
しばらくは使いどころを選ぶかもしれませんね。
特徴はというと、whileやforを使って繰り返しの処理をするときによく出てくるvar i = 0というような変数を定義する必要がありません。
そのためwhileやforを使うよりも簡潔に書くことができます。

for…of

for (let 変数 of 対象の配列 ) {
 //処理内容
}

配列の中身をすべて表示する

var items = ['a','b','c'];
for (let item of items) {
  $('.list01').append('<li>'+item+'</li>');
};
<ul class="list01">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

    for~in~文との違いは???

    for…of文に似ているfor…inという構文と間違いやすいので注意が必要です。

    for…in

    for (let 変数 in オブジェクト ) {
     //処理内容
    }

    オブジェクトの内容を取得する

    var obj = {
      a:'エー',
      b:'ビー',
      c:'シー',
    }
    for (let name in obj) {
      $('.list01').append('<li>'+name+':'+obj[name]+'</li>');
    } 
    <ul class="list01"> 
      <li>a:エー</li> 
      <li>b:ビー</li> 
      <li>c:シー</li> 
    </ul> 
    

    オブジェクトとはPHPなどでいういわゆる連想配列のようなものです。 for…inはそのオブジェクトで使うことが多く、普通の配列の場合はfor…ofを使用することが多いです。
    for…ofであればオブジェクトでも配列でもどちらも対応可能なので、基本的にはfor…ofを使えば問題ないです。