Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

Flask基本

Last updated at Posted at 2023-10-03

インストール

下記のコマンドでflaskをインストール

pip install flask

基本構成

ここからフォーマットをダウンロードしてください。

初期の段階で使うのはapp.pyとtemplateフォルダにあるindex.htmlです。

app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)


# 編集ゾーンーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
##ここでルートのURLが指定された時に実行される
@app.route('/')
def index():
    ##index.htmlがレンダリングされる
    return render_template("index.html")

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

レンダリングされるhtmlファイル

index.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <title>flaskテスト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
    <h1>テスト</h1>
    <div>
        てすとです。<br>
    </div>
</body>
</html>

文法

変数をhtmlファイルに渡して使用

app.py
return render_template("index.html", html内で使う変数名=app.py内での変数名)
index.html
{{ 変数 }}

使用例

例) app.py
a="こんにちは"
return render_template("index.html", txt=a)
例) index.html
<body>
    <h1>テスト</h1>
    <div>
        てすとです。<br>
        {{ txt }}<br>
    </div>
</body>

スクリーンショット 2023-10-05 12.26.40.png

for

{% for data in list %} 


{% endfor %}

forの例

index.html
    <h1>テスト</h1>
    <div>
        {% for i in range(10) %} 
            {{txt}} --- {{i}}<br>
        {% endfor %}
    </div>

実行結果

スクリーンショット 2023-10-05 15.14.21.png

if

{% if ○○ %}
:
{% elif ×× %}
:
{% else %}
:
{% endif %}

ifの例

index.html
    <h1>テスト</h1>
    <div>
        {% for i in range(10) %} 
            <!-- %2は2で割った余り -->
            {% if i%2==0 %}
                {{txt}} --偶数-- {{i}}<br>
            {% else %}
                {{txt}} --奇数-- {{i}}<br>
            {% endif %}
        {% endfor %}
    </div>

実行結果

スクリーンショット 2023-10-05 15.18.55.png

練習問題

index.htmlに2つの変数(txt1とtxt2)を渡して、0から9の10回のfor文を回して、偶数の時はtxt1を表示し、奇数の時はtxt2を表示してみましょう。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?