1.はじめに

はじめまして。さとう(@sato_24_en)と申します。
現在営業職として働いていますが、業務でSaaSアプリを利用したことをきっかけにWEBアプリケーションに興味を持ち、バックエンドエンジニアへの転職を目指して独学で学習中です。
今回は学習のアウトプットを兼ねてポートフォリオを作成したので、そのまとめを投稿します。

2.作成したアプリについて

概要

「らじれぽ」https://radirepo.com/

ラジオ番組情報の登録と、視聴メモを残すことが出来るアプリです。

作成背景

ラジオを聞くことが好きで、大学時代から現在まで聞き続けています。社会人になってからは他の事をしながら視聴する場面が多くなり、各回でどんな話をしていたかを思い出すことが難しくなってきました。
そこで、過去の放送を聞き返したり、年末に1年の振り返り放送のときに役立つような、聴取した記録を残せるアプリを作ろうと考えました。

3.作成目的

・過去放送を簡単に振り返りたいという自分自身の課題を解決したい
・学習した内容のアウトプット
・独学でのアプリケーション作成を通して、プログラミングへの意欲確認

4.使用技術

フロントエンド

・HTML/CSS/MDBootstrap4
・Vue.js 2.6.12

レスポンシブ対応とレイアウトを簡単に整えることが出来るためBootstrapを使用しました。
また、お気に入り番組機能と登録番組一覧表示のために、Vue.jsを部分的に使用しています。

バックエンド

・PHP 8.1.9
・Laravel 9.11.0

私が就職を希望する地域の企業ではPHP・Laravelが採用されていることが多かったため、PHPを選定しました。
参考書ではLaravel6系での説明でしたが、不明点を自分で調べて実装することが実際の業務に近くなり良い経験になると考え、最新版の9系を選択しました。

インフラ

・MySQL 8.0.30
・nginx 1.20.2
・Docker 20.10.17
・Composer 2.2.7
・AWS(VPC,EC2,RDS,Route53,ELB)

OSSでコストが抑えられる、標準化されていて参考にできる記事が多いと考えてLEMP環境を構築しました。
また、サーバー周りの知識の習得を目指し、本番環境にAWSを選定しました。

その他　

・GitHub　
・VScode
・PHPUnit

5.インフラ構成図、ER図

インフラ構成図、ER図ともにVScodeプラグインのdraｗ.ioを使用して作成しました。

インフラ構成図

HTTPSリダイレクトのためにELBを使用しました。

ER図

6.機能一覧

○ ラジオ番組関連
・情報登録・編集・詳細・削除（削除は権限者のみ）
・登録済み番組一覧表示
・お気に入り番組登録・解除

○ 視聴メモ関連
・情報登録・編集・詳細・削除（削除は投稿者のみ）
・投稿済み視聴メモ一覧表示

○ ユーザー認証関連
・ユーザー登録(Google ログイン)
・ログイン/ログアウト
・パスワードリセット
・プロフィール編集

○ その他
・キーワード検索機能(登録済み番組、投稿済み視聴メモ)
・ソート機能(登録済み番組)
・レスポンシブデザイン対応

7.自分なりに工夫した点

○ラジオ番組表をVue.jsを使って表示
・自分の好きな番組が登録済みかすぐ調べられるように、
登録済み番組の一覧表示と検索機能、番組名と放送局でのソート機能をajaxを用いて実装しました。

○検索機能
・番組名やコメントの内容から過去の視聴メモを検索出来るようしています。

○画像登録
ユーザーページからアイコンを登録することが出来ます。
また番組情報ページから番組イメージの追加ができます。
番組イメージが登録済みの番組については、視聴メモの背景に番組イメージが表示されます。

8.作成中大変だったこと

・データベース
当初のデータベース設計が甘かったことで、テーブルにカラムを追加するたびにリセットしていたので、かなり無駄が多かったと今になって思います。

・Vue.js
利用していたSaaSアプリがSPA構成だったため、アプリケーション全てではなくとも、部分的にでも非同期通信を導入したいと考えていました。そこで登録済み番組一覧表とお気に入り機能についてはVue.jsを使いましたが、そもそものJavaScriptの文法から怪しく、取り組み始めてから完成までかなりの時間を要しました。

9.作成中に意識したこと

○タスクをIssueに登録
・やるべきタスクをGithubのissueで管理しました。
mainブランチから開発用ブランチを切って作業。終わり次第コミット&push、プルリクエストを作成してマージ、ローカルリポジトリを更新といった流れで進め、mainブランチで開発することがないように注意して進めました、

○パフォーマンス改善
・debugbarを使って発行されるクエリを確認し、クエリが多く発行されてしまうコードに対してeagarロードを使ったパフォーマンス改善を行いました。

○エラーが出る理由を理解する
・なぜそのエラーが起こっているか原因を理解することを意識しました。
エラー解決に数日かかったことも多々ありましたが、根気よく一つ一つ原因を探りながら進めました。
自分の場合は一度に多くコードを変更したことで、根本原因が分からなくなるケースが多かったように感じます。

10.今後追加したい機能

・CICDツールの導入
・おすすめ番組機能
・番組ランキング（年代、居住地ごと）etc...

11.作成しての感想

サービスとして提供するレベルに達するには、技術的にまだまだ不足している点が多いと作りながら実感しました。
ただ、コードを書いてアプリケーションを作成し本番環境に公開するという一連の流れを経験できたことは非常に良い経験になりました。
継続して学習を続け、胸を張って公開できるアプリケーションを作れるようになりたいという思いが強くなりました。

12.参考