---
title: [PHPcon2024]PHPでは気にならない​ Cookie管理の境界線​
tags: 
author: [_ma_me_](https://www.docswell.com/user/1313108)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5EGYRGK5EL.jpg?width=480
description: [PHPcon2024]PHPでは気にならない​ Cookie管理の境界線​ by _ma_me_
published: December 21, 24
canonical: https://www.docswell.com/s/1313108/5R289E-2024-12-21-203212
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5EGYRGK5EL.jpg)

PHPでは気にならない
Cookie管理の境界線
－SSRで直面するサーバーとクライアントの違い
PHP Conference Japan 2024
© booost
technolog
ies Inc.
- All -rights
r eserrve
© booost
technolog
ies Inc.
All rights
esed.rve d.
Confidential
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JQMVXNL7P.jpg)

目
次
1. このスライドで取り扱うこと
2. SSRチャレンジ前の心境
3. SSRチャレンジと苦しみ
4. SSRの躓きと学び
5. SSRの躓き「２つめ」と学び
6. SSRを取り巻く難しさから気づく 、PHPの優しさと、いいところ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/K74VM6G5J1.jpg)

簡単な自己紹介
© booost technolog ies Inc. - All rights r ese rve d.
-
Webエンジニア歴：10年ちょい
-
HN：ma_me（twitterも同じ）
-
主な言語：
-
所
属：
Confidential
3
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ138VD27G.jpg)

1. このスライドで取り扱うこと
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GJWPZLY272.jpg)

このスライドで取り扱うこと
フロントエンド界隈から聞こえてくるいろんな
レンダリング方式
· CSR（クライアントサイドレンダリング）
· SSR（サーバーサイドレンダリング）
・・・etc
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EZK1MX4E3.jpg)

このスライドで取り扱うこと
Q： SSR（サーバーサイドレンダリング）っていっても
PHPも一緒のことをやっていない？
出力
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/Y76QLN4G7V.jpg)

このスライドで取り扱うこと
Q： SSR（サーバーサイドレンダリング）っていっても
PHPも一緒のことをやっていない？
アプリ制作を
なぞりながら学びましょう
出力
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/G75R15QXE4.jpg)

2. SSRチャレンジ前の心境
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/9J2D1NPQJR.jpg)

アプリ制作
要件
アプリ概要
辞書検索APIを叩いて、単語を検索できるアプリ
機能概要
· ログイン不要
· ユーザーが再訪したときにも入力値を復元させたいので、
Cookieに入力値や検索結果を保存する
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/DEY2ZP5YEM.jpg)

アプリ制作
index.php
ver
&lt;?php
/** バックエンドのコード
// APIリクエスト処理
APIリクエスト処理～
*/
// Cookie保存
setcookie(&#039;input_value&#039;, ユーザー入力値, time() + 3600, &#039;/’);
/** HTML出力パート */
&lt;form method=&quot;POST&quot;&gt;
&lt;label for=&quot;input_value&quot;&gt;Input Value:&lt;/label&gt;
&lt;input value=“&lt;?php echo h($_COOKIE[&#039;input_value&#039;] ?? &#039;&#039;); ?&gt;&quot;&gt;
&lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VJN835NR78.jpg)

アプリ制作
ver
PHPだと簡単だし
SSRでもチャレンジするか
PHPもSSRしてるようなもんだし
簡単にイケるだろ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/YE9K9YRZE3.jpg)

アプリ制作
ver
PHPだと簡単だし
SSRでもチャレンジするか
全然簡単じゃなかった
PHPもSSRしてるようなもんだし
簡単にイケるだろ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GE8R96GYJD.jpg)

3. SSRチャレンジと苦しみ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LELKW9G9JR.jpg)

SSRチャレンジ・・・の前に
用語解説
コンポーネントとは
- 画面の特定の部分を独立して設計・管理できる
「再利用可能な部品」的なもの
ボタン
- ひとつの機能やUI要素を表す単位として使われることが多い
（例：ボタンやフォーム、ヘッダー、商品カードなど、）
ヘッダー
PHPだとUI特化のclass みたいなイメージ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JM29ZQVJW.jpg)

いざ
でSSRチャレンジ
使用フレームワーク
SSRを扱ううえで一番メジャーな
＊SSRを扱う上での注意点・フローは大きく変わらない
いざ SSRチャレンジ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/PJRMG68WE9.jpg)

アプリ制作
app
- index.ts
でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get(&#039;input_value&#039;);
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) =&gt; {
e.preventDefault();
document.cookie = inputValue;
};
return (
&lt;form onSubmit={handleSubmit}&gt;
&lt;label htmlFor=&quot;input_value&quot;&gt;Input Value:&lt;/label&gt;
&lt;input type=&quot;text&quot; value={inputValue}
onChange={(e) =&gt; setInputValue(e.target.value)}/&gt;
&lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;)}
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PEXVXM8V7X.jpg)

アプリ制作
app
- index.ts
でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get(&#039;input_value&#039;);
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) =&gt; {
e.preventDefault();
document.cookie = inputValue;
};
実行
return (
&lt;form onSubmit={handleSubmit}&gt;
&lt;label htmlFor=&quot;input_value&quot;&gt;Input Value:&lt;/label&gt;
&lt;input type=&quot;text&quot; value={inputValue}
onChange={(e) =&gt; setInputValue(e.target.value)}/&gt;
&lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;)}
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/3EKQWGK5ED.jpg)

アプリ制作
でSSR
ReferenceError: document is not defined
のエラーがブラウザに…
ブラウザで開いているのに、documentがない？？？
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L73P1NZ1E5.jpg)

アプリ制作
app
- index.ts
でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get(&#039;input_value&#039;);
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) =&gt; {
e.preventDefault();
いるが？？？
document.cookie = inputValue;
};
return (
&lt;form onSubmit={handleSubmit}&gt;
&lt;label htmlFor=&quot;input_value&quot;&gt;Input Value:&lt;/label&gt;
&lt;input type=&quot;text&quot; value={inputValue}
onChange={(e) =&gt; setInputValue(e.target.value)}/&gt;
&lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;)}
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/87DLXWRKEG.jpg)

4. SSRの躓きと学び
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/VJP2P9W3J8.jpg)

SSRの躓きと学び
躓きパート
- なんでdocumentがない扱い?
- ブラウザからリクエストが飛んでいるはずなのに、
ブラウザにあるはずのdocumentがない???
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/2EVD2M8NEQ.jpg)

SSRの躓きと学び
学びパート
SSR
（サーバーサイドJS）でHTMLを書き出す
- サーバー内で完結するものだけ処理する
-
ブラウザは存在しないし
documentやcookieも何処にもない
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/57GYRG557L.jpg)

SSRのエラーの振り返り
ReferenceError: document is not defined
のエラーがブラウザに…
ブラウザで開いているのに、documentがない？？？
↑ SSRの時はブラウザは存在していないので、当たり前
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EQMVXZLJP.jpg)

PHPの話
&lt;?php
/** HTML出力パート */
&lt;form method=&quot;POST&quot;&gt;
&lt;input value=“&lt;?php echo
h($_COOKIE[&#039;input_value&#039;] ?? &#039;&#039;); ?&gt;&quot;&gt;
&lt;/form&gt;
なんでPHPは
同じエラーが出ない？
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/KJ4VM635E1.jpg)

PHPの話
何故PHPはうまくいくのか
A：PHPは開発者がブラウザの有無を
気にしないでいい作りになっている
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE138V12JG.jpg)

PHPの話
cookieの送受信フロー
PHPの大まかなCookieのフロー
1. PHPはリクエストを受け取る
2. cookieをHTTPヘッダーに詰
めて返す
HTTP通信ベースなので
ブラウザの有無は関係ない
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GEWPZL82J2.jpg)

SSR(Next.js)
同じようにできないか？
通信方式は同じHTTP
HTTP通信ベースのcookieを
扱う方法があるのでは？
交換
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/47ZK1M8473.jpg)

SSR(Next.js)
同じようにできないか？
あった！
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/YJ6QLNPGJV.jpg)

アプリ制作
app（SSR側）
- index.ts
front（CSR側）
- main.ts（New）
でSSR
SSR：index.ts
export async function getServerSideProps(context) {
const parsedCookies = cookie.parse(context.req.headers.cookie);
return { props: {} }
}
SSRから
cookieを渡す
CSR：main.ts
export default function main({repo}) {
return (
&lt;main&gt;&lt;p&gt;{repo.cookieの値}&lt;/p&gt;&lt;/main&gt;
)}
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/GJ5R15KX74.jpg)

アプリ制作
でSSR
軽く詰まったけれど
何とかなるわ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/9E2D1NWQER.jpg)

アプリ制作
でSSR
軽く詰まったけれど
何とかなるわ
何とかならなかった
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/D7Y2ZPLY7M.jpg)

5. SSRの躓き「２つめ」と学び
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/VEN8354RJ8.jpg)

新しい登場人物 CSRの紹介
SSR：ブラウザはない。documentもない。
app（SSR側）
- index.ts
front（CSR側）
- main.ts（New）
でレンダリング
CSR：クライアントサイドレンダリング
クライアント（ブラウザ）側で JSを を使って
HTMLを書き出す
ブラウザ、document、cookieがある
動的なUI構築をしたい場合はこっちを使う
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/Y79K9YQZ73.jpg)

SSRとCSRの併用と新しい問題
躓きパート
- なんで画面全体じゃなくて、
「1」 → 「123456789」 のように部分的に値が変わる？
- そもそも「 123456789 」の値は何処から来た？？？
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
35


# Page. 35

![Page Image](https://bcdn.docswell.com/page/G78R96QYED.jpg)

SSRとCSRの併用と新しい問題
学びパート
SSR→CSRと併用する場合
２回のHTMLのレンダリング過程で
参照するCookieが違う
R：サーバーサイド レンダリング
SS
ハイドレーション（時間の都合で省略…）
R：クライアントサイド レンダリング
CS
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
36


# Page. 36

![Page Image](https://bcdn.docswell.com/page/L7LKW9X9ER.jpg)

別に２回参照されるCookie
1回目：SSR サーバー側で
でHTML出力
1
&lt;input value=“サーバーのcookie”&gt;
渡す
２回目：CSR ブラウザ側で
でHTML出力
123456789
&lt;input value=“ブラウザのcookie”&gt;
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
37


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4EM29ZLVEW.jpg)

別に２回参照されるCookie
1回目：SSR サーバー側で
でHTML出力
1
&lt;input value=“サーバーのcookie”&gt;
渡す
参照タイミングが違うので
見てるcookieの値が違う…
２回目：CSR ブラウザ側で
でHTML出力
123456789
&lt;input value=“ブラウザのcookie”&gt;
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
38


# Page. 38

![Page Image](https://bcdn.docswell.com/page/PERMG6KW79.jpg)

解決策
Cookieの管理をどちらかに寄せるのがベター
両方で扱わない。
SSR サーバー側
CSR ブラウザ側
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
39


# Page. 39

![Page Image](https://bcdn.docswell.com/page/P7XVXMLVJX.jpg)

いったん解決するも、続く苦しみ
ただどちらかに寄せるか決めた後でも
また別の苦しみがあるのが辛い…​
それはまた別の話…
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
40


# Page. 40

![Page Image](https://bcdn.docswell.com/page/37KQWGL57D.jpg)

6. SSRを取り巻く難しさから気づく
PHPの優しさと、いいところ
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
41


# Page. 41

![Page Image](https://bcdn.docswell.com/page/LJ3P1N3175.jpg)

PHPのcookieの扱い
なんでPHPで同じこと
が起こらないの？
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
42


# Page. 42

![Page Image](https://bcdn.docswell.com/page/8JDLXW4K7G.jpg)

PHPのcookieの扱い
A：スーパーグローバル変数
$_COOKIEを使えば大丈夫！
勝手にうまいことしてくれるよ！！
&lt;?php
/** HTML出力パート */
&lt;form method=&quot;POST&quot;&gt;
&lt;input value=“&lt;?php echo
h($_COOKIE[&#039;input_value&#039;] ?? &#039;&#039;); ?&gt;&quot;&gt;
&lt;/form&gt;
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
43


# Page. 43

![Page Image](https://bcdn.docswell.com/page/VEP2P9M3E8.jpg)

PHPのいいところ
難しいことは
こっちでやっとくから、
コード書いて渡して
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
44


# Page. 44

![Page Image](https://bcdn.docswell.com/page/27VD2M9N7Q.jpg)

PHPのいいところ
難しいことをたくさん
引き受けてくれて
ありがとうPHP！
ええんやで
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
45


# Page. 45

![Page Image](https://bcdn.docswell.com/page/5JGYRGZ5JL.jpg)

に代表されるSSRを扱うFW
とにかく把握しないといけないことが多い
SSRだけ把握しておけば大丈夫、の気持ちで挑むとすぐバグる
- SSR・CSRの対応範囲
- ハイドレーションのタイミング
- コンポーネントのレンダリングタイミング
- データのスコープ
- どこに置いたデータを信頼するデータストアとするか
etc…
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
46


# Page. 46

![Page Image](https://bcdn.docswell.com/page/47QMVXLLEP.jpg)

などのSSRを扱うFWの人気の要因
PHPはこんなに簡単なのに、
開発者はなぜ他の言語、フレームワークに向かうのか…
悪い言い方をすると、
P は
過保護
パフォーマンス改善時に、手を出せない部分が多い。
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
47


# Page. 47

![Page Image](https://bcdn.docswell.com/page/KE4VM6D571.jpg)

に代表されるSSRを扱うFWの人気
などのSSR対応フレームワークの魅力
開発者の手が届かなかった
細かい部分まで手を入れら
れる
限界のパフォーマンスチューニングが可能
例：
媒体の性能が低い
BtoC向けのモバイルアプリケーション
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
48


# Page. 48

![Page Image](https://bcdn.docswell.com/page/L7138VZ2EG.jpg)

最初の問いの解答
Q： SSR（サーバーサイドレンダリング）っていっても
PHPも一緒のことをやっていない？
出力
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
49


# Page. 49

![Page Image](https://bcdn.docswell.com/page/G7WPZL92E2.jpg)

最初の問いの解答
Q： SSR（サーバーサイドレンダリング）っていっても
PHPも一緒のことをやっていない？
A：HTMLをサーバーでレンダリング、という点は一緒
ただこの感覚だけで挑むと大変つらい
が隠してくれていたフローへの理解
＋JS、ブラウザ諸々の知識も要求される
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
50


# Page. 50

![Page Image](https://bcdn.docswell.com/page/4JZK1M94J3.jpg)

どっちを選べばいいのか
要はバランス
たださくっとWebアプリを作りたいなら
は最強！
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
51


# Page. 51

![Page Image](https://bcdn.docswell.com/page/YE6QLNKGEV.jpg)

ご清聴
ありがとうございました
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
52


# Page. 52

![Page Image](https://bcdn.docswell.com/page/GE5R15PXJ4.jpg)

会社紹介
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
53


# Page. 53

![Page Image](https://bcdn.docswell.com/page/972D1N6Q7R.jpg)

booost technologies
Together, we create a Sustainable NET-ZERO future.
私たちは、人類史上最大の課題である「気候変動 / 持続可能性」 の解決に挑み、
NET-ZERO、Sustainabilityリーダーの SX.GX を加速させるTechnology パートナーです。
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
54


# Page. 54

![Page Image](https://bcdn.docswell.com/page/DJY2ZP9YJM.jpg)

© booost technolog ies Inc. - All rights r ese rve d.
Confidential
55


# Page. 55

![Page Image](https://bcdn.docswell.com/page/V7N835LRE8.jpg)

© booost technolog ies Inc. - All rights r ese rve d.
Confidential
56


# Page. 56

![Page Image](https://bcdn.docswell.com/page/YJ9K9Y4ZJ3.jpg)

求人情報
https://booost-tech.com/recruit
© booost technolog ies Inc. - All rights r ese rve d.
Confidential
57


# Page. 57

![Page Image](https://bcdn.docswell.com/page/GJ8R96VY7D.jpg)

Follow us
Facebook
-ロ
アプ
の
最
【
】
新
ゴ
リ
村
アイコ
ンをフ
リ
ーダ
ウンロードす
る方法
-W
大antedly
坪新平
のプロフ
ィ
ール
https://booost-tech.com/
https://booost-tech.com/
Thank you.
Contact information:
booost
NET-ZERO /
Sustainability
© booost
technolog
ies Inc.
- All -rights
r eserrve
© booost
technolog
ies Inc.
All rights
esed.rve d.
Confidential
58


