はじめに
はじめまして、未経験から独学でWeb開発エンジニアへの転職を目指しているたくと申します。
今回ポートフォリオとして、ThanksDeckという感謝記録アプリを個人開発しました。
thanksdeckのURL：https://thanksdeck.com
GitHubのURL：https://github.com/taku365/ThanksDeck
自己紹介
私は24歳までITとは全く無縁の人生を送ってきました。
そんな中であるWebサービスを利用する機会が増え、「便利さ」だけでなく「人の行動や気持ちを変える力」があることに驚かされました。これをきっかけに、自分も社会や人の役に立つ仕組みを作りたいと考え、Webアプリ開発の学習を始めました。
とはいえ、当時はプログラミングの知識が全くなかったため、学習を進める上で以下の2点を軸にしました。
- 自分が本当に使いたいと思えるアプリを開発すること
- 業界で広く利用され、学習リソースが豊富な技術を選ぶこと
こちらの記事では、ポートフォリオを開発した過程についてまとめたいと思います。
開発の背景
「日常生活の中の課題を解決できるアプリは何だろうか」と考えたとき、私は感謝をするという習慣に注目しました。
日常ではネガティブな出来事や感情はすぐ思い出せる一方で、ポジティブな感情や出来事は意識しないと振り返りにくいと感じていました。さらに、ニュースやSNSでもネガティブな情報が多く、前向きな気持ちを保つことが難しい場面も多くあります。
そんなときに出会ったのが 『GRATITUDE 毎日を好転させる感謝の習慣』 という本です。
この本には「感謝する習慣」が生む大きなメリット、また習慣が「逆境や困難に立ち向かうときのセーフティーネットになること」が書かれており、大きな気づきを得ました。
しかし実際に感謝日記を続けようとすると、最初は気合で書けても習慣が途切れてしまうことが多いのが現実です。理由を考えると、
- ノートを広げて書く手間
- 時間がかかること
- 書いても反応がないこと
といった点が挫折につながっているのだと思いました。
そこで私は、
- スマホで気づいたときに気軽に記録できること
- 書いた内容にAIから前向きな反応が返ってくること
によって、楽しみながら継続できる仕組みを作れると考えました。
その発想を形にしたのが、今回開発した感謝カードアプリ 「ThanksDeck」 です。
機能紹介
・カード作成
手軽に続けられるように、1枚あたり最大140文字、1日3枚まで作成できる仕様にしています。
・カレンダー表示
記録した日はカレンダー上で色付けされ、習慣の継続状況を視覚的に確認できます。これにより、モチベーション維持につながります。
・AI返信機能
投稿したカード1枚ごとにAIからポジティブな返信が届きます。心理学的にも「行動に対する即時のポジティブフィードバック」は習慣化を促進するとされているため実装しました。
主な技術と採用理由
フロントエンド : Next.js / React
学習リソースが豊富で、実務でも広く使われているモダンな技術のため
バックエンド : Ruby on Rails
ProgateやRailsチュートリアルなど定番の学習教材が充実しており、初心者でも学びやすい環境が整っていたため。
データベース：MySQL
Railsとの相性が良く、運用実績が豊富で安定性が高いため採用。
インフラ : Docker / AWS
開発環境を統一し本番との差異をなくすことで再現性と効率を担保。さらに、信頼性・スケーラビリティを確保して安定的なサービス提供を実現。
CI/CDツール: GitHub Actions
GitHubとの親和性が高く、開発体験を損なわずにCI/CDを自動化できるため。
良かった点
設計からデプロイまで一連の流れを経験できたこと
フロントエンド（Next.js）、バックエンド（Rails API）、データベース（MySQL）、インフラ（Docker・AWS）、さらにCI/CDの構築まで一貫して取り組むことで、Webサービス開発の全体像を把握することができました。
学習リソースの豊富な技術を選定した点
Next.jsやRailsは情報が多く、検索すれば解決策が見つかりやすいため、完全に行き詰まることなく学習を進められました。
苦労した点
アイデアを形にする難しさ
0から1を生み出すために、アプリのコンセプトや機能、デザインまで自分で考える必要があり、非常に苦労しました。
また、実際に運用するにはUI/UXだけでなくセキュリティや費用面にも配慮が必要だと知り、Webサービスを1つ作ることの難しさを実感しました。
その過程で、普段利用しているアプリのデザインや機能を意識的に観察するようになり、「この機能を実装するならどうするか」と考える習慣がついたことは良い経験になりました。
技術の組み合わせによる難易度の上昇
個別に学習した技術は理解できても、実際にReactとRailsを連携させたり、AWSで本番環境を構築したりする段階になると一気に難易度が上がりました。特に認証処理やインフラ設定は、思った以上に調整が必要で大きな壁となりました。
工夫した点
シンプルなUI設計
MUIを活用し、説明がなくても直感的に操作できるデザインを意識しました。
タスクを小さく分割
「ページ作成 → API実装 → フロント接続」といった流れで小さなタスクに分割し、エラーが発生した際に原因を切り分けやすくしました。
AIリプライ機能の導入
ChatGPT APIを利用して、カードに対する自動返信機能を追加しました。これにより、単なる記録用アプリではなく、AIからのフィードバックが得られる独自性のあるサービスに仕上げることができました。
反省点
仕様を詰めきれずに進めてしまった
実装を優先するあまり、仕様を十分に固めないまま進めてしまい、後から手戻りが発生する場面がありました。今後は初期段階で画面遷移図やワイヤーフレームをしっかり作成し、設計を整理してから実装に入るようにしたいです。
非機能要件を考慮しきれなかった
サービスとして運用する場合に重要なパフォーマンス、セキュリティ、コスト最適化などは十分に検討できませんでした。次回はインフラ設計の段階でこれらを意識し、より現実的な構成を目指します。
時間配分の難しさ
学習と実装を同時並行で進めたため、調査に時間を取られて進捗が遅れることがありました。今後は学習フェーズと実装フェーズを区切り、タスクを明確に分けて取り組むことで効率を高めたいです。
今後の展望
UI/UX の改善
今回はMUIを使用しましたが、よりユーザーが利用しやすいUIを実現するためにデザインについて学び、Tailwind CSS なども取り入れて改善していきたいです。
セキュリティ強化
本格的な運用を想定すると、CSRF対策・レート制限・ログ監視など、現状不足しているセキュリティ対策を段階的に導入する必要があります。
コスト最適化
AWS上での運用は学習のために標準的な構成を選びましたが、今後はサーバーリソースのスケーリングやECSタスクの稼働時間制御など、コストを意識した運用を検討したいです。
機能追加
- ソーシャル機能（他ユーザーの投稿閲覧やシェア）
- AI機能の拡張（カード内容に基づいた分析や感情傾向の可視化）
まとめ
初めてのことばかりで、挫折しそうな瞬間も多くありましたが、最後までやりきることができました。
エンジニアとして多くの人の課題を解決できるよう精進します。