2026.07.10（金） / 14:25

Django × React ToDoアプリ｜フェーズ1：基盤構築とAPI連携

ID: 39736
Published: 2026-07-10 14:25
Modified: 2026-07-10 14:44
Author: khiro
Categories: デフォルト

各記事の投稿日、URL、およびタスク管理アプリ開発における位置づけをまとめた表を作成しました。

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