Djangoでポートフォリオをつくる① Djangoの準備編

Djangoでポートフォリオをつくる① Djangoの準備編

本記事の概要

こんにちは、大学では都市工学を専攻しながらエンジニアを目指してプログラミングを勉強している「ひつじねこまる」です。最近、エンジニアとしてのスキルを磨き、実際の実務経験に近い形で学習を進めたいと思い、Djangoを使ったポートフォリオサイトを作成することにしました。

ポートフォリオを作成する理由は以下の3つです。

実務経験を積むため：
実務経験を積み、様々な人と関わることで独学では得られない経験を通して成長したいため
スキルを磨くため：
Djangoを使ったWebアプリケーション開発の技術を習得するため
アウトプットの場として：
学習の成果をまとめ、今後の就職活動やインターンシップ応募時に自分のスキルをアピールできるようにするため。

本記事では、

Djangoとは何か

ポートフォリオ作成のための準備手順

を紹介します。自分の学習記録としても残しておきたいので、備忘録的な要素も含めています。

Djangoとは？　簡単に解説

Django（ジャンゴ）は、Pythonで最もよく使用されるWebアプリケーションフレームワークです。Djangoの特徴は、迅速な開発と保守性の高さにあります。

Model(DB処理) - View(全体制御) - Template(画面表示)の3つの構造で処理を行います。

主な特徴は以下の通りです。

フルスタックフレームワーク：管理画面やデータベース連携、認証機能などが標準で備わっているため、すぐに本格的なWebアプリケーションを構築可能。
DRY原則（Don't Repeat Yourself）：コードの重複を避け、効率的に開発できる。
MTVアーキテクチャ（Model-Template-View）：データ管理、画面の表示、データの制御が分離されているため、メンテナンスしやすい。

Djangoの詳細は公式サイトで確認できます：Django公式サイト

Djangoでポートフォリオをつくるための事前準備

Djangoを使ってポートフォリオサイトを作成するために、まずは開発環境を整えていきましょう。今回使用する環境は以下の通りです。

PC: Windows
エディタ: Visual Studio Code（VS Code）
Pythonバージョン: 3.12.4

これから、仮想環境の作成や必要な拡張機能の導入手順を解説していきます。

1. 仮想環境を構築する

まず、Djangoプロジェクトを作成するフォルダを決めます。今回は、portfolio という名前のフォルダを作成し、その中で作業を進めます。

Djangoにおける「プロジェクト」とは？
Djangoにおける「プロジェクト」とは、Webアプリケーションのためのファイルや設定をまとめた1つの単位です。複数のアプリケーション（機能単位）を含むことができ、管理画面やデータベース設定、ルーティングなどが含まれています。

仮想環境の作成手順

次に、Pythonの仮想環境を作成します。
仮想環境は、プロジェクトごとにパッケージを分離して管理できる便利な仕組みです。

VS Codeを起動し、作成した portfolio フォルダを開きます。
ターミナルを開く（Ctrl + ` キーで開けます）。
以下のコマンドを実行して、仮想環境を作成します。


python -m venv .venv

仮想環境を有効化します。

.venv\Scripts\activate

ターミナルに (.venv) と表示されていれば、仮想環境の有効化が成功しています。

これで、仮想環境内でDjangoをインストールする準備が整いました。

2. 拡張機能のインストール

次に、VS CodeでDjangoの開発を快適に進めるための拡張機能をインストールします。

✅ Django

Djangoプロジェクトの構成やコード補完をサポートする拡張機能です。

✅ Django Template

Djangoのテンプレートエンジン（HTMLファイル）用のコード補完やシンタックスハイライトを提供します。

✅ SQLite

DjangoのデフォルトデータベースであるSQLiteファイルの中身をVS Code上で直接確認できるツールです。

✅ djLint

DjangoテンプレートやHTMLファイルのコードを整形してくれる便利な拡張機能です。

djLintの有効化方法

１．pip で　djLintをインストール

python -m pip install -U djlint

２．settings.json に以下の設定を追加して、自動でコード整形ができるようにします


//デフォルトのformatterにprettierを指定
"editor.defaultFormatter": "esbenp.prettier-vscode",
　//保存するごとにformatを実行
  "editor.formatOnSave": true,
　//django-htmlではprettierを無効にし、djLintを指定する
  "[django-html]": {
    "editor.defaultFormatter": "monosans.djlint"
  }

３．拡張機能djLintをインストール

　で djLint を検索してインストールします。

これで、保存時に自動でコードが整形されるようになります。