技術ブログ１週間目

2025-06-272025-06-29

仮想環境構築

・Pythonのバージョン　python versionは3.9.6が入ってたのでそのまま利用することに。
・仮想環境　venv を使った。Anacondaのcondaやvirtualenvというのもあるんだね。能動的に選ぶ知識はまだない。
・仮想環境　有効化まで成功

よく使う

今回の作業場所へのパス

cd /d C:\Users\clarus\my_money_app

仮想環境に入る（アクティベート）する

venv\Scripts\activate.bat

Flaskの再起動

set FLASK_APP=app.py
flask run

・フレームワークFlaskのインストール

pipのバージョンアップグレードができるよ～とのこと。→おそらくアプグレできた。次。

Flaskで簡単なアプリを作って画面表示までやってみる。
・app.pyというpythonファイルを作成

これからapp.pyファイルにVSCodeでコードを書いていく（久々のVSCodeでエンジニアを目指した当初のワクワクを思い出します）

Gemini頼りなので、なんとなくやってることを把握する程度。
クラスインポート、初期化、など恒例行事を行う。
次にルート設定。デコレータは初耳で調べたけどふーん？という具合。
開発に便利なデバッグモードというのがあるんだね。

Flask実行すると上記の警告文が。デバッグモード有効にしているので表示された。
今は開発環境なので気にしなくて良い。WSGI（本番で使う用の堅牢なサーバ）をオススメしてくれた。優しいね。

表示できました。AIがあるとプログラミング学習が格段に捗ることを感じてます。（あと５年前にあったらなぁ）
はい。今から頑張ります。

今日（2025/06/27）は作業は一旦ここまで。
次はFlaskの概念とapp.pyの中身を理解する。

Flaskの概念

FlaskはPythonのマイクロフレームワークと呼ばれる簡易的なフレームワーク。Pythonと言えばDjangoだがこちらはフルスタックフレームワークと呼ばれ、堅牢性に優れていてコミュニティも大きくエラー解消がしやすい、大規模WEBアプリに使われている。

app.pyの中身

from flask import Flask # FlaskライブラリからFlaskクラスをインポート

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

# ルーティング（URLと関数のマッピング）を設定
@app.route("/")
def hello_world():
    return "<p>Hello, World! Welcome to Flask App!</p>"

# アプリケーションを実行
if __name__ == '__main__':
    app.run(debug=True)

中身はFlaskアプリケーションの「最低限の構成要素」である。

from flask import Flask
from flask (Flaskというライブラリ）から、Flaskという名前のクラス(設計図)をインポートする。

app = Flask(__name__)
おまじない。__name__は特別な変数でモジュール名（今回はapp.pyなのでappという名前）が入っている。
役割としては、設計図であるクラスのFlaskに「app.pyが本拠地だよ」と教えてあげてる。

2025/06/28　0:59 深夜作業開始します。

HTML,CSSファイル作成とルーティング

これからはHTML、CSSファイルを読み込んでWEBデザインを表示させます。
Pythonは「HTMLファイルをtemplatesフォルダの中にあるものと扱う」のでtemplatesフォルダを作成し、その中にindex.htmlファイルを置きます。そういうお決まりなんだね。

index.htmlの中身は以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
</head>
<body>
    <h1>Hello from Template!</h1>
    <p>This content is rendered from an HTML template.</p>
</body>
</html>

htmlのコードを久々にちゃんと読んだ。

その後、templates以下にabout.htmlを置き、Flaskに読み込ませるようにした。
app.pyにベタ打ちしていたhtmlコードをhtml専用の場所から引っ張ってくることで可読性を高める役割。
Pythonコードの中にhtmlコードが混ざっていたら地獄の始まりだね。

この時点でのapp.pyは以下のとおり。

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route("/about")
def about():
    # 変更前: return "<h1>このアプリについて</h1><p>これは私の初めてのFlaskアプリです。</p>"
    return render_template("about.html") # HTMLテンプレートをレンダリングして返す

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

次にURLパラメータの利用を行います。

app.py

# 省略（既存のコードはそのまま）

@app.route("/greet/<name>") # <name> 部分がURLパラメータ
def greet(name): # 関数にパラメータを受け取る引数を追加
    return f"<h1>Hello, {name}!</h1><p>Welcome to your personalized page!</p>"

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

<name>というパタメータ部分に入力された文字を、greet(name)で引数として受け取り、HTMLで表示させる処理。

今度はJinja2というテンプレートエンジンを使って、受け取った文字をベタ書きせず、HTMLファイルへ渡して表示します。

app.py

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route("/about")
def about():
    return render_template("about.html")

@app.route("/greet/<name>")
def greet(name):
    # 変更前: return f"<h1>Hello, {name}!</h1><p>Welcome to your personalized page!</p>"
    # 変更後: render_template を使って greet.html にデータを渡す
    return render_template("greet.html", username=name) # usernameという名前で name の値を渡す

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

2025/06/28　9:10　作業開始。

2025/06/29　7:54　作業開始。ルーティングの理解を深めるために、応用させる。Geminiに練習問題を出してもらう。

練習問題
・新しいURLパラメータを追加してみる　>合計値を返す
/calculate/<num1>/<num2>　
・別のタイプのURLパラメータを試す　>表示する、パラメータの型が異なる場合はエラーを出す
@app.route("/user/<int:user_id>")
・URLパラメータをテンプレートに複数渡す >表示する。
/product/<id>/<name>

基礎中の基礎なのでこれからも繰り返し復習することになるだろう。
家計簿アプリを作るうえでの土台が少しずつ出来上がっていることを感じている。