🔰独学でサッカーの試合通知をするwebアプリ『Kickoff Reminder』を作成しました ⚽️【Laravel / Vue / AWS】

Last updated at 2024-03-25Posted at 2024-03-25

はじめに

この記事では、実務未経験から独学で作成したwebアプリ「Kickoff Reminder」について紹介しています。
また、webアプリを作成するにあたって、工夫した点、学習プロセスなども書かせていただいております。良ければご一読ください。

作成者

1999年生まれ
大学までサッカー部
フリーター中にwebエンジニアに興味をもつ
2023年から独学でwebアプリ開発を開始
現在バックエンドエンジニアを目指して就職活動中
X(Twtter) : https://twitter.com/houdin111

1. 作成したアプリ紹介

概要

名称 : Kickoff Reminder

『Kickoff Reminder』は、サッカーファンに向けた試合通知サービスです。

ユーザーの好きなチームをお気に入りするだけで、試合通知をLINEやメールで受け取ることができます。

URL : https://kickoffreminder.com
GitHub : https://github.com/sprout90210/KickoffReminder

主な機能

チームや大会情報の詳細表示
自動データ更新
試合通知
チームのお気に入り登録・解除
認証機能（登録、ログイン、パスワードリセットなど）
LINEログインによる外部認証

画面イメージ

※デザインが変更されている場合があります。

チーム,コンペティション詳細画面

お気に入りチーム管理

通知設定,通知予定の試合

認証画面

レスポンシブ対応

通知メール

※このようなメールが届きます。

2. このアプリを作った理由

なぜこのアプリを作成したのか

私は大学までサッカーをしていた事もあり、サッカーの試合を見るのが好きでした。特に海外サッカーはレベルが高く、日本人選手も多く所属していることから、自分を含め日本でも多くの視聴者がいます。

しかし海外サッカーを視聴する際に以下のような問題がありました。

時差の関係上、深夜〜早朝に試合が行われるため、忘れてしまうことが多い
試合があるか調べるために、毎回時間がかかる
試合のたびにリマインダーをセットするのが面倒

そこで、自分の好きなチームの試合があるたびに自動的に通知してくれるサービスが欲しいと考え、このWebアプリを作成しました。

3. 使用技術

※バージョンは更新されている場合があります。

フロントエンド
- Vue 3.3.4
- Vuex 4.1.0
- Vue Router 4.2.4
- Tailwind CSS
バックエンド
- PHP 8.2.17
- Laravel 9.52.16
AWS
- VPC
- EC2
- SES
- S3
- RDS (MySQL)
- Route 53
その他
- LINE API
- football-data.org API
- Docker
- GitHub Actions
- Redis
- nginx
- Postman
- phpMyAdmin

主な技術選定理由

Laravel(PHP)
バックエンドには、Laravel(PHP)を採用しました。
これは、セキュリティ、テスト、データベースの操作など、Webアプリ開発に必要な多くの機能が簡単に利用できるためです。
また、Laravelは学習リソースが多く他のフレームワークより学びやすい点も決め手になりました。
Vue.js
まず、迅速なページ遷移を実現するために、SPAを採用することにしました。
そのうえでフロントエンドにVue.jsを選定した理由は、初学者にも扱いやすく、導入が手軽で開発を素早く始められるからです。
AWS
AWSをインフラに選定した理由は、スケーラビリティや多種多様なサービスなど、アプリのニーズに応じて柔軟に対応できるクラウドサービスだからです。

4. 基本設計

ER図

AWS構成図

5. 作成から完成までをふりかえって

工夫したこと

外部APIの呼び出し制限への対策

外部APIの呼び出し制限への対策として、cronジョブを用いて定期的にデータを取得し、データベースに保存するアプローチを採用しました。

これにより、ユーザーがアクセスするたびにAPIを叩くことがなくなり、呼び出し回数を一定に抑えることが可能になりました。

また、チーム名などの英語で提供されるデータを日本語にしてユーザーに分かりやすく提供することも可能になりました。

再利用性

アプリに統一感を持たせたかったので、できるだけ再利用可能なコンポーネントやCSSを意識しました。

苦労したこと

AWS

インフラ周りに一番苦労した気がします。
メールを送るためのSESや画像保存用のS3など、それぞれのサービスの使い方を覚える必要があった印象です。それのおかげで、コーディング以外の知識もついたと思いました。

外部API

アプリケーションの機能を実現するために、どのデータを取得すべきか検討する過程は、予想以上に時間がかかりました。
また、データの内容によって表示部分を変えたりする必要があったため、APIから返ってくるデータのパターンを網羅する必要がありました。
（statusがTIMEDなら試合を表示、SCHEDULEDなら試合時刻だけ非表示など）

Git

Git-flowのブランチの使い分け方や、コミットの粒度、コミットメッセージの内容などかなり迷う部分でした。今回は個人開発なのでなるべくシンプルにしましたが、実務ではもっと詳しく、分かりやすくする必要があるんだろうなと感じました。

今後の課題

特に改善・追加したい点は以下の通りです。

Next.js,Nuxt.jsやTypeScriptの導入

フロントエンドの可能性をさらに広げるために、SSR(サーバーサイドレンダリング)をサポートするNext.jsやNuxt.jsへの移行を検討しています。

また、TypeScriptを導入して保守性にも優れたWebアプリケーションを目指したいと思っています。

デプロイの自動化

現在、GitHub Actionsを利用して自動テストを実施していますが、自動デプロイまで可能にしたいです。

新機能の追加

APIに49€ほど払えば他のデータも取得可能みたいなので新機能開発もやっていきたいです。

6. 独学での学習プロセス

基本情報技術者試験(1ヶ月)

アプリと直接関係ありませんが、web技術を学ぶにあたり、基本から学ぼうと考え、基本情報技術者試験の学習をしました。情報系の学校などを出ていない事もあり、web技術の基本や名称などを学ぶ上で役立ちました。

プログラミング学習(約半年)

初学者向けと評判の高いPHPから学習を始めました。

MAMP環境で開発し、PDOを活用した実験的なアプリを作成し、レンタルサーバーにデプロイするなどの経験を積みました。Eloquentを触れる前にSQLに触れたのは、良い経験でした。

webアプリの開発(約半年)

Vue.jsやAWSの学習をしながら手さぐりでwebアプリの開発を始めました。

そのため、途中で使用技術を変更することや、開発に時間がかかることがありました。この経験から、要件定義や設計の重要性を痛感しました。

学習で苦労したこと

独学だったので、どれがベストに近い設計やコードなのか分からず悩むこともありました。

回り道だったことも多くありましたが、経験や自走する力を付けるには独学も良いんじゃないかと思いました。

学習時に工夫したこと

先に手を動かすことを意識しました。
まず実際に動かしてみて、うまく動かなければエラーを元に検証、考察を繰り返して必要なことがあればその都度調べて、また試してみるというような学習方法を実践しました。

また、バージョンや環境を考慮し、2つ以上の実装方法を調べてその中から自分の環境に合うのはどれかを考える意識を持って開発しました。

7. 参考にさせていただいたサイトや記事の紹介

webアプリ開発の過程で、参考あるいは使用させていただいたサイト、記事などの一部ではありますが紹介させていただきます。

8. おわりに

初めてのwebアプリ開発をしてみて、まだまだ学習しないといけない分野が多いなと感じました。

経験者の方から見れば、まだまだ理解の足りない点も多いと思いますがこれから改善を続けることが出来ればと思います。

今後エンジニアを目指して就職活動をしていきますが、ただ技術を学ぶだけでなく、ユーザーに価値のあるサービスを提供できるエンジニアになることを目標にしていきたいと思います。

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

誤字脱字や間違っているところ、アプリの不具合などありましたら、X(https://twitter.com/houdin111)までご連絡いただけるとありがたいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up