FlaskとPythonを使って手軽に始めるWebアプリ開発｜30代機械系エンジニアの趣味ブログ

Web開発の世界に入門し、Pythonを活用したい方に向けて、Flaskフレームワークを使用した簡単なWebアプリ開発の手順をご紹介します。FlaskはPythonの軽量Webアプリケーションフレームワークで、その使いやすさと柔軟性から初心者にも扱いやすいことが特徴です。

アイコン名を入力

・Flaskとは何か、そしてPythonを使ったWeb開発の始め方が知りたい。
・簡単なWebアプリケーションのサンプルコードや実装方法を探している。
・データベースを使ったFlaskのアプリ開発方法について学びたい。

こんな疑問に答えます。

記事の対象者

Contents

第1章: Flaskとは – Pythonの軽量Webフレームワークの理解
第2章: Flaskを使った基本的なWebアプリケーションの構築
2.4 テンプレートの作成
2.5 アプリケーションの実行
第3章: Flaskとデータベースの連携詳解
1. 3.1 Flask-SQLAlchemyの設定
3.2 モデルの作成
3.3 データベースの初期化
1. 3.4 データの操作
  - データの追加
  - データの読み出し
第4章: 実際のWebアプリ開発例 – ブログアプリケーション
第5章: Flaskの応用と発展的な学習

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

第1章: Flaskとは – Pythonの軽量Webフレームワークの理解

Flaskは、Python言語で開発された軽量なWebアプリケーションフレームワークです。そのシンプルさと柔軟性により、Web開発の入門者から経験豊富な開発者まで幅広く使われています。ここでは、Flaskの基本的な特徴、利用シーン、そして主要な機能について詳しく解説します。

1.1 Flaskの主な特徴

Flaskは「マイクロフレームワーク」として知られ、以下のような特徴を持っています：

軽量性: Flaskは最小限のコア機能を提供し、必要に応じて機能を拡張できます。これにより、プロジェクトの要件に合わせた柔軟な開発が可能です。
簡潔な構文: Pythonの明快な構文を活かし、可読性の高いコードを書くことができます。初学者にとっても理解しやすい構造です。
拡張性: さまざまな拡張機能を利用して、認証、データベース統合、フォーム検証などの複雑な機能を追加することができます。

1.2 Flaskの利用シーン

Flaskは多様な用途に適応できるフレームワークですが、特に以下のようなシーンで活用されます：

小規模から中規模のWebアプリケーション: Flaskの軽量性は、特に小規模から中規模のプロジェクトに適しています。シンプルなブログからデータ駆動型のWebサイトまで、幅広いアプリケーションの開発が可能です。
APIの開発: RESTfulなAPIを構築するためにFlaskを使うことができます。フロントエンドとバックエンドの分離が進む現代のWeb開発トレンドにもマッチしています。
プロトタイピング: アイデアやコンセプトを迅速に形にするためのプロトタイピングにも適しています。

1.3 Flaskの主要機能

Flaskには以下のような主要な機能が備わっています：

ルーティングとビュー: URLルートを関数にマッピングすることで、HTTPリクエストを処理し、適切なレスポンスを返します。
テンプレートエンジン: Jinja2テンプレートエンジンを使用し、動的なHTMLコンテンツの生成を容易にします。
フォームデータの処理: フォームから送信されたデータの受け取りやバリデーションを簡単に行えます。
セッション管理: セッションを通じて、ユーザーの状態や活動を追跡し、よりリッチなユーザーエクスペリエンスを提供します。

1.4 Flaskのインストールと基本的な使用法

FlaskのインストールはPythonのパッケージマネージャーであるpipを使って簡単に行うことができます。以下は、Flaskをインストールし、基本的なWebページを表示する簡単な例です。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

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

このコードは、Flaskアプリケーションの基本的な構造を示しています。@app.route('/')はルートURLにアクセスした際に実行される関数を定義し、単純な文字列「Hello, World!」をブラウザに表示します。

このように、Flaskを用いることで、Pythonの基礎知識を活かし、効率的かつ効果的にWebアプリケーションの開発を行うことができます。次章では、Flaskを使用した具体的なWebアプリケーションの作成方法について詳しく解説します。

第2章: Flaskを使った基本的なWebアプリケーションの構築

Flaskを使用して基本的なWebアプリケーションを構築する過程をステップバイステップで説明します。ここでは、Flaskのインスタンス作成、ルーティングの設定、HTMLテンプレートの使用など、Webアプリ開発の基本を学びます。

2.1 Flaskのインスタンス作成

Flaskアプリケーションの開発を始めるには、まずFlaskクラスのインスタンスを作成する必要があります。これは、Flaskアプリケーションの主要なエントリーポイントとなります。

from flask import Flask
app = Flask(__name__)

ここで、__name__は現在のPythonスクリプトを指します。Flaskはこれを使用して、リソースやテンプレートの位置を知ることができます。

2.2 ルーティングの設定

ルーティングはURLと関数を結び付けるプロセスです。これにより、特定のURLにアクセスがあった時に実行される関数を定義できます。

@app.route('/')
def home():
    return 'Hello, Flask!'

この例では、ルートURL（'/'）にアクセスがあったときにhome関数が呼び出され、”Hello, Flask!”というテキストがブラウザに表示されます。

2.3 HTMLテンプレートの使用

FlaskはJinja2テンプレートエンジンを利用して、動的なHTMLコンテンツを生成します。テンプレートを使用することで、PythonコードとHTMLを分離し、保守性と可読性を高めることができます。

from flask import render_template

@app.route('/')
def home():
    return render_template('index.html')

このコードでは、render_template関数を使用してindex.htmlテンプレートをレンダリングし、その結果を返しています。テンプレートファイルは通常、アプリケーションのtemplatesフォルダ内に配置します。

2.4 テンプレートの作成

index.htmlはシンプルなHTMLファイルですが、Jinja2のテンプレート機能を利用して動的なデータを表示することができます。

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to Flask!</h1>
</body>
</html>

このテンプレートは、ブラウザに「Welcome to Flask!」という見出しを表示します。実際のアプリケーションでは、このテンプレートを拡張して、より複雑なデータやロジックを含むページを生成できます。

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

最後に、Flaskアプリケーションを実行するためのコードを追加します。

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

app.run()は開発サーバーを起動し、debug=Trueはデバッグモードを有効にして、開発中のエラーを容易に追跡できるようにします。

これで、Flaskを使用した基本的なWebアプリケーションの構築の基礎が完成しました。次章では、Flaskとデータベースの連携について詳しく説明します。

第3章: Flaskとデータベースの連携詳解

Flaskアプリケーションにデータベース機能を組み込むことは、アプリケーションの多様性と機能性を大きく高めます。データベースを使用することで、ユーザー情報の保存、ブログの投稿、商品データの管理など、多岐にわたるデータ駆動型のアプリケーションを開発できます。

3.1 Flask-SQLAlchemyの設定

Flaskでは、SQLAlchemyを使用してデータベースとのやり取りを容易にします。SQLAlchemyはORM（Object-Relational Mapping）ツールであり、Pythonオブジェクトとデータベーステーブルをマッピングします。まずはFlaskアプリケーションでSQLAlchemyを設定しましょう。

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
# データベースの設定。ここではSQLiteを使用
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///example.db'
db = SQLAlchemy(app)

このコードは、FlaskアプリケーションにSQLAlchemyを組み込んで、SQLiteデータベースへの接続を設定しています。

3.2 モデルの作成

次に、データベース内に作成するテーブルに相当するモデル（クラス）を定義します。これはデータベースのスキーマを反映したものです。

class User(db.Model):
    # ユーザーID（主キー）
    id = db.Column(db.Integer, primary_key=True)
    # ユーザー名
    username = db.Column(db.String(80), unique=True, nullable=False)
    # メールアドレス
    email = db.Column(db.String(120), unique=True, nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

このUserクラスは、ユーザー情報を格納するテーブルの構造を定義しています。db.Columnはテーブルの各カラムを示し、型や制約を設定できます。

3.3 データベースの初期化

定義したモデルをもとに、実際にデータベースにテーブルを作成する必要があります。これを行うには、Flaskアプリケーションでデータベースの初期化を行います。

# データベースの初期化
db.create_all()

# アプリケーションの起動
if __name__ == '__main__':
    app.run(debug=True)

このコードはアプリケーションの起動時にデータベーステーブルを作成します。db.create_all()はモデルに基づいて必要なテーブルをデータベースに作成します。

3.4 データの操作

データベースが設定されたら、データの追加、読み出し、更新、削除などの操作を行うことができます。

データの追加

# 新しいユーザーの追加
new_user = User(username='newuser', email='newuser@example.com')
db.session.add(new_user)
db.session.commit()

このコードは新しいユーザーを作成し、データベースに追加しています。db.session.add()でセッションに追加し、db.session.commit()でデータベースに変更をコミットします。

データの読み出し

# ユーザーの読み出し
users = User.query.all()
for user in users:
    print(user.username)

User.query.all()はデータベースからすべてのユーザーを取得します。

この章ではFlaskとデータベースの基本的な連携方法を説明しました。データベースの操作を理解し、実践することで、より動的でインタラクティブなWebアプリケーションを構築できます。次の章では、具体的なWebアプリケーションの開発例を見ていきます。

第4章: 実際のWebアプリ開発例 – ブログアプリケーション

この章では、Flaskとデータベースを使用して簡単なブログアプリケーションを作成するプロセスを詳しく解説します。この実例を通じて、Flaskでの基本的なWebアプリケーションの開発方法を理解し、自身でアプリケーションを構築できるようになります。

4.1 アプリケーションの設定

まず、Flaskアプリケーションの基本的な設定とデータベースの接続を設定します。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
db = SQLAlchemy(app)

このコードでは、Flaskインスタンスを作成し、SQLiteデータベースへの接続を設定しています。

4.2 モデルの定義

ブログの投稿を管理するためのモデル（ここではPostという名前のクラス）を定義します。

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

    def __repr__(self):
        return '<Post %r>' % self.title

このPostクラスは、ブログの投稿に必要なtitleとcontentフィールドを持つデータベーステーブルを定義しています。

4.3 ルーティングとビュー

次に、アプリケーションのルーティングとビュー関数を定義します。

メインページの表示

@app.route('/')
def index():
    posts = Post.query.all()
    return render_template('index.html', posts=posts)

この関数は、データベースからすべての投稿を取得し、それらをindex.htmlテンプレートに渡して表示します。

投稿の追加

@app.route('/post/create', methods=['GET', 'POST'])
def create_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        new_post = Post(title=title, content=content)
        db.session.add(new_post)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('create_post.html')

このビュー関数では、新しいブログ投稿を作成してデータベースに追加します。フォームから送信されたデータを受け取り、新しいPostインスタンスを作成しています。

4.4 テンプレートの作成

Flaskでは、HTMLテンプレートを使ってビューを構築します。以下はindex.htmlとcreate_post.htmlの基本的な例です。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
</head>
<body>
    <h1>Blog Posts</h1>
    {% for post in posts %}
    <div>
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
    </div>
    {% endfor %}
</body>
</html>

create_post.html

<!DOCTYPE html>
<html>
<head>
    <title>Create Post</title>
</head>
<body>
    <h1>Create New Post</h1>
    <form method="POST">
        <input type="text" name="title" placeholder="Title" required>
        <textarea name="content" placeholder="Content" required></textarea>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

これらのテンプレートは、ブログ投稿の一覧表示と新しい投稿の作成フォームを提供します。

4.5 プログラム全文

Flaskのプロジェクトは、その構造や規模によって異なりますが、一般的な小規模から中規模のプロジェクトでの典型的なディレクトリ構造は次のようになります：

FlaskApp/
│
├── app.py                  # アプリケーションのメインファイル
├── config.py               # 設定ファイル
│
├── templates/              # HTMLテンプレートファイルを格納するディレクトリ
│   ├── layout.html         # ベースとなるレイアウトファイル
│   ├── index.html          # メインページのテンプレート
│   └── ...                 # その他のテンプレートファイル
│
├── static/                 # 静的ファイル（CSS, JavaScript, 画像等）
│   ├── css/
│   ├── js/
│   └── images/
│
├── models.py               # データベースモデル
│
└── requirements.txt        # 必要なパッケージのリスト

今回のプログラムの全文を記載します。

Flaskでの簡単なブログアプリケーションの例を全文で示します。この例では、基本的なアプリケーション構造、データベースモデル、ルーティング、テンプレートの使用方法を含めます。

app.py (メインアプリケーションファイル)

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy

# Flaskインスタンスの作成。これによりアプリケーションが始まります。
app = Flask(__name__)

# データベースの設定。ここではSQLiteを使います。
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
db = SQLAlchemy(app)

# データベースのモデル（構造）の定義。ここではブログの投稿を表すPostモデルを作ります。
class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True) # 投稿ごとに異なるID
    title = db.Column(db.String(100), nullable=False) # 投稿のタイトル
    content = db.Column(db.Text, nullable=False) # 投稿の内容

    def __repr__(self):
        return '<Post %r>' % self.title

# トップページのルーティングとビュー関数。Webページにアクセスしたときに最初に表示される部分です。
@app.route('/')
def index():
    posts = Post.query.all() # すべての投稿をデータベースから取得
    return render_template('index.html', posts=posts) # テンプレートにデータを渡して表示

# 新しい投稿を作るページのルーティングとビュー関数。
@app.route('/post/create', methods=['GET', 'POST'])
def create_post():
    if request.method == 'POST':
        # フォームから送信されたデータを取得
        title = request.form['title']
        content = request.form['content']
        # 新しい投稿の作成
        new_post = Post(title=title, content=content)
        db.session.add(new_post) # データベースセッションに追加
        db.session.commit() # データベースに保存
        return redirect(url_for('index')) # トップページにリダイレクト
    return render_template('create_post.html') # 投稿作成ページのテンプレートを表示

# アプリケーションの起動部分。ここでWebサーバーが開始されます。
if __name__ == '__main__':
    db.create_all() # データベースのテーブルを作成
    app.run(debug=True) # デバッグモードでアプリを実行

templates/index.html

templatesフォルダの下にindex.htmlファイルを保存します。

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
</head>
<body>
    <h1>Blog Posts</h1>
    <!-- 新しい投稿を作成するページへのリンク -->
    <a href="{{ url_for('create_post') }}">Create New Post</a>
    <!-- データベースから取得した投稿を表示 -->
    {% for post in posts %}
    <div>
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
    </div>
    {% endfor %}
</body>
</html>

templates/create_post.html

templatesフォルダの下にcreate_post.htmlファイルを保存します。

<!DOCTYPE html>
<html>
<head>
    <title>Create Post</title>
</head>
<body>
    <h1>Create New Post</h1>
    <!-- 新しい投稿を作成するためのフォーム -->
    <form method="POST">
        <input type="text" name="title" placeholder="Title" required>
        <textarea name="content" placeholder="Content" required></textarea>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

このコードは、簡単なブログアプリケーションの基本的な構造を示しています。ユーザーは新しい投稿を作成でき、すべての投稿はメインページに表示されます。データベースにはSQLiteを使用し、フロントエンドにはHTMLテンプレートを利用しています。このコードを実行する前に、FlaskとFlask-SQLAlchemyをインストールしておく必要があります。

pip install flask_sqlalchemy
pip install flask

4.6 実行結果

これらのプログラムを実行した結果がこちらになります。

ブラウザ上にcreate New Postというものが記載されており、これをクリックします。

クリックすると、Create New Postの画面が表示されます。ここでタイトルに”Pythonとは”、Contentに”プログラムについて”を入力しSubmitを押します。

すると下記のようにPythonとはが追加されます。

プログラムを閉じ、再度ログインすると、instanceというディレクトリの中に、blog.dbが保存されており、これらの内容が保存されているため、再度プログラムを実行した際も、これらが保存されております。動画にこの内容を紹介しておりますので、興味がありましたら、見てください。

4.7 まとめ

この章では、FlaskとSQLAlchemyを使った簡単なブログアプリケーションの開発プロセスを紹介しました。ここで学んだ基本的な概念と技術を応用することで、さらに複雑な機能を持つアプリケーションの開発に進むことができます。

第5章: Flaskの応用と発展的な学習

Flaskで基本的なWebアプリケーションを構築した後、さらに多機能なアプリケーションを開発するためには、さまざまな応用技術と発展的な学習が必要です。この章では、Flaskの応用可能性と、スキル向上のための学習方法を探ります。

5.1 Flaskの拡張機能の活用

Flaskは多くの拡張機能を持っており、これらを活用することでアプリケーションの機能を豊かにできます。

Flask-Login: ユーザー認証システムの実装を容易にします。
Flask-WTF: フォームの生成とバリデーションを簡単に行えます。
Flask-Mail: アプリケーションからメール送信機能を実装できます。
Flask-RESTful: REST APIの開発を助けるためのツールキットです。

これらの拡張機能を利用することで、セキュリティ、データ処理、通信機能など、複雑な機能を持つアプリケーションを効率的に構築できます。

5.2 フロントエンドとの統合

現代のWebアプリケーション開発では、バックエンド(Flask)とフロントエンド(例えばReactやVue.js)の統合が一般的です。FlaskはAPIサーバーとして機能し、フロントエンドフレームワークがユーザーインターフェースを担当します。

API開発: Flaskを使用してRESTful APIを開発し、フロントエンドからのリクエストに対してJSONデータを返します。
SPA（シングルページアプリケーション）: フロントエンドの動的なページ遷移と、FlaskのAPIとの組み合わせで、現代的なユーザーエクスペリエンスを提供できます。

5.3 非同期処理とスケーラビリティ

大規模なトラフィックやリアルタイム処理を扱うアプリケーションでは、非同期処理とスケーラビリティの考慮が重要です。

Celery: バックグラウンドでの非同期タスク処理が可能です。
RedisやRabbitMQ: メッセージブローカーとして使用し、タスクキューの管理を行います。
DockerとKubernetes: アプリケーションのコンテナ化とオーケストレーションにより、デプロイメントとスケーリングを容易にします。

5.4 継続的な学習

FlaskとWeb開発のスキル向上のためには、継続的な学習が不可欠です。

公式ドキュメント: Flaskとその拡張機能の公式ドキュメントは、最も正確で信頼性の高い情報源です。
オンラインコースとチュートリアル: UdemyやCourseraなどのオンライン学習プラットフォームは、実践的なコースを提供しています。
コミュニティとフォーラム: Stack OverflowやGitHub、RedditのFlaskコミュニティでは、問題解決のためのサポートや新しいアイデアを見つけることができます。

この章では、Flaskを使った応用的なWebアプリケーション開発に向けたステップと、継続的な学習の重要性について説明しました。これらの知識を踏まえ、さらに高度なアプリケーションの開発に挑戦することが、Flaskを使ったWeb開発の次のステップとなります。