質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • PHP

    19159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    15249questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    6644questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    6307questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 603

lenlen

score 34

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+5

JS側の意見

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

PHP側の意見

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/29 16:00

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

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

    キャンセル

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    セレクトボックスの選択内容を、確認画面に表示させたい。

    フォーム画面の入力内容確認画面を作っています。 セレクトボックスの選択内容を、確認画面に表示させたいです。 今は、フォームの入力内容を以下のようにjQeuryで取得し、表示

  • 解決済

    PHPのreturn(配列)の値をJavaScriptで取得したい。

    $a = "バナナ"; $b = "リンゴ"; return array($b,$a); success: function(ima

  • 解決済

    PHPで画面遷移が遅い

    PHP+JAVASCRIPTでプログラムを書いていますが 画面の遷移が遅くて困っています。 テキストボックスに入力した値を、JAVASCRIPTで拾い JAVASCRIPTから

  • 解決済

    お買い物カートに一括で商品を追加したい。

    formより商品コードとその個数を取得し、cart.phpへとまとめてpostしたいのですが、 現段階でカートへ商品が追加されません。 何が原因でこうなってるのかもわからず困ってお

  • 解決済

    pdfのデータを自動的に取得する

    お世話になります。 エクセルをベースにしたような規則的なpdfファイルがあるのですが、 うまくデータを自動的に取得する方法はあるかアドバイスをいただきたく存じます。 全銀協ti

  • 解決済

    複雑なチェックボックスの条件分岐

    目的 チェックボックスの切替をしたいのですが、複数の条件がぶつかってしまい、どうしてもうまくいきません。 次のHTMLで、「チェックが入った色を持つ果物を表示したい。」というの

  • 解決済

    JavaScriptで入力用サブウィンドウ作成

     前提・実現したいこと 「visual basic」などでのプログラミングは慣れているのですが、 「JavaScript」の初心者です。 大変恐縮ですが、JavaScriptで

  • 解決済

    別のHTMLの読み込むCSSを動的に書き換える方法

    すみません。 JSかなにかで、formで取得した情報通りに(緑のアイコンを押したらすべてのページが緑色に) 別のHTMLが読み込んでいるcssを書き変えることは可能でしょうか。

同じタグがついた質問を見る

  • PHP

    19159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    15249questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    6644questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    6307questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。