YOUR FIRST WEB SERVICE
AIと作る、
はじめての投稿サイト。
画面・動き・処理・保存。学んだ5つを、一つの作品につなげよう。
最終課題ガイドこのページは制作手順の案内です。自分の練習環境で、一つずつ動かして確かめましょう。
AIと一緒に、このつながりを理解しよう。
完成したら、できること
ユーザー登録・ログイン・ログアウト・投稿・投稿一覧・投稿詳細・自分の投稿の編集と削除。
最初は練習用のデータを使います。各コースのサンプルだけで全機能を理解できる必要はありません。分からない概念に戻り、AIに聞きながら進めます。
STEP 01 · HTML / CSS
完成する画面を決める
投稿一覧・投稿詳細・入力フォームを、まず見た目だけ作ります。
初心者向けに、投稿一覧と投稿フォームのHTMLとCSSを別ファイルで作ってください。各部分の役割を日本語で説明し、スマートフォンでも読みやすくしてください。
回答を見るポイント
見出し、ラベル、ボタンが分かりやすいか。スマートフォンでも横にはみ出さないか。
STEP 02 · JavaScript
入力に反応させる
文字数を表示し、送信前に入力を確かめます。
投稿フォームに文字数表示を追加してください。JavaScriptで入力を読み取る部分を説明してください。ブラウザ側の確認だけでは安全を守れない理由も教えてください。
回答を見るポイント
入力内容をHTMLとして実行しないか。ブラウザの確認を通らない送信もあり得ると理解できたか。
STEP 03 · PHP / MySQL
投稿を保存して表示する
PHPで受け取り、確認してからデータベースへ保存します。
PHPとMySQLで投稿を保存・取得する最小構成を段階ごとに教えてください。PDOのプレースホルダー、サーバー側の入力検証、表示時のエスケープを使ってください。接続情報は公開場所やコードに直接書かない構成にしてください。
回答を見るポイント
入力と命令を分けているか。表示するとき文字を安全に扱っているか。エラーに接続情報が出ないか。
STEP 04 · PHP / MySQL
登録とログインをつなぐ
誰が使っているかを確認する仕組みを追加します。
学習用投稿サイトに登録、ログイン、ログアウトを段階的に追加したいです。password_hashとpassword_verify、安全なセッション設定、ログイン成功時のID再生成、CSRF対策、試行回数制限が必要な理由を説明して実装してください。
回答を見るポイント
パスワードをそのまま保存していないか。ログイン前後でセッションIDが切り替わるか。ログアウト後は操作できないか。
STEP 05 · PHP / MySQL
自分の投稿を編集・削除する
投稿の持ち主をサーバー側で確認してから変更します。
ログイン中の本人が作った投稿だけを編集・削除できるようにしてください。サーバー側で所有者を検証し、POSTとCSRFトークンを使ってください。他人の投稿IDへ書き換えた場合に拒否されることを確認する手順も示してください。
回答を見るポイント
ボタンを隠すだけで済ませていないか。他人の投稿番号で送信しても拒否されるか。
STEP 06 · 5つの技術をつなぐ
一つの流れとして確かめる
登録から投稿、編集、削除、ログアウトまで試します。
学習用投稿サイトの確認表を作ってください。正常な操作に加え、空の入力、長い文章、HTMLを含む文章、未ログイン操作、他人の投稿の変更、不正なCSRFトークンを確認してください。それぞれ期待する結果を説明してください。
回答を見るポイント
期待どおりの結果か。分からないコードを説明できるか。公開する前には安全性の確認を受けよう。
安全のために知っておく言葉
入力検証：送られた値が決めた条件に合うか確かめること。SQLインジェクション：入力をデータベースへの命令として混ぜる攻撃。XSS：入力した文字をページ上でプログラムとして動かす攻撃。CSRF：本人の意図しない操作を別のページから送らせる攻撃。
セッション：ログイン中の人を見分ける仕組み。ハッシュ化：パスワードを元に戻せない形へ変換すること。所有者の検証：その投稿を変更してよい本人か、サーバーで確かめること。
AIのコードでも間違うことがあります。動いたことと、安全に公開できることは別々に確認しましょう。
安全対策の参考資料（OWASP）↗