【初心者向けWebサイト開発】FlaskでWebページを作成してみよう

2024年6月22日2024年7月27日

この記事ではWebアプリケーションフレームワークのFlaskを使用して、簡単なWebページを作成する方法を紹介します。

FlaskはPython用のフレームワークのため、事前にPythonの環境構築が必要です。Pythonをインストールしていない場合は以下の記事を参考にPythonをインストールしてください。

Flaskとは

Flaskは、Pythonでウェブアプリケーションを構築するためのフレームワークです。

シンプルで使いやすいことを目指して設計されており、初心者からプロフェッショナルまで幅広いユーザーに利用されています。

Flaskの特徴

軽量: 軽量で動作が軽い。
シンプルな設計: 設定ファイルやディレクトリ構造がシンプルで、学習コストが低い。
拡張性: 必要に応じてさまざまな拡張機能を追加できるため、小規模なプロジェクトから大規模なプロジェクトまで対応できる。
豊富なドキュメント: ドキュメントが充実しており、学習リソースも豊富。

Webページの作成方法

STEP

Flaskのインストール

以下のコマンドでFlaskをインストールしてください。

pip install Flask

STEP

ディレクトリの準備

以下のようなディレクトリ構造で、index.htmlとapp.pyファイルを作成してください。

my_website/
│
├── templates/
│   └── index.html
│
└── app.py

templates/: HTML テンプレートファイルを格納するディレクトリ。
index.html: メインのページとして表示する HTML ファイル。
app.py: Flask アプリケーションのメインファイル。

STEP

Flask アプリケーションの作成

app.pyに以下のコードを記述します。

from flask import Flask, render_template

app = Flask(__name__)

# ホームページのルート
@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

このコードでは、Flask クラスから app オブジェクトを作成し、ルートとして / にアクセスした際に index() 関数が呼び出され、templates/index.html をレンダリングして返します。

STEP

HTML テンプレートの作成

index.htmlに以下のコードを記述します。

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
    <p>Welcome to my website built with Flask and Python.</p>
</body>
</html>

タイトルと本文だけの簡単なページです。

STEP

Flask アプリケーションの実行

以下のコマンドで作成したFlaskアプリケーションを実行します。