こんにちは、Tech Samuraiです!
これまでの冒険で、私たちはコマンドラインツールや、Tkinterを使ったデスクトップGUIアプリを開発してきました。しかし、もしあなたの作った便利なツールを、URLを送るだけで友人や同僚に使ってもらえたら、もっと素晴らしいと思いませんか?
今回から始まる新シリーズでは、その夢を叶えるための**「Webアプリケーション開発」**の世界を探検します! そのための武器として、PythonのWebフレームワークの中でも特にシンプルで学びやすい**「Flask(フラスク)」**を使います。
Webフレームワークとは?
Webサイトの骨格となる面倒な部分(サーバーとの通信など)を肩代わりしてくれる、便利な「道具箱」のようなものです。Flaskを使えば、私たちはWebサイトの「何を表示するか」という本質的な部分だけに集中できます。
記念すべき第1回は、Flaskをインストールし、あなたのPC上で、ブラウザに「Hello, World!」と表示する、世界で一番シンプルなWebアプリケーションを動かすところまでをゴールとします!
ステップ1:準備 – Flaskのインストール
まずは、プロジェクトの準備から始めましょう。これまでの開発と同様に、プロジェクトごとに専用の「部屋」である仮想環境(venv)を用意するのが作法です。
ターミナルを開いて、以下のコマンドを順番に実行してください。
# 1. プロジェクト用のフォルダを作成して移動
mkdir my_flask_app
cd my_flask_app
# 2. 仮想環境を作成
python3 -m venv venv
# 3. 仮想環境を有効化
source venv/bin/activate
# 4. Flaskをインストール
pip install Flask
これで、Webアプリを開発するための最低限の準備が整いました。
ステップ2:最小のWebアプリケーションを作成する
次に、テキストエディタで`app.py`という名前のファイルを作成し、以下のコードを貼り付けてください。これが、私たちの最初のWebアプリケーションの全コードです。
from flask import Flask
# 1. Flaskアプリケーションの「インスタンス」を作成
app = Flask(__name__)
# 2. 特定のURLと関数を関連付ける(ルーティング)
@app.route('/')
def hello_world():
# 3. ブラウザに返す内容をreturnで指定
return '<h1>Hello, World! Welcome to my first web app!</h1>'
# 4. このスクリプトが直接実行された場合に、開発用サーバーを起動
if __name__ == '__main__':
app.run(debug=True)
コードのポイント解説
app = Flask(__name__)
Flaskを使うためのおまじないです。ここで、私たちのWebアプリケーション本体(インスタンス)を作成しています。@app.route('/')
これがFlaskの最も重要な部分、「**ルーティング**」です。@app.route()
は「デコレータ」と呼ばれるもので、直後の関数に「こういうURLが来たら、君の出番だよ」と役割を与える看板のようなものです。'/'
は、Webサイトのトップページ(例: `http://example.com/`)を意味します。def hello_world(): ...
トップページへのアクセスがあったときに実行される関数です。この関数が返した値(return
したもの)が、ユーザーのブラウザに表示されます。今回はHTMLの<h1>
タグで囲んだ文字列を返しています。if __name__ == '__main__': ...
このスクリプトを直接実行したときだけ、app.run()
が実行されるようにするためのお決まりの書き方です。app.run(debug=True)
は、開発に便利なデバッグモードで、簡易的なWebサーバーを起動する命令です。
ステップ3:Webサーバーを起動して、ブラウザで確認しよう!
コードが書けたら、いよいよWebサーバーを起動します。ターミナル(仮想環境が有効になっていることを確認)で、以下のコマンドを実行してください。
python3 app.py
すると、ターミナルに以下のようなメッセージが表示されるはずです。
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
Running on http://127.0.0.1:5000
という行に注目してください。これが、あなたのPC内で起動したWebサーバーのアドレスです。
このURLをコピーして、お使いのWebブラウザ(Chromeなど)のアドレスバーに貼り付けてEnterキーを押してください。
ブラウザに「Hello, World! Welcome to my first web app!」と表示されれば、大成功です!
まとめと次回予告
おめでとうございます!あなたは今、Pythonを使って自分自身のWebサーバーを起動し、ブラウザからのリクエストに応答して動的にWebページを生成するという、Webアプリケーション開発の最も基本的な、そして最も感動的な第一歩を踏み出しました。
- **Flask**というWebフレームワークをインストールする方法。
- URLと処理を紐付ける**ルーティング (`@app.route`)** という考え方。
- 開発用Webサーバーを起動する方法 (
app.run
)。
単純なメッセージを表示するだけでしたが、これは非常に大きな一歩です。
しかし、本当のWebアプリは、ユーザーが情報を入力し、それに応じて結果が変わる、インタラクティブなものであるべきですよね。次回、第2回では、**HTMLフォーム**を使ってユーザーからの入力を受け取り、それをPythonのロジックと連携させる方法を学びます。そして、以前作成した「**材料重量計算ツール**」を、本格的なWebアプリへと進化させていきます!お楽しみに!
コメント