jsonデータからの絞込検索システムはPHP? JS?

Question

jsonデータを使って絞込検索システムを構築しようと考えています。
そこで、Javascriptでやったほうがいいのか、PHPでやったほうがいいのか迷っています。。

var items = [
    {
        "id": 1,
        "name": "りんご",
        "color": "赤",
        "酸味": "0",
    },
    {
        "id": 2,
        "name": "みかん",
        "color": "黄色",
        "酸味": "1",
    }
]

まず、このようなデータがあります。

フロントの検索画面ではチェックボックスを使って、検索ボタンが押されたら検索結果の画面に移行して結果を表示させるという仕様です。

例えば、酸味□　というチェックボックスにチェックを入れて検索すると、酸味の値が"1"のみかんの情報が現れるというイメージです。

皆様はこのような絞込検索を実装するとした場合、どちらで組みますか？　又、その理由もお伺いできると嬉しいです。

Answer 1

JS側の意見

• クライアント側に処理が来るからサーバの負荷は軽くなる
• JSONはテキストファイルなんだから、数千件落としてきても数十KB程度でしょ？画像の方がよっぽど重い
• JSはそんなに重くない、数千件くらいならArray.prototype.filterでも一瞬
• データ隠蔽したらスクレイピングでDOS並に連打されるぞ、JSON渡して追い返した方がいい

PHP側の意見

• 処理が分離出来るから実装しやすい
• ネイティブJSやjQueryでDOMを修正し始めるとJSのコードがかなり汚れる
• AWS等ではファイルの転送量で課金が変わるからあまりダウンロードさせたくない
• セキュリティ的にデータは最小限に隠蔽した方がいい

---

こんな所でしょうか。
どっちもどっちで、現場とメンバー次第です。

もしJS側でやるなら、ReactやVue.jsを導入した方が楽ですし、
Node.jsを導入して自動的なテストやデプロイの仕組みを用意した方が良いかと思います。

全て用意出来ないならPHPの方が楽になりそうです。

Comments

[miyabi-sun]

PHPの主張がちょっと弱い箇所がありました。
一番伝えておくべきなのは、実装し易い＝簡単＝バグ少ない＝少ない工数で実装出来るです。
この一言は意外と大きい価値があるんです！！

ガチのフロントエンジニアならばNode.jsの方が速い可能性がありますが、
習熟度が同程度ならば大抵PHPの方が速いかと思います。
この辺もこみこみで考えてみてください。

Answer 2

配列のフィルタリング関数はそろっているので
どちらでも問題ないと思いますが、自分がやるならサーバー側です。
理由はユーザーに不要なデータを渡すことはデメリットはあってもメリットがないので。

実際運用する際にはデータ自体はRDBに持たせてSQLで絞り込むことが多いでしょう
よりサーバー側での処理が有利です。

Answer 3

検索画面に遷移するならサーバー側一択(PHP)でしょう。

その画面のままであれば、
絞り込みに必要な条件も含め全データを読み込んでも問題ないならJavaScriptとCSSですればいいし(最速)、
それが無理そうならAjax/Fetchで。