自己紹介
転職活動中で、現在、LaravelとNuxtを独学で学習中です。
開発したサービスについて
サービス名：Drinko
サービス概要
ノンアルコールのソフトドリンクに特化したレシピ紹介サイトです。
コマンドで、The CocktailDBというAPIから取得したドリンクの情報を翻訳してDBに保存し、表示しています。
サービスを作成した経緯・背景
- アルコールが飲めない、コーヒーも飲めない自分が、最近趣味でソフトドリンクを作ることにハマっていて、色々なソフトドリンクを作って、楽しみたいと思ったため
- 自分のようなアルコールやコーヒーが飲めない人にも、飲み物の楽しみを知って欲しいと思ったため
画面イメージ
トップページ
全ドリンクの中から、ランダムで取得したドリンクを3件オススメとして表示しています。また、検索ボックスを配置しています。
ドリンク一覧ページ（検索結果ページ）
1ページにつき、12件ずつドリンクを表示しています。
ドリンク詳細ページ
ドリンクについての詳細情報を確認することができます。また、お気に入りボタンを設置し、SNS（X、Facebook、LINE）のシェアボタンも設置しています。
マイページ
お気に入りに追加したドリンクを一覧で確認することができます。
機能一覧
検索機能
| 機能 | 概要 |
|---|---|
| 検索機能 | フリーワードからドリンクの検索が可能。トップページ及びヘッダーに検索ボックスを配置 |
ドリンク表示機能
| 機能 | 概要 |
|---|---|
| ドリンク一覧表示機能 | 登録されているすべてのドリンクと、検索結果のドリンクを1ページにつき12件表示 |
| ドリンク詳細表示機能 | ドリンクの詳細情報を表示、SNS（Facebook、X、LINE）のシェアボタンも配置 |
お気に入り機能
| 機能 | 概要 |
|---|---|
| お気に入り機能 | お気に入りボタンをクリックすることで、登録、解除が可能。ドリンク詳細ページに配置 |
マイページ機能
| 機能 | 概要 |
|---|---|
| マイページ機能 | お気に入りに登録したドリンクを一覧で表示 |
認証機能
| 機能 | 概要 |
|---|---|
| 新規登録機能 | ユーザー名、メールアドレス、パスワードで登録可能 |
| ログイン機能 | メールアドレス、パスワードでログイン可能 |
| ログアウト機能 | ユーザーメニューのログインボタンをクリックすることでログアウト可能 |
退会機能
| 機能 | 概要 |
|---|---|
| 退会機能 | マイページから退会可能 |
使用技術・環境・設計について
フロントエンド
- "nuxt": "^3.11.2",
- "daisyui": "^4.12.2"
- "sass": "^1.77.5"
- "@nuxt/ui": "^2.17.0"
- "@nuxtjs/seo": "^2.0.0-rc.10"
- "vue-toast-notification": "^3.1.2"
- "@stefanobartoletti/nuxt-social-share": "^0.7.0"
- "nuxt-sanctum-auth": "^0.4.7"
- "vee-validate": "^4.13.1"
- "yup": "^1.4.0"
バックエンド
- "laravel/framework": "^11.9"
- "php": "^8.2"
- "laravel/sanctum": "^4.0"
- "stichoza/google-translate-php": "^5.1"
データベース
- MariaDB：11.4.2
インフラ
- フロントエンド：Vercel
- バックエンド：AWS(VPC,EC2)
- データベース：AWS（RDS）
その他ツール
- VSCode
- Git/Github
- Docker（Laravel Sail）
- Let's Encrypt(SSL証明書発行に使用)
- Figma
技術選定理由
フロントエンド：Nuxt
役割：ブラウザで表示される画面の構築、ルーティング、APIリクエストを送信、SPAで運用
採用理由：
- 前職で少し使用したことがあり、導入コストが他と比較して少なかったため
- ルーティングをpagesフォルダのファイル構成から自動で行ってくれるため
バックエンド：Laravel
役割：フロント側からのリクエストを返す、APIサーバとして運用
採用理由：
- 前職で使用したことがあり、導入コストが他と比較して少なかったため
- 組み込み機能が豊富であり、開発効率が上がるため
インフラ：Vercel
役割：フロントエンドの本番環境へのデプロイ
採用理由：
- サーバー構築、デプロイ作業などのインフラ構築の工数を削減できるため
インフラ：AWS(VPC,EC2,RDS)
役割：APIサーバー、DBサーバーの本番環境へのデプロイ
採用理由：
- クラウドサービスの中でシェア率一位
- 実務で使用している企業が多いこと
DB設計
ER図
開発の振り返り
開発期間
2024年6月中旬〜6月末まで（約3週間）
作成時に意識したこと
素早く開発し、安定性の高い構築にする
今回は、6月末までの開発と決め、時間がない中での開発でした。フレームワークを最大限活用することで、フレームワークのエコシステムの中で培われた安定性がある構築で、素早く開発することができると考えています。そのため、機能を絞り、フレームワークを最大限活用し、開発をすすめました。
作成時に苦労したこと
Nuxt.jsの使用
実務でNuxt2を少し使用したことがある程度で、ほとんどイチからの勉強であったため、フロントエンドの開発に苦労しました。公式ドキュメントを読み込んで対応しましたが、理解を深めるため、Nuxtを使って様々なアプリを作っていこうと思います。
AWSでのデプロイ
ドメインを取得することからのデプロイ作業が初めてかつ、AWSを使用するのも初めてであったため、デプロイ作業とAWSの理解に苦労しました。また、EC2の環境構築について、ターミナルでLinuxコマンドを使用して構築しましたが、勉強が足りていないことを実感したので、エルピック等の資格を取ることも視野に入れつつ、勉強していこうと思います。
今後の課題
-
テストコードを書く
6月末までの完成を優先させたため、テストコードが全く書けていません。LaravelにはPHPUnitという組み込み機能があるので、それを活用し、テストコードを書きながら開発を進めることが今後の課題です。
→2024.07.16追記・・・ソフトウェアテストを導入しました。詳細はこちらの記事をご覧ください（ https://qiita.com/shunport/items/d3bb795c139c978c19ca ） - 翻訳の見直し
今回は、翻訳を「stichoza/google-translate-php」というライブラリを使用して行いました。翻訳結果を確認したところ翻訳精度があまり高くなかったため、ChatGPT等の生成AIのAPIを活用し、精度をあげることや、管理画面を作成し、手作業で修正し易く改良することで、より使いやすいサービスにしたいです。 - 機能の追加
投稿機能や、ユーザーフォロー機能、管理画面でのドリンク情報編集機能など、追加したい機能があったのですが、時間の関係上省きました。これらの機能についても、時間を見つけて、機能追加していきたいです。
個人でのサービス開発を通じて学んだこと・成長したこと
企画からデプロイまでの全体像の理解
前職では、未経験で就職し、業務と勉強に追われていたため、個人でアプリケーション開発をしたことがありませんでした。今回のアプリケーション開発で、部分的にやっていたことの意味や全体像がよりハッキリとわかるようになりました。
自分のアイデアを形にする面白さ
前職でも部分的な機能について。自分のアイデアを形にすることの面白さは感じていましたが、0からサービスを作り上げることで、より達成感を得ることができました。
さいごに
サービスを自分の手で作れるようになりたいと思い、未経験からエンジニアに転職しました。初めてサービスを作ってみて、自分でイチから考えたことが実現できる楽しさを実感できたので、今後も開発をジャンジャンやっていきたいと思います。
また、出来上がったサービスについて、セキュリティへの対応やユーザービリティ、コードの可読性・再利用性について、まだまだであると思っています。セキュリティやユーザビリティについて、また、コードの可読性・再利用性を高められるよう、公式ドキュメントや書籍などを参考に学習し、できるエンジニアになれるよう引き続き頑張っていきます！