yamakawacho
@yamakawacho

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

jacascriptかphpか

解決したいこと

趣味でwebサイトを作っています。今取り組んでいるテーマは、MysqlのテーブルからPHPでデータを取ってリストにするというものです。構成としては、

[index.php] ⇔ [Mysql]です。

index.phpの中は、sqlを投げてデータを取得した後、ループでHTMLのタグを編集出力しています。
また、個別の行の中に、ボタンやリンクもあり、ごちゃごちゃしています。

一応それでほぼ完成はしたのですが、無限スクロールを実装したくなり、その対応を行っています。
そうすると、javascriptで画面の監視を行い、末尾に達したら追加データを取って画面にデータを追加してという事をしないといけないので、SQL部分をquery.phpという別ファイルに切りだして、index.phpの方は、javascriptから、query.phpを呼んで、jsonでデータを受け取るようにしました。

[index.php] ⇔ [query.php] ⇔ [Mysql]

そこで困ってしまったのが、今までPHPでechoでHTMLタグを出力していた部分を全部javascriptに変更しなければならなくなったという事です。リストがごちゃごちゃしているので、これが結構手間です。
PHPは比較的楽にできますが、javascriptだとコーディング量も増えるし、疑問を持ちました。

質問

こういうケースでは、javascriptでやるべきものなのでしょうか?
PHPによる編集部分を活かすことは出来ないのか? 或いは、活かそうなどと考えずに、javascriptで書くべきなのか。

chatGPTにも訊いてみましたが、割とjavascript推奨な感じです。

また、一般論として、DBからデータを取って一覧を作るという様な場合の方法論についても質問してみたら、
ページの編集部分はjavascriptが良くて、フロント側にphpを持ち込むのは別に間違いではないけど今時どうか・・・みたいなトーンでした。

という事で、
【Q1】今回のPHPを無限スクロール化する上での方法論についてご意見を頂きたいのと、
【Q2】DBからデータを取って一覧を作るという様な場合の一般的な対応方法として、フロント側にphpを持ち込むとというのは流行りではないのかという点についてご意見いただければありがたいです。

1

4Answer

【Q1】今回のPHPを無限スクロール化する上での方法論についてご意見を頂きたい

基本的に、画面を表示してからバックエンドの言語であるPHPで操作することは難しいです。現状のPHPで動かしたいのであれば、PHPでJavaScriptのコードを埋め込む必要あるかと思います。(コードがもっとごちゃごちゃになるのでおすすめはしません)

【Q2】DBからデータを取って一覧を作るという様な場合の一般的な対応方法として、フロント側にphpを持ち込むとというのは流行りではないのかという点についてご意見いただければありがたいです。

フロントのJavaScript・バックエンドのPHPのように処理を分担させるのが一般的かと思います。

PHPのフレームワークには、BladeやSmartyといったテンプレートエンジンが搭載されているのですが、これらを利用するとPHPから受け取ったデータをHTMLのテンプレートに合わせて表示することができます。(スクロールの判定はJavaScriptで書かなければなりませんが...)

ご期待に添える回答かわかりませんが、参考程度になれば幸いです。

2Like

Comments

  1. @yamakawacho

    Questioner

    ご回答ありがとうございます!

    やはりPHPでは難しそうですね。

    いっそのこと、
    ①バックエンド側で、HTMLのタグまで整形して、それをjavascriptに渡そうか、とか、
    あるいは、②javascriptで、innerHTMLでタグを書こうかなと思ったりもしたのですが、
    前者はカッコ良くないし、後者はリスクがありそうだしと思っておりました。

    観念して地道に書こうと思います。

    あと、一般論の方ですが、
    例えば、index.php の中ので、sqlを投げてデータを取って、
    foreachでループさせながら、echo "

    " . 変数 . "
    ";
    みたいに書くのは、一般的ではないという事なのでしょうか?
  2. 例えば、index.php の中ので、sqlを投げてデータを取って、
    foreachでループさせながら、echo "
    " . 変数 . "
    ";
    みたいに書くのは、一般的ではないという事なのでしょうか?

    テンプレートエンジンのライブラリの裏側では、おそらくそんなことをしていると思うのですが、自分で実装することは殆どないです。

    特に制約がないのであれば、私はこんな感じ↓で実装します。

    1. PHPでDBから取得したデータを返すAPIを作成
    2. フロント側からajaxを使ってAPIの結果を取得
    3. JavaScriptのテンプレートエンジンを使用し画面にレンダリング
  3. @yamakawacho

    Questioner

    なるほど!
    機能を美しく分けるとやはりそういう構成になるのですね。
    たしかに、フロント側がphpでループでタグ編集というのはUIの問題もあるのでしょうけど、大規模開発には向かない気がしてきました。

    ありがとうございました!

【Q1】今回のPHPを無限スクロール化する上での方法論についてご意見を頂きたい

その場合は全部のデータを一括取得になります。
分割して取得しようとするならページネーションが具体的な例になります。ただこれは画面遷移が必要なので無限スクロールのイメージとは異なりそうですね。
これらを避けようとすると、JavaScriptで都度データを取得(非同期通信)が必要になります。

Q2】DBからデータを取って一覧を作るという様な場合の一般的な対応方法として、フロント側にphpを持ち込むとというのは流行りではないのか

確かに技術の流行りは考慮が必要な要素ではありますが、他にも考慮が必要な点はあり、要はバランスです。
例えば一部の人しか使わないような管理画面などは、コストをかけてリッチなUI/UXにする必要がなかったりするので、PHPだけで表示することもあります。

流行りに乗っかることで何を達成したいのかが分からないので、そのあたりを整理されてはいかがでしょうか?


「ごちゃごちゃしている」ということであれば適切な設計がなされていないということも考えられます。
PHP+HTMLの複雑さが課題なのであれば、Twigのようなテンプレートエンジンの利用を検討してはいかがでしょうか?

2Like

Comments

  1. @yamakawacho

    Questioner

    ご回答ありがとうございます。

    javascriptから追加データをphpに要求して、その結果をjavascriptが受け取ってHTMLにするのではなく、javascriptがスクロール判定と要求だけしたら、後はjavascriptは面倒を見ず、PHPの出力がそのまま使われるみたいな事が出来ないかなと、漠然と考えていました。
    でも、画面の書き換えならともかく、追加分を画面の後ろに足すという事はjavascriptを介さないと出来なさそうですね。

    あと、一般論の方ですが、

    要はバランスという事なら、納得です。
    PHPで表現できるUIで構わないのなら、PHPでいいとだろうと思っていたのですが、なんか、chatgptがずいぶんPHPに対して否定的なトーンだったので(私の質問の仕方にも問題があったのかも知れませんが・・)、その辺りを押さえておきたかったのです。

  2. javascriptから追加データをphpに要求して、その結果をjavascriptが受け取ってHTMLにする

    必要なものをサーバーに要求して返ってきた応答をクライアントで処理をする、というのがWeb(HTTP通信)なのでこれが基本です。
    渡すデータを「部分的なHTML」にすることは可能ですが、いずれにしてもJavaScriptの処理は必要になります。

    chatgptがずいぶんPHPに対して否定的なトーン

    単純にUI/UXの要求を色々あげると「JavaScript使いましょう」という回答になるのは、それはそうですね。
    PHPのforeachで十分なのか、ちょっとした動きを付けたいのでJavaScriptライブラリを使うのか、要求が高いのでReactやVueのようなフレームワークを使うのか、これらはケースバイケースです。

  3. @yamakawacho

    Questioner

    ありがとうございます!

    必要なものをサーバーに要求して返ってきた応答をクライアントで処理をする、というのがWeb(HTTP通信)なのでこれが基本です。

    なるほど、なんとなくイメージ出来た様な気がします。

    ブラウザやクライアントデバイスの高機能化によって、論理的に機能を切り分けた設計で実装できるようになっているんだなと理解しました。(ブラウザの高機能化によって、昔のクラサバに戻った的なイメージ・・)

    ありがとうございました!

Comments

  1. @yamakawacho

    Questioner

    さっそくご回答ありがとうございます!

    Reactは触ったことも見たこともないのですが、Javascriptライブラリという事なので、jQueryみたいに、生産性を挙げるものかなとバクっと理解しました。

    やはり方向性としては、バニラだと大変なのであれば、ライブラリをつかうなどして生産性を上げつつ、javascriptで構築する。という事になりますでしょうか。

  2. 稚拙な表現になりますが、jQueryは要素を指定してDOMを操作するイメージですが、
    ReactはJavaScriptの中に直接HTMLを記述することができるので、jQueryよりもっと直接的だと思います。よって、動的にHTMLを生成する場合に向いているかなと。

  3. @yamakawacho

    Questioner

    なるほど!
    少しイメージが進みました。
    やはり面倒に感じる領域にはツールがあるものなんですね。
    ありがとうございました!

こういうケースでは、javascriptでやるべきものなのでしょうか?

その通りだと思います。

javascriptから、query.phpを呼んで、jsonでデータを受け取るようにしました。

ということですから、普通に考えてそこから先は JavaScript の仕事です。

PHP はサーバー側で動くものなので、クライアント側で jsonでデータを受け取った後にまたサーバー側に戻って何かするということはあり得ないと思います。

ということで、

【Q1】今回のPHPを無限スクロール化する上での方法

「javascriptから、query.phpを呼んで、jsonでデータを受け取る」ところまではできているとのことですので、その先は JavaScript でやるのが正解だと思います。

【Q2】DBからデータを取って一覧を作るという様な場合の一般的な対応方法

ホントに質問者さんの言う「無限スクロール」が適切かまで話を戻して考えるのであれば・・・

ユーザーがスクロール操作をして自分が見たいデータを探すという話だと想像していますが、であれば、ユーザーに見せたい全レコードはせいぜい 2, 3 百行ではないのでしょうか? であれば、全部一度に MySQL から取得してブラウザに送信してしまえばよさそうに思えます。スクロールはブラウザの機能に任せれば済むはずで、JavaScript の実装に悩む必要はなくなります。

もしくは検索とページング機能(以下の画像のようなイメージ)を PHP 側に実装して、html のレンダリングは PHP に任せるようにすれば、JavaScript の実装に悩む必要はなくなります。

image.jpg

1Like

Comments

  1. @yamakawacho

    Questioner

    ご回答ありがとうございます!

    javascriptが不慣れというのもありますが、htmlを作る部分がPHPに比べて面倒で、なにかしら逃げ道があったりしないかと思いました。(出来る出来ないなどは分かっていませんが、例えば、javascriptからPHPに追加のデータを要求したら、それをjsonで受け取るのではなく、phpで出力されたhtmlをそのまま使えないかとか・・・。ちょっと妄想でした。)

    やはりjavascriptでやります。

    無限スクロールについてですが、今回は、PHPでページ制御なしで作ってあるものに対して、要件としてはそれで足りるのですが、「勉強のために無限スクロールというものを実装してみたい」というのが動機でした。

    ありがとうございました!

  2. 例えば、javascriptからPHPに追加のデータを要求したら、それをjsonで受け取るのではなく、phpで出力されたhtmlをそのまま使えないかとか・・・。ちょっと妄想でした。

    いえ、妄想ではないと思いますよ。

    「javascriptから、query.phpを呼んで、jsonでデータを受け取る」というところで、json の代わりに PHP で取得した MySQL のデータを html に加工してそれをクライアントで受け取ることができれば、受け取った html ソースをそのまま追加すべき場所に書き込んでやれば済むはずです。

    質問者さんの使っているフレームワークで実現できるかは分かりませんが、実際に fetch API などでサーバーの API に要求を出し、サーバー側のプログラムでデータベースからデータを取得し、それをブラウザに表示できる形に加工した html ソースを、クライアントに返すという実装はあります。

  3. @yamakawacho

    Questioner

    成るほど!
    美しいかどうかは別にして、実現出来たらラクチンなのでちょっと検討してみます。
    ありがとうございます!

Your answer might help someone💌