"非エンジニア" による人生初の「 アプリ開発 」

記事をご覧いただき、ありがとうございます！

現在、エンジニアへのキャリアチェンジを目標に学習に取り組んでいる私が、人生で初めて開発したアプリ「Fameal（ファミール）」について記事にまとめました！

拙い記事ですが、お付き合いいただけますと幸いです。

１．はじめに

私は現在、山口県で地元の企業に勤める29歳です。

2024年6月、娘の誕生を機に " この先の人生 " について考えるようになり、「より安定し、市場価値を高められる仕事がしたい」と考え、Webエンジニアへの挑戦を決意。
独学期間を経て、現在はプログラミングスクール「SiiD」にて、より実践的なスキルを学んでいます。

学習の歩み

• 2024年10月〜2025年3月：独学期
• • Progate、YouTubeで基礎を固め、code jumpでの模写コーディングやUdemy教材を用いた学習、JavaScriptでのアニメーションを取り入れたオリジナルサイト制作などを行いました。
• 2025年3月〜現在：プログラミングスクール「SiiD」受講
  独学での学習に限界を感じていた折、プログラミングスクール「SiiD」に出会い受講を開始。要件定義からデプロイまで、実践的な開発スキルを学習中です。

２．アプリ概要：「Fameal（ファミール）」について

リポジトリ URL：https://github.com/geek-3340/Fameal_app

どういうアプリなのか？

離乳食期のお子様がいるご家庭に向けた、献立と買い物リストの統合管理アプリです。
まったく別の作業になりがちな大人用と子供用の献立管理を効率化し、必要な食材で共通の買い物リストを自動で作成することで、忙しい子育て世帯の家事負担を軽減することが目標です。

なぜ作ろうと思ったのか？

私自身の経験から、離乳食期は「大人の食事」と「子供の食事」を別々に考える必要があり、献立管理と買い物リスト管理の負担が非常に大きいと感じていました。
同じような悩みを持った方々が多くいるのではないかと思い、このアプリを開発しようと思いました。

３．技術スタック

• フロントエンド
  　Laravel Blade
  　CSS（TailwindCSS）
  　JavaScript（Alpine.js）
  
• バックエンド
  　PHP 8.x（Laravel 12.x）
  
• データベース
  　PostgreSQL
  
• インフラ
  　WSL（Windows Subsystem for Linux）
  　Docker（Laravel Sail）
  
• ツール／ライブラリ
  　Figma（画面設計）
  　DrawSQL（ER図）
  　FullCalendar（JSカレンダーUIライブラリ）

４．主な機能

• 献立カレンダー機能
  　料理 ⇔ 離乳食 および 月表示 ⇔ 週表示 での表示切替
  　献立の登録・削除
  　離乳食のグラム数管理
  　カテゴリー管理（朝食・昼食・夕食）
  
• 料理登録機能
  　料理の登録・編集・削除
  　レシピURL、材料登録
  　カテゴリー管理（主食・主菜・副菜・その他）
  
• 離乳食登録機能
  　離乳食の登録・削除
  　カテゴリー管理（エネルギー・タンパク質・ビタミン・その他）
  
• 買い物リスト機能
  　買い物リスト自動生成（料理材料および離乳食食材より抽出）
  　ToDo機能
  

５．こだわったポイント

① 離乳食特有の「グラム単位」管理

離乳食は「10倍粥 10g、豚肉 5g」のように微細な管理が必要です。

• 工夫： 食材登録時に5g間隔のグラム数入力欄を設け、登録することで献立表側では「食材名＋g数」が直感的に表示されるよう設計しました。

② 買い物リストの自動生成

１週間の献立を立てたあと、その献立を元に買い物リストを作るのは思ったより手間がかかります。

• 工夫： 週を選択しボタンを押すことで、指定した一週間に登録された料理の材料及び、離乳食（食材）を抽出、重複する項目をまとめて、買い物リストを自動生成する機能を実装しました。

③非同期でのスムーズな画面更新

献立の登録・削除のたびに画面がリロードされてしまっては、アプリとしての使用感が良くないと感じました。

• 工夫：献立の登録・削除、材料の登録・削除を行う際は非同期処理で画面が更新されるような仕様にし、データ操作を即座にUIに反映させることで、ネイティブアプリに近い使用感を目指しました。

６．苦労した点、どう乗り越えたか

① FullCalendarの高度なカスタマイズ

カレンダー表示にはJSライブラリ「FullCalendar」を採用しましたが、デフォルトの状態では「献立管理」としての要件を満たせませんでした。

• 課題: ライブラリが自動生成するHTML/CSSの構造が複雑で、独自のスタイルやビジネスロジックを組み込むのが困難だったこと。
• 解決策:
• • CSSの徹底解剖: ブラウザの開発者ツールでクラス名を都度確認し、外部CSSファイルから上書きすることでデザインを統一。
  • ロジックの分離: 設定ファイル内に直接コードを書かず、複雑な処理は別ファイルに切り分けて管理。ドキュメントを読み込み、一つずつ機能を拡張することで、メンテナンス性の高いコードを実現しました。

② モーダル内での非同期処理とデータ整合性

献立の編集をモーダルウィンドウで行う際、リロードなしでデータを反映させる「非同期更新」の実装に苦戦しました。

• 課題: 献立を登録・削除した際、「カレンダー上の表示」「モーダル内の献立一覧リスト」「登録料理の並び順（ソート）」の3点を矛盾なく即座に更新する必要がありました。
• 解決策: 複雑な処理を分解し、以下のステップで着実に実装しました。
• 1. APIを介した非同期データ操作（DB更新）の確立
  2. カレンダーの日付セルへの即時反映
  3. モーダル内献立一覧リストの状態保持と更新
  4. カテゴリー表示制御及び、カテゴリーごとの登録料理ソート制御

これにより、ネイティブアプリのようなストレスのない操作感を実現できました。

７．開発を通じて得た「エンジニアの視点」

この開発は、単なるコードの書き方以上に、「プロダクトを作る」ための本質を学ぶ機会となりました。

• 「設計」が開発速度を左右する: ER図（DrawSQL）や画面設計（Figma）を丁寧に行うことで、実装時の迷いが減り、結果としてバグの抑制と開発スピードの向上に繋がることを痛感しました。
• 「ユーザー体験（UX）」へのこだわり: 「自分自身がユーザーである」という強みを活かし、操作感や表示の分かりやすさを基準に機能をブラッシュアップ。技術ありきではなく、課題解決のための手段として技術を選ぶ視点が身につきました。
• 開発者としてのスキル: フロントエンド（UI/非同期処理）からバックエンド（DB設計/API）まで一気通貫で開発したことで、Webシステムの構造を解像度高く理解できました。また機能拡張やデバッグの際に重要となる、単一責任原則に基づいたロジックや、命名ルールの統一など、より良いコードを書くための知識が身につきました。

８．おわりに

「Fameal」は、私のエンジニアとしての第一歩を象徴するプロダクトです。独学を始めた頃には遠い世界のことだと思っていた「アプリの完成」を成し遂げられたことは、大きな自信となりました。

今後は、React／TypeScriptなどのモダンなフロントエンド技術への挑戦もしたいと考えています。

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