こんにちは、2024年4月に入社した高田です。
社内研修で Laravel を使用して会員登録フォームを作成しました。その際、ローカル環境は Docker を用いましたが、別の方法でも環境構築を試してみたかったため、Vagrant を使って同じ構成のローカル環境を構築しました。
今回は、ローカル環境構築における利点と、DockerやVagrantを学んだ感想について紹介したいと思います。

ローカル環境構築の利点

1. プログラムの動作確認が手軽に行える

Laravel を使って開発を進めるには、PHP や Web サーバー（Apache など）が動作する環境が必要ですが、一般的なWindows PCにはPHP や Web サーバーはインストールされていません。作成したプログラムを動かすには別途Webサーバーを用意し、Webサーバーにプログラムファイルをアップロードする必要があります。
しかし、Webサーバー用のPCを新たに用意するのは場所や費用の問題もあるので難しい場合があります。このような課題は、ローカル環境を導入することで解決できます。
ローカル環境を導入すると、自分のPC がサーバーとして動作するような状態となるため、新たにWebサーバー用のPCを用意する必要がありません。
また、同一PC内でWebサーバーが動作する形となるため、設定次第でWebサーバーにプログラムファイルをアップロードする手間を省くことができます。
ローカル環境を導入することにより、修正や確認のサイクルが短縮され、プログラム開発効率が大幅に向上します。

2. ローカル環境構築を通じたインストールと設定の習得

ローカル環境を構築する過程で、以下のようなWebアプリケーションを動かすための各種ソフトウェアについて、インストール方法や設定方法を学ぶことができました。
・PHP
・Web サーバー（Apache）
・データベース
具体的には、PHP を Web サーバーと連携させる仕組みや、MySQL などのデータベースとアプリケーションを接続する方法を学びました。コマンドでインストールを行うため、コマンドの使用方法についても復習出来ました。

3. 実務での開発安定化

ローカル環境を持たず、1つの開発サーバー上のファイルを複数人で直接編集すると、以下のようなトラブルが発生することがあります。
・他人が編集していることに気付かずにファイルを上書きしてしまう可能性がある
・誰がどの変更を加えたのか把握しにくくなる
ローカル環境を構築することで、上記のようなトラブルを防ぐことができます。結果として、安定した開発が可能になります。

Docker・Vagrant を学んだ感想

1. Linux、ネットワークの知識が必須

Docker や Vagrant を学ぶ上で、Linux やネットワークに関する基礎知識は不可欠だと感じました。基礎知識があることで、環境構築の全体像を把握しやすくなり、作業を効率的に進められます。さらに、エラーが発生した際や情報を検索する際も、技術記事の内容をスムーズに理解できるようになります。
一方で、Linux やネットワークの知識が不足していると、設定やエラー対応に時間がかかり、調べた情報を十分に活用できず、環境構築が思うように進まないことがあります。

2. 初心者が使用する場合はVagrantの方が簡単

Vagrantを使った環境構築は、手順がシンプルで初心者でも取り組みやすいと感じました。特に、Vagrantfileの記述だけで仮想マシンを構築できる点が大きな利点です。
仮想環境を使う場合、ホストOS（自分のPC）と仮想環境（VagrantやDockerなど）の間でファイルを共有するための仕組みとして「マウント」があります。マウントを設定すると、ホスト側で編集したファイルが仮想環境内にも反映されるため、設定が重要です。
ただし、Vagrantでマウントを設定する際、意図したとおりに機能しないことが多く、調べながら試行錯誤する必要がありました。初心者にとっては設定の難しさがハードルになりやすいと感じました。
Dockerを使用する場合、Dockerfileに加えて複数のコンテナを管理するためのdocker-compose.ymlファイルも必要になります。コンテナの仕組みや設定ファイルの記述方法を理解する必要があり、環境構築の経験が少ない初心者にとっては難易度が高いと感じました。
環境構築のしやすさを考えると、Vagrantの方が初心者には導入しやすく、理解しやすいと感じました。

まとめ

今回は、ローカル環境構築の利点と、DockerやVagrantを学んで感じたことを紹介しました。社内研修用に作成したローカル環境ですが、今後は実務でも新たにローカル環境を構築する機会が増えると考えています。
実務では、単にローカル環境を構築するだけでなく、メンバー間での手順やローカル環境ファイルの共有方法、複数人で進める際の利点にも注目しながら活用していきたいと考えています。

こんにちは、2024年4月に入社した高田です。
7月から社内研修で、
・フレームワークを使用しない会員登録フォーム
・フレームワーク（Laravel）を使用した会員登録フォーム
の実装を行ってきました。
どちらの会員登録フォームも会員登録時の入力項目は同じですが、
フレームワークを使用しない会員登録フォームでは、生年月日をinput要素のtype=”date”入力型で実装し、Laravelを使用した会員登録フォームでは、デザイン性・カスタマイズ性を重視しjQuery UIのカレンダーで実装しました。

2つの方法で生年月日のフォームを実装してみて、
jQuery UIを使用したカレンダーは、input要素のtype=”date”入力型のカレンダーと比べ、
・高度なカスタマイズ性
・ローカライズ対応
といった点で優れていると感じました。

特にカレンダーの表示に関するオプションは豊富で、細かな設定ができると知っておくだけでも設計・実装の幅が広がると感じました。
そこで今回は、jQuery UIを使用したカレンダーの導入方法と実装方法について紹介したいと思います。
私が実際に作成したものがこちらになります。

画像1　生年月日選択中カレンダー表示

画像2　生年月日選択後

年月日のテキストボックスを選択するとカレンダーが表示されます（画像1）。
カレンダー上の日付を押下するとテキストボックスに年月日が入ります（画像2）。
カレンダーは記事作成日時である今日（2024/12/06）までの日付が選択できるようになっています。

[実装方法]

1.　jQuery UIをダウンロード

jQuery UIを使用するためには、jQuery UIとそれに依存するjQuery自体を利用可能な状態にする必要があります。jQueryとjQuery UIには、CDN形式とダウンロード形式の2種類の利用方法があります。
CDN形式は、提供元のサーバーからライブラリを直接読み込む方法で、設定が簡単というメリットがあります。ただし、提供元のサービスが停止した場合に影響を受けるリスクがあります。
ダウンロード形式は、ライブラリをローカル環境に保存して利用する方法で、外部サービスに依存せず安定して利用できるという安心感があります。
今回は安定性を重視し、ダウンロード形式を選びました。

実際に公式サイトよりjQuery、jQuery UIそれぞれダウンロードしました。

必要なファイルをフォルダに配置し、それらを読み込む設定を行います。LaravelのBladeテンプレートでは、ファイルのパスを指定する際にasset関数を使用します。Laravelのasset関数は、アプリケーションのpublicディレクトリを基準としたパスを生成するため、プロジェクト内でのファイル管理が簡単になります。以下のように配置しました。

これで、jQuery 、jQuery UIを使用する準備が完了しました。

参考：　【初心者向け】jQueryはじめの一歩 #JavaScript – Qiita

2.　inputタグへの設定

ダウンロードが完了後、jQuery UIの日本語リファレンス（Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO）を参考にしながら、「年・月メニュー表示」のカレンダーを実装していきます。リファレンスの「年・月メニュー表示」のソースコードは以下のようになっています。

HTMLでは、<input>タグにid=”datepicker”が指定されており、このidを基にjQuery UIのdatepicker機能を適用してカレンダーを表示します。jQueryでは、指定したidを用いて要素を選択し、その要素に対してdatepickerメソッドを適用することで、簡単にカレンダー機能を追加できます。また、オプションを設定することで、月や年を選択できるプルダウンメニューを表示し、カレンダーの挙動を柔軟にカスタマイズすることが可能です。なお、idは任意の値に変更でき、<script>タグ部分はそのまま利用することで簡単にカレンダーを作成することができます。以下に実際のコード例を示します。

この状態で画面を見ると、以下の画像のように年と月をドロップダウンで選択できるカレンダーが表示されます。

この状態でもカレンダーは十分に機能し、日付を選択することができます。しかし、さらに使いやすくするためにいくつかのカスタマイズを行います。

3.　使いやすいようにカスタマイズ

ステップ２で実装したカレンダーには、以下の2つの課題があります。
・月や曜日が日本語表記ではない
・生年月日用のカレンダーにも関わらず、今日以降の日付が選択できる
これらの課題を解決していきます。

・月や曜日が日本語表記ではない

datepickerの日本語化データはGitHubで利用できます。
下記のページを開いて（datepicker-ja.js）ダウンロードします。

GitHub： 　jquery-ui/ui/i18n at main · jquery/jquery-ui · GitHub

ダウンロード後、必要なファイルをフォルダに配置し、ファイルで読み込みを行います。

これだけで日本語化することができます。

・生年月日用のカレンダーにも関わらず、今日以降の日付が選択できる

この問題はオプションを設定することで解決することができます。JavaScriptで日付と年を取得し、それを基に maxDate オプションで選択可能な最大日付を今日に設定を行います。また、年の範囲も1900年から現在の年までに制限します。

続いてyearRange オプションを使って1900年から2024年(今年)まで選択可能状態に、maxDate オプションで選択可能な最大日付を今日に設定を行います。
以下が実際のコードになります。

JavaScriptのテンプレートリテラルを使用し${}を使って変数や式を埋め込むことで、取得したcurrentYearを範囲指定に利用しています。この方法により、yearRangeオプションが常に動的に現在の年に対応し、毎年手動で更新する必要がなくなります。

さらに、maxDate オプションでtoday を設定することで、カレンダー上で今日以降の日付が選択できなくなります。以下の画像は2024/12/06に実装・確認したもので、2024/12/07以降の日付は選択不可になっていることが分かります。

[まとめ]

jQuery UIを使うことで、手間をかけずに高機能なカレンダーを実装できたのは非常に良かったです。使い方がシンプルで、公式ドキュメントや日本語リファレンスも分かりやすく、初めて触れる初心者でも短時間で機能を実装できる点が優れていると感じました。また、柔軟なカスタマイズが可能であり、要件に応じた細かい調整がしやすいのも魅力です。例えば、カレンダーの日本語対応や選択可能な日付の範囲指定など、よくあるカレンダーの仕様にも簡単に対応できました。今後、実装する要件に応じて適切なライブラリやフレームワークを選択し、それを効率的に活用できるスキルを身につけていきたいです。

こんにちは、2024年4月入社の高田です。
第1回目の記事で会員登録機能を紹介しました。
今回の記事では前回の記事の延長としてログイン/ログアウト機能について紹介します。

ログイン機能

ログイン機能の実装は今回始めて行いました。普段は意識せずに使っていますが、実装者の立場で改めて考えてみると、どのようにしてログイン機能が実現されているか不明でしたので今回一から調べました。色々なwebサイトを参考に実装し最終的に以下のようなステップで実装を行いました。

1. メールアドレス、パスワード入力必須チェック
2. メールアドレスでのデータベース照会
3. パスワード認証
4. 認証成功時の処理

簡単にではありますが、ここからは上記の各ステップについて順に説明していきます。

1. メールアドレス、パスワード入力必須チェック

ログイン画面でメールアドレス、パスワードを入力し、「ログイン」ボタンを押下すると認証処理が始まります。この際、すべての項目が入力されているか確認し、未入力の場合は以下の画像のようなエラーメッセージが表示されます。

このように必要な情報が揃わない場合、次のステップには進めません。

2. メールアドレスでのデータベース照会

メールアドレスとパスワードの入力必須チェックが完了すると、入力されたメールアドレスを基にデータベースを参照し、該当するユーザーを探します。データベースには登録済みのユーザー情報が保存されており、入力されたメールアドレスと一致するユーザーが見つかった場合、そのユーザーのハッシュ化（※1）されたパスワードを取得します。このパスワードを用いて、次のステップであるパスワード照合に進みます。

（※1）ハッシュ化とは？
ハッシュ化とは、ハッシュ関数によって文字列を置換して、元の文字を推測できなくすることです。ハッシュ関数を用いてsaltと呼ばれるランダムな値をハッシュする値に追加することで、同じパスワードでも異なるハッシュ値が生成されます。データベースに保存されているパスワードはハッシュ化して保存されています。

ハッシュ化の例：
・パスワード：
!X9v#4hT8@pQ7wZ&2024

・ハッシュ値：f3f32592e1483974c378f46b4ab91500199b83b168ec87ed76ebdd66efe83452

※ 上記のようにハッシュ化されたパスワードをデータベースに保存します。

ハッシュ化の特性と利点：
ハッシュ化は一方向の変換であり、一度ハッシュ化されたデータを元に戻すことは極めて困難です。この特性を利用し、データベースに保存するパスワードをハッシュ化しておくことで、万が一データベースが攻撃されても、パスワードを直接利用されるリスクを大幅に減らすことができます。

参考：　PHP: パスワードのハッシュ – Manual

以上より、ハッシュ化はパスワードを管理するための重要なセキュリティ対策となります。

3. パスワード認証

パスワード認証では、データベースに保存されているハッシュ化されたパスワードと、ユーザーが入力したパスワードが一致するかを確認します。データベースに保存されているユーザーのハッシュ値からsalt値を抽出します。ユーザーが入力したパスワードと抽出したsalt値を使用して、新たなハッシュ値を生成し、新たに生成したハッシュ値と、データベースから取得したハッシュ値を比較します。一致すればパスワード認証が成功します。認証に失敗した場合、パスワードを空にして「メールアドレスまたはパスワードが一致しません」というエラーメッセージをログイン画面上に表示します。セキュリティの観点から、メールアドレスが正しいかどうかを利用者に知らせないようにするため、「メールアドレスまたはパスワードが一致しません」というメッセージにしています。以下の画像のように「メールアドレスまたはパスワードが一致しません」というメッセージを表示させます。

4. 認証成功時の処理

認証成功後、サーバー側とブラウザ側でそれぞれ以下の処理を行います。

[サーバー側の処理]

1. セッション情報の保存
サーバーは、ログインしたユーザーのID、名前、メールアドレスなどの必要な情報をセッションに保存します。これにより、ユーザーのログイン状態をサーバー上で管理します。セッション情報はサーバー側に安全に保存され、外部から直接アクセスすることはできません。

2. セッションIDの発行
サーバーは、ログイン状態を識別するための一意のセッションIDを発行します。このセッションIDは、サーバー内でセッション情報に紐付けられています。

3. ログイン後画面へのリダイレクト
認証成功後、ユーザーは検索画面などのログイン後画面にリダイレクトされます。

[ブラウザ側の処理]

1. セッションIDの保存
サーバーが発行したセッションIDは、ブラウザがCookieとして保存します。このCookieは、ブラウザ内に自動的に管理され、サーバーとクライアントのやり取りに利用されます。

2. セッションIDの送信
ブラウザは、保存したセッションIDをサーバーへのリクエストに自動的に添付します。この仕組みによって、サーバーはセッションIDを基にユーザーを識別し、ログイン状態を維持します。

参考：　PHPでセッションを使ったログインページを作ってみる|やまでぃーのブログ

以上がログイン機能についての説明でした。

ログアウト機能

続けてログアウト機能について説明します。
ログアウトは、ログイン状態でのみ行うことができます。
ログアウト処理は、以下のステップで進められます。

1. サーバー側のセッション変数の初期化
2. ブラウザ側のセッションIDの削除
3. サーバー側のセッションIDの無効化

各ステップの詳細は以下をご覧ください。

1. サーバー側のセッション変数の初期化
セッション変数の全データを空にし、セッション情報をリセットします。これにより、セッション変数が初期化され、ユーザー情報などのセッションデータが破棄されます。

2. ブラウザ側のセッションID削除
クライアントのブラウザ側にCookieとして記録されているセッションIDの破棄を行います。セッション管理にCookieを使用している場合はブラウザ側のCookieを削除しておかないとセッションIDが残ってしまいセキュリティ上よくありません。（実装段階では、調べが行き届いておらずブラウザ側でのセッションID削除は行いませんでした。）

3. サーバー側のセッションIDの無効化
セッション自体を破棄し、セッションIDも無効化して完全なログアウト状態にします。セッションの破棄が完了後、ログイン前の画面にリダイレクトします。今回の場合、以下の画像のようにトップ画面にリダイレクトします。

以上がログアウト機能についての説明でした。

参考：
PHP: session_destroy – Manual
PHPでセッションを完全に破棄する方法 – プログラマはサイコロを振らない

まとめ

ログイン/ログアウト機能を実装する際に、セッションやCookieの仕組みについて深く学ぶことができました。例えば、ChromeでAmazonにログインした後、EdgeでAmazonのURL（https://www.amazon.co.jp/）にアクセスした場合にログイン状態が維持されるのか、また、Chromeの別タブで同じURLを開いた場合にログイン状態が共有されるのかを検証しました。この検証を通じて、セッションやCookieがブラウザごと、またはタブごとにどのように扱われるかを具体的に確認しました。その結果、ログイン状態がどのように管理されているのかについて理解が深まりました。
今回学んだ知識を活かし、次はPHPフレームワークであるLaravelを使った実装に取り組んでいきたいと思います。Laravelでは、認証機能やセッション管理に便利な仕組みが既に用意されており、活用することでより効率的かつ安全なログイン/ログアウト機能を実装できるようなので、実装方法をしっかり学習したいと思います。将来的に、ユーザーに安心して使ってもらえるシステム構築ができるよう引き続き学習していきます。