Django+Reactで学ぶプログラミング基礎(2): 開発環境構築(Django/VS Code)

[前回] Django+Reactで学ぶプログラミング基礎(1): ゴールと概要

はじめに

事始めは、開発環境構築から。
まず、VS CodeとDjangoをインストールします。

開発環境情報

• Windows 10
• Python 3.10
• Django 4.0
• VS Code(Visual Studio Code) 1.67
  • ソースコードエディタ
  • 機能
    • デバッグ
    • 埋め込みGitコントロール
    • シンタックスハイライト
    • インテリジェントなコード補完
    • スニペット表示
    • コードリファクタリングをサポート

VS Codeをインストール

• https://code.visualstudio.com/から最新版をインストール
• VS Codeを起動
• VS CodeのターミナルをCommand Promptに変更
  

Pythonをインストール

• https://www.python.org/から最新版をインストール
• バージョンを確認

> python -V
Python 3.10.4

Pipenvをインストール

• pipとは
  • Pythonで書かれたパッケージソフトウェアを、インストール/管理するためのパッケージ管理システム
  • Pythonパッケージは、通常Python Package Index(PyPI)に公開される
• pipenvとは
  • Pythonのプロジェクト管理ツール
  • ライブラリのバージョンをPipfileに記録
  • Pipfileに合わせ、プロジェクト用の仮想環境を自動作成可能
  • Pipfileは、requirements.txtからインポート/エクスポートできる
• pipenvをインストール

> pip install pipenv

ユーザー環境変数Pathにパスを追加

• Windowsキーを押して、envと入力

• 環境変数を編集をクリック
  

• ユーザー環境変数のPathを編集
  

• 環境変数Pathに以下を追加

C:\Users\user\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\LocalCache\local-packages\Python310\Scripts

仮想環境作成

• 仮想環境とは
  • Pythonを使った開発やテストでは、用途に応じて専用の実行環境を作成し、切り替えて使用
  • 仮想環境とは、このように一時的に作成する実行環境のこと
• 仮想環境作成

> md C:\kanban\venv
> cd C:\kanban\venv
> pipenv --python 3.10
Creating a virtualenv for this project...
Pipfile: C:\kanban\venv\Pipfile
... ...
Successfully created virtual environment!
Virtualenv location: C:\kanban\venv\.venv
Creating a Pipfile for this project...

• 仮想環境をアクティベート

C:\kanban\venv>.venv\Scripts\activate
(venv) C:\kanban\venv>

作成した仮想環境内にDjangoインストール

• pipを最新化

(venv)  C:\kanban\venv>pip install --upgrade pip

• Djangoをインストール

(venv)  C:\kanban\venv>pip install django

Collecting django
... ...
Installing collected packages: tzdata, sqlparse, asgiref, django
Successfully installed asgiref-3.5.2 django-4.0.5 sqlparse-0.4.2 tzdata-2022.1

Djangoプロジェクトを作成

• 下記コマンドでプロジェクト作成

(venv)  C:\kanban\venv>django-admin startproject kanban

プロジェクトのサーバーを起動

(venv)  C:\kanban\venv>cd kanban
(venv)  C:\kanban\venv\kanban>python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

Django version 4.0.5, using settings 'kanban.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

• ブラウザでhttp://127.0.0.1:8000/にアクセス
  

Djangoを正常に導入/実行できました。

おわりに

開発環境構築の一環として、Windows環境にDjango、VS Codeをインストールしました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(3): 開発環境構築(React)