目次

概要

仮想マシンとして作成したLinux環境で、Visual Studio Code を使って、Djangoを用いた開発環境の構築について説明します。仮想マシンを使うことで、ホストマシン（WindowsやMac）に影響を与えることなく、様々な失敗を行うことができます。ホストマシンで失敗を繰り返すと、何かしらのミスで工場出荷状態に戻さないといけないことになる可能性を考えますと、仮想マシンを使い、いくらでも失敗ができる状況にしておくことは理にかなっていると言えます。

手順

LinuxにGUI環境をインストール

既にインストール済みの場合は、飛ばしてください。

で説明した「Ubuntu Desktop」や「Lubuntu Desktop」の他に、「KDE デスクトップ」といったものもあります。「KDE デスクトップ」を使いたい場合は、次のコマンドを実行しましょう。「KDE デスクトップ」は、GUIとしては歴史があり、1998年に最初のバージョンが登場しました。

もし、一度もGUI環境をインストールしていない場合は、下記のコマンドを実行した方が良いです。

「KDE デスクトップ」の画面例

Open

画面左下をクリックし、上図のようにメニューを表示します。「Settings」>>「System Settings」>>「Regional Settings」の順にクリックします。

「Language」の画面で、「Add Language」をクリックして、日本語を追加し、日本語の順番を入れ替え、「Apply」をクリックします。

Open

「Formats」で、「Region」をクリックし、日本語を選びます。「Apply」をクリックします。

再起動します。

画面が日本語になりました。

ひんぱんに使うターミナルアプリは、メニューを表示し、「システム」>>「Konsole」で起動します。

日本語入力設定

input method がJA(Japanese)となっているので、右クリックし、「Preferences」をクリックします。

「IBus Preferences」が表示されるので、「Input Method」タブに切り替え、「Add」をクリックします。「Japanese」>>「Mozc」の順にクリックし、「Add」をクリックします。下図のようになるので「Close」をクリックします。

「JA」と表示されてる部分をクリックし、input method を Japanese - Mozc に変更します。Mozc を使うことで、日本語入力ができるようになります。

LinuxにChromiumブラウザをインストール

Chromeブラウザの親にあたる、Chromium ブラウザはインストールがとても簡単なので、WebブラウザとしてChromiumブラウザを入れます。KDEデスクトップには、Firefoxが初めから入っていますので、追加でインストールするかは本人次第。

LinuxにVisual Studio Code をインストール

開発用のツールとして、Visual Studio Code もインストールしましょう。

Python3用のpipをインストール

Pythonの仮想環境を構築する「python3-venv」のインストールには、pipが必要なのでインストールします。

Python3用の仮想環境構築ツールをインストール

Pythonの仮想環境を構築する「python3-venv」をインストールします。

作業用ディレクトリの作成

Djangoを使って、REST APIやWebアプリなど開発するにあたり、作業用のディレクトリを作成します。ここでは、ディレクトリ名を「django-work1」としていますが、好みのディレクトリ名に読み替えてください。

Python3 仮想環境の作成

作業用ディレクトリ内に、Python3の仮想環境「.venv」を作成します。「.venv」は、他の名称でも構いません。

作成したPython3 の仮想環境を有効化（起動）します。「.venv」の部分は、上記で作成した仮想環境名です。

実行結果として、(.venv)と冒頭につくようになります。これは、作成したPythonの仮想環境に接続し、作業が出来る状態であることを意味します。

Visual Studio Code を起動

ここでは、「KDEデスクトップ」の場合について説明しますが、「Ubuntu Desktop」や「Lubuntu Desktop」の場合であっても、それぞれのメニューからVisual Studio Code を起動することができます。

メニューを表示し、「開発」>>「Visual Studio Code」で起動します。初回起動時に日本語化等の案内が出るので、画面指示に従って、Visual Studio Code を日本語化しよう。

Visual Studio Code で、Python Extentionsをインストール

拡張機能のアイコンをクリックします。

「Python」で調べ、拡張機能「Python extension for Visual Studio Code」を選び、「インストール」をクリックします。

インストール後、「エクスプローラー」のアイコンをクリックします。

Visual Studio Code で、作業用ディレクトリを開く

Vusual Studio Code で、「ファイル」>>「フォルダを開く」の順にクリニックします。

先ほど作成した作業用ディレクトリを選び、「開く」をクリックします。

「はい、作成者を信頼します」をクリックします。

Visual Studio Code で、作業用ディレクトリが読み込まれます。

Visual Studio Code で、Python3 のインタープリターを選択

「表示」>>「コマンドパレット」の順にクリックします。

下図のように、python と入れ、表示された「Python: インタープリターを選択」をクリックします。

venv が含まれるPythonインタープリターをクリックします。下図では、おすすめ と表示されています。venv が含まれているので、Python仮想環境ということがわかります。

「ターミナル」>>「新しいターミナル」の順にクリックします。

(.venv)と冒頭についた状態が表示されます。Python仮想環境を作成し、activate を実行した時と同じ状態が、Visual Studio Code のターミナルでも表示されます。Visual Studio Codeから、作成したPythonの仮想環境に接続し、作業が出来る状態であることを意味します。

Visual Studio Code から、開発の作業ができるようになりました。

Python仮想環境で、pipのアップデート

Python仮想環境に接続したVisual Studio Codeで、次のコマンドを実行します。

実行結果

pip 23.1.2 になりました。（2023年６月時点）

Python仮想環境で、djangoのインストール

Python仮想環境に接続したVisual Studio Codeで、次のコマンドを実行します。django をインストールします。

実行結果

django 4.2.2 がインストールされました。（2023年６月時点）

Django プロジェクトの作成

「web_app1」というDjangoプロジェクトを作成します。「web_app1」は任意なので、他の名称でも構いません。

作業用ディレクトリに、「web_app1」というディレクトリと、「manage.py」が生成されます。

次のコマンドを実行し、空のデータベースを作成します。

実行結果

Django 開発用サーバーの起動

次のコマンドを実行し、Djangoの開発用サーバーを起動し、Djangoが有効であることを確認することができます。

実行結果

Webブラウザで、Chromiumブラウザを起動します。メニューを表示し、「インターネット」に入っています。

Chromiumブラウザで、http://127.0.0.1:8000/ にアクセスします。

Django 開発用サーバーを停止する場合は、Visual Studio Codeのターミナル上で、Control（Ctrl）キー + c キーを押します。

終了したことで、Django 開発用サーバーがエラーになり、停止したことがわかります。

Python仮想環境の停止方法

Python仮想環境（.venv）を停止するには、ターミナルでdeactivate を実行します。

Python仮想環境を再度有効化する方法

Python仮想環境（.venv）を再有効化するには、ターミナルで次のコマンドを実行します。

Python仮想環境の制御がわかれば、これで、Djangoの開発をスタートすることができます。

Visual Studio Code で、Django Extentionsをインストール

必須ではありませんが、Django用の拡張機能もあります。インストールには、拡張機能のアイコンをクリックします。

「Django」で調べ、「Django extension for Visual Studio Code」を選び、「インストール」をクリックします。

インストール後、「エクスプローラー」のアイコンをクリックします。

Djangoを使ったアプリケーション開発に取り組む

チュートリアルをいくつかやってみましょう。

Polls アプリケーションの開発 >>

blog アプリケーションの開発 >>

ランチマップアプリの開発 >>

参考資料

Django Tutorial in Visual Studio Code : https://code.visualstudio.com/docs/python/tutorial-django