はじめに

約2ヶ月の制作期間を経て、Webアプリケーションのデプロイがひとまず完了しました。
今年の7月中旬からプログラミングスクールに通い、PHPやLaravelといった技術を習得しながら進めたプロジェクトです。

私はもともとWeb系言語未経験で、個人開発の経験もありませんでした。そのため、成果物を完成させるためには、疑問が生じた際にすぐに質問できる環境が必要だと感じ、プログラミングスクールに通うことを決意しました。

この記事では、自分の理解を深めるためにも、今回の成果物であるWebアプリケーションについて紹介します。制作過程で学んだことや、直面した課題とその解決方法についても触れていきたいと思います。

目次

自己紹介
アプリケーション概要
使用技術
制作過程と内容
振り返り
おわりに
追記

自己紹介

地方国立大学院工学専攻情報系修士1年
プログラミングに関わる経歴

大学の講義にてJava、Python、SQLを勉強
研究室で数値計算にPythonを使用
プログラミングスクールにてPHP、Laravelを勉強(今年7月)

成果物制作前のスキルとしては、

実務経験、個人開発なし
HTML、CSS、JavaScriptいずれも未経験

アプリケーション概要

MyFullCourse

サービスの概要

このアプリは、漫画「トリコ」の「人生のフルコース」にインスパイアされ、あなた自身の食の想い出を形にする場です。

オードブル(前菜)、スープ、魚料理、肉料理、主菜(メイン)、サラダ、デザート、ドリンクの８つのカテゴリーに、人生で一番美味しかった食べ物や、忘れられない味、そしてその背後にある物語を詰め込んでください。

あなたの人生を彩った「フルコース」を完成させ、他の人と特別な食の想い出を共有しましょう。

アプリはこちらからどうぞ：MyFullCourse
テストアカウント
メールアドレス：hogehoge@test.com
パスワード：u7DRMM8QPEMkaWL

GitHubのリポジトリ

制作背景

今年の3月、地元の友人と岩手県の小岩井農場にドライブへ出かけました。
到着したものの天気はあいにくの猛吹雪。車から降りるのもためらうほど悪天候でしたが、せっかくの機会なので少しだけ見て回ることにしました。
駐車場から入口までのわずかな距離でも私たちの体は限界を迎え、近くの施設へ早々に避難。
偶然にもそこは食事処で、冷えた体を温めるために「かぼちゃのクリームポタージュ」を飲むことにしました。
そのスープは、誇張なく、人生で一番美味しいと感じたものでした。
具材が一切入っていないにも関わらず、甘みと塩味の絶妙なバランス、そして冷え切った体を温めるその一杯が、私たちを優しく包み込んでくれました。
友人の幸せそうな顔、せっかくのドライブ日に猛吹雪という状況のおかしさ、全てがその味を特別なものにしてくれたのだと思います。

食事は、その時の状況や誰と食べたかで印象が大きく変わることは言うまでもありません。
人生で最も思い出に残る料理は、高級料理店の一皿かもしれないし、母の得意料理、あるいは失恋した日のスイーツかもしれません。

料理の味だけでなく、誰と食べたか、誰が作ってくれたか、食卓にどんな背景があったかというエピソードを共有できる場を作りたいと考え、今回の制作に取り組みました。

メイン機能の使い方

ユーザーの想い出の一皿を投稿
カテゴリ、料理名、味やエピソード、写真、食べた場所を入力してフルコースメニューを投稿できます。

カテゴリごとの表示やお気に入りの表示機能

検索機能
「辛い」と検索すると、辛い料理と辛い想い出に関する料理が出てくるかもしれません。
そういった意図しない検索結果も出てくるのもこのアプリの面白さだと思っています。

プロフィールにフルコースが表示
投稿をフルコースメニューとして見ることができます。

アプリ開発で工夫した点

1カテゴリ1投稿の設計
本アプリのコンセプトは「人生で最も心に残る一品」を共有することにあり、Judgementsテーブルを用いて各カテゴリに1つの投稿だけを許可しています。
この設計により、各ユーザーの投稿が特別なものとして感じられる仕組みになっています。しかし、この仕様だと投稿頻度が少なくなり、アプリに活気が欠ける可能性があります。
そこで、フルコース投稿とは別に、食に関する投稿を自由にできる機能を追加することを検討しています。
画像複数枚投稿
1つの投稿に対して複数の画像を投稿できるようにするため、postsテーブルとは別にimagesテーブルを作成し、リレーションを構築しました。さらに、1投稿につき最大4枚まで画像を投稿できるようバリデーションを実装し、編集時には画像を削除・追加しても最大枚数を超えないよう工夫しています。
Google Maps APIの活用
Google Maps APIを使用し、GeoCodingで住所が正確に入力された場合、その住所とともに緯度・経度をpostsテーブルに保存し、投稿を表示する際にGoogle Mapを表示させる機能を実装しました。アプリの特性上、食べた場所が「実家」などの場合は、「食べた場所：実家」と表示し、Google Mapは表示しない仕様としています。

実装機能

ユーザー管理
フルコース投稿機能(CRUD)
画像投稿機能(Cloudinary)
マップ機能(Google Maps API)
カテゴリ
投稿検索機能
いいね機能
投稿への返信機能
プロフィール編集・閲覧機能

使用技術

使用言語・FW

PHP
HTML
CSS(Tailwind CSS)
JavaScript
Laravel(ver.10.48.20)

環境

AWS(Cloud9)
Github
Google Maps API
Cloudinary
PostgreSQL

デプロイ

Heroku

データ構成

選定技術の採用理由

ここでは作成したアプリケーションで使用した技術について採用した理由を説明します。
PHP/Laravel：

ブログ作成、検索、ログイン機能の実装が必要だったため
今回のアプリケーションでは、ブログ作成、検索、ログイン機能が必要でした。
PHPは動的なWebサイトの構築に強く、データベースとの連携もスムーズです。特に、Laravelでは、Breezeを利用することで、認証(ログイン/ログアウト)機能を容易に実装できるため、短期間での開発に適していると考えました。
サポート環境が整っているため
プログラミングスクールでは、PHP/Laravelのドキュメントが豊富で、疑問が生じた際にすぐ質問できる環境が整っていました。これにより、実際の開発を進めながら技術を学ぶことができました。

CSS(Tailwind)：

デザイン効率を高めるため
Tailwindの選定した理由として、テンプレートが豊富にあり、簡単にデザインを実装できた点が挙げられます。特定のデザインパターンを再利用しやすく、開発効率の向上にも貢献しました。また、便利な技術を積極的に活用したいという思いもあったので、Tailwind CSSは理想的な選択でした。

JavaScript：

動的なWebコンテンツを実現するため
JavaScriptは、いいね機能の非同期処理や画像クリック時のモーダル表示、Google Mapの表示といった動的な機能を実装するために不可欠でした。
フロントエンドの標準技術
JavaScriptは、Web開発における普遍的な技術であり、今後のプロジェクトでも応用が利く汎用性の高いものだと考えます。これを機にJavaScriptを勉強し、フロントエンド技術を強化するためにも採用しました。

Heroku：

シンプルさと迅速なデプロイプロセス
HerokuはGitを使った直観的なデプロイが可能で、設定が簡単であり、特にインフラの管理や設定に時間をかけることなく、すぐにアプリケーションの動作確認ができる点が魅力的でした。
GitHub Educationの活用
Herokuを選定した理由の1つとして、GitHub Educationの特典を活用できる点も挙げられます。GitHub Students Offerによる無料クレジットが含まれているため、インフラコストを気にせず、アプリケーションの開発とデプロイに専念することができました。

制作過程と内容

簡単にですが、制作過程とその内容を紹介します。

サーバー環境構築、DB操作、Gitのソースコードの管理、フロントエンド言語の基礎を学習(1週間)
↓
PHP/Laravelの学習(1週間)
↓
成果物のアイデア出し、要件定義、ワイヤーフレーム作成、ER図の作成(1週間)
↓
バックエンドの開発(3週間)
↓
フロントエンドの開発(2週間)
↓
デプロイ
↓
デザインの調整や細かい修正(1週間)
↓
現在

開発時に意識したこと

自走力の向上
プログラミングスクールでは、すぐに質問できる環境が整っていましたが、成長のためにはその環境に頼り切らず、自分で考える力を養うことが重要だと感じました。そのため、学習や開発の大部分はあえて一人で取り組むようにしました。
メンターには、アプリの方向性や要件定義、ER図、リレーションの確認といった重要な指導をいただき、また、適切なドキュメントの紹介も受けました。
初めての個人開発ということもあり、1つのエラーの解決に何時間も費やすことも多々ありました。わからないことがあったらすぐに聞くことの重要性も理解していますが、今回の取り組み方を通じて自走力は確実に向上したと感じています。
優先度を意識した目標設定
開発を進める際、アプリの要件定義に基づき、やるべきことの優先度を重視しました。メモ帳を使って簡単なToDoリストを作成し、次に取り組むべき作業を整理して進めました。1つの機能を実装するごとに、要件に照らし合わせて修正点や追加機能をリストアップし、それぞれの優先度をその都度見直して、次に取り組むべき作業を決めていきました。
この方法により、開発が効率的に進み、修正が必要な箇所も忘れずに対応できたため、非常に効果的だったと感じています。
ユーザー視点での開発
単なる機能の実装だけでなく、UI/UXを意識した設計を心がけました。自分自身も1ユーザーとしてアプリの使用感を常に客観的に確認し、修正を加えるように努めました。
まだ十分に達成できていない点もありますが、開発者としてユーザー視点に立つことは非常に重要なスキルだと感じています。今後もこの視点を忘れず、さらに強化しながら開発に取り組んでいきたいと考えています。

今後の課題

レスポンシブ対応の改善
ユーザー視点を意識して開発を進めてきましたが、まだ修正が必要な点が多く残っていると感じています。その一つが、レスポンシブデザインです。デバイスごとに異なる表示になると、ユーザーの使い勝手に直接影響を与えるため、Tailwind CSSの理解を深め、修正に取り組むべきだと考えています。
非同期通信での投稿機能
反省点でも述べた通り、Reactを学習し、投稿機能を非同期通信に対応させることで、ユーザーがより快適に使用できるアプリケーションに改善していきたいと考えています。
機能の拡張
フォロー/フォロワー機能、DM機能、フルコース以外のブログ投稿機能、SNSアカウントの連携機能などを追加し、アプリケーションの機能を充実させたいと考えています。
フォロー/フォロワー機能やDM機能は、新たにテーブル(followsテーブルやmessagesテーブル)を設計し、ユーザー同士の関係やメッセージのやり取りを管理する必要があります。さらに、バックエンド、フロントエンド、リレーションの処理も必要になるため、これらの開発課題に取り組んでいきたいです。
また、SNSアカウントの連携には外部API(OAuth)を利用することが必要であると考えます。これについても、APIの利用方法を再度復習し、適切な連携機能を実装していきたいです。

振り返り

開発の振り返り

1からの個人開発
夏休みの2か月間をフルに活用してWebアプリの個人開発に取り組みました。振り返ってみて、これほどの時間がなければ、デプロイまで到達できなかったと思います。学習と開発を並行して進めていましたが、学んだことを即座に開発に活かすことが求められ、日々の学びの大切さを改めて実感しました。今後も新しい技術や情報をキャッチアップし、復習を怠らずに成長を続けていきたいと考えています。
エラーとの戦い
初めてのWebアプリ開発ということもあり、数多くのエラーに直面しました。開発前はエラーを厄介なものと捉えていましたが、今回の経験を通じて、エラーは成長を促す友人のような存在であることに気づきました。エラーは、どこに問題があるのかを教えてくれる大切な指標であり、その理解を深められたことは大きな収穫です。

反省点

現在、投稿処理が重くなっている原因は、毎回HTMLを再読み込みしているためです。この問題を解決するために、次回の開発ではReactを導入して、非同期処理を活用することで処理の軽量化を図たいと考えています。LaravelとReactを組み合わせたアプリケーションを作成し、さらに効率的な開発を目指します。これに向けて、Reactの学習にも積極的に取り組み、フロントエンドのスキルを強化していきたいと考えています。

また、ChatGPTを多用したことについても反省しています。便利なツールではありますが、知識のインプットを疎かにしないために、適切な使いどころを見極め、上手く付き合っていくことが重要だと感じました。特に、エラーの読解やJavaScriptの実装において頼りすぎた結果、十分な理解が得られていない部分があると感じています。生成AIとの付き合い方を見直し、勉強の本質を見失わないよう取り組んでいきたいと思います。

おわりに

拙い文章でしたが、最後までお読みいただきありがとうございました。

今回の開発を通して、Webアプリケーション開発の難しさや、自身の技術力・知識の不足を痛感しました。しかし、それと同時に、アイデアを形にする楽しさ、新しい技術を知り、それを使いこなす喜び、そして一歩一歩着実に成長する自分に大きなやりがいを見出しました。

この経験を通して、確かな技術を持ち、ユーザーに本質的な価値を届けるエンジニアになりたいという思いが一層強くなりました。
これからも個人開発を進めていくとともに、チーム開発にも積極的に参加し、技術力だけでなく、協調性やリーダーシップといったスキルも伸ばしていきたいと考えています。

常に学び続け、変化する技術と市場のニーズに応じて成長を続けることで、より良いサービスを提供できるエンジニアになりたいと考えています。

追記(24/10/04)

以下は、アップデートした内容を簡潔にまとめたものです。

グルメダイアリー

本アプリは「人生のフルコース」という性質上、1アカウントにつき8つの投稿しかできませんでした。しかし、このままでは投稿数が限定的になり、タイムラインが十分に賑わわない可能性があります。この課題に対処するため、「グルメダイアリー」機能を新たに追加しました。

グルメダイアリーは、フルコースとして登録するほど特別でなくとも、日々の食事や印象に残った一品を気軽に投稿できる機能です。これにより、ユーザーは日常の食事体験を自由に共有でき、より豊かなタイムラインを楽しむことが可能となりました。

なお、この追加に伴い、データベースには新たなテーブルを追加したため、ER図は以下の通りです。

写真ギャラリー

美味しそうな食事の写真が数多く投稿される中、それらを一覧で見られる「写真ギャラリー」機能も新たに追加しました。当初の構想にはなかった機能ですが、アプリの完成後にユーザー視点で考えた際、「視覚的に楽しめる機能が欲しい」と感じたため導入することにしました。今回のプロセスを通して、要件定義だけでは見えないニーズがあることを実感し、実際のユーザー体験を重視した改善が、今後の開発にも良い影響を与えると感じました

今後の展望

今回のアップデートを通じて、「特別な一品の共有」だけでない「食の想い出」に特化したアプリを提供できるようになりました。今後もユーザー視点での開発、ユーザーからのフィードバックを大切にし、さらなる機能拡充と改善を進めていく予定です。ユーザー体験の向上を目指し、これからもアプリを進化させていきます。