[PHPcon2024]PHPでは気にならない​ Cookie管理の境界線​

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

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

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

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

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

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

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

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

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

アプリ制作
index.php

ver

<?php
/** バックエンドのコード
// APIリクエスト処理
APIリクエスト処理～

*/

// Cookie保存
setcookie('input_value', ユーザー入力値, time() + 3600, '/’);
/** HTML出力パート */
<form method="POST">
<label for="input_value">Input Value:</label>
<input value=“<?php echo h($_COOKIE['input_value'] ?? ''); ?>">
<button type="submit">Submit</button>
</form>

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

Confidential

10

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

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

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

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

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

アプリ制作
app
- index.ts

でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get('input_value');
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) => {
e.preventDefault();
document.cookie = inputValue;
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="input_value">Input Value:</label>
<input type="text" value={inputValue}
onChange={(e) => setInputValue(e.target.value)}/>
<button type="submit">Submit</button>
</form>)}

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

Confidential

16

アプリ制作
app
- index.ts

でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get('input_value');
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) => {
e.preventDefault();
document.cookie = inputValue;
};

実行

return (
<form onSubmit={handleSubmit}>
<label htmlFor="input_value">Input Value:</label>
<input type="text" value={inputValue}
onChange={(e) => setInputValue(e.target.value)}/>
<button type="submit">Submit</button>
</form>)}
© booost technolog ies Inc. - All rights r ese rve d.

Confidential

17

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

アプリ制作
app
- index.ts

でSSR
export default function Home() {
// Cookieから値を取得して初期値に設定
const cookieValue = Cookies.get('input_value');
setInputValue(cookieValue);
// APIリクエストして、Cookieに値を保存
const handleSubmit = async (e) => {
e.preventDefault();

いるが？？？

document.cookie = inputValue;
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="input_value">Input Value:</label>
<input type="text" value={inputValue}
onChange={(e) => setInputValue(e.target.value)}/>
<button type="submit">Submit</button>
</form>)}
© booost technolog ies Inc. - All rights r ese rve d.

Confidential

19

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

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

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

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

PHPの話
<?php
/** HTML出力パート */
<form method="POST">

<input value=“<?php echo
h($_COOKIE['input_value'] ?? ''); ?>">
</form>

なんでPHPは
同じエラーが出ない？
© booost technolog ies Inc. - All rights r ese rve d.

Confidential

24

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

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

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

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

アプリ制作
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 (
<main><p>{repo.cookieの値}</p></main>
)}
© booost technolog ies Inc. - All rights r ese rve d.

Confidential

29

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

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

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

新しい登場人物 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

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

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

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

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

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

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

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

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

PHPのcookieの扱い
A：スーパーグローバル変数
$_COOKIEを使えば大丈夫！
勝手にうまいことしてくれるよ！！
<?php
/** HTML出力パート */
<form method="POST">

<input value=“<?php echo
h($_COOKIE['input_value'] ?? ''); ?>">
</form>

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

Confidential

43

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://booost-tech.com/recruit

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

• https://booost-tech.com/
• https://www.wantedly.com/companies/booost-tech
• https://www.facebook.com/pages/category/Information-Technology-Company/booost-technologies-113815083728050/