Q&A
レスポンスごとにサーバからセッションデータを出力するなら、javascript側で sessionStorage に持つ必要はないと思うのですが、何か別に利用する予定なのでしょうか？
JSとPHPについて、セッションの種類と連携方法について教えて頂きたく思います。
どうぞよろしくお願い致します。
###実現したいこと
「後で読む」という記事IDをAjaxで更新しています。
体感速度を上げるため、サーバーデータでなくセッションデータを活用したいです。
つまり「Ajaxの通信結果を待たずUIを変更し、サーバーデータの前にセッションデータを更新して、サーバーデータの更新時間を感じさせない」というアレを実現したいです。
###発生している問題
現状としましては、ユーザーが「後で読む」に登録した記事IDを、'later_ids'として取得しています。
↓「index.php」
PHP
1<?php 2$_SESSION['later_ids'] = array('1','2'); // ユーザーの「後で読む」を取得 3?>
しかし下記JSのように「後で読むに追加するボタン（button#add）」をクリックしても、上の'later_ids'は更新されないという点で躓きました。
↓「submit.js」
JS
1$(document).on('click','button#add', function(){ 2 3 // セッションデータの更新→更新されない 4 const id = $(this).val(); 5 const ss = window.sessionStorage.getItem(['later_ids']).split(","); 6 ss.push(id); 7 window.sessionStorage.setItem('later_ids', ss); 8 9 // サーバーデータの更新 10 $.ajax({ 11 beforeSend: function(xhr) { 12 }, 13 success: function(result){ 14 }, 15 error: function(){ 16 }, 17 }); 18 19});
よく考えたら'later_ids'はサーバー側のデータなのでJSで更新できないのは当たり前かと思いますが、
では、どうすれば、実現したいことは可能になるのでしょうか？通常ではどのようにしていますか？
###試したこと
「PHPの$_SESSION['later_ids']」と、「JSのconst ssで取得した'later_ids'」は別なのか？と思い、それならJS側だけを更新しようと考えました。
下記のようにまずサーバー側のデータをブラウザ側に落と込みまして、これならば、上の「submit.js」でもブラウザ側のデータだけは更新できるようになりました。
↓「index.php」
PHP
1<?php 2$_SESSION['later_ids'] = array('1','2'); // ユーザーの「後で読む」を取得 3?> 4<head> 5 <script> 6 // JSに落とし込む 7 window.sessionStorage.setItem( ['later_ids'], [<?= $_SESSION['later_ids']; ?>] ); 8 </script> 9</head>
しかし疑問がございまして、これではユーザー側にIDが見えてしまったり、IDを改ざんできてしまったりしますよね？
何か…違うような気がしています。
このあたり、セッションを使ったアプリケーションはどのように素早い処理を実現しているのでしょうか？
必要性はあまり考えていませんでした。とりあえず試した、という感じです。
たとえば「後で読む」の記事IDが現状「１と２」で、新たに「３」を登録するとします。ボタンをクリックするとAjaxでサーバデータが更新されるわけですが、その通信結果を待たずして、UIをさくさくと変更したいと考えています。この流れの中ではセッションデータの出力は最初のアクセス時だけだと思うのですが、いつどのように「３」を追加すればいいのでしょうか？
これがわからず、必要性を考えないままに、追加しうる対象としてJSで試した。ということです。
要はAjaxの通信結果を待たないための処理方法をお尋ねしたいわけですが、もし「後で読む」をクリックしたりするタイミングのたびにセッションデータをサーバから出力するなら、それはクリックしてAjaxの通信結果を待つのと同じことなのではないかと思っていまして、そのあたりはいかがでしょうか。
（用語など、よくわかっていない部分があるので、うまく伝わらなかったら申し訳ございません。）
補足ありがとうございます。
ご存知のとおり sessionStorage は、データをタブを閉じるまで保持するものです。
補足いただいた内容ですと、ページ移動がありませんから、データは JavaScript の変数で保持でき、タブを閉じるまで保持する必要がないように思いました。
ページ移動やリフレッシュなどの場合は、サーバからデータが送信されてきますから、やはり sessionStorage は、必要ないように思えます。
すみませんもう少し教えていただけませんでしょうか。理想の動作としてはTwitterの「いいね」ですが、これも JavaScript の変数に入っているのでしょうか？（もちろん実際の処理はTwitterのスタッフでないとわからないでしょうけど。）
初回アクセス時に「いいねしたID」や「フォローしたID」が JavaScript の変数に入っていて、「いいね」をクリックすると、JavaScript の変数の値が更新されるわけですか？
しかしその場合、「Aさんのツイート一覧」を見ようとしてAさんのページへ飛んだときに、「自分がいいねしたツイート」のハートマークを「♡（未）」から「♥（済）」にするまでの流れの、安全性に疑問が生じます。
その流れとしては、
➀「いいね」のクリックで JavaScript の変数の値が更新され、
➁ページをPJAXで移動したときに「その更新された値」と「Aさんのツイート一覧」とを照合させて、
➂一致していればハートマークを♡から♥にする。
という流れになるかと思いますが、これでは「いいねしたツイート」は改ざんできてしまったり、ユーザーのIDが見えてしまったりなど、安全性に疑問が生じませんでしょうか？
それを言い出してしまうと、UIの変更とはHTMLの変更ですから、何でもできますよね？
たとえば、今、私はツイートの内容を改ざんしてきましたが、これは何か問題になりますか？ 改ざんした内容を見れるのは自分だけですよね？
仰るとおりですね…。なにを不思議がっていたのでしょうか…。考えを整理しなおしてきます。夜分にありがとうございました。
いえ違いました。言い直させてください。
まず「１と２」のIDがJavaScript の変数に入っているとして、ボタンをクリックして新たに「３」を追加しますよね。しかしこれはボタンのクリックなしで「４や５」が追加できてしまうと思います。
すると何が起こるかというと、自分の後で読む記事一覧をロードするときに、本来クリックしていない「４や５」まで表示できてしまうことになると思います。
なぜなら、JavaScript の変数が「この人の後で読む記事一覧のID」としてAjaxで送信され、サーバはそれを元に判断して見せるためです。（Twitterで言えば、フォローしてない人のツイートが見えてしまうということです。）
これも、まぁ仕方ないことなのでしょうか？
いえいえ。
ちなみに、JavaScript の変数はクロージャで包んでしまうと外部から参照ができなくなるので、そう簡単には改ざんできなくなります。ご参考までに。
そうなんですね。JavaScript はフロントエンドで自由に改ざん可能なものかと思っていました。ありがとうございます。
ならむしろ改ざん可能なセッションよりもJavaScript の変数が一番ですね。
すみません、「クロージャで包む」とは？
あ、すれ違いましたね。
「自分の後で読む記事一覧をロードする」という手順では、サーバからの通信を待っていいのでしょうか？
そうであるなら、JavaScript の変数の値を用いず、PHPのセッションデータのみを信用すれば防げるでしょう。
「自分の後で読む記事一覧をロードする」という手順でも、サーバからの通信を受けない、つまりローカルにあるデータのみで処理をするならおっしゃるとおりかと思いますが、やはりローカルに限定される現象ですから、あまり問題になるケースが思いつきません。
「クロージャで包む」ですが。
簡単に言うと、
function test(){
let i = 0;
}
となっていた時に、test関数の外から i の内容を見たり変更したりすることができないのです。
>21:06
はい。「後で読むの登録」はぽちっと終わらせたいのに対して、「自分の後で読む記事一覧をロードする」という手順では、サーバからの通信を待っていいと考えています。（Twitterで言えば、「いいねのクリック」と「人のページに行く」の違いです。）
>そうであるなら、JavaScript の変数の値を用いず、PHPのセッションデータのみを信用すれば防げるでしょう。
あ、そこで質問になります。「後で読むの登録」はAjaxの通信結果を待たないので、サーバには「３」がないのに、自分は「３」を登録したつもり。というズレが生じます。
そのズレが未解消のままで「自分の後で読む記事一覧をロードする」とき、サーバのデータを読むと「１と２」しかない状態。なので、どこかから「３」を持ってこないといけませんよね。
このような経緯から、JavaScritpで「３」というセッションを追加して、「自分の後で読む記事一覧をロードする」ときはそのJavaScriptで追加された「１と２と３」を使ってロードするべきかなと考えたので、「試したこと」に至り、
しかしそれではクリックしてない「４や５」を勝手に追加して改ざんされたセッションをサーバに送信できてしまう。と思い直し、この度の質問をさせて頂いたということになります。
>21:09
ありがとうございます。それなら全体が
$(function(){
//ここにすべて書いてある
});
と包まれているので平気そうでした。
…でも脈絡なく「var」とかグローバルな変数を使っているからダメっぽいですね。「let」や「const」に直しておきます。
> 「後で読むの登録」はAjaxの通信結果を待たないので、サーバには「３」がない
そんなことはないですよ。「後で読む」が押されたら「3」というリクエストぶん投げて、レスポンスを待たずにUI変更してしまえばいいだけです。そして、UI変更した後にサーバからエラーが返ってきたら「申し訳ありません。サーバエラーです」とか表示して、ページをリフレッシュすればいいです。
> 「var」とかグローバルな変数
var で宣言された変数はローカルです。
エラーでリフレッシュ。ボタンもクリック前の状態に戻す。というわけですか。
それでも良さそうですが、でもTwitterはそういうエラーは起こりませんで、どうやっているのでしょうか。
逆にteratailではそのフライングUI変更はせずに、Ajax通信完了までぽこぽこぽこというローディングアニメーションを表示して、通信失敗したらぽこぽこの途中で「不明なエラーが発生しました」と表示しますね。
なぜなにが適切なんでしょうね。
変数ﾑｽﾞｶｼｰ…笑
いろいろノウハウがあるところだと思います。
今、ツイッターのいいねを押してみましたが、応答が400ミリ秒で返ってきました。
これならば、いいねのハートマークのアニメーション終了前に応答が返ってきそうなので、待ち時間が発生しない、ということになると思います。
単純にサーバの処理が早い、ということでしょうね。
あなたの回答
tips
プレビュー
