vscodeでwslを使ってアプリケーションを作成する

はじめに

これからはvscodeとwsl2を接続してアプリケーションを作成していきます。

参考にした書籍はDjangoのコツとツボがゼッタイにわかる本です。
今回は

• vscodeとwsl2の接続（環境構築）
• 仮想環境の作成
• プロジェクト、アプリケーションの作成

を行います。
前提は、ubuntu20.04が入っていること、wsl2が使えること（wslはコントロールパネルのWindowsの機能で"Linux用Windowsサブシステム"と"仮想マシンプラットフォーム"に✓を入れていること）とします。Pythonは3.8.5を使っています。

vscodeとwsl2の接続

まず、vscodeを開き、拡張機能のところで "remote wsl" と入力します。そして、以下のものをインストールします。

インストールできたら、vscodeを再起動します。
再起動したら、左下のものを押し、クリック。


そして、ubuntu20.04を選択します。すると、新しいvscodeが立ち上がります。

左下が以下のようになれば成功です。

これからは、この状態でターミナルを開いてコマンドを打っていきます。

仮想環境の作成

はじめに以下のコマンドでパッケージをまとめてアップデートします。

sudo apt update
sudo apt upgrade

その後、myvenvという名前の仮想環境を作成します。作成は以下のコマンドで行います。

python3 -m venv myvenv

venvは仮想環境を作成することを示したモジュールでmyvenvは仮想環境の名前です。

エラーによっては以下で解決出来るかも知れません。

sudo apt install python3.8-venv

作成した仮想環境を立ち上げるには、仮想環境を作ったディレクトリで以下を入力します。

source myvenv/bin/activate

sourceはファイルを実行するためのコマンドで、activateファイルを実行しています。

実行して、うまく仮想環境が立ち上がれば、以下の表記になるでしょう。

(myvenv)$

また、仮想環境の終了は

deactivate

仮想環境の削除は

rm -rf myvenv

ですることができます。

ここまでで、仮想環境の作成ができました。

プロジェクトとアプリケーションの作成

今後は、本を検索したり、詳細を確認、編集、削除などができる、本棚アプリケーションを作成していく予定です。そのため、ここではターミナルでのアプリケーションの作成までを行います。

まず適当なところで適当な名前のディレクトリを作成します。今回はproject3という名前にしました。

mkdir project3

作成したディレクトリに移動し、仮想環境を作成し、立ち上げます。

cd project3
python3 -m venv myvenv
source myvenv/bin/activate

その後、Djangoのインストールを行います。

pip install django

次に、以前と同様にプロジェクトとアプリケーションの作成を行います。
urhayataro.hatenablog.com

django-admin startproject bookproject
cd bookproject
python3 manage.py startapp book

これで、"bookproject"というプロジェクトと、"book"というアプリケーションの作成ができました。

ここまででプロジェクトとアプリケーションの作成ができましたが、すこしだけ本棚アプリケーションの初期設定をしておきます。
ファイルへの書き込みを行うので、ターミナルに以下を入力します。このときのディレクトリはbookproject/とします。

code .

すると、新たなvscodeが立ち上がり、以下のようなエクスプローラーの画面が左に表示されます。

ここからファイルを開くことができるようになります。

ではbookproject/urls.pyに以下のコードを追加します。

from django.contrib import admin
from django.urls import path, include # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('book.urls')), # 追加
]

また、bookproject/settings.pyに以下のコードを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'book.apps.BookConfig', # 追加
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'], # 追加
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

これができれば、book/urls.pyを新規作成します。
作成はbookproject/bookに移動し、行います。

cd ~ /book/
touch urls.py

これで新規作成したurls.pyに以下を書き込みます。

urlpatterns = []

これで初期設定ができました。

おわりに

今回はvscodeとwsl2の接続、仮想環境の作成、利用したプロジェクトとアプリケーションの作成を行いました。
本棚アプリケーションの続きは今後行います。
urhayataro.hatenablog.com