ブログ構築チュートリアル

自己紹介

プログラミング講師の飼鳥晴康(@hathle)です。

エンジニア歴は10年以上で海外(カナダ)就労も経験しています。

カナダでは、映画を作っていました。

現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。

お問い合わせなどは、Twitter(@hathle)からお願いいたします。

プログラミングは人生を変えることができます。

目標に向かって、一緒に頑張っていきましょう！！

はじめに

このチュートリアルは、Django初心者向けのWebアプリケーション開発チュートリアルです。

このチュートリアルを実施すると、いちからWebアプリケーションを開発できるようになります。

まずはDjangoでシンプルなブログサイトを構築します。

Djangoの使い方を学習していきましょう。

動画解説

動画でも解説しています。

ぜひ参考になりましたら、「チャンネル登録」と「いいねボタン」をよろしくお願いします。

Zenn

Zennでのチュートリアルは見やすくなっています。

Djangoブログシステム構築

目標

下記を学習していきます。

・Djangoとは？
・モデルの作り方
・URLの作り方
・ビューの作り方
・フォームの作り方
・テンプレートの作り方

機能

・ブログ投稿 
・ブログ編集
・ブログ削除
・ログイン
・ログアウト
・サインアップ

前提知識

Djangoを始める前に、下記の言語は学習しておいて下さい。

・Python
・HTML
・CSS
・JavaScript

では、始めて行きましょう！！

準備

GitHub

GitHubのアカウントを取得して下さい。

GitHub: Let’s build from here

「New repository」をクリックして、好きな名前でGitHubのリポジトリを作成します。

ローカルにリポジトリ名と同じフォルダを作成します。

ローカルフォルダとGitHubのリポジトリを連携させます。

echo "# django-blog" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/haruyasu/django-blog.git
git push -u origin master

※リポジトリ名
作成したリポジトリ名に変更します。

この時点でREADME.mdだけコミットされていると思います。

.gitignoreファイルを追加

ルートディレクトリに.gitignoreファイルを作成します。

django-blog
├── README.md
└───.gitignore

記述されたファイルは、git管理下から除外されてコミットされなくなります。

必ず追加するようにしましょう。

.gitignore

myvenv
db.sqlite3
.vscode
__pycache__
*.pyc
.DS_Store

仮想環境

仮想環境を作成します。

仮想環境とは？

開発を行うときは、用途に応じて専用の実行環境を作成し、切り替えて使用するのが一般的です。

一時的に作成する実行環境を「仮想環境」と言います。

仮想環境作成

仮想環境はpythonに標準搭載されている仮想環境プログラムの「venv」を使用します。

ルートディレクトリで下記コマンドを入力します。

$ python3 -m venv myvenv

コマンドを実行すると、myvenvフォルダが作成されます。

django-blog
├── README.md
├── .gitignore
└───myvenv

仮想環境実行

sourceコマンドで仮想環境が実行できます。

ルートディレクトリで下記コマンドを入力します。

Linux、Mac

$ source myvenv/bin/activate

Windows

$ myvenv\Scripts\activate

pipコマンドアップデート

現在、古いコマンドがインストールされています。

アップデートしておきましょう。

(myvenv) ~$ pip3 install --upgrade pip setuptools

パッケージ設定

requirements.txtを作成し、開発に必要なパッケージをインストールします。

django-blog
├── README.md
├── .gitignore
├── myvenv
│   └── ...
└───requirements.txt

requirements.txtに、アプリに必要なパッケージを記載します。

requirements.txt

Django==3.1.4
django-widget-tweaks~=1.4.8
django-allauth~=0.41.0

インストール

仮想環境にパッケージをインストールします。

(myvenv) ~$ pip3 install -r requirements.txt

プロジェクト作成

Djangoの仕組み

DjangoはMTVモデルを採用しています。

下記のイニシャルを取ったものです。

Model：データベースに格納されているデータ
Template：テンプレートファイルによって定義されたそれぞれのページのデザイン
View：どのページを表示させるかを決定する処理

用語説明

・ルーティング urls.py：URLからどのアプリケーションやビューに処理を渡すかを指定します。
・ビュー views.py：モデルにデーターベース操作を指示し、テンプレートに表示用のデータを渡します。
・フォーム forms.py：フォーム画面で入力されたデータを保持します。
・モデル models.py：データベースと連携します。
・テンプレート xxx.html：HTMLのテンプレートにビューから受け取ったデータを埋め込み表示します。

プロジェクト作成

Djangoは1つのプロジェクトと1つ以上のアプリケーションで構築します。

複数のアプリケーションを作成して、互いに依存しないようにすると、管理が楽になります。

django-adminコマンドでプロジェクトを作成します。

最後に.(ドット)をつけることで、ディレクトリ直下に作成します。

(myvenv) ~$ django-admin startproject mysite .

環境設定変更

settings.pyを修正してプロジェクトの設定を変更します。

主に日本語対応になります。

mysite/settings.py

ALLOWED_HOSTS = ['*']

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

データベースのセットアップ

migrateコマンドを実行することで、データベースがセットアップされます。

(myvenv) ~$ python3 manage.py migrate

Webサーバーを起動する

(myvenv) ~$ python3 manage.py runserver

URLにアクセスすると、Webページが表示されます。

http://127.0.0.1:8000/

Webサーバーを停止するには、Ctrl + Cを同時に押すと停止します。

アプリケーション作成

アプリケーションを作成していきます。

startappコマンドでアプリケーションを追加できます。

アプリケーション名はappにします。

(myvenv) ~$ python3 manage.py startapp app

├── app // アプリケーションディレクトリ
│   ├── admin.py // 管理サイト設定ファイル
│   ├── apps.py // アプリケーション構成設定ファイル
│   ├── __init__.py
│   ├── migrations // マイグレーションファイルを格納するディレクトリ
│   │   └── __init__.py
│   ├── models.py // モデル定義ファイル
│   ├── tests.py // テストコードファイル
│   └── views.py // ビュー定義ファイル
├── db.sqlite3 // データベース
├── manage.py　// コマンド実行ファイル
├── mysite // プロジェクトディレクトリ
│   ├── __init__.py
│   ├── settings.py // プロジェクト設定ファイル
│   ├── urls.py // プロジェクト用ルーティング定義ファイル
│   └── wsgi.py // デプロイ用ファイル
├── myvenv // 仮想環境
│   └── ...
└── requirements.txt // インストールファイル

このようなディレクトリが自動的に生成されます。

Djangoでアプリケーションを使えるように設定

アプリケーションを使えるようにするには、プロジェクトの設定にアプリケーションを追加する必要があります。

INSTALLED_APPSに追加します。

mysite/settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widget_tweaks', # 追加
    'app', # 追加
]

モデル

Djangoではモデルをとおして、データベースを構築します。