挨拶

はじめまして。たしろと申します。
今回、LaravelとVue.jsを使った個人サービスを開発いたしましたので、紹介させていただきます。

開発したサービスについて

サービス名：Circuit Junction

URL : https://circuit-jct.com
GitHub : https://github.com/KyoheiTashiro/PF1

サービス概要

全国各地で開催されているサーキット走行会の情報を、
まとめて閲覧・管理できるサービスです。

作った理由

私の趣味の１つに、車でのサーキット走行があります。
そのサーキット走行ができるイベントのことを走行会といいます。
現状で走行会の開催情報を新たに調べようとすると、下記のようなことが起こります。

いくつかある走行会の主催団体のWebサイトを渡り歩き、日程や開催コースなどの情報を見比べないといけない。
いくつかあるWebサイトの一部を見忘れてしまい、情報の確認漏れが起きる。
自分の知らない主催団体があり、そこで開催される走行会の情報を知り得ない。

これらのような手間を省き、モータースポーツを楽しむ人々による走行会の情報検索・管理をもっと容易にしたいと思い、Circuit Junctionを開発しました。

画面イメージ

学習方法

独学からスタートして、その後に本サービスを作成しました。

学習教材

オンライン教材、各言語やフレームワークの公式サイトを中心に、
Qiita、StackOverflowなどのテック系Webサイトを活用して行いました。

機能一覧

ユーザー関連

ユーザー登録
ログインおよびログアウト
各種検索機能(開催月・開催コース・キーワード検索)
走行会情報のマイリスト管理

システム関連

走行会主催団体 Webサイトのスクレイピング
上記の自動化

技術と環境

フロントエンド

HTML / CSS
JavaScript / Vue.js
TailwindCSS

バックエンド

PHP / Laravel / PHPUnit

データベース

MySQL

インフラ

AWS(EC2 / RDS / Route53)

その他ツール

Git / GitHub
CircleCI

インフラ構成図

ER図

開発環境・本番環境

開発環境

Laravelのコマンドでローカルサーバーを起動し、
MySQLをインストールしてデータベースを構築しました。

本番環境

初心者向けの情報量の多さを考慮し、EC2上で環境構築しました。
データベースはRDSのMySQL、WebサーバーはApatchを使用しています。

技術選定理由

技術選定する上で、主に以下2点を重視しました。

初学者が学びやすく実装しやすいもの
現状、主流のWebアプリ開発で使用されているか

フロントエンド：Vue.js

JavaScriptのFWを使ってSPAでサービス開発をしてみたかったからです。
また、学習に当たって資料や情報が多いからです。
Reactと比較して、初学者としては学びやすいと感じました。

CSSフレームワーク：TailwindCSS

素早く綺麗なレイアウトを実現するために採用しました。
クラス名を考えなくてよく、HTMLタグ内に直接CSSを記述できるという斬新さに感動しました。
またBootstrapと比較して、現在流行り始めているのではないかと感じて使ってみました。

バックエンド：Laravel

PHPのFWを使ってみたかったからです。
学習にあたって、資料・情報が豊富で、採用企業も多いと思い使ってみました。

工夫した点

スクレイピング

Goutteというパッケージを使用して、スケジューラで定期実行しています。
今後スクレイピングするwebサイトの内容が変わり、
コードの修正が必要になる可能性を考慮して、
スクレイピングの処理は特に可読性・保守性の良さを意識しました。

検索API

サービス内で「開催月」,「開催コース」,「キーワード」でイベントを検索するため、APIを作成しました。
パフォーマンス向上のため、シンプルなリクエスト/レスポンスとなるよう考慮しました。

UI / UX

ユーザーがイベントを探す際、見たい情報を簡潔に見やすく表示できるよう意識しました。
またサービスにSPAを組み込むことでユーザーが迅速にイベントを探せるようにしました。

感想

今回初めて個人サービスを1から開発して、日々手探りが連続する楽しく＆大変な日々でした。

もう完成したと思った機能や処理でも、あとあと開発が進む中で新たな改善案や全く別の良い方法を知り、
コードを1からまるっきり書き直したことも何度もありました。
そういったことを繰り返し、当たり前ですが学ぶべきことはまだまだ多くあると実感しました。

また、サーキットを一緒に走る友人にも途中で意見を聞きながら開発を進めることで、
自分では思いつかなかいアイデア・改善案を得られ、ユーザーの意見も取り入れた良いサービス作りが出来たと思います。

想像の何倍も時間がかかり大変な開発でしたが、サービスを使ってくれた友人たちから「便利なもの作ってくれてありがとう！」と言ってもらい、とても満足です。

今後も、趣味である車やバイク、キャンプなどにおいて、私だからこそある経験と目線で誰かのためになるサービスを生み出したいと思います。

最後まで読んでいただき、ありがとうございました！