ポートフォリオ構築チュートリアル

自己紹介

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

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

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

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

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

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

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

はじめに

Djangoでポートフォリオを作ってみましょう。

ポートフォリオを作るメリット

・転職時のプレゼン資料
・書類選考での優遇
・技術力の担保

ポートフォリオを作成して、あなたのスキルや開発したWebアプリケーションをのせてアピールしましょう。

何を制作して、何を勉強したかなど、細かく書いておくと、強力な営業ツールになります。

Zenn

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

Djangoポートフォリオ構築

目標

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

・ポートフォリオの作り方を学習
・データベースとのやりとりを学習
・お問い合わせの作り方を学習

機能

・作品リスト
・作品詳細
・自己紹介
・職歴
・学歴
・スキル
・お問い合わせ

前提知識

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

・Python
・HTML
・CSS
・JavaScript

ブログ構成チュートリアルでDjangoを詳しく説明していますので、まだ実施していない方は、実施して下さい。

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

準備

開発の準備をします。

GitHub準備

GitHubのリポジトリを作成します。

.gitignore作成

.gitignoreファイルを作成してください。

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

.gitignore

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

仮想環境の作成

myvenvという名前で仮想環境を構築します。

$ python3 -m venv myvenv

仮想環境の実行

sourceコマンドで仮想環境を実行します。

ターミナルを再起動したときなど、必ずこのコマンドを実行して、仮想環境に入って下さい。

仮想環境に入ると、ターミナルに(myvenv)という印が付きます。

これがあると、仮想環境に入っていることになります。

$ source myvenv/bin/activate

requirements.txt作成

requirements.txtファイルを作成してください。

開発で必要なパッケージを記載します。

requirements.txt

Django==3.1.4
Pillow~=8.1.0
django-widget-tweaks~=1.4.8

パッケージのインストール

このコマンドで、requirements.txtに記載されたパッケージがインストールされます。

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

これで、Djangoで開発する準備ができました。

プロジェクト作成

プロジェクトを作成します。

(myvenv) ~$ django-admin startproject mysite .

環境設定変更

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

mysite/settings.py

LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

STATIC_URL = '/static/'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

コード解説

画像をアップロードした場合、ルートディレクトリのimagesフォルダに画像が格納されます。

MEDIA_URL = '/media/'

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

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

(myvenv) ~$ python3 manage.py migrate

Webサーバーを起動する

Djangoが起動できるか確認しましょう。

(myvenv) ~$ python3 manage.py runserver

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

http://127.0.0.1:8000/

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

アプリケーション作成

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

今回は、アプリケーションの名前をappとします。

(myvenv) ~$ python3 manage.py startapp app

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

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

widget_tweaksパッケージも同時に設定します。

mysite/settings.py

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