こんにちは、2024年4月入社の高田です。
入社から半年が経過しました。この半年間は外部研修、内部研修を受けていました。
外部研修では、泉岳寺のオフィスを離れ新宿のビルで他社の受講生の方々と一緒にITの基礎知識やHTML、CSS、JavaScript、PHP、Laravelを学びました。最終的にチームで旅館予約システムを作成し発表を行いました。私はITに関しては未経験でしたが、分かりやすく丁寧に教えていただきとても有意義な時間を過ごすことができました。
内部研修では、泉岳寺のオフィスに戻りSQLやPHP、Laravelを使用した会員登録フォームを作成しています。外部研修で学んだ知識はもちろんのこと、実務で欠かせない技術を少し盛り込みより実務に近い研修です。
今回は内部研修の一環としてPHPを使用し作成した会員登録フォームの会員登録機能について紹介します。会員登録フォームは以下の5つの機能で構成されています。
・会員登録機能
・ログイン/ログアウト機能
・会員一覧表示機能
・会員情報更新機能
・会員削除機能
今回は会員登録機能について説明していきます。
会員登録機能を実装するために以下の3つの画面を作成しました。
・入力画面
・確認画面
・完了画面
これら3つの画面を通して、ユーザーが情報を入力し、確認・登録まで行います。
各画面について詳細を説明します。
入力画面
ユーザーが名前、メールアドレス、パスワードなどを入力するための入力画面です。 ユーザーがフォームに必要な情報をすべて入力し、POSTで確認画面に送信するための「確認」ボタンが用意されています。都道府県、性別についてはDBのテーブルから参照し、表示しています。また、確認ボタンを押下した際、入力値の保持を行いますが、パスワードに関してはセキュリティの関係上入力値を保持しないようにしています。バリデーションチェックを実施し、入力欄に適切な値が入力されなかった場合はエラーメッセージを入力画面上に表示します。
例えば、郵便番号入力欄に数字以外の文字を入力し「確認」ボタンを押下するとエラーメッセージが表示し、確認画面に遷移しないようになっています。
全項目のバリデーションチェックを突破したときに初めて確認画面に入力値をPOST送信し、確認画面に遷移することができます。
確認画面
入力した情報を確認する確認画面です。入力画面で「確認」ボタンを押下すると、確認画面に遷移し、POST送信されたデータが画面上に表示されます。ただし、パスワードに関しては、セキュリティを考慮して画面に表示されないようにしています。また、パスワードは確認画面に遷移した時点でハッシュ化を行っているため開発者ツールを使用してもハッシュ化前のパスワード値は確認できないようにしています。
この画面では、誤った情報が入力されていないかをユーザー自身が確認できるようにし、修正が必要な場合は「入力画面へ戻る」ボタンを押下し、入力画面に戻ることも可能です。入力画面に戻ってきた際に、パスワード以外の入力値が保持されています。また、1から入力する必要がなく、修正個所とパスワードの入力で確認画面に遷移可能です。開発者ツールを使用し、確認画面に送信された値をバリデーションエラーになるような値に書き換えて、「登録」ボタンを押下すると入力画面に遷移してエラー項目にエラー文が表示します。修正が必要ない場合は、「登録」ボタンを押下し、登録処理を確認画面で行い登録が終えたら完了画面に遷移します。
完了画面
ユーザー登録が完了したことを通知する完了画面です。完了画面は、DBにユーザー情報を保存した後に表示されます。DBにユーザー情報登録が成功した場合は、完了メッセージとともにトップページに移動するためのリンクが表示されます。また、完了画面に遷移した段階で、未ログイン状態からログイン状態となりヘッダーにログインユーザー名が追加されます。
学んだこと
・開発者ツールの使い方
サーバーに送信するデータを直前に書き換えることが可能です。
ブレークポイントを入れることで、JavaScriptの変数の中身を確認しながらデバック作業を行うことができます。
・変数名の命名規則
誰が見てもわかるような変数名を命名する必要があります。
キャメルケースやスネークケースといった命名規則が存在します。
コードの読みやすさを向上させるため、まず『リーダブルコード』という書籍を読んでみようと思います。この本は、読み手にとって理解しやすいコードを書くためのガイドで、わかりやすい変数名の付け方など詳しく解説されています。
・絵文字の保存方法
今回の会員登録機能は絵文字を保存できるようにします。
絵文字はUTF-8の通常のバージョン（utf8）ではサポートされないため、UTF-8の4バイト対応（utf8mb4）に設定する必要があります
MySQLの設定ファイルの一部修正や、DBとテーブル生成時にutf8mb4に対応するようにしておきます。
・デバッグ方法
会員登録機能を実装していくとよくエラーが発生します。
エラーを解決するためにデバッグ作業を行います。
error_log() を使ったデバッグ方法は、コードの進行がどこで止まっているかPOSTの値が渡っているかなどを調べます。このデバッグ方法のおかげで調べても解決できないエラーを解決することができました。
・セキュリティを考慮することの重要性
SQLインジェクション対策とクロスサイトスクリプティング（XSS）対策を行いました。
入力欄に悪意あるコードを埋め込み、それが実行されてしまうとテーブルにあるユーザー情報が削除されてしまいます。
入力欄に入力された悪意あるコードを無効化し、ただの文字列として認識させれば悪意あるコードは実行されません。
以上が会員登録機能についてでした。
現在、Laravel版の会員登録フォームの作成に取り掛かっております。
PHP版の会員登録フォームでは実装できなかったページネーション機能や郵便番号から住所自動入力機能などを追加し、内部研修の集大成としてスケジュールに気を付けつつPHP版で学んだことを生かしながら作成していきたいと思います。