読者です 読者をやめる 読者になる 読者になる

PHPとJavaScriptの配列や連想配列がごっちゃになるので、整理してみた

PHP(サーバーサイド) ←→ JavaScript(クライアントサイド)がすぐ頭の中でごっちゃになるので、よく使う「配列・連想配列とその走査」について整理してみた。元ネタは、以前のエントリでも紹介した、ゆーすけべーさんのエントリ

配列

PHP
<?php
$foods = array('ラーメン', '寿司', 'カレー', 'スパゲッティ', 'ステーキ');
foreach ($foods as $v) {
  echo 'I like ' . $v . '<br>';
}
JavaScript
var foods =['ラーメン', '寿司', 'カレー', 'スパゲッティ', 'ステーキ'];
var len = foods.length;
for (var i = 0; i < len; i++) {
  document.write('I like' + foods[i] + '<br>');
}

連想配列

PHP
<?php
$ore = array(
  'name' => 'maeharin',
  'tall' => 169 
);
foreach ($ore as $k => $v) {
  echo $k . '' . $v . '<br>';
} 
JavaScript
var ore = {
  name : 'maeharin',
  tall : 169
};
for (var k in ore) {
  document.write(k + 'は' + ore[k] + '<br>'); 
}

JavaScript連想配列は、オブジェクト

配列+連想配列

PHP
<?php
$people = array(
  array(
    'name' => 'Kさん',
    'tall' => 160
  ),
  array(
    'name' => 'Yさん',
    'tall' => 182
  ),
  array(
    'name' => 'Tさん',
    'tall' => 148
  )
);                                                                                                                                             
foreach($people as $v) {
  echo $v['name'] . 'の身長は' . $v['tall'] .'<br>';
}
JavaScript
var people = [
  {
    name : 'Kさん',
    tall : 160
  },
  {
    name : 'Yさん',
    tall : 182
  },
  {
    name : 'Tさん',
    tall : 148
  }
];
var len = people.length;
for (var i = 0; i < len; i++) {
  document.write(people[i].name + 'の身長は' + people[i].tall + '<br>');
}    

配列+連想配列+配列

PHP
<?php
$people = array(
  array(
    'name' => 'Kさん',
    'foods' => array('カレー', 'ラーメン')
  ),
  array(
    'name' => 'Yさん',
    'foods' => array('ハンバーガー', '牛丼', 'チキン')
  ),
  array(
    'name' => 'Tさん',
    'foods' => array('サラダ')
  )
);
foreach ($people as $v) {
 foreach ($v['foods'] as $food) {
  echo $v['name'] . 'likes' . $food . '!!<br>';
 }
}   
JavaScript
var people = [
  {                                                                                                                               
    name : 'Kさん',
    foods : ['カレー', 'ラーメン']
  },
  {
    name : 'Yさん',
    foods : ['ハンバーガー', '牛丼', 'チキン']
  },
  {
    name : 'Tさん',
    foods : ['サラダ']
  }
];
var len = people.length;
for (var i = 0; i < len; i++) {
  var len_f = people[i].foods.length;
  for (var j = 0; j < len_f; j++) {
    document.write(people[i].name + 'likes' + people[i].foods[j] + '!!<br>');
  }
}

PHPは書き方一つだけど、JavaScriptは書き方が何通りもある

書き方のパターンは、javascriptで超有名なid:amachangによる、以下のエントリで網羅されてる。

JavaScript の配列と連想配列の違い

Google JavaScript Style Guide

ちなみに、GoogleJavaScript Style Guideでは、配列リテラル([])とオブジェクトリテラル({})を用いた方がよいと書いてある。

Google JavaScript Style Guide(和訳)


以上。PHPJavaScriptは平行して使うことが多いので、紛らわしいところはこうやって整理していこう。