2025年 新入社員ブログ 高田05 [ローカル環境構築の利点と感想]

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

2025年 新入社員ブログ 高田04 [郵便番号から住所自動入力機能]

こんにちは、2024年4月に入社した高田です。
社内研修の一環として、Laravelを使って会員登録フォームを作成しました。その中で、住所登録時に郵便番号から住所を自動入力する機能を実装することになり、対応方法をいくつか調べてみました。
調査の結果、いくつかの実装方法があることがわかりました。今回はその中から以下の2つの方法を選び、それぞれを実際に実装してみたので紹介したいと思います。

1. YubinBango.jsを使用する方法
2. Zipcloud APIを使用する方法

まず、実装の下準備として、郵便番号、市区町村、その他を入力するテキストボックス、および47都道府県を選択するプルダウンメニューを作成しました。以下にそのコードを記載します。

ブラウザで表示すると以下のようなフォームが表示されます。

方法1:YubinBango.js

YubinBango.jsは、郵便番号から住所を表示する機能を簡単に実装できるJavaScriptのライブラリです。使用方法は非常にシンプルで、指定されたclass属性をHTML要素に追加するだけで機能します。
実際に実装したコードは以下の通りです。

ライブラリを埋め込み、class属性を指定する事で実装することができました。
実際にブラウザで確認すると以下のように、郵便番号(例:1080073)を入力した段階で郵便番号以降の項目(都道府県、市区町村、その他)が自動入力されます。

方法2:Zipcloud API

Zipcloudは、日本郵便が提供する郵便番号検索APIです。入力された郵便番号に基づいて対応する住所情報(都道府県、市区町村、町域など)を取得するためのサービスです。無料で利用可能で、JSONP形式で住所データを取得できます。

以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search

ブラウザにはこのように表示されます。

続いて以下のURLにアクセスしてください。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060

先ほどの画面とは異なり、ブラウザには住所が表示されています。

「https://zipcloud.ibsnet.co.jp/api/search」は、APIにリクエストを送信するための特定のURLであり、エンドポイントと呼びます。クライアントは、エンドポイントに対してリクエストを送信します。リクエストはインターネットを通じて送られ、APIサーバーに届きます。リクエストを受け取ったAPIサーバーは、内容を解析し、必要なデータをデータベースから取得します。
APIサーバーは、取得したデータを整理し、JSON形式などでレスポンスを作成します。作成したレスポンスはクライアントに送られます。
クライアントは受け取ったデータを解析し、画面に表示します。

今回のように、エンドポイントに「?zipcode=7830060」というクエリパラメータ(リクエストに含まれる追加情報)を付け加えてリクエストを送信すると、郵便番号「7830060」に対応する住所データを取得できます。

Zipcloud APIを使用して、郵便番号から住所自動入力機能を作成すると以下のようなコードになります。

実装の流れは以下の4ステップで行われています。

1. 郵便番号の取得
ユーザーが郵便番号を入力すると、その値をjQueryで取得します。取得した郵便番号が7桁の時に次の処理が実行されます。

2. APIへのリクエスト
入力された郵便番号を基に、Zipcloud APIへリクエストを送信します。APIは指定した郵便番号に対応する住所データを返します。

3. レスポンスデータの解析
APIから返ってきたJSON形式のデータを解析し、都道府県、市区町村、その他の情報を取得します。

4. フォームへの値の反映
取得した住所データを、都道府県のプルダウンメニューや市区町村・その他の入力フィールドに設定します。

ZipCloud APIによる住所自動入力機能は、jQueryの基本的な構文の知識があれば実装可能です。

参考
郵便番号検索API – zipcloud
新卒エンジニアがWebAPIを超わかりやすく解説します #初心者 – Qiita
郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法 | 大阪のシステム開発なら 株式会社ウィズテクノロジー
【jQuery】郵便番号検索APIを使って住所を自動取得する(zipcloud) | eguweb(エグウェブ)
【Javascript】郵便番号から住所を自動入力する方法 #JavaScript – Qiita
【初心者向け】郵便番号で住所検索をする外部APIを叩く #JavaScript – Qiita
実践jQuery講座 Ajaxの実装方法 | Inoma Create

まとめ

2つの方法を実装しましたが、YubinBango.jsはとても実装が簡単でプログラミング初心者におすすめできます。Zipcloud APIはjQueryの知識が必須のため、jQueryの基本的な構造や書き方に慣れてから使う方がよいかもしれません。今後もAPIやライブラリをうまく使えるようにjQueryやAPIの仕組みなどしっかりと学んでいきたいと思います。

LPIC試験について

こんにちは、2024年4月に入社した吉岡です。

私は社内研修で登録フォームの作成に取り組んできましたが、開発環境の構築を行う上でLinuxについての知識や触れる機会が不足していることを強く感じました。Linuxについての知識を体系的に深めるために、Linuxの試験であるLPIC-1 101試験(Ver5.0)の公式テキストに取り組みました。

今回の記事を通して、LPIC試験の概要とLPIC-1(101試験)の試験範囲や難易度および実際に学習した感想をお伝えします。

LPICとは

LPICは国際基準で認定されたLinux技術者認定資格であり、要求されるスキルレベルLPIC-1からLPIC-3までの3段階が設定されており、下位のレベルから受験していくことになります。ベンダー資格ではないのでLinuxの汎用的な知識について出題されます。

LinuCとの違い

Linucとは日本独自のLinux技術者認定資格であり、LPICをベースに日本市場で求められるスキルを基準に策定されています。要求されるスキルレベル1からレベル3、システムアーキテクチャの4段階が設定されています。

自分はまずLinuxの全体構造について知識を深めたかったので、LPICの方に取り組みました。

LPIC-1とは

LPICの最もやさしいとされる試験で、特にサーバーエンジニアやインフラエンジニアにとってメジャーな資格とされています。取得には101試験と102試験の2つを合格する必要があり、片方に合格してから5年以内にもう片方の試験を合格する必要があります。

LPIC-1(101)試験とは

試験時間は90分で、出題数は60問です。合格点は500点ですが、点数計算は正解率や問題の難易度によって1問の得点が決まるため、何問正解すれば合格できるかはテストの回によって変動します。

試験範囲は、システムアーキテクチャ、GNUとUnixコマンド、デバイス・Linuxファイルシステム・ファイルシステム階層標準です。102試験とは出題範囲が異なりますが、難易度としては同じくらいとされています。

勉強してみた感想

公式のテキストが500ページ近くあったのでとても大変でした。コツコツ勉強していき3,4か月掛けてテキストを一周したのですが、過去問を解いてみると知識があいまいなだったり抜けていたりするが箇所が多かったです。LPIC-1の資格取得はまだまだ遠いですが、学習前よりもLinuxに対しての親しみやすさを感じられようになったので取り組んでみてよかったです。また、Linucのレベル1だと仮想化やコンテナなどについても試験範囲になるそうなので、そちらについても勉強してみたいと思います。

参考:

LPI: 公式サイト

LPIC-1 Exam 101 学習テキスト

LPI :よくある質問

2024年 新入社員ブログ 高田03 [jQuery UI カレンダー機能実装]

こんにちは、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形式は、提供元のサーバーからライブラリを直接読み込む方法で、設定が簡単というメリットがあります。ただし、提供元のサービスが停止した場合に影響を受けるリスクがあります。
ダウンロード形式は、ライブラリをローカル環境に保存して利用する方法で、外部サービスに依存せず安定して利用できるという安心感があります。
今回は安定性を重視し、ダウンロード形式を選びました。

実際に公式サイトよりjQueryjQuery 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で実装したカレンダーには、以下の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年 新入社員ブログ 高田02 [ログイン/ログアウト機能実装]

こんにちは、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では、認証機能やセッション管理に便利な仕組みが既に用意されており、活用することでより効率的かつ安全なログイン/ログアウト機能を実装できるようなので、実装方法をしっかり学習したいと思います。将来的に、ユーザーに安心して使ってもらえるシステム構築ができるよう引き続き学習していきます。

2024年 新入社員ブログ 高田01 [PHP版会員登録機能実装] 

こんにちは、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版で学んだことを生かしながら作成していきたいと思います。

新入社員ブログ 松井(第6回)

こんにちは。松井です。
もう3月になってもうすぐ年度が替わりますね!

今回はフォローアップ研修について紹介します。
フォローアップ研修の内容について簡単に説明すると業種に問わず社会人として必要なスキルを習得するための研修で、8月から2月まで月に1回の頻度で参加しました。どれも仕事上に使う内容となっており、就職前でも知っておいたほうがいいという内容でした。

ビジネス基礎研修

8月はビジネス基礎で学ぶことは一人一人が成長するために意識しないといけないことについて学びました。心構えやマナー、コミュニケーションの取り方といった仕事のやり方についての内容でした。特に印象に残ったのは「多くの視点を持つ」ということです。小さな部分だけ見るのではなく、視点を広く見たり長くしたり、時には切り替えることも必要ということです。そのため、様々な視点を持って仕事に取り組めるようになりたいと思いました。仕事への取り組み方について「分からない」といったところがあれば基本的な内容としてこの研修の内容について思い出せるようにしたいと思いました。

報連相研修

10月は報連相研修で仕事上必要な情報が入手したり他の人に情報を渡すときに必要なスキルを学びました。報連相とは「報告」、「連絡」、「相談」の3つを表します。社内の内容であればスピード重視されるため正確性は重視されませんが、社外に対してはその逆でスピードより正確性が重視されます。私の場合、社外に対する連絡の機会が少ないため、まずはスピードを重視するようにして、可能であれば正確性を担保できるようにしたいと思います。そのため、まずは自分が読み手の立場になって「伝わりやすい」報告や相談をかけるようにしています。

ロジカルシンキング研修

11月はロジカルシンキング研修で論理的に考える方法について学びました。ロジカルシンキングとは論理的思考と訳され、誰にでも使いこなせるスキルで、問題解決や仕事促進に使えるスキルです。「研修を通じて直ぐに使えるようになりたい!」と思いましたが、論理的に考えることは直ぐに使えるものではなく、経験を積むことが必要だと思いました。そのため、論理的に話すための練習を積み重ねようと思いました。そのために、何か相談をする際には自分の意見をしっかりと持って上司に説明できるように努力しています。

文章力向上研修

12月は文章力向上研修で分かりやすい文章を書くためのスキルを学びました。報連相研修やロジカルシンキングと重複している内容に似ていますが、「文章を書くためのコツ」について学びました。この研修に参加したことによって、入社前と比べ、報連相といった社内でコミュニケーションをとる際により簡潔かつより分かりやすく説明できるようになったと思いました。

ストレスマネジメント研修

1月はストレスマネジメントではストレスとの向き合い方について学びました。この研修を通じて思ったことはストレスを重ねることがないように前向きな気持ちにしようということです。また、健康管理もストレスを予防するということに関わっていますので、健康管理に気をつけようと改めて思いました。

メンター研修

2月は4月から入ってくる後輩との関わり方について学びました。メンターというのは上司といった育成者とは別の役割をしており、新人にとって「安心できる存在」となります。メンターになるメリットとしては、新人社員といった育成される立場には気づかないことについて学べるということを知りました。研修で学んだことを来年度以降先輩社員として後輩と関わる際に活かせるようにしたいです。


フォローアップ研修で学んだ内容は仕事においてかなり役に立ったと思います。特に報連相研修や文章力向上研修では、困ったことや会議で決まったことなど情報の伝え方についてコツをつかめたと思いました!
最後までお読みいただき、ありがとうございました!

2023年 新入社員ブログ 松井真治(第1回)

こんにちは!
2023年4月に入社した松井真治です。

自己紹介


入社する前は工学系の大学でコンピュータについて学んでいました。
プログラミングは勿論、コンピュータに関する幅広い範囲を学んでいました。
卒業研究では、「オセロにおけるDueling Networkを用いたQ-learningの効果検証」をテーマにしました。初めて聞くワードが出てきて困惑している人が多いと思いますが、平たくいうと機械学習に関する研究をやっていました。そんな情報系の出身の私ですが、web系は未経験です。

外部研修

私は、4月中旬から5月末までの間外部研修に行ってきました。研修の間で学んだことは以下の通りです

  • IT基礎
  • Linux
  • プログラミング基礎(HTML,CSS,Javascript)
  • データベース(MySQL)
  • PHPプログラミング
  • Laravel
  • git
  • システム開発演習

IT基礎では、これからITで働くにあたって最低限覚えないといけない(それどころか基礎教養として重要)ことについて学びました。日常でも使う単語が多く、ITに関わっていなかった人たちでもわかるような内容でした。

Linuxでは、私たちが当たり前のようにできているファイルの作成やフォルダーの作成などをコマンドを使って行ったり、ファイルのアクセス権限の変更を行いました。GUIだと面倒なことをコマンドでできるのは便利ですね!

プログラミング基礎では、私たちがよく見るWebサイトの基本的な作り方について学びました。書いたサイトのコードは検証ツールで見れますので、外部に公開するときは注意が必要ですね!

データベースでは、データの検索からテーブル・データベースの操作を行いました。IDやメールアドレスといった重要な情報を入れるので、万が一のことがあったら大惨事です。データが破損したり、誤ってテーブルに入っている情報が全て消してしまったことありましたので、慎重に扱わないといけないことを学びました。

PHPプログラミングでは、PHPを用いて値を次のページに保持させたり、データベースへの干渉を行ったりしました。同じWebに関するプログラミング言語でもJavascriptとの違いをあげるとしたら、PHPはブラウザ側ではなく、サーバ側に干渉する言語であるということですね。また、PHPではデータベースと連携することができますが、非常に難しかったでした。

Laravelでは、Webアプリケーションのフレームワークとは何かから始まり、Webアプリケーションの作成を行いました。よく使われている処理をフレームワークとして統一できれば非常に便利ですね!そんなフレームワークの一例としてLaravelを使いました。例えばデータベースとの連携をLaravelで簡単に実現できるというのは大きなメリットです。しかし、研修の間で全て覚えることは難しく、概念しか覚えることしかできませんでした(笑)

gitでは、複数人で作業を分割して統合していくような際に使うことでバージョンの管理や不具合の発見についてわかりやすくするものといった内容でした。共同でシステム開発をする際に便利ですね!

最後に他社の方々と10日間という短い期間でシステム開発演習を行っていきましたが、私のグループは4人で教科書売買システムのWebアプリケーションを作るといった内容でした。3日間で設計、5日間でWebアプリケーションの作成、2日間で作成したアプリケーションについての発表の準備を行いました。多くのエラーやバグと立ち向かい、講師からの丁寧なアドバイスや解説のおかげもあり、無事Webアプリケーションを作ることができた他、Laravelのコードの書き方やgitの使い方について理解することができました。最終的に問題なく発表を行うことができ、研修を終わらせることができました!

本日はここまでです。
次回は内部研修について書きます。
最後まで読んで頂き、誠にありがとうございました!

新入社員活動記録Part.1(山本)

こんにちは。21年度入社の山本です。
入社から約3か月、今日までにいろいろな経験や学びがありました。
そこで今回から数回に分けて、私が行ったこと、その中から得た学びを連載形式でご紹介します。

自己紹介-

改めまして、こんにちは。21年度入社の山本です。
入社後の研修や学びをご紹介する前に簡単に、自己紹介をします。

私は、某工学系大学の情報学部でコンピュータについて勉強していました。
ハードというよりはソフト側です。
大学ではプログラミングはもちろん、ネットワーク関係、スーパーコンピュータを使った計算を勉強しました。
卒業研究では、「日本の官庁で最初に導入されたコンピュータ」について調べていました。
ちょっと歴史系っぽいですよね・・・。研究室でも異端な研究だったかもしれません・・・。

趣味はパソコンでゲーム。特にFPSが好きです。歴は長め。

そんなパソコン大好きな私ですが、Web系は未経験・・・。どんな苦難が待ち受けているのか・・・!?

外部研修へ

今年度からの新しい試みとして、入社から2か月は外部研修へ行きました。
「新入社員PHP研修」と銘打たれた外部研修では、お仕事の基礎となるプログラミングを学びます。
PHPとは書かれていますが、「そもそもPHPとはなんぞや?」となるわけです(プログラミング言語だということは知ってるけれど・・・)。
そんな私も安心。基礎の基礎から丁寧に学んでいきます。
周りの参加者の皆さんも未経験(新入社員研修だから当たり前ですね・・・)。
みんなで一人前のプログラマを目指すと思うと熱が入ります。

-研修の内容-

研修では、基礎の基礎から始まり、最後にはWebページを作れるようになるまで丁寧に教えていただきました。

新入社員PHP研修では、下記の項目を教えていただけます。

  • IT基礎
  • プログラミング入門
  • PHP入門
  • MySQL
  • Laravel
  • Linux入門
  • Git入門

IT基礎-

プログラミングを学ぶ前に、まずはWebの基礎から学びました。
IPアドレス・MACアドレス・TCP/IP・etc・・・。
この辺は大学でやったから簡単・・・かと思いきや意外と覚えていないものですね。
教科書はメモでびっしり。勉強になります!

-プログラミング入門

いよいよ、プログラミング!
手始めにHTMLを勉強します。
「HTMLはプログラミング言語ではない」なんて声もよく聞きますが・・・。細かいことは置いておきましょう。

HTMLはwebページを作るための言語。私たちがよく知るあのサイトやこのサイトもHTMLで書かれているんです!

作業を重ねるとだんだんwebページっぽくなっていきます。ワクワクしますね!

-Linux入門

HTMLの使い方を一通り教わると、Linux入門に入っていきます。
Linuxとは、WindowsやMacOSに数えられるOSのひとつです。ただし、WindowsやMacOSとは違い、様々なカスタマイズがあるので、どのLinuxを経験したかで操作が全然違います。

今回は、黒い画面にコマンドを打ち込んで操作する所謂CUI操作を学びました!
映画とかに出てくる小難しそうなアレですね!気分はスーパープログラマー!
映画での印象の通り、実際小難しいです!でも大丈夫!やり方は教科書に書いてあります!

このあたりのことをイメージだけでもつかめるようになると、お仕事が少し楽になりますね。実際、業務上で非常に助かっています!

外部研修でのことは一旦ここまで。Part.2へ続きます!

最後までご覧いただきありがとうございました!