【Webアプリ開発入門 #1】PythonでWebサイトを作ろう!Flaskの導入と最小のアプリ作成

ALL

こんにちは、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)

コードのポイント解説

  1. app = Flask(__name__)
    Flaskを使うためのおまじないです。ここで、私たちのWebアプリケーション本体(インスタンス)を作成しています。
  2. @app.route('/')
    これがFlaskの最も重要な部分、「**ルーティング**」です。@app.route()は「デコレータ」と呼ばれるもので、直後の関数に「こういうURLが来たら、君の出番だよ」と役割を与える看板のようなものです。'/'は、Webサイトのトップページ(例: `http://example.com/`)を意味します。
  3. def hello_world(): ...
    トップページへのアクセスがあったときに実行される関数です。この関数が返した値(returnしたもの)が、ユーザーのブラウザに表示されます。今回はHTMLの<h1>タグで囲んだ文字列を返しています。
  4. 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アプリへと進化させていきます!お楽しみに!

コメント

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