Flaskで簡単なメモアプリを作ろう！

IT・プログラミング

今回は初心者向けに簡単なメモアプリを作成していきます。
GoogleColabを使うので、だれでも簡単に実行できます！

アプリのメイン部分

まずはメイン部分のapp.pyの中身を作っていきます。
最後にコードをまとめて実行もできるようにGoogleColabのリンクを記載しています。

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

app = Flask(__name__)

# メモを格納するリスト
memos = []

@app.route("/", methods=["GET", "POST"])
def memo_app():
    if request.method == "POST":
        try:
            memo = request.form["memo"]
            if memo:
                memos.append(memo)
        except ValueError:
            pass

    return render_template("memo.html", memos=memos)

if __name__ == "__main__":
    import sys
    args = sys.argv
    app.run(debug=True, port=args[1])

モジュールのインポート

# 必要なモジュールをインポート
from flask import Flask, render_template, request, redirect, url_for

この部分は、Flaskアプリケーションを作成するために必要なモジュールをインポートしています。FlaskはWebアプリケーションを構築するためのフレームワークであり、これらのモジュールはその機能を提供します。

Flaskアプリケーションのインスタンス化

# Flaskアプリケーションのインスタンスを作成
app = Flask(__name__)

Flaskアプリケーションを作成するために、Flask(__name__) というコードを使用します。__name__ は現在のPythonスクリプトが実行されているモジュールを指します。

メモを格納するリスト

# メモを格納するリスト
memos = []

memos はメモを格納するためのリストです。ユーザーがメモを入力し、それを保持するために使用します。

ウェブページへのルートを定義

# ウェブページへのルートを定義
@app.route("/", methods=["GET", "POST"])
def memo_app():
    if request.method == "POST":
        try:
            memo = request.form["memo"]
            if memo:
                memos.append(memo)
        except ValueError:
            pass

    # HTMLテンプレート "memo.html" を表示し、memosリストを渡す
    return render_template("memo.html", memos=memos)

この部分は、Flaskアプリケーションのルートを定義しています。つまり、Webページへのアクセスを処理する部分です。

  • @app.route("/")：ルートURL (“/”) に関連する関数を定義します。つまり、Webページのトップページを指します。
  • methods=["GET", "POST"]：このルートはGETとPOSTメソッドの両方をサポートします。GETメソッドはウェブページを表示し、POSTメソッドはフォームからデータを送信します。

メモの追加

if request.method == "POST":
    try:
        memo = request.form["memo"]
        if memo:
            memos.append(memo)
    except ValueError:
        pass

この部分は、POSTメソッドがリクエストされた場合の処理を行います。

  • if request.method == "POST":：リクエストがPOSTメソッドであるかを確認します。
  • memo = request.form["memo"]：フォームから送信されたメモを取得します。
  • if memo:：メモが空でないことを確認し、空でない場合に memos リストに追加します。

メモの表示

# HTMLテンプレート "memo.html" を表示し、memosリストを渡す
return render_template("memo.html", memos=memos)

この部分では、render_template 関数を使用してHTMLテンプレート “memo.html” を表示し、memos リストをテンプレートに渡してメモを表示します。

memo.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple Memo App</title>
</head>
<body>
    <h1>Simple Memo App</h1>
    <form method="POST">
        <input type="text" name="memo" placeholder="Enter your memo">
        <button type="submit">Add Memo</button>
    </form>
    <h2>Memos:</h2>
    <ul>
        {% for memo in memos %}
            <li>{{ memo }}</li>
        {% endfor %}
    </ul>
</body>
</html>

HTML構造

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple Memo App</title>
</head>
<body>

この部分はHTML文書の基本的な構造を定義しています。HTML文書が始まり、<head> タグで文書の情報（文字コードやタイトル）を設定し、<body> タグで実際のコンテンツを定義します。

タイトルと見出し

    <h1>Simple Memo App</h1>

<h1> タグは、ページの主題やタイトルを表します。この場合、”Simple Memo App” というタイトルが表示されます。

メモの入力フォーム

    <form method="POST">
        <input type="text" name="memo" placeholder="Enter your memo">
        <button type="submit">Add Memo</button>
    </form>

この部分はメモの入力フォームを定義しています。フォーム要素は以下の要素で構成されています：

  • <form method="POST">：フォームをPOSTメソッドで送信する設定です。これにより、データがサーバーに送信されます。
  • <input type="text" name="memo" placeholder="Enter your memo">：テキスト入力フィールドを表示します。ユーザーはここにメモを入力します。name="memo" はこのフィールドの名前を指定します。
  • <button type="submit">Add Memo</button>：送信ボタンを表示します。ユーザーはこのボタンをクリックしてメモを追加します。

メモの表示

    <h2>Memos:</h2>
    <ul>
        {% for memo in memos %}
            <li>{{ memo }}</li>
        {% endfor %}
    </ul>

この部分は、メモを表示するためのコードです。要素は以下のように構成されています：

  • <h2>Memos:</h2>：見出しタグで、”Memos:” というテキストを表示します。
  • <ul>：順序なしリストを開始します。ここにメモが表示されます。
  • {% for memo in memos %} から {% endfor %}：Flaskのテンプレートエンジン内で、Pythonコードを実行するためのブロックを示します。{% for memo in memos %} から {% endfor %} の間にあるコードは、memos リスト内のメモを反復処理し、それぞれのメモを表示します。
  • <li>{{ memo }}</li>：各メモをリストアイテムとして表示します。{{ memo }} はテンプレート内の変数を表示するための記法です。

コード全体

GoogleColaboratoryのコード

タイトルとURLをコピーしました