PHPを学んでCtoC音楽イベント同行者マッチングサービスを開発してみた

自己紹介

はじめまして！
2023年12月に株式会社ドリーム・シアターに入社した26歳のWebエンジニアです。
もともとIT業界には携わっていましたが、実装経験が乏しく経験を積むため弊社に入社いたしました。

サービス概要

CtoC音楽イベント同行者マッチングサービス

MELDというサービスの見た目と挙動を参考にフロントエンド、バックエンドの実装を行いました。
管理者画面は自分で設計、実装を行っています。
https://meld.co.jp/

ライブ等の音楽イベントに一緒に行ける人を探して、マッチングすることができるサービスです。
以下のようなユーザーをターゲットにしています。

• チケットを持っていて、一緒にライブに行ける人を探している
• チケットが余っているので、持っていない人と行きたい
• チケットを持っていないので、余っている人と行きたい

ユーザーはイベントごとに自分の状態を登録できます。
自分のステータスに対し、適切なユーザーが表示されマッチングが可能になります。

機能一覧

ユーザー用

• アカウント登録、退会
• パスワード変更
• ログイン、ログアウト
• イベント一覧、詳細、検索機能
• お気に入り登録（Ajax）
• 参加ステータス変更（Ajax）
• プロフィール変更
• 参加予定、参加済ライブの確認

管理者画面

• イベント一覧、検索機能(参加人数、お気に入り数も表示)
• CSVインポート、エクスポート機能

使用画面イメージ

イベント一覧

イベントに参加（ステータス更新）

お気に入り

管理者画面

作ろうと思った理由、経緯

プライベートで自分だけが興味があるイベントに行くときは、一人で行くことがよくありました。
同じ趣味の人とイベントに行けたら楽しそうだな～と感じており、イベント系のアプリケーションを開発したいと考えていました。
社内で相談させていただいたところ、CtoC音楽イベント同行者マッチングサービスのアイデアをいただきました。

無料PHPスクール(Pスク転職)の卒業成果物(就活される方は面接用成果物/ポートフォリオ)として、Laravelなどのフレームワークをあえて使わず、生(素)のPHPで書いたオブジェクト指向かつ、MVC式ソースコードの成果物(Webアプリ／面接用ポートフォリオ)が必要なため、(就活をされる、他のスクール受講生の方々と同じように)、開発しました。

使用技術、ツール

• バックエンド
  • PHP 8.2
  • Twig 3.8
• フロントエンド
  • Tailwind CSS 3.4
  • Font Awesome
  • jQuery
• DBMS
  • MySQL
• ツール
  • GitHub
  • Visual Studio Code
  • dbdiagram.io

DB

設計
テーブル数は23個です。
1つのイベントに対し、複数のアーティスト、ジャンル、料金が紐づく一対多の関係になっています。
ユーザー情報には、年代、性別、都道府県、好きなジャンルの各データに対応するマスタのIDを登録し、登録可能な値はそれぞれのマスタのデータに限定しています。

ER図
dumpからER図を作成してくれるdbdiagram.ioを用いてER図を作成しました。
※以下記事ではダンプファイルの作成にツールを使っていますが、自分はphpMyAdminの機能でダンプファイルを作成しました。

技術選定の理由

PHP、Twig、jQuery、MySQL
無料PHPスクール(Pスク転職)にて、学習を行ったため。

Tailwind CSS
BootStrapを使用した経験があり、他のCSSフレームワークを触ってみたいと思ったため。

生PHPで開発するメリット、デメリット

メリット

言語や各仕組みの理解が深まる
自分で1から開発することで、フレームワークの中身を理解することができます。
メールアドレスでのユーザー登録時に、トークンによる認証機能を自分で開発しました。
実際に開発することで、各機能がどのように実現されているのかを理解することができました。

デメリット

品質の管理が難しい
コードが冗長になったり、書き方に統一感がなかったりと品質が落ちてしまいました。
全て1から開発することで品質管理の工数がかかります。

車輪の再発明が起きる
長所の逆です。
既に誰かが開発したものを自分1から作る必要があります。

Laravelはインストールした段階でフォルダ分けされており、コードの自動生成、Seederなど便利な機能が豊富です。
一度生PHPで開発を行うことで、フレームワークの有難みを実感いたしました。

学習期間、開発期間

学習期間は約3か月、開発期間は約1か月です。
HTML、CSS、SQLは読み書きできる、JavaScript、PHPはコードを見たことあるくらいのレベルでした。

学習期間

8月～9月
書籍でPHPを学習
10月～11月
無料PHPスクール(Pスク転職)にて学習
PHP、JavaScript、MySQL、Linuxコマンド、Git等開発に必要な技術について学習しました。

無料PHPスクール(Pスク転職)での学習期間は23日間になります。

開発期間

12月～1月上旬
CtoC音楽イベント同行者マッチングサービスの企画～開発、テスト

学習内容

学習内容
無料PHPスクール(Pスク転職)では、PHPの環境構築から学び始めることができます。変数、条件分岐、繰り返し…とプログラミングの基礎から学び、最終的にオブジェクト指向、MVCモデルのアプリケーションを開発します。
全8回の講義を23日間で行います。

学習方法
各講義の流れは以下のようになっています。

	学習内容
予習	ソースコードの写経
講義前半	講師によるソースコードの解説
講義後半	自分の言葉でソースコードをアウトプット
復習	四択のWebテスト 問題文の仕様をもとに自分で設計から開発まで行う小テスト

自己成長

無料PHPスクール(Pスク転職)で学んでから、自分のレベルが急に上がった感覚がありました。具体的にはコーディング時に詰まることが減り、スラスラ読み書きできるようになりました。

自己成長の理由は2点あります。

• 自分の言葉でアウトプットしたため
• プログラミングする時間が増えたため

自分の言葉でアウトプットする
ソースコードを声に出して読むことで、頭で考えるだけに比べて早く理解できました。

プログラミングする時間が増えた
講義は1回8時間、週2回の計16時間ですが、予習、復習を含めると週2~30時間はプログラミングをしていました。
その結果、プログラミングをすることが習慣化しました。

できることが増える！→楽しい！→学習する！→できることが増える…といういいループに入っていきました。

難しかったところ

CSVインポート機能

管理者画面では、イベント情報をCSVでインポートできる機能を実装しています。
機能の設計、実装が難しく、完成まで2日半ほどかかりました。
エラーが起きてもわかりやすい仕組み、エラーが発生しづらい仕組みを意識しました。

CSVの各項目がDBに登録できるか、データ上問題ないかをチェックしています。
エラーがある場合は何行目のどのカラムが原因なのかを赤文字で表示しています。
エラーチェックの部分に時間がかかりましたが、自分の満足のいくものができました。

インポート画面

インポート成功時

インポート失敗時

テンプレートダウンロード
CSVのテンプレートをダウンロードする機能を追加しました。
テンプレートを用いてCSVを作成することで、エラーが発生しづらくなります。

一対多、多対多部分の難しさ

今回のCtoC音楽イベント同行者マッチングサービスは、自分のステータスにあったユーザーが表示される多対多の作りになっています。イベントに複数のアーティスト、ジャンル、料金が結びつくといった一対多の部分もあります。取得する情報が場所によって異なるため、それに応じたDB、ロジック、画面表示の設計が非常に複雑かつ難しかったです。

感想

サービスをWebアプリケーションという形にできたのは非常に良かったです。
同時に、フレームワーク、インフラ、チームでの開発手法など学ぶべきことがまだまだたくさんあると感じました。
まずはフレームワークから学び、1つ1つ積み上げていきたいと思います。

1月中旬から社内でLaravel、Vue、React、SPA開発の社内研修がありました。
先輩のエンジニアにご教授いただき、学んだことを活かしてフレームワークを使った開発に取り組んでいます。

弊社について

弊社では一緒に働けるWebエンジニアの方を募集しています！
また、無料PHPスクール(Pスク転職)も運営しています！
無料PHPスクール(Pスク転職)はカリキュラムが充実しており、最終的に自分でWebアプリケーションが開発できるようになります。
この記事のWebアプリケーションもほとんど無料PHPスクール(Pスク転職)で学んだ内容を応用して作成しています。

ご興味がありましたら、下記リンクから弊社のことを知ってもらえると非常に嬉しいです！

弊社について
https://dt30.net/
無料PHPスクール(Pスク転職)について
https://www.dt30.net/phpschool/