読み込み中...

Pythonで初めてのWebサイト作成！全10ステップで完全ガイド

Pythonを使ったWebサイト作成のステップバイステップガイド Python
2023.07.03
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webサイト作成は現代のビジネスにおいて欠かすことのできないスキルです。

また、そのプロセスはPythonというプログラミング言語によって大きく効率化され、より洗練されてきました。

この記事を読むことで、Pythonを使ったWebサイト作成の基礎から応用まで、全10ステップで学ぶことができます。

●Pythonとは何か?

Pythonは、簡潔で読みやすいコードが特徴の高レベルのプログラミング言語です。

そのシンプルさから初学者にも理解しやすく、一方でその豊富なライブラリと拡張性により、データ解析、AI開発、ウェブ開発など、幅広い領域で活用されています。

●Webサイトとは何か?

Webサイトは、インターネットを介して情報を公開、共有するためのツールです。

HTML、CSS、JavaScriptなどの言語を使用して作成され、サーバーからクライアントのブラウザに情報を送信することで、ユーザーはWebサイトを閲覧できます。

●Pythonを使ってWebサイトを作る理由

Pythonを使用する主な理由はその簡潔さと、ウェブ開発に特化した強力なフレームワーク、Djangoがあるためです。

Djangoは「電池が付属するフレームワーク」とも称され、多くの機能を標準で提供しています。

これにより、Webサイトの基本的な部分を簡単に作成し、開発者は特定の機能の開発に集中できます。

●Pythonインストールの方法

Pythonのインストールは、公式サイトからダウンロードする方法が最も一般的です。

公式サイトのダウンロードページで、自分の使用しているOSに対応するPythonのインストーラを選びダウンロードし、指示に従ってインストールします。

●Djangoの基本：PythonでWebサイトを作るためのフレームワーク

DjangoはPythonで書かれた、非常に強力なWeb開発フレームワークです。

Webアプリケーションを作成する際の多くの作業を自動化してくれます。

具体的には、データベース操作、ユーザ認証、テンプレートエンジンなどが含まれます。

○Djangoのインストールと設定

Pythonがインストールされている状態で、Djangoをインストールするには、pipというパッケージ管理ツールを使用します。

下記のコマンドを実行することでDjangoをインストールできます。

pip install Django

このコードはpipを使ってDjangoをインストールするコードです。

これにより、Pythonの実行環境にDjangoがインストールされます。

○サンプルコード1：Djangoプロジェクトの作成

Djangoをインストールした後は、新しいプロジェクトを作成します。

下記のコマンドで新しいプロジェクトを作成できます。

django-admin startproject mysite

このコードではdjango-adminというDjangoのコマンドラインツールを使って新しいプロジェクトを作成しています。

ここではプロジェクト名をmysiteとしています。

このコマンドを実行すると、mysiteという名前のディレクトリが作成され、その中にはDjangoプロジェクトに必要な設定ファイルなどが自動的に生成されます。

○サンプルコード2：Djangoアプリケーションの作成

Djangoプロジェクトを作成した後、次に行うべきことは新しいアプリケーションの作成です。

アプリケーションはDjangoプロジェクト内で機能ごとに分割されたモジュールのことを指します。

下記のコマンドで新しいアプリケーションを作成できます。

python manage.py startapp myapp

このコードではmanage.pyというDjangoプロジェクトで使用するコマンドラインツールを使って新しいアプリケーションを作成しています。

ここではアプリケーション名をmyappとしています。

このコマンドを実行すると、myappという名前のディレクトリが作成され、その中にはDjangoアプリケーションに必要な設定ファイルなどが自動的に生成されます。

これで、Pythonを使ったWebサイト作成の初歩的な部分は終了です。

次に、HTMLとCSSを使ったWebページのデザインについて見ていきましょう。

●HTMLとCSSの基本

HTMLとCSSは、Webサイト作成に必要な基本的な言語です。

HTMLはWebページの骨組みを作るための言語で、CSSはWebページの見た目をデザインするための言語です。

これらの言語を使って、Webサイトの各ページの構造とスタイルを定義します。

○サンプルコード3：DjangoでHTMLを使う

Djangoでは、HTMLを使用してWebページのテンプレートを作成します。

下記のサンプルコードは、”Hello, World!”と表示するシンプルなHTMLページを作成するものです。

このHTMLファイルはDjangoプロジェクト内の適切なディレクトリ（例えば、myapp/templates/myapp/）に保存します。

<!DOCTYPE html>
<html>
<head>
    <title>My First Django Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

このコードでは基本的なHTMLの要素を使ってWebページを作成しています。

この例では、<h1>タグを使って”Hello, World!”というテキストを表示しています。

このHTMLファイルをブラウザで開くと、”Hello, World!”というテキストが大きなフォントで表示されます。

○サンプルコード4: DjangoでCSSを使う

次に、CSSを使用してWebページのデザインを行います。

下記のサンプルコードは、前述のHTMLページの見た目を変更するシンプルなCSSを表しています。

このCSSファイルはDjangoプロジェクト内の適切なディレクトリ（例えば、myapp/static/myapp/）に保存します。

h1 {
    color: blue;
    text-align: center;
}

このコードではCSSのセレクタとプロパティを使ってWebページの見た目を定義しています。

この例では、h1セレクタを使って<h1>タグのスタイルを定義し、colorプロパティとtext-alignプロパティを使ってその色と位置を指定しています。

このCSSファイルを適用すると、前述のHTMLページの”Hello, World!”というテキストの色が青に変わり、テキストがページの中央に配置されます。

これで、Pythonを使ったWebサイト作成における基本的なデザインの部分は終了です。

次に、データベースとモデルについて見ていきましょう。

●データベースとモデルの理解

Webサイトを作成する際には、データを格納、管理するためにデータベースが必要です。

データベースとは、様々なデータを効率的に管理し、操作するためのシステムで、例えばユーザーの登録情報やブログ記事の内容などを保存しておく場所と言えます。

また、Djangoではモデルを用いてデータベースとのやりとりを行います。

モデルとは、Pythonのクラスを使ってデータベースのテーブルを表現したもので、モデルの各インスタンスがデータベースのレコードに対応します。

○サンプルコード5：Djangoでデータベースを設定する

では、具体的にデータベースの設定を行うコードを見てみましょう。

データベースの設定は、Djangoプロジェクトの設定ファイルであるsettings.pyで行います。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

このコードでは、データベースの種類と名前を設定しています。

ここではSQLiteというデータベースを使用していますが、他のデータベース（MySQLやPostgreSQLなど）を使用することも可能です。

この設定により、データベースへの接続やデータの取得、保存といった操作が可能となります。

○サンプルコード6：Djangoでモデルを作成する

データベースの設定が完了したら、次にモデルを作成します。

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

このコードでは、タイトル、内容、公開日時を属性に持つPostという名前のモデルを作成しています。

各属性はモデルフィールドと呼ばれ、データベースの各カラムに対応します。

CharFieldは文字列、TextFieldは長い文字列、DateTimeFieldは日時を表すデータ型です。

これにより、ブログ記事のデータを効率よく管理することが可能となります。

次に、このモデルをデータベースに反映させるためのマイグレーションを作成し、適用します。

次のコマンドをターミナルで実行します。

python manage.py makemigrations
python manage.py migrate

これにより、作成したモデルの情報がデータベースに反映され、Postという名前のテーブルが作成されます。

このテーブルにブログ記事のデータを保存することができます。

●ユーザーインターフェースの作成

Webサイトのユーザーインターフェースを作成するには、Djangoのビューとテンプレートが必要になります。

ビューはユーザーからのリクエストを受け取り、適切なレスポンスを返す役割を果たします。

一方、テンプレートはHTMLを使ってユーザーに表示されるページのレイアウトを定義します。

○サンプルコード7：Djangoでビューを作成する

まず、ビューを作成する方法を見ていきましょう。

from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'blog/post_list.html', {'posts': posts})

このコードではpost_listというビューを作成しています。

このビューは、ユーザーがブログの記事一覧ページにアクセスした時に実行されます。

Post.objects.all()は、データベースから全てのブログ記事を取得するコードです。

次に、取得した記事をテンプレート（ここでは’blog/post_list.html’）に渡しています。

これにより、テンプレートでは取得した記事を表示することができます。

○サンプルコード8：Djangoでテンプレートを作成する

次に、テンプレートを作成します。

ブログの記事一覧を表示するためのテンプレートを作成するコードを表します。

{% for post in posts %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <p>{{ post.pub_date }}</p>
{% endfor %}

このコードでは、ビューから渡されたブログ記事（posts）を一つずつ表示しています。

forタグを使用することで、ブログ記事のリストをループ処理し、各記事のタイトル、内容、公開日時を表示しています。

これらのコードにより、ユーザーが記事一覧ページにアクセスした際に、全てのブログ記事が表示されるようになります。

こうして、PythonとDjangoを用いてユーザーインターフェースを作成することができます。

●Webサイトのテストとデプロイ

Webサイトを公開する前に、その機能が正しく動作していることを確認するためのテストが不可欠です。

Djangoはテストを行うための豊富なツールを提供しています。テストにはユニットテストが一般的に用いられます。

ユニットテストは個々の機能が期待通りに動作するかを確認するためのテストで、一つ一つのビューが正しく動作しているかを確認します。

○サンプルコード9：Djangoでテストを行う

下記のコードは、記事一覧を表示するビューが正しく動作しているかを確認するためのユニットテストの例です。

from django.test import TestCase, Client
from django.urls import reverse
from .models import Post

class PostListTest(TestCase):
    def setUp(self):
        self.client = Client()
        self.post = Post.objects.create(title='Test title', content='Test content')

    def test_post_list_view(self):
        response = self.client.get(reverse('post_list'))
        self.assertEqual(response.status_code, 200)
        self.assertContains(response, 'Test title')
        self.assertContains(response, 'Test content')

このコードでは、まずsetUpメソッドでテスト用のクライアントとテスト用のブログ記事を作成しています。

次に、test_post_list_viewメソッドで記事一覧ページにGETリクエストを送り、そのレスポンスが200（成功）であること、またレスポンスにテスト用の記事のタイトルと内容が含まれていることを確認しています。

テストが成功すると、ビューが正しく動作していることが確認できます。

これにより、PythonとDjangoを使ってWebサイトのテストを行う方法を理解することができます。

テストがすべて成功したら、次はWebサイトをインターネット上にデプロイします。

○サンプルコード10：DjangoでWebサイトをデプロイする

Djangoアプリケーションをデプロイするには、多くの方法がありますが、ここではHerokuを用いた方法を説明します。

Herokuは、Pythonを含む多くのプログラミング言語をサポートするクラウドベースのプラットフォームです。

デプロイは次のように行います。

  1. Herokuにログインまたは新規登録します。
  2. Heroku CLIをダウンロードしてインストールします。
  3. ターミナルで次のコマンドを実行します。
heroku login
heroku create your-app-name
git add .
git commit -m "Deploy to Heroku"
git push heroku master

まとめ

本ガイドでは、PythonとそのフレームワークDjangoを使用して、初めてのWebサイトを作成する方法を全10ステップで詳しく解説しました。

Djangoの基本的な使い方から、データベースの設定、ユーザーインターフェースの作成、そしてテストとデプロイに至るまで、一連の流れを学ぶことができました。

特に、Djangoでのビューとテンプレートの作成方法を理解することは、ユーザーがサイトとやりとりするためのインターフェースを作成する際に重要となります。

また、データベースとのやり取りを行うためのモデルの作成と操作方法は、Webサイトでデータを扱うための基本となります。

さらに、ユニットテストによる機能の確認とHerokuを使ったデプロイ方法についても説明しました。テストは、サイトが正しく機能していることを保証するために不可欠です。

そして、作成したサイトをインターネット上に公開するデプロイは、Webサイト作成の最終ステップとなります。

これらを学ぶことで、PythonとDjangoを使って自身のWebサイトを作成する力が身につきます。

プログラミングの学習は実践から得られるものが大きいので、ぜひ手を動かしてみてください。

このガイドが、あなたのWeb開発学習の一助となれば幸いです。