こんにちは、Webプログラマの篠田です。
夏真っ盛りですね。連日の猛暑で今年も辛いですｗ。
今回は、需要が高いJavaScriptとPHPの連携であるAjaxを活用するときのSESSIONに関する「罠」についてご紹介します。
Ajaxは便利！
Ajaxは、ブラウザで入力された内容や操作を、JavaScriptを使ってPHP（サーバーサイド）にデータを送り、PHPの結果をJavaScriptでブラウザに反映するという技術です。
非常に便利で、画面遷移を必要としないシームレスなシステムを開発することができます。
ただ、PHP側の設計によって見落としがちな問題が発生する場合があります。
AjaxとSESSIONの罠
SESSIONは、ページ間を横断するときに、「情報」を保持したまま移動するために活用するPHPの仕組みです。
※「情報」とは、この場合ログイン情報やカート情報などを指します。
本来であれば、画面遷移ごとに「情報」を送信する処理（GETやPOST）が必要になりますが、SESSIONを使えば、都度の送信処理を行わずに済みます。
このSESSIONとAjaxが合わさるときに注意が必要になります。
SESSIONは、ブラウザが表示中「情報」を保持し続けます。
それは、ブラウザのタブを追加しても効果は変わりません。
そのため、複数のブラウザタブで同じ画面、違う操作を行うときに不具合が発生します。
具体的に、例をあげてご紹介しましょう。
例）商品情報をAjaxを使って更新する仕組み
（１）更新したい「商品A」を選び、更新画面を表示させる。
※商品を選択して更新画面に移動した際に、選択された商品の「商品ID」はSESSIONに保存されるとします。
（２）同じブラウザで別タブを開き、別の「商品B」を選び更新画面を表示します。
（３）（１）で開いたタブに表示されている「商品A」の情報を更新します。
（４）更新処理は、Ajaxを使い「更新内容のみ」をPHPに送信します。
（５）PHP側では「直前に保持したSESSION」を使い「商品ID」を取得します。
（６）取得した「商品ID」と送られてきた「更新情報」を使い、商品内容を更新します。
さて、この処理のどこに問題があるでしょうか？
実は、「商品A」を更新したと思ったのに、「商品B」が書き換わるという現象が発生する恐れがあります。
不具合の原因
原因は、「商品情報の更新にSESSIONを利用している」という点です。
今回の例の場合、「更新画面」に遷移するときに「商品ID」がSESSIONに保存されます。
そのため、（１）の操作後に（２）の操作をするとSESSIONに保存される商品IDが書き換わってしまいます。
（１）で表示されている画面は、画面更新がされないので「商品A」の情報が表示され、SESSIONが書き換わったことに気づかずに、商品情報を更新してしまうことが考えられます。
Ajaxとの付き合い方
対処方法としては、「商品ID」をSESSIONで取得せずに、Ajaxで商品情報を送信する際に一緒に含めることで、対応が可能です。
Ajaxで、SESSIONを利用しないのではなく、変動的な値に関しては随時情報を送信するのが安心です。
逆に、普遍的な情報（ログイン情報など）を持つSESSIONは、Ajaxでも問題が起こりにくいです。
まとめ
複数タブを立ち上げて操作するという流れは、比較的どんな画面でも想定できます。
そのため、SESSION情報の盲信は、思いがけないバグを生み出す可能性がありますので、ご注意ください。
現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。
ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。
