1.はじめに
突然ですが！
私には「人々の可能性を広げる仕事をしたい」という目標があります。
人生において 可能性を広げる ためには、必ず 何らかの影響 が関与していることが多いです。
その 何らかの影響 を 人の影響 として感じられる瞬間は、とても大きな生きがいとなります。
必要とされ、自分の長所に気づき、そこからまた新たな可能性が生まれる姿は、人生を楽しむ上で最も本能的に重視してしまう、重視すべき瞬間だと思っています。
人と人がつながることで、互いの可能性が広がる。
趣味から繋がるも、恋愛から繋がるも、仕事から繋がるも、ふとから繋がるも、さまざまな形での良い「つながり」が人生を豊かにします。
私は、このような「つながり」をより多くの人々に提供できる職業に魅力を感じ、エンジニアを目指すことに決めました。
今回作成したプロダクトは、まさに人々がつながることで可能性が広がるアプリです。
エンジニアを目指す過程で、目標に向けた第一歩を踏み出せたと感じています。
まだまだ改善の余地は多くありますが、温かい目でお読みいただければ幸いです！
私は現在、アプレンティスの5期生として、約6ヶ月間プログラミングを学んでいます。
今回作成したのは、 アイデア出しに悩むアプレンティス生へ向けたアプリ、「APark（エーパーク）」 です！(料金削減のため、サーバーを止めている率が高いです、すみません＞＜)
それでは、AParkについて詳しくご紹介します！
2.簡単に自己紹介
- 2023年12月〜自分の得意を分析し、プログラミングの勉強を始める
- 2024年4月〜内定直結型エンジニア学習プログラム「アプレンティス」に参加
- 地方在住27歳社会人5年目。マインドミニマリスト。植物、テレビドラマ、コーヒーが好きです
- 日々の自己投資をVLOGにしてYouTubeに投稿中！こちらも自分を通して誰かの可能性を広げたいという思いで投稿しています。
3.AParkとは？
キャッチコピー
「アプレンティス生が集まる公園、APark。それぞれがアイデアの補助輪に乗り、次なるアプレンティスシップの旅に出かけよう！」
プロダクト概要
- アプレンティスのカリキュラムに沿った形式で、アイデアを分析・可視化できる
- AIがテキストベースでフィードバックを提供
- 先輩や後輩のアイデアを簡単に参考にできる
このように、アプレンティス生なら誰もが欲しくなるアプリです。笑
さらに、このアプリはアプレンティス生専用のため、共通の課題や目標を持つ仲間同士での交流やフィードバックがしやすい点も大きな特徴です。
4.開発の背景、思い
「なぜこのアプリを作ったのか・どんな課題解決をしたのか」 について記載します。
なぜこのアプリを作ったのか
きっかけは、私自身がAParkを考える際に直面した困難でした。
アプレンティスでは、チーム開発や個人開発を行う際にテーマ（「自分たちの役に立つものを開発せよ」など）は提供されるものの、 具体的なアイデアは自分たちで考える 必要があります。
その過程で、「良いアイデア」に仕上げる難しさ に直面しました。
未経験者にとって、アイデア出しは非常にハードルが高いものです。
既存アプリとの差別化、実現可能性、モチベーションの維持など、多くの要素を考慮する必要があります。
しかし！アイデアが決まらないと開発が進まず、ストレスを感じることに。。。
さらに、ユーザーに響かないアイデアはドラフト指名（内定）を得られません。
「え？右も左も分からないのに最初に転けたら終わり!?」――私だけでなく、同期のみんなも同じ悩みを抱えていました。
そこで、アイデア出しの過程をサポートするアプリを作ることに決めました！
誰のどんな課題を解決するのか？
解決したい課題は大きく３つです。
-
良いアイデアにするために考慮すべき点が抜け落ちてしまう
→ AIが項目ごとにアイデアを評価し、レーダーチャートを作成！
以下の5項目に基づいてAIがアイデアを評価し、強みと弱点を客観的に見える化します。1.競合と被らない
2.実現可能である
3.目新しい
4.自分が楽しんで作成できる
5.エンジニアになりたい理由とのストーリーがあるエレベーターピッチやアプリの機能を文章で伝えることで、良い点や改善すべき点をフィードバックしてくれます。
- 先輩のアイデアを参考にするのに時間がかかる
→ セレクトボックスで簡易的にアイデアの検索ができる！
各期生のアイデアをスプレッドシートで確認する手間を省き、アプリ内のセレクトボックス1つでアイデアを検索できるようにしました。
これにより、効率的に参考にでき、開発のインスピレーションが得られやすくなります。
- 先輩・後輩の繋がる場がない
→アプリを作ることでオープンに繋がれる場ができる！
単純に、個人的に、同期以外の方とのコミュニケーションの場が欲しかったという理由もあります。笑
同期とは週に2回チーム会を開いて雑談や勉強の進捗を話していますが、もっとたくさんの人と話したい！先輩から経験談と雑談を、後輩へはアウトプットと雑談をしたい、そんな思いでアプレンティス生専用のアプリとして作成しました。
5.使用技術
フロントエンド
- HTML / CSS / JavaScript
バックエンド
- PHP 8.3.10 / Laravel 11.11.0
データベース
- mysql Ver 8.0.39
ライブラリ
- jQuery / Slick Carousel / Slick Carousel
インフラ(AWS)
- EC2 / RDS / ALB / Route53 / ACM 他...
ソース管理
- Git / GitHub
CI/CD
- PHP Code Sniffer / PHP Stan
その他
- OpenAI API
6.(ひとまず)完成したアプリ
我が子のように愛しい(我が子いませんが)アプリが完成しました。
なんだかとにかく可愛くて、作りたいものが作れて、毎日見惚れています。
7.作業内容
アプリの説明が長くなってしまいましたが、ここからは開発に関する話です。
6-1.要件定義
要件定義では、 アプレンティス生が本当に欲しいもの、使いやすいものを作る ことに重点を置きました。
また、どこをあえて実装しない方が効果的か？についても慎重に検討しました。
例えば、アプレンティス代表の山浦さんから、「ユーザー名を表示させない方が、より気軽に投稿しやすくなると思う」といったアドバイスをいただき、その意見を反映させました。
このように、ユーザーの視点に立ちながら、 シンプルで使いやすい体験 を目指しました。
P0：必須
P1：ここまで実装することを想定
P2：可能であれば実装したい
機能要件
- ログイン周り
- ユーザー登録機能(P0)
- ログイン、ログアウト機能(P0)
- パスワード変更機能(P1)
- ホーム画面
- テーマ別によるアイデアの表示(P0)
- 自分のアイデアを削除(P0)
- お気に入り(保存)機能(P2)
- いいねをする、表示する(P2)
- コメント機能(P2)
- マイページ
- お気に入り(保存)したアイデアを表示(P2)
- 自分のアイデアを表示(P0)
- 自分のアイデアを削除(P0)
- なぜエンジニアになりたいのか？の入力を受ける、且つ編集(P1)
- バッジの獲得(P2)
- レーダーチャートの作成
- テーマの選択(P0)
- 理想のレーダーチャートを設定(P0)
- エレベーターピッチの入力(P0)
- 入力されたフォームから、ChatGPT APIを使用してフィードバックチャートを表示(P0)
- 入力されたフォームから、ChatGPT APIを使用してフィードバックテキストを表示(P0)
- 下書き保存機能(P0)
- 投稿機能(P0)
- 1人2つまでの投稿制限(P1)
- 下書き保存
- 下書きの削除(P0)
- エレベーターピッチの入力へ遷移(P0)
非機能要件
- スマホにもPCにも対応している(P0)
- 画面が1秒以内に表示される(P0)
6-2.タスクばらし
次に、要件定義であげたものをページごとに細分化し、タスクばらしを行いました。
6-2.業務フロー
6-3.画面遷移図/WF
デザインを作成する前に、大まかな画面のレイアウトと、遷移図も兼ねたワイヤーフレームを作成しました。
6-4.ER図
6-5.システム構成図
AWSを中心に以下の図に示したインフラを構築しました。
7.実装
ここでは良かったことと苦労したことについて記載します。
7-1.苦労したこと
CRUD処理の実装
プロダクト制作の醍醐味である、CRUD処理。
AParkでは、アイデアの作成、下書き保存、再編集、投稿、削除といった一連のCRUD処理を実装しました。
そこで変数にうまく値が入ってないと当然エラーになりますし、データベースのテーブルの作成がうまくいっていないと思うように機能がつけられなかったりと、醍醐味を十分味わい、楽しめました。
苦労もしましたが、エラーを解消して思い通りに動いたときの達成感は非常に大きく、何度も味わいたくなりました。笑
実際のツイート↓
AWSへのデプロイ
デプロイは非常に根気のいる作業でした。
やるべきことが30個あるとして、そのうち1つでもミスがあればデプロイがうまくいかない。
プログラミング全般に言えることですが、正確さが求められます。
しかし、私は正解があるものの方が好きです。笑
「間違ってます！」「表示するデータがありません！」とはっきりいってくれる方が、私の心は安定します。笑
コードがfatになってしまう
開発中は、まず動くものを優先し、スッキリしたコードを書くのは後回しにしていました。
仕事と並行して限られた時間で開発を進める中で、マストな機能を優先し、余裕があればリファクタリングするというスタンスでしたが、余裕が最後までありませんでした。
実際の現場では、他の人も使うコードになるので、規約に沿って綺麗に書けるようにしたいと思っています。
ちなみに、デスクや共有スペースはスッキリ使う派です。笑
苦労したことは他にもありますが、いったんここで切り上げて、次に良かった点を紹介します！
7-2.良かったこと
UIをポップに
ユーザーの方から、「デザインは外注とかしてないですよね？笑」と言われるくらいに、UI制作を楽しむことが出来ました。（外注はしてないです笑）
以前チーム開発の時に、代表の山浦さんから「UI/UXは既存アプリを参考にするのが良い」とアドバイスをいただき、３〜４つのアプリのUIを参考にしました。
そのおかげで、スマホ版とPC版の統一感を簡単に出せましたし、作業効率も向上しました。
また、自分は何かを真似するのが得意だと改めて感じました。
エラー文を見て原因を突き止める速さが早くなった
プログラミングは「継続は力なり」を強く実感しました。
開発やデプロイ作業中にエラーが出ても、「あ、これか」とすぐに原因に気付けるようになりました。
これは、自分が今何をしているのかを常に把握できていたからだと思います。
実際のツイートでも、このように楽しんで開発しています。笑↓
新しい技術を学ぶ際のルーティンが定着した
1人でアイデア出しからデプロイまで行い、多くの技術を学びました。
私は、書籍とUdemyの動画教材で基礎を固め、技術の全体像を理解してから、具体的な問題にぶつかるたびに調べるという方法が自分に合っていると感じました。
また、尊敬する方の勉強法を信じて、素直に真似することも多く、真似ることが得意だと再認識しました。
8.感想、まとめ
ここまで読んでいただき、ありがとうございました。
今回の個人開発を一言でまとめると、 「1人で1から作って良かった！」 です。
インプットが少ない分、思い通りにいかないことがもちろん多かったのですが、うまくいかないことをたくさん経験し、その度に少しずつ成長できました。
半年ほど前に投稿した内容をふと見つけて、自分が今プログラミングを楽しめていることに「成長した」と実感し、さらに可能性が広がったと感じています。
これからもユーザーの声に耳を傾けながら、多くのアプレンティス生に利用してもらえるようなアップデートを続けていきたいと考えています！