ID:82270さん

## Next.js製 カレンダーWebアプリ（個人開発） ### 概要 Next.js（App Router）とTypeScriptを使用し、日付ごとに予定を管理できるカレンダーWebアプリを開発しました。 イベントの作成・編集・削除（CRUD）機能を実装し、Prismaを用いてPostgreSQL（Neon）へデータを保存しています。 個人開発として、設計・実装・DB連携・デプロイまで一貫して行いました。 --- ### URL **アプリ** https://nextjs-ts-calendar-sable.vercel.app/ **GitHub** https://github.com/annaengneer --- ### 使用技術 - Next.js（App Router） - TypeScript - Node.js - Prisma - PostgreSQL（Neon） - Vercel（デプロイ） --- ## 課題 カレンダーアプリを実装するにあたり、以下の課題がありました。 - 日付ごとにイベントを管理できる仕組みをどのように設計するか - フロントエンドとデータベースをどのように連携させるか - 予定の追加・編集・削除を直感的に操作できるUIにすること また、Next.jsのApp Routerを使用したアプリケーション設計や、 データ永続化の仕組みを実践的に理解することも課題として取り組みました。 --- ## 工夫 これらの課題に対して、以下のような設計・工夫を行いました。 まず、日付ごとにイベントを管理するため、Prismaのスキーマでイベントモデルを定義し、 タイトルや日時などの情報を保存できる構造を設計しました。 これにより、イベント情報をデータベースに保存し、ページ再読み込み後もデータが保持されるようにしました。 次に、Next.jsのApp Router構成を採用し、 画面・API・データ取得の責務を整理しました。 Server Componentを利用してデータ取得処理をサーバー側に集約し、 フロント側ではUI表示に集中できる構成にしました。 また、ユーザー操作の分かりやすさを意識し、 クリック操作を中心に予定を追加・編集できるUI設計を行いました。 URLパラメータを利用して日付ごとの画面表示を切り替える仕組みも実装し、 シンプルな操作で予定管理ができるようにしています。 --- ## 成果 本開発を通して、以下の成果を得ることができました。 まず、Next.jsを用いたWebアプリケーション開発において、 画面設計・API設計・データベース連携・デプロイまでの一連の開発工程を一通り経験しました。 特に、App Routerを用いたディレクトリ設計やServer Componentによるデータ取得、 Prismaを用いた型安全なDB操作など、実務に近い構成でアプリケーションを構築できたことが大きな成果です。 また、データベースを利用したCRUD機能を実装することで、 フロントエンドとバックエンドの連携の流れを理解することができました。 --- ## 実装機能 - 日付別イベント表示 - 予定追加・編集・削除（CRUD） - DB保存（リロード後も保持） - URLパラメータによる日付切替 - レスポンシブ対応 --- ## 得られた学び 本開発を通して、Next.jsのレンダリング仕組みやApp Routerの構成、 APIルート設計、Prismaを用いたDB操作、Vercelでのデプロイまで、 Webアプリケーション開発の一連の流れを実践的に理解することができました。 今後はさらに機能追加や設計改善を行いながら、 実務レベルで通用する開発力を高めていきたいと考えています。

## Twitterクローン（個人開発） ### 概要 Djangoを用いて、SNS機能を再現したTwitterクローンアプリを開発しました。 ユーザー認証、投稿機能、いいね、DM、通知機能などを実装し、フロントエンドからバックエンドまで一貫して構築しています。 SNSアプリの基本的な構造を理解することを目的として、認証処理・データベース設計・CRUD処理・通知処理などを実装しました。 --- ### 使用技術 - Python - Django - SQLite - HTML - CSS - Bootstrap - JavaScript --- ### 課題 SNSアプリを開発するにあたり、以下の課題がありました。 - ユーザー認証やログイン状態の管理をどのように実装するか - 投稿・いいね・DMなど複数の機能をどのようにデータベースで管理するか - ユーザー操作に応じた画面表示や通知機能をどのように実装するか また、SNSアプリのように複数の機能が連携するアプリケーションにおいて、 データモデル設計やアプリ構成をどのように整理するかも課題として取り組みました。 --- ### 工夫 これらの課題に対して、以下のような設計・実装を行いました。 まず、ユーザー認証についてはDjangoの標準認証機構をベースに実装し、 ユーザー登録・ログイン・ログアウトの仕組みを構築しました。 次に、投稿・いいね・DM・通知などの機能をそれぞれモデルとして定義し、 ユーザーと投稿のリレーションを意識したデータベース設計を行いました。 また、機能ごとにDjangoアプリを分割することで、 コードの役割を整理し、拡張性と保守性を意識した構成にしました。 さらに、ログイン状態によって表示内容を変更するUI制御を実装し、 ユーザー体験を意識した画面構成を工夫しました。 --- ### 成果 本開発を通して、SNSアプリにおける基本的なWebアプリ構造を理解することができました。 特に以下の点について実装ベースで理解を深めることができました。 - ユーザー認証の仕組み - データベース設計とモデル設計 - 投稿やいいねなどのCRUD処理 - DMや通知などの機能連携 バックエンドを中心にアプリケーションの構造を理解しながら、 フロントエンドとデータベースを連携させたWebアプリ開発の流れを経験することができました。 --- ### 実装機能 - ユーザー登録／ログイン認証 - 投稿作成・削除・一覧表示 - いいね機能 - 画像投稿 - DM機能 - 通知機能 - メール送信機能（登録通知等） --- ### 得られた学び 本開発を通して、認証処理、データベース設計、CRUD処理、通知機能など、 Webアプリケーションの基本構造を実装ベースで理解することができました。 また、Djangoのフレームワーク構造を活用することで、 バックエンド主導の開発フローやMVCに近い設計思想についても理解を深めることができました。 今後はパフォーマンス改善や機能追加などを通して、 より実務に近い設計を意識した開発を行っていきたいと考えています。