This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

プログラミング初心者向けDjango開発環境構築

Posted at 2025-05-18

本記事は、私が公開していくプログラミング学習カリキュラムで使用することを前提としています。しかし、Djangoの開発環境を簡単に作り、PoCを行いたい方など、他の用途でお使い頂いても問題ありません。

背景

初心者にとって、Webアプリ開発の環境構築は最初の難関になります。

Qiitaも含めて、世の中には色々な人が環境構築の手順をネットに公開してくれていますが、バージョンが古く最新版では選択肢が異なったり、自分の環境ではエラーが発生して解決方法が分からなかったりと、プログラミングに入る以前のところで大きな壁が存在しています。

そこで、Webプログラミングを学びたい人が、環境構築という最初の壁をできるだけ簡単に乗り越え、プログラミング学習に集中するための手順を作成しました。

今後公開していくカリキュラムと共に、ぜひあなたのプログラミング学習にご利用ください。

記事の目的

pythonのWebフレームワーク Django（ジャンゴ）を学習するための開発環境構築の手順を共有

本記事をオススメする人

☑pythonを始めたばかりでこれから開発環境を構築する人
☑初めてWebプログラミングに挑戦する人
☑環境構築は最低限にして、とにかくプログラミングに着手したい人
☑Windows PCを使っている人

本記事をオススメしない人

✅自分好みの環境を作りたい人
✅プロジェクトで決められた構成で作らないといけない人
✅Windows PC以外を使っている人

ゴール

🔷ソフトウェアのインストール
🔷Visual Studio Code拡張機能のインストール
🔷設定
🔷デバッグ実行でWebアプリの起動確認

ソフトウェアバージョン

本記事の中で解説しているソフトウェアのバージョンは以下の通りです。
Visual Studio Code 1.100.2
Docker Desktop 4.40.0
Git 2.49.0.windows.1

構築する環境

本記事で紹介する環境は、Visual Studio Code、Docker、Gitを使用しています。

簡単に言うと、

Gitを利用して、ソースコード＋環境設定ファイルをダウンロード
環境設定ファイルに定義されている内容に基づいて、コンテナを構築
という手順です。

コンテナ内にpythonやDjangoを保持しますので、ご自身のPCにpythonをインストールする必要がありません。

また、開発途中で色々触っていて動かなくなってしまっても、もう一度ダウンロードし直せば、いくらでもやり直しが出来ますので、初心者の人にも安心です。

システム開発を経験したことが無い方には想像が難しいかと思いますが、プロジェクトにおいて複数人の開発者が同じ環境で開発できるようにする際にも用いられる方法です。

内容の理解が難しくても、手順はとても簡単です。

それでは、さっそく構築に入っていきましょう。

手順

ソフトウェアインストール

1️⃣Visual Studio Code（以下、"VS Code"）

下記サイトからWindows版のインストーラをダウンロードします。

赤枠「Windows 10, 11」をクリックすると、インストーラのダウンロードが始まります。

インストーラをダブルクリックし、指示に従ってインストールを進めます。
デフォルトの設定のまま進めて頂いて、問題ありません。

2️⃣git

下記サイトからWindows版のインストーラをダウンロードします。

https://git-scm.com/downloads/win

赤枠「Click here to download」のリンクをクリックすると、インストーラのダウンロードが始まります。

インストーラをダブルクリックし、指示に従ってインストールを進めます。
Gitはインストール中に出てくる設定項目が多いですが、すべてデフォルトの設定のまま進めて頂いて、問題ありません。

3️⃣Docker Desktop

下記サイトからWindows版のインストーラをダウンロードします。

https://docs.docker.com/desktop/setup/install/windows-install/

赤枠「Docker Desktop for Windows - x86_64」のリンクをクリックすると、インストーラのダウンロードが始まります。

インストーラをダブルクリックし、指示に従ってインストールを進めます。
デフォルトの設定のまま進めて頂いて、問題ありません。

インストール後、Windowsが再起動します。

再起動後、「WSL update failed」というエラーが出ることがあります。

このエラーが出た場合、下記手順で解決できます。
①スタートメニューから「ターミナル」を検索して、ターミナルを開く
②ターミナル上で「wsl --update」を実行

下記のようなメッセージが出れば完了です。

インストールが終わると、自動的に Docker Desktop が起動します。

そして「Docker Subscription Service Agreement」が表示されます。

これはサブスクリプションの使用許諾です。
個人利用であれば無料で利用できますので、「Accept」ボタンをクリックして問題ありません。

次にDocker Hubへのログイン画面が出てきますが、スキップも可です。

最後にアンケートに答えると、Docker Desktop画面が開きます。

お疲れさまでした。
これで必要なソフトウェアのインストールが完了しました。

VS Code拡張機能のインストール

VS Codeで先にインストールしておく拡張機能は、
・日本語化に関するもの
・コンテナ連携に必要なもの
の2つです。

0️⃣拡張機能のインストール方法

VS Codeの拡張機能は、左側にあるアクティビティバーの赤枠のアイコンをクリックすることで、検索・インストールします。

1️⃣Japanese Language Pack for Visual Studio Code

①検索ボックスに「japanese」と入力
②検索結果に出てきた「Japanese Language Pack for Visual Studio Code」をクリック
③「Install」をクリック

④右下に出てくるダイアログにて「Change Language and Restart」をクリック

VS Codeが再起動され、日本語に変わります。

2️⃣Dev Containers

①検索ボックスに「dev container」と入力
②検索結果に出てきた「Dev Containers」をクリック
③「インストール」をクリック

VS Codeで最低限必要になる拡張機能のインストールは以上です。
お好みで他の拡張機能をインストール頂いても問題ありません。
Pythonプログラミングに必要な拡張機能は、次の設定の手順の中で自動的にインストールされます。

設定

ここからはVS Codeのみを使用します。

①アクティビティバーから「エクスプローラー」アイコンをクリック
②「リポジトリの複製」をクリック

③画面上部のコマンドパレットに入力を求められるので、GitHubのURLを入力

GitHubのURL
https://github.com/hibiki-iwamoto/django-learn-auth01.git

GitHubのURLはカリキュラムにより変わります。
URLはテキストに記載しますので、カリキュラムごとにテキストに記載のURLを使用してください。

④フォルダ選択のダイアログが開くため、任意のフォルダを選択
⑤「リポジトリの宛先として選択」をクリック

⑥クローンしたリポジトリを開きますか？とダイアログが出るので、「開く」をクリック

⑦画面右下に出てくるダイアログにて「コンテナで再度開く」をクリック

⑧画面右下に出てくるダイアログにて「ログの表示」をクリック
※ログを表示しなくても設定は完了します。
　しかし、作業完了が分かりにくいため、ログを表示しておくことをおススメします。

⑨「任意のキーを押してターミナルを終了します。」とメッセージが出たら、
　Enterキーやスペースキー等を押下
※すべて完了したように見えますが、まだ裏で処理は進んでいます。
　任意のキーを押下すると、残りの処理が進んでいる様子が表示されます。

「Port Forwarding」のメッセージが出力されれば完了です。

ここまでくれば、すでにDjangoを動かせる状態になっています。
参考までに上記手順でどのような動きがあったかを下図を使って説明します。

①まずGitHubからソースコードと環境設定ファイルの一式をダウンロード
②環境設定ファイルに基づき、DockerHubからコンテナイメージをダウンロードして起動
③環境設定ファイルに基づき、下記をインストール
　・Poetry（Pythonのパッケージマネージャ）
　・Django
　・その他ライブラリ