PHPでレンダリングするよりも、Javascriptでレンダリングしたほうが、運用効率がいい事が多いので、
最近では、オレオレフレームワークの活用が止まらなくなってきました。
ReactやNextのJSフレームワークもいいんですが、phpサーバーの方がまだまだスタンダードなので、
PHP+Javascriptという構成で独自フレームワークを作っておくと、ホームページ制作の依頼を受けた時に、
どのサーバーでも適応できるというのが、個人的な経験値です。
そんな中、PHPでデータベースから取得したデータを扱うことが多くなってきたので、
どんなデータ捌きをしているのか、備忘録も含めて、データ調整方法について、ブログに残しておきたいと思います。
データベースからの取得は、Array + Object
データベースは、テーブルにカラム情報とそのvalue値で構成されていて、
レコード単位でデータを保持していることから、連想配列(object)が配列(array)形式でデータを返してくれます。
| id |
name |
class |
| 1 |
山田 |
りんご組 |
| 2 |
鈴木 |
オレンジ組 |
| 3 |
田中 |
ぶどう組 |
こんなテーブルデータの場合は、次のようなデータになります。
[
{
"id" : 1,
"name" : "山田",
"class" : "りんご組"
},
{
"id" : 2,
"name" : "鈴木",
"class" : "オレンジ組"
},
{
"id" : 3,
"name" : "田中",
"class" : "ぶどう組"
}
]
こういうデータに慣れている人は、上記のJSONデータを見ただけで内容を把握できてしまいますが、
初心者の人は、なかなかこれを理解するのが難しいという話も聞きました。
見た目でわかりやすく書くと次の様になります。
var datas = [
{ "id" : 1, "name" : "山田", "class" : "りんご組" },
{ "id" : 2, "name" : "鈴木", "class" : "オレンジ組" },
{ "id" : 3, "name" : "田中", "class" : "ぶどう組" }
]
{}のオブジェクトデータが、[]の配列データでくくられているのがわかりますよね。
特定部分データ一覧の取得
取得したデータから、名前一覧を配列で取得したければ、次のように書きます。
const names = datas.map(e => e.name)
これで、次のデータが取得できます。
['山田', '鈴木', '田中']
クラス一覧の取得がしたければ、
const names = datas.map(e => e.class)
これで、次のデータが取得できます。
['りんご組', 'オレンジ組', 'ぶどう組']
データベースでデータの中身は整っているので、取り出しも楽にできますね。
map()は、配列の内容を書き換えるマッピングをする機能なので便利に使いこなせると、かなり武器になります。
2つのデータのマージ
次の様な2種類のデータを取得して、それをマージしたい場合があります。
var data1 = [
{ "key" : "a" , "value" : "1"},
{ "key" : "b" , "value" : "1"},
{ "key" : "c" , "value" : "1"}
]
var data2 = [
{ "key" : "b" , "value" : "2"},
{ "key" : "c" , "value" : "2"},
{ "key" : "d" , "value" : "2"}
]
まず、この形式のデータは、key=valueの連想配列にした方が扱いやすいので、次の様にコンバートします。
var obj1 = new Map(data1.map(e => [e.key , e.value]))
var obj2 = new Map(data2.map(e => [e.key , e.value]))
bとcが被っていますが、bのデータを優先にして、この2つのデータをマージする場合は、次の様に書くだけです。
Object.fromEntries(new Map([...obj1, ...obj2]))
実行結果
{a: '1', b: '2', c: '2', d: '2'}
Mapは配列ですが、Object.fromEntries()で、配列を連想配列に変換できます。
さらに、...obj1という書き方は、[a:1,b:1]の形式で、[]を外した状態にできるので、配列を繋げて1つの配列内に配置することができる書き方です。
ちなみに、連想配列にも使えるし、PHPでもほぼ同じ書き方ができるので、この書き方覚えておくと便利ですよね〜。
あとがき
仕事で、毎回こんな内容でデータ調整しながらデータをコントロールしていると、プログラミング言語の便利関数が非常にありがたいです。
Javascriptでは、map(), find(), filter, Array.from(), Object.fromEntries()...などなど
これらを使いこなせる様になると、データベースから取得したデータを自由自在に操ることができる様になり、仕事効率も、爆速にアップすること間違いなしです。
あと、個人的には仕事で書いたコードを、ブログなどに残しておいて再利用するようになると、
そのコードがどんどんリファクタリングされていき、かなり秀逸なコードに育っていく感覚もなんとも言えない達成感が生まれるんですよね。
いや〜改めて、プログラミングオタクだな〜と自分で思った瞬間でした。
0 件のコメント:
コメントを投稿