DjangoとVue.jsでシンプルなTodoアプリを作る 02.Djangoセットアップ

前回の記事はこちら

setup

はじめにアプリのセットアップをします。
初めてPythonに触れる方は、最初だけ少し大変ですが、頑張ってください!

Python3をダウンロード

python3をダウンロードしていない方は、Djangoで開発をするために、事前にダウンロードしてください。

DjangoはPythonが元になって作られたもの。
つまりニワトリとひよこみたいな関係なので、開発するのがDjangoでもPythonも必要になってきます!

詳しくは下記のwebサイトを参照したり、ググってみてください。
特にprogateの解説はとてもわかり易いのでおすすめです!
https://wsvincent.com/install-python/
https://prog-8.com/docs/python-env/

下記をターミナルで実行して、Python 3以上のバージョンがでてくれば大丈夫です。

--versionオプションは、バージョンを確認するためのものです。
この場合、Pythonのバージョンを確認しています。

$ python3 --version
Python 3.9.5

続いて、mkdirコマンドで開発用のアプリを置くディレクトリを作成し、そのディレクトリにcdコマンドで移動します。

ディレクトリとは、macやwindowsでいう、フォルダをターミナル上で示した言葉のようなもので、ディレクトリ≒フォルダだと思ってもらっていいです。
mkdir(make ディレクトリ→ディレクトリを作る)&&(かつ)cd(change ディレクトリ→ディレクトリを変える)という作業をしています。

$ mkdir todo && cd todo

続いて、pipenvをインストールします。

$ pip3 install pipenv
$ pipenv shell

pipenvとは、Pythonで開発するときにプロジェクトのパッケージ管理をしてくれるツールです。
簡単に言うと、アプリ開発をするときに便利な武器みたいなのを保存し、管理してくれるものです。

アプリを起動させるときは、
pipenv shellを実行することを忘れないでください。
これをしないと、便利な武器は使えません。

下記みたいに(todo)と表示されていれば大丈夫です!

(todo)
[fujiikayo@MacBook-Pro:~/develop/todo]

続いて、Djangoをpipenv内にインストールします。

$ pipenv install django

✔ Success!
Updated Pipfile.lock (1d8520)!
Installing dependencies from Pipfile.lock (1d8520)...
 🐍   ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ 0/0 — 00:00:00
To activate this project's virtualenv, run pipenv shell.
Alternatively, run a command inside the virtualenv with pipenv run.

success!と出て、インストールできたら、todoディレクトリにtaskアプリを作ります。

[fujiikayo@MacBook-Pro:~/develop/todo]
$ django-admin startproject config .
$ python manage.py startapp task

# 下記のようなディレクトリ構成になっていればok
$ ls
Pipfile      Pipfile.lock config       manage.py    task

続いて、コードを変更していきます。
vscodeやatomなどのコードエディターを開いてください。

私の場合はvscodeなので、下記コマンドでエディタ内に入れました。

[fujiikayo@MacBook-Pro:~/dev/simple_todo]
$ code .

todoプロジェクトに、taskアプリを追加します。

config/settings.py

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'task',  ## 追記
]

続いて、taskのディレクトリ配下に
staticディレクトリ(todo/static)と、templates(todo/task/templates)ディレクトリをおきます。

ディレクトリを設置したら、djangoに、
ディレクトリを設置したことを設定ファイルに書くことによって知らせます。
これがないと、アプリが動作しないので気をつけてください。

config/settings.py

import os　# 追加
from pathlib import Path


TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       # 追加
       'DIRS': [os.path.join(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',
           ],
       },
   },
]

-----

STATIC_URL = '/static/'

# 追加
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'static')
]

htmlを置くtemplateディレクトリ
cssやjsなどのフロント側のファイルを置くstaticディレクトリを
それぞれ設定したことをsettings.pyに書きました。

続いて、todo/templatesディレクトリにbase.html
staticディレクトリににmain.js 、style.cssを置きます。

次回の記事⏩

次回の記事では、Vueのセットアップ、ベースとなるページをbootstrapでかいていきたいと思います。

次回も読みたい方は、スキを貰えると嬉しいです。

おまけ記事

⏩webサービスの作り方が気になったら

⏩webエンジニアの働き方が気になったら

作者のプロフィール

https://veil-vinca-83f.notion.site/b5b066fb0fd24f0684901973bd6f895d