2020年 5月 の投稿一覧

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>