LoginSignup
7
4
新規開発や新技術の検証、導入にまつわる記事を投稿しよう！
@hiro_hiro_0425

MVCモデルをFlaskで実装する際のディレクトリ設計

Last updated at Posted at 2023-06-19

ディレクトリ構造

myapp/
├── app.py
├── controllers/
│   ├── __init__.py
│   └── main_controller.py
├── models/
│   ├── __init__.py
│   └── user_model.py
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
└── templates/
    ├── index.html
    └── user.html

controllers/ディレクトリ:

このディレクトリは、アプリケーションのコントローラー（Controller）コードを格納します。
init.pyは、controllersディレクトリをPythonパッケージとして扱うための空のファイルです。
main_controller.pyは、メインのコントローラーとしての役割を担当します。
ルーティングと各ルートハンドラー（リクエストを処理する関数）が実装されています。
FlaskのBlueprintを使用して、このコントローラーをアプリケーションに登録します。

models/ディレクトリ:

このディレクトリは、アプリケーションのモデル（Model）コードを格納します。
init.pyは、modelsディレクトリをPythonパッケージとして扱うための空のファイルです。
user_model.pyは、ユーザーモデルに関連するコードを定義します。
ユーザーデータをデータベースなどから取得するためのメソッドが実装されます。

static/ディレクトリ:

このディレクトリは、アプリケーションの静的ファイル（CSS、JavaScript、画像など）を格納します。
css/ディレクトリには、スタイルシートファイルが格納されます。
例えば、style.cssという名前のファイルが含まれています。
js/ディレクトリには、JavaScriptファイルが格納されます。
例えば、script.jsという名前のファイルが含まれています。

templates/ディレクトリ:

このディレクトリは、アプリケーションのビューテンプレートファイルを格納します。
index.htmlは、トップページのビューテンプレートとして使用されます。
user.htmlは、ユーザー情報を表示するためのビューテンプレートとして使用されます

ファイルの詳細

app.py

from flask import Flask
from controllers.main_controller import main

app = Flask(__name__)
app.register_blueprint(main)

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

このファイルは、Flaskアプリケーションのエントリーポイントとなるメインのスクリプトです。
アプリケーションの初期化や設定、ルートURLの登録など、全体のアプリケーションの設定と制御を行います。

controllers/init.py

# 空のファイルです

このファイルは、controllersディレクトリをPythonパッケージとして扱うための空のファイルです。

controllers/main_controller.py


from flask import Blueprint, render_template
from models.user_model import UserModel

main = Blueprint('main', __name__)

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

@main.route('/users')
def users():
    users = UserModel.get_all_users()
    return render_template('user.html', users=users)

このファイルは、メインのコントローラー（Controller）としての役割を担当します。

flaskからBlueprintとrender_templateをインポートします。
models.user_modelからUserModelをインポートします。
mainというBlueprintを作成し、__name__を指定しています。
@main.route('/')デコレーターは、トップページのURLに対するルートハンドラー（リクエストを処理する関数）を定義します。index()関数では、render_template()を使用してindex.htmlをレンダリングしています。
@main.route('/users')デコレーターは、/usersのURLに対するルートハンドラーを定義します。users()関数では、UserModel.get_all_users()を呼び出して全てのユーザーを取得し、user.htmlをレンダリングしています。

models/init.py

# 空のファイルです

このファイルは、modelsディレクトリをPythonパッケージとして扱うための空のファイルです。

models/user_model.py

models/user_model.py
class UserModel:
    @staticmethod
    def get_all_users():
        # ユーザー情報を取得するロジックを実装する
        users = [
            {'name': 'John Doe', 'email': 'john@example.com'},
            {'name': 'Jane Smith', 'email': 'jane@example.com'},
            {'name': 'Mike Johnson', 'email': 'mike@example.com'}
        ]
        return users

このファイルは、ユーザーモデルに関連するコードを定義します。
UserModelクラスが含まれており、データベースなどからユーザー情報を取得するためのメソッド（例：get_all_users）が実装されています。

UserModelクラスの中に、get_all_users()という静的メソッドを定義しています。
このメソッドでは、ユーザー情報を取得するロジックを実装しています。
仮のデータとして、3人のユーザー情報を辞書のリストとして定義しています。
このメソッドは、呼び出されると定義されたユーザー情報のリストを返します。
このように、UserModelクラスのget_all_users()メソッドでは、仮のデータとして3人のユーザー情報を返す実装が行われています。
実際のアプリケーションでは、データベースや外部APIなどからユーザー情報を取得するロジックを実装することになります。

static/css/style.css

/* CSSスタイルの定義 */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

p {
  color: #777;
}

このファイルは、アプリケーションのスタイルシート（CSS）を定義します。
bodyセレクタは、ページ全体のスタイルを設定します。
.containerセレクタは、コンテンツの幅や余白を制御するためのクラスです。
h1セレクタは、見出しのスタイルを設定します。
pセレクタは、段落のスタイルを設定します。

このファイルは、アプリケーションのスタイルシート（CSS）を定義します。
ユーザーインターフェースの見た目やスタイルをカスタマイズするために使用されます。

static/js/script.js

// JavaScriptのコード

// この例では特に何も実装されていません

このファイルは、アプリケーションのJavaScriptコードを定義します。
この例では、特に何も実装されていませんが、必要に応じてクライアントサイドのインタラクティブな機能や動作を実装することができます。

templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Flask MVC Sample</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1>Welcome to Flask MVC Sample</h1>
        <p>This is the index page of the Flask MVC Sample application.</p>
    </div>
</body>
</html>

このファイルは、トップページのビューテンプレートとして使用されます。
HTMLのマークアップが定義されています。

タグを使用して、CSSスタイルシートファイルを読み込んでいます。

templates/user.html

<!DOCTYPE html>
<html>
<head>
    <title>User Information</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1>User Information</h1>
        <ul>
            {% for user in users %}
                <li>Name: {{ user['name'] }}, Email: {{ user['email'] }}</li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

このファイルは、ユーザー情報を表示するためのビューテンプレートとして使用されます。
HTMLのマークアップが定義されています。
{% for user in users %}と{% endfor %}の間に、ユーザーデータを繰り返し表示

{% for user in users %}と{% endfor %}の間の部分が、usersリスト内の要素を繰り返し処理するためのループ構文です。
userはループ内の現在のユーザーオブジェクトを表し、user['name']とuser['email']はそれぞれユーザーの名前とメールアドレスを表示します。
ループが回るたびに、新しい

要素が生成され、ユーザーの名前とメールアドレスが表示されます。
これにより、user.htmlテンプレートでは、usersリスト内のユーザー情報を順に表示することができます。

templates/layout.html

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

このファイルは、共通のレイアウトテンプレートとして使用されます。
HTMLのマークアップが定義されています。
{% block title %}{% endblock %}の間に、各ページのタイトルが挿入されます。
{% block content %}{% endblock %}の間に、各ページのコンテンツが挿入されます。
共通のスタイルシートファイルが読み込まれます。

templates/base.html

{% extends 'layout.html' %}

{% block title %}Flask MVC Sample{% endblock %}

{% block content %}
    <h1>Welcome to Flask MVC Sample</h1>
    <p>This is the base template of the Flask MVC Sample application.</p>
{% endblock %}

templates/layout.html

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

このファイルは、共通のレイアウトテンプレートとして使用されます。
HTMLのマークアップが定義されています。
{% block title %}{% endblock %}の間に、各ページのタイトルが挿入されます。
{% block content %}{% endblock %}の間に、各ページのコンテンツが挿入されます。
共通のスタイルシートファイルが読み込まれます。

templates/base.html

{% extends 'layout.html' %}

{% block title %}Flask MVC Sample{% endblock %}

{% block content %}
    <h1>Welcome to Flask MVC Sample</h1>
    <p>This is the base template of the Flask MVC Sample application.</p>
{% endblock %}

このファイルは、ベーステンプレートとして使用されます。
{% extends 'layout.html' %}ディレクティブは、layout.htmlを継承しています。
{% block title %}Flask MVC Sample{% endblock %}の間に、ページのタイトルを指定します。
{% block content %}{% endblock %}の間に、各ページのコンテンツを指定します。

このFlaskアプリケーションでは、MVCモデルに基づいてディレクトリ構造とコードが設計されており、コントローラー、モデル、ビューの役割が分離されています。
これにより、アプリケーションの保守性や拡張性が向上し、コードの再利用も容易になります。

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
4