PHPcon宣伝用

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

このスライドで取り扱うこと © boo ost technologie s Inc. - All rights r ese rve d. Confidential 2

このスライドで取り扱うこと フロントエンド界隈から聞こえてくる レンダリング方式  CSR（クライアントサイドレンダリング）  SSR（サーバーサイドレンダリング） ・・・etc © boo ost technologie s Inc. - All rights r ese rve d. Confidential 3

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

このスライドで取り扱うこと Q： SSR（サーバーサイドレンダリング）っていっても PHPも一緒のことをやっていない？ 筆者のアプリ制作の 経験から学びましょう 出力 © boo ost technologie s Inc. - All rights r ese rve d. Confidential 5

アプリ制作 © boo ost technologie s Inc. - All rights r ese rve d. Confidential 6

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

アプリ制作
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>

© boo ost technologie s Inc. - All rights r ese rve d.

Confidential

8

アプリ制作 PHPver PHPだと簡単だし SSRでもチャレンジするか PHPもSSRしてるようなもんだし 簡単にイケるだろ © boo ost technologie s Inc. - All rights r ese rve d. Confidential 9

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

SSRチャレンジと苦しみ © boo ost technologie s Inc. - All rights r ese rve d. Confidential 11

アプリ制作
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>)}

© boo ost technologie s Inc. - All rights r ese rve d.

Confidential

12

アプリ制作
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>)}
© boo ost technologie s Inc. - All rights r ese rve d.

Confidential

13

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

アプリ制作
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;
};

© boo ost technologie s Inc. - All rights r ese rve d.

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>)}

Confidential

15