2026.07.10（金） / 14:25
Django × React ToDoアプリの開発記録
- ID
- 39736
- Published
- 2026-07-10 14:25
- Modified
- 2026-07-11 03:35
- Author
- khiro
- Categories
- デフォルト
フェーズ1：基盤構築とAPI連携
| 投稿日 | 記事タイトル | 開発過程における位置・役割 |
|---|---|---|
| 2025.03.01 | WEBエンジニアとして今の自分に足りないスキルとギャップを埋めるための行動計画 | 開発の起点：自身のスキル不足を補い、実力を証明するためのポートフォリオ作成を計画する。 |
| 2025.03.02 | タスク管理アプリを作っていく | バックエンド構築（初期）：DjangoとDRFを使用し、モデルやシリアライザー、APIエンドポイントの基本実装を行う。 |
| 2025.03.02 | 現状のデータのレコードを確認する | 動作検証：Djangoのシェル機能を活用し、データベース（Taskクラス）へのレコード保存・取得を検証する。 |
| 2025.03.02 | Django製のタスク管理アプリをGitHubでホスティング→別デバイスでクローン | ソース管理：GitHubでのリモートリポジトリ管理を開始し、他端末へ環境を複製する。 |
| 2025.03.02 | 開発サーバー起動時のエラー原因と解決方法 | 環境構築トラブル解決：クローン後の環境で発生したライブラリ不足によるサーバー起動エラーを解消する。 |
| 2025.03.08 | Django REST Framework（DRF）のルーティングを深掘りし、urls.pyの仕組みを完全理解する | 設計の理解深化：DefaultRouterによるURLパターン自動生成の仕組みを整理し、API構造を明確にする。 |
| 2025.03.08 | 【フロントエンドとの連携】CORS設定でフロントエンドからAPIを呼び出せるようにする | フロントエンド連携の準備：異なるオリジン間通信を許可するため、Django側にCORS設定を導入する。 |
| 2025.03.11 | react_todoディレクトリでnpm installを行った | フロントエンド構築開始：Reactプロジェクト環境で必要なパッケージ群のインストールを実施する。 |
| 2025.03.15 | nvmを使ってNode.jsを16.18.1から22.14.0へ更新した【Mac】 | 開発環境の更新：開発を円滑に進めるため、nvmを使用してNode.jsを新しいバージョンへアップデートする。 |
| 2025.03.15 | 【エラー解決】TypeError: crypto$2.getRandomValues is not a function | 開発環境トラブル解決：Node.jsのバージョン不足に起因するViteの実行エラーを解消する。 |
| 2025.03.15 | ReactでDjango REST FrameworkのバックエンドAPIと連携してタスク一覧を表示させる | フロントエンド実装：Viteでのプロジェクト作成、axiosを用いたAPI通信、一覧表示コンポーネントを実装する。 |
| 2025.03.15 | 「The JSX syntax extension is not currently enabled」を解決していく | ビルドエラー解決：JSX構文エラーに対し、react-domの導入やエディタの再起動で対応する。 |
| 2025.03.15 | 【エラー解決】Parsing error: Unexpected token | ビルドエラー解決：不要な.jsファイルが残っていたことによるパースエラーを、該当ファイルの削除で解消する。 |
| 2025.03.15 | 【エラー解決】GET http://localhost:5173/src/components/TaskList.js … 404 (Not Found) | ビルドエラー解決：Viteのファイル認識エラーを、インポート時の拡張子明示やバックエンドサーバー起動で解決する。 |
| 2025.03.15 | CORS設定を見直すことで、発生していた3つのエラーが芋づる式に解決した | 最終調整と完成：フロントエンドのポート番号に合わせてDjangoのCORS設定を修正し、データ表示に成功する。 |
フェーズ2：開発再始動とデータ表示
| 投稿日 | 記事タイトル | 開発過程における位置・役割 |
|---|---|---|
| 2026.06.18 | Django × React ToDoアプリを再始動したら、仮想環境・Vite・Djangoサーバーで詰まった話 | プロジェクト再始動：2025年3月に中断していた開発を再開。仮想環境の誤認識やVite・Djangoサーバーの停止など、環境面のトラブルを一つずつ解消し、API連携を復旧させる。 |
| 2026.06.19 | マイルストーン①達成 ― Django REST FrameworkのデータをReactへ表示する | マイルストーン①の完遂：モデルにカテゴリと期限を追加し、React側の型定義を修正。タスク名・カテゴリ・完了状態・期限の4項目をReact画面に表示し、データの見える化を達成する。 |
GitHubリポジトリ
バックエンドAPI
https://github.com/ki-hi-ro/django_todo