📖

Flaskを最初から学び直そう。

2025/12/24に公開

2025/12/27

📖はじめに

最近のAIは凄まじいもので、数分で自分の思い描いているものができる。
しかしながら、コピペAIプログラマーにはなりたくない思いもあるので、基礎的なことはできるようになっておこう。
ということで、html,css,javascript,flaskミリしらの自分が1からフロント・バックともに学ぼうと思う。要はメモ書きである。
あと、markdownの書き方を覚えようという意味もある。
pythonの基礎からやるので、かなり長くなると思います。

🖥️使用環境

OS:windows11
Editor:VScode (1.107.1)
使用言語:
Python 3.14.0

Flaskのインストール。

python,githubの導入は各々調べてやってもらえれば。
仮想環境はVScodeでポチポチやるだけ。

pip install Flask

Flaskの導入はこれだけ。

👋Flaskで"Hello World"

まずはコードを。

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World"

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

一行づつ解説。

from flask import Flask

日本語訳すると、flaskというモジュールの中からFlaskというクラス引用するで！ってこと。
これがなくてもできる？らしいがコードが煩雑になるので、使っているらしい。
これがないと、モジュールの関数を使うのに、

モジュール名.クラス名.関数

という形になる。
この1行を入れることで、

クラス名.関数

にできる。
ちなみに、asというのもある。これはモジュール名を好きな言葉に置換できるらしい。
書き方としては、

from flask as Tk

みたいな。

2行目、

app = Flask(__name__)

appというのは変数。ここは何でもいい。ただの箱だと思ってくれれば。
Flaskは先程importしたもの。
__name__は他の記事を見てもすべてこの変数にしてある。
どうやらpythonでは__name__は特別な意味を持つとのこと。
ここで__name__には、__main__が代入されている。
つまり、appという変数の中にFlaskの基礎的な部品を入れているイメージ。
単純な疑問なのだか、部品って何が入ってるんだろう。。。
と思ってやってみた。

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World"

print(__name__)
print(app)

app.run(debug=True)

すると、

__main__
<Flask 'app'>

いや、<Flask '__main__'>じゃないんかい。
と思ったら、どうやらFlaskは __name__ が __main__ だった場合、自動的に「実際のファイル名」を探しに行って、それをアプリ名として採用する仕組みを持っている。とのこと。
納得。

3行目
appは2行目で定義したもの。
ここでは、「どのURLにアクセスしたら、どの関数を実行するか」を決めている。

@アプリの変数.route("ホスト名のあとのパス")

という文法。
つまり今回は、ホスト名のあとのパスは/なのでホームの画面のことを指している。

4行目

def hello()

helloという名前の関数を定義。

5行目

return "Hello World"

Hello, Flask! をブラウザに返す。

つまりこの3~5行目で、「もし、ユーザーがこのサイトの『トップページ（/）』にアクセスしてきたら、hello という関数（処理）を実行して、ブラウザの画面に『Hello, Flask!』という言葉を返してあげてね」というコードを書いている。

6~7行目

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

__name__は先程も行った通り__main__が代入されている。
そして、__name__は実際にこのapp.pyというファイルで実行されたときには__main__が代入されて、他のプログラムか呼び出されたとき。
つまり、importなどで呼び出されたときは呼び出したファイル名が代入される仕様とのこと。

7行目

app.run(debug=True)

はflaskのサーバを立ち上げる命令。

アプリの変数.run()

で立ち上げの構文。
()のなかのdebug=Trueは開発者サポートモードをONにするか。
これをONにするとコードを書き換えるたびに自動でサーバーを再起動してくれたり、エラーが出た時に詳しい原因を教えてくれたりする。
6~7行目では、「もし、このファイルが（他のプログラムの部品としてではなく）自分自身で直接実行された『主役』なら、開発に便利なデバッグ機能をオンにした状態で、ウェブサーバーを起動しなさい」というコード。

🌐フロントエンドについて学ぼう。

FlaskではフロントエンドにJinja2というテンプレートエンジンが使われている。
html,CSS,jsを1からやります。
まずはhtmlの基礎的な構文から。
自分が説明するより遥かにわかり易いサイトが合ったのでそちらを引用させていただく。

https://saruwakakun.com/html-css/basic/html#section4

この中で自信が疑問に思ったとこを解決していく。
先ず最初の

<!DOCTYPE html>

ここでは、これはHTML5で書かれた文書ですよと伝えて標準モードで正しくブラウザに表示させるためのものらしい。
標準モードとは、最新のHTMLやCSSの仕様（W3C勧告など）に厳密に従ってレンダリング（描画）するもの。
これがないと、後方互換モードになるらしい。
ちなみに、後方互換モードといは、最新の標準仕様を無視し、古いブラウザ（IE6など）の挙動を再現する。レイアウトが崩れる原因になることがある。とのこと。

<head>タグの中にはどんな要素があるのか。
例えば「フォントの読み込み設定」「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などをheadタグ内に書く。
具体的には、

<meta charaset="UTF-8">

文字コードの指定に関する記述。UTF-8で表示する。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

デバイスごとの表示領域を設定するための記述。
contentの中はオプションみたいなもの。
オプションの一覧については以下参照。

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/meta/name/viewport

中でも、Googleが推奨する設定があるらしい。
width=device-width、user-scalable、initial-scaleの3項目である。

https://qiita.com/tanimoto-hikari/items/1264efa1ba7a023b8c0b

値	なにができるか
width=device-width	ウェブサイトをレンダリングするビューポートのピクセル数の幅を定義します。正の整数値、またはキーワード device-width が指定できます。
user-scalable	論理値で、ユーザーがウェブページをズームできるかどうかを示します。ブラウザーの設定ではこのルールを無視することができ、 iOS10 以降では既定で無視されます。これは yes または no のどちらかを取り、既定では yes です。
initial-scale`	端末の幅（縦長画面の device-width、横長画面の device-height）とビューポートの寸法の比率を定義します。これは 0.0 から 10.0 までの数値です。

他にも色々設定できる。
わかりやすくまとめていらっしゃる方がいたので、参照。

https://qiita.com/tanimoto-hikari/items/1264efa1ba7a023b8c0b

中でも

<link rel="stylesheet" href="">

はよく見るイメージ。
外部スタイルシートへのリンク。
最近何かと見るブートストラップもここで指定できる。
一旦ブートストラップの説明。

🌐ブートストラップとは

bootstrapとは、サイトを作るときに使うCSSのフレームワークのことで、デザインが簡単、かつきれいに作れらしい。

導入の仕方は至極単純。
HTMLファイルにブートストラップのCSSとJavaScriptを読み込むだけ。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

例はCDNのbootstrap。
導入のドキュメントについては以下を参照。

https://getbootstrap.jp/docs/5.3/getting-started/introduction/#すぐに始める

ただ、導入を見てもわからない点があったので追記。
ドキュメント内の導入にはintegrity,crossoriginという属性が入っている。
integrity属性は整合性のチェック。
つまり、配信元のサーバー（CDN）が攻撃を受けてファイルが改ざんされた場合、導入しているサイトを訪れたユーザーに悪意のあるプログラムが実行されてしまうリスクがあるのでそれを防ぐもの。らしい。
要は、ダウンロードしたファイルが、制作者が意図した通りのものかをチェックするための仕組み。ちなみに、この仕組みをSRI(Subresource Integrity)と呼ぶらしい。

設定値の例
通常、以下のような形式で記述されます。

sha384-xxxx...（SHA-384というアルゴリズムで生成されたハッシュ値）

sha512-xxxx...（より強力な SHA-512 を使用する場合もあり）

あと、ハッシュ値の設定方法は色々あってオンラインツールを使う,コマンドで生成する等がある。
多分オンラインツールが簡単。
ちはURL

srihash.org

ここのサイトにbootstrapのURLを貼ればいいだけ。
なんなら属性含めたタグを丸ごと生成してくれる。

crossoriginは外部アクセス権限の設定。
別のドメインにあるファイルを読み込む際、どのような認証情報（Cookieなど）を送るかの制御ができる。
SRI（上記のintegrity）を正しく機能させるためには、この crossorigin 設定が必須になる。
設定項目は、

設定値	内容
anonymous	（一般的）ユーザーの認証情報（CookieやHTTP認証）を送信せずにリクエストする。Bootstrapの導入では通常これを使う。
use-credentials	Cookieやクライアント証明書などの認証情報を含めてリクエストします。サーバー側が許可していないとエラーになる。
（属性なし）	通常のGETリクエストとして処理されるが、一部のブラウザではSRIのチェックが行われない。