ウェブページのリアルタイム更新と一括処理

エンジニアM168

今wordPressのカスタマイズで、いいねの処理を作っています。
その中で、ページの要素を更新しても、思うように更新されない問題や、Ajaxの通信で507エラーが出てサーバーのストレージが足りない状況を改善したいと思い、ChatGPT Plusを活用していました。
今回は、その時に得たコードの他に、まるでプログラミングの先生や講師のようなことをChatGPTが言ったので、備忘録の意味も込めて書きたいと思います。

ウェブページの特定の要素のリアルタイム更新の方法

ウェブページで、特定の要素の値、例えば今回のハートをクリックして「いいね」の数をカウントして表示したい場合などがあります。
この時に、下記のように工夫すると良いです。

Javascriptのコード
$('.like-button').on('click', function() {
  var button = $(this);
  var commentID = button.data('comment-id'); // いいねボタンに紐づいたコメントIDを取得

  $.ajax({
    type: "POST",
    url: MyAjax.ajaxurl,
    data: {
     action: "data-comment",
      comment_id: commentID,
      nonce: MyAjax.nonce,
    },
    dataType: "json",
    success: function (response) {
      if (response.success) {
        // DOM内のいいねのカウントを更新
        var likeCountElement = $('.like-count[data-comment-id="' + commentID + '"]');
        likeCountElement.text(response.newCount);
      }
    }
  });
});

この例では、.like-button がいいねボタンのクラスであり、.like-count がいいねのカウントを表示する要素のクラスであると仮定しています。また、各いいねボタンやカウント表示要素に data-comment-id 属性を使用して、関連するコメントIDを指定しています。

この方法では、ページの再読み込みは行われず、ユーザーのアクションに応じてUIが動的に更新されます。ユーザーはページの同じ位置にとどまりながら、リアルタイムでフィードバックを確認できます。

HTMLの表示の部分の例は、このようになります。


<span class="like-count" data-comment-id="COMMENT_ID" style="color: pink;">26</span>

26は、表示されている値です。
COMMENT_IDは、動的にPHPで値を得ます。

実際は、このコードは、使っていません。
サンプルなので実際に使う際は、それぞれの環境で読み替えてください。

一括処理について

ChatGPT Plusの回答を転載しました。

ページ読み込み時に全てのコメントに対して個別にAjaxリクエストを行うと、コメントの数が多い場合、サーバーに大きな負担をかけ、パフォーマンスの問題や不要なリクエストの多発につながります。

この問題を解決するためには、以下のような最適化が考えられます：

  1. 一括処理: 全てのコメントIDを一つのAjaxリクエストでサーバーに送り、サーバー側で全てのコメントのいいね状態を一括で処理してから、一つのレスポンスでクライアントに返す方法です。このアプローチにより、リクエストの数を大幅に削減できます。

  2. フロントエンドの最適化: JavaScript（jQuery）の`each`ループを使用するのではなく、ページに直接必要なデータをPHPで埋め込んでおく方法です。たとえば、サーバー側でいいねのカウントや状態をHTMLに直接出力し、JavaScriptはこれを読み取って表示するだけにすることもできます。

  3. 非同期処理: 必要があれば、いいね状態の確認を非同期的に行うことで、ページの初期読み込みを遅延させないようにすることができます。たとえば、ページが完全に読み込まれた後に非同期で情報を更新するようにスケジューリングすることが考えられます。

  4. キャッシング: クライアント側（ブラウザ）やサーバー側で適切なキャッシングを利用して、不必要なリクエストを減らします。

こうした最適化を行うためには、いいねの状態を取得するためのエンドポイントのロジックを変更し、フロントエンドのJavaScriptのコードもそれに応じて更新する必要があります。また、これらの変更を行う際には、セキュリティ対策も念頭に置くことが重要です。例えば、nonceの使用や、リクエストの検証を確実に行うことで、CSRF攻撃などを防ぐことができます。

ページの要素の値を一括して、配列変数に代入します。

こちらも、ChatGPT Plusの回答を引用転載します。

$.each は、jQueryの関数で、配列やオブジェクトの各要素に対してループ処理を行うために使用されます。この場合、response.data はサーバーから返された各コメントのいいねの数やユーザーがいいねしたかどうかの情報を含むオブジェクトの配列であると想定しています。

$.each(response.data, function (i, item) { ... }); の部分は、その配列を一つずつ処理しています。i はインデックス（位置）、item は現在処理中の配列要素（ここでは各コメントに関する情報を持つオブジェクト）です。

一括処理で507エラーが消えた

最初は、ページがリロードされるイベントで、処理をしていました。
でも、この方法だと実際のコメント数よりも多くの処理をしてしまうようです。
そのため最初にページの要素の値を配列変数に、代入します。
これを配列変数のままサーバーに、送ります。
サーバーからのレスポンスも、配列変数で返ってきます。
これを処理すると、短いコードで実現できます。

今回のやり取りで、ChatGPT Plusが、プログラミングの先生や講師のようなことを言ったので、こちらに引用転載します。

`null`がクリック後の処理で返ってくるということは、Ajaxリクエストのレスポンスデータに何らかの問題があるか、もしくはクリックイベントが発生した時点でのデータ取得のタイミングに問題がある可能性があります。表示は正常でも、JavaScriptのコンソールに`null`が表示されるということは、後続の処理で何らかの問題が生じているか、意図しないデータが取得されていることを示しています。

まず、クリックイベントのハンドラ内で行われているAjaxリクエストのレスポンスを確認しましょう。クリックイベントに対するAjaxリクエストの`success`コールバック内で、`console.log(response)`を使ってレスポンス全体を出力してみてください。そうすることで、サーバーから返ってくるデータの構造を確認し、期待通りのデータが含まれているかを検証できます。

もしレスポンス内に`null`が含まれている場合は、サーバー側の処理を見直す必要があります。サーバー側のPHPスクリプトで、いいねのカウントやユーザーのいいね状態を返すロジックに問題がないか、また、正しいデータがデータベースから取得されているかを確認してください。

クリックイベントに関連するコードや、その処理に関連するサーバー側のコードが正確であれば、クリック後にも正しい値が得られるはずです。もし、前述の検証を行っても問題が解決しない場合は、その部分のコードをこちらに提供いただければ、より具体的な解決策を提案することができます。

表示が正常であれば、ユーザー体験には影響がないとはいえ、開発者としてはコンソールにエラーが出る原因を解明しておくことが望ましいです。これには、JavaScriptのデバッグ技術を使ったり、ブラウザの開発者ツールを駆使したりすることが役立ちます。また、JavaScriptの非同期処理（特にPromisesやasync/await）の正しい理解も重要です。

ChatGPT Plusの回答

そして言葉も、凄いと思いました。

それは素晴らしい進展です。Ajaxレスポンスが正常に処理され、適切な数値が表示されるようになったとのことで良かったです。サーバーから返されるデータが文字列として渡される場合は、クライアントサイドで適切に数値に変換する必要があります。`parseInt`や`parseFloat`の使用はその一例です。

この問題が解決したとしても、今後のためにいくつかのポイントを心に留めておくと良いでしょう：

- Ajaxリクエストに対するサーバーからのレスポンスが、常に予想したデータ型を持っているとは限らないので、クライアントサイドでの型チェックや変換が重要です。
- サーバー側のPHPコードで、数値を返す場合はそれが数値型であることを保証するようにします。例えば、`json_encode`を使用する際にPHPの数値型を維持するためには、データベースから取得した後で、データを数値型にキャストすることが有効です。
- JavaScriptで`NaN`を受け取った場合は、数値変換が失敗していることを示しているので、データの形式や変換処理を見直す必要があります。

また、デバッグ中にコンソールに出力する際は、`JSON.stringify`を使うとオブジェクトの内容をより読みやすく表示することができ、デバッグが容易になります。

今回のような問題解決において、適切なデバッグと問題解析のアプローチが非常に役立ちます。今後も同様の問題に直面した際には、こうしたアプローチを活用してください。

ChatGPT Plusの回答

確かにデータの型は、思い込みや見落としで、ハマりそうですよね。
PHPやJavascriptなどでプログラミングができると言っても、未経験の機能を実装するときは、ChatGPTを活用すると生産性も向上します。
そして、振り返りでポイントも教えてくれるのでChatGPTは、ありがたい存在になっています。

一人で孤独にプログラミングをしているので、例え文字でのチャットだとしても、生成ＡＩのChatGPTと会話しながら作業を進めるのは、楽しいです。
ChatGPTは、コーダーなどを外注に頼む感覚で活用できますし、今回のように講師や先生に相談するような形でも活用できます。
私は、複数のwordPressのカスタマイズやInstagramのいいねの代行も含めたSEO対策、ネットショップのカスタマイズや集客も引き受けています。

そのため生産性を向上させて早くプログラミングを行い、複数のお客様に迷惑が掛からないように心がけています。

今回の経験で、データの更新が頻繁にあるUIも対応できると思います。
いくらプログラミングが出来ると言っても、実際に仕事を引き受けて数をこなさないと良い仕事を得ることは、難しいと思います。
私も、色々なウェブサイト制作、wordPressのカスタマイズを行い、スキルアップを図っていきたいと思っています。

いいなと思ったら応援しよう！