【Flask講座第1回】Webはどのように動くのか？開発環境を構築して最初のアプリを動かそう

2025年9月21日2025年9月23日

学んだ知識を活かして、何か形になるものを作りたい

――今、あなたはそんな期待に胸を膨らませていることでしょう。その「何か」として、Webアプリケーション開発は最高にエキサイティングな次なるステップです。

しかし、Webの世界は魔法のように見えるかもしれません。ブラウザのアドレスバーにURLを打ち込むと、なぜ美しいWebサイトが表示されるのか？その裏側では、一体何が起きているのでしょうか。

ご安心ください。この記念すべき第1回を読み終える頃には、あなたはその「魔法」の正体を理解し、そして何より、あなた自身のコンピュータ上で、あなただけのWebアプリケーションを動かすという、感動的な最初の一歩を踏み出しているはずです。

本記事では、まずWebアプリケーションが動く壮大な仕組みを誰にでも分かるように解説し、その後、実際にあなたの手で開発環境を整え、Flaskで最初のページを表示させます。さあ、始めましょう！

この記事でわかること

ブラウザとサーバーが対話するWebの基本的な仕組み
Pythonを使った開発に不可欠な「仮想環境」の作り方と使い方
Flaskをインストールし、「Hello, World!」をブラウザに表示させる方法

Webアプリケーションの仕組みを理解しよう

コードを書き始める前に、まずはWebアプリケーションが動く「舞台裏」を覗いてみましょう。一見すると複雑に見えますが、その根幹にあるのは非常にシンプルな役割分担です。

クライアントとサーバーの関係

Webの仕組みは、私たちがよく知る「レストラン」に例えると驚くほど分かりやすくなります。

あなたがレストランでお腹が空いたとき、席に座り、メニューを見て、ウェイターに「このパスタをください」と注文したとしましょう。

あなた（お客さん） = クライアント（あなたのPCのWebブラウザ 💻）
ウェイター = インターネット（注文を厨房に伝える役割 🌐）
厨房 = サーバー（Webサイトの本体が置かれているコンピュータ 🖥️）
「このパスタをください」という注文 = HTTPリクエスト
厨房から運ばれてくるパスタ = HTTPレスポンス

Webの世界でも、これと全く同じことが起きています。

あなたがブラウザ（クライアント）でURLを入力すると「このページを見せてください」というHTTPリクエストが、インターネットを通じてWebサーバーに送られます。
リクエストを受け取ったサーバー（厨房）は、「はい、どうぞ」と、ページの設計図であるHTMLファイルなどをHTTPレスポンスとして返します。
レスポンスを受け取ったブラウザは、その設計図を元に美しいページを組み立てて、あなたの画面に表示します。

たったこれだけです。このクライアントとサーバー間のリクエストとレスポンスのやり取りこそが、全てのWebサービスの根幹をなす仕組みなのです。

少しだけ専門用語と仲良くなる

レストランの例えで、Webの全体像が掴めたでしょうか。それでは、もう少しだけ専門用語と仲良くなっておきましょう。これらは今後の旅で何度も登場する、重要な仲間たちです。

IPアドレスと DNS

インターネット上の全てのコンピュータには、「192.0.2.1」のような数字の住所（IPアドレス）が割り当てられています。しかし、数字は覚えにくいので、「nao-kun.com」のような人間が覚えやすい名前（ドメイン名）を使います。このドメイン名をIPアドレスに変換してくれる、インターネット世界の巨大な電話帳がDNS (Domain Name System)です。

現実で考えてみるとこんな感じ…

「東京都墨田区押上1丁目1-2」と言われてもピンと来ないけど「東京スカイツリー」と言えば場所が分かりやすい。そしてDNSは地図みたいなもんで「東京スカイツリーに行きたい！」と言った場合DNS(地図)を使って住所を調べます。「東京スカイツリー」▶「東京都墨田区押上1丁目1-2」と変換して、ナビに「東京都墨田区押上1丁目1-2」と設定することで東京スカイツリーに行けますね。

少し違いますが、イメージはそんな感じです。

HTTP と HTTPS

クライアントとサーバーが対話するための共通言語（プロトコル）がHTTP (HyperText Transfer Protocol)です。皆さんがよく目にするHTTPSの「S」はSecureの略で、通信内容が暗号化されていることを意味し、より安全な通信であることを示します。

通信が暗号化されると何が良いのか？

例えばマクドナルドに行ってフリーwifiに接続したとします。そこで暗号化されていないネットショッピングのサイトでクレジットカード番号を入力したり、住所や名前を入力した場合、同じフリーwifiに接続している人は簡単に「どんなサイトにアクセスしているのか」とか「入力されたクレジットカード番号や住所や名前」を取得することができます。だからこそ、サイト側はユーザーからの通信の安全を守るために、暗号化したHTTPSを提供することが重要なのです。逆に言うとHTTPSではないHTTPのサイトで重要な情報を入力することは控えましょう。

Chromeの場合、HTTP接続によるサイトの表示時には下記のように「保護されていない通信」という警告が表示されます。

開発環境を構築しよう

理論で仕組みを理解したら、いよいよ実践です。ここからは、私たちの「note風ブログサイト」を作り上げるための、あなた専用の「開発工房」、すなわち開発環境を構築していきます。プロの開発作法に則って、クリーンで整理された環境を最初から作り上げることを目指しましょう。

本講座で使うツールとバージョン

この講座では、読者の皆さんが同じ手順で迷わず進められるよう、以下の環境を基準として解説を進めます。可能な限り、ご自身の環境をこれらに合わせていただくことを強く推奨します。

OS: Windows 11
Python: 3.12.7
コードエディタ:Visual Studio Code
- 推奨拡張機能: Microsoft公式の「Python」と「Pylance」
ターミナル:
- Windows: コマンドプロンプト (cmd)

この講座ではMacOSの方でも大丈夫です。ターミナルはMacOS標準のターミナルを使用してください。

WindowsでPython3.12.7をインストールする方法

Pythonのダウンロードページはこちら

上記のボタンをクリックして、Pythonのダウンロードページにアクセスしてください。

少し下にスクロールすると下記のようにPython 3.12.7と記載された行があるので、そのすぐ下の「Download Windows installer (64-bit)」をクリックしてください。

その後のインストール手順では、こちらのサイトを参照してください。

MacOSでPython3.12.7をインストールする方法

こちらのサイトで詳細に解説されているので、参考にしてください。

「複数バージョンのインストール」という章で「古いバージョンを指定してインストールする場合」について説明されていますが、ここで3.12.7を指定してください。

$ brew install python@3.12.7

その下のコマンドについても3.12.7に置き換えて実行してください。

Pythonのバージョンを確認・管理する

まず、あなたのPCにインストールされているPythonのバージョンを確認しましょう。

特にWindows環境では、複数のバージョンのPythonが共存している場合があります。その際に便利なのがpyランチャーです。

Windows (コマンドプロンプト)

ターミナルを開き、以下のコマンドを打ち込んでください。

# ターミナル (cmd)
py --list

なおくん

Pythonのプログラム内やターミナルのコマンドの紹介時に「#」から始まる行があるけど、それはコメントだから無視してね。プログラムやコマンドではないよ。

これにより、PCにインストールされているPythonの一覧が表示されます。

 -3.12-64 *
 -3.9-64

上記のように -3.12 が含まれていればOKです。今後、この講座でPythonコマンドを実行する際は、pythonではなくpy -3.12とバージョンを明示することで、意図したバージョンで確実に実行できます。

macOS (ターミナル)

macOSの場合は、以下のコマンドで確認できます。

# ターミナル
python3.12 --version

Python 3.12.7と表示されれば完璧です。

仮想環境(venv)でプロジェクトを隔離する

次に、プロジェクト専用のクリーンな作業部屋である「仮想環境」を作成します。

なぜ仮想環境が必要なの？

あなたのPCで複数のPythonプロジェクトを扱うようになると「AプロジェクトではライブラリXのバージョン1.0が必要だけど、Bプロジェクトではバージョン2.0が必要」といった状況が必ず起こります。

仮想環境は、プロジェクトごとに独立したPython環境（専用の道具箱）を作る仕組みです。これを使うことで、ライブラリ同士が衝突するのを完全に防ぐことができます。これはプロの開発現場では「当たり前」の作法であり、最初に身につけるべき最も重要な習慣の一つです。

1. プロジェクトフォルダの作成と移動

まず、この講座用の作業フォルダ（例: flask-note-app）をデスクトップなどの分かりやすい場所に作成し、ターミナルでそのフォルダの中に移動します。

# ターミナル
mkdir flask-note-app
cd flask-note-app

なおくん

「mkdir フォルダ名」でフォルダを作成することができるよ。「mkdir」は「make directory」の略でディレクトリ(directory)はフォルダのようなものだよ。
「cd フォルダ名」でフォルダを開くことができるよ。「cd」は「change directory」の略でディレクトリを変更する、つまり別のフォルダに移動するっていう意味だよ。ちなみに今開いているフォルダから抜けるときは「cd ..」で移動できるよ。
これは基礎中の基礎だから覚えておくと良い。

2. 仮想環境の作成

移動したフォルダの中で、以下のコマンドを実行してvenvという名前の仮想環境を作成します。

Windows (コマンドプロンプト)

# ターミナル (cmd)
py -3.12 -m venv venv

macOS (ターミナル)

# ターミナル
python3.12 -m venv venv

成功すると、プロジェクトフォルダ内にvenvというサブフォルダが作成されます。この中に、プロジェクト専用のPython実行環境やライブラリが格納されていきます。

3. 仮想環境の有効化

最後に、作成した仮想環境を「有効化」して、作業部屋に入室します。

Windows (コマンドプロンプト)

# ターミナル (cmd)
.\venv\Scripts\activate

macOS (ターミナル)

# ターミナル
source venv/bin/activate

このコマンドが成功すると、ターミナルのプロンプト（入力待ちの行）の先頭に(venv)という目印が表示されるはずです。

(venv) C:\Users\YourName\Desktop\flask-note-app>

この(venv)という表示が、あなたが今、プロジェクト専用のクリーンな作業部屋にいることの証明です。おめでとうございます！これで、世界に一つだけのあなたの開発工房が完成しました。

Flaskで最初のアプリケーションを動かそう

開発工房の準備は万端です。いよいよ、この工房に最初の「機械」を設置し、命を吹き込みましょう。Flaskという名の強力なエンジンをインストールし、たった数行のコードであなたのWebサーバーを起動させます。

Flaskのインストール

まず、私たちのプロジェクトにFlaskライブラリをインストールします。これは、Pythonのパッケージ管理ツールpip を使って行います。pipはPythonの世界における「アプリストア」のようなものだと考えてください。必要なライブラリ（パッケージ）をインターネットから探して、簡単にインストールしてくれます。

仮想環境が有効化されている（プロンプトの先頭に(venv)と表示されている）ことを確認し、以下のコマンドを実行してください。

# ターミナル
pip install Flask

Successfully installed Flask...といったメッセージが表示されれば、あなたのプロジェクト専用の道具箱（仮想環境）に、Flaskというツールが追加されました。

上記のように[notice] A new release of pip is available:・・・のような表示が出る場合は「pipのバージョンが古いので新しいバージョンに更新してね」というお知らせですので、更新しておきましょう。その下の[notice] To update, run: python.exe -m pip install --upgrade pipの緑色の文字の部分がpipの新しいバージョンをインストールする方法です。

# ターミナル
python.exe -m pip install --upgrade pip

最小限のコードを書いてみよう (`run.py`)

次に、VS Codeなどのコードエディタを開き、プロジェクトフォルダ内(flask-note-app)にrun.pyという名前で新しいファイルを作成し、以下のコードをそのまま記述してください。

# run.py

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

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

# 3. 特定のURLへのアクセスと、実行する関数を結びつける
@app.route('/')
def hello_world():
    # 4. ブラウザに表示する文字列を返す
    return 'Hello, World!'

このわずか数行のコードが、Webアプリケーションとして機能します。

ここで、少し不思議に見えるapp = Flask(__name__)について触れておきましょう。

「name」って何？今は『おまじない』でOK！

この行は、私たちのWebアプリケーションの本体（インスタンス）を作成する、非常に重要な部分です。__name__という引数は、Pythonが自動的に設定する特別な変数で、Flaskがアプリケーションの場所を特定し、後々HTMLファイルなどを探すためのヒントになります。

正直に言うと、プログラミングを始めたばかりの頃は、この__name__の正確な意味を完全に理解する必要はありません。私自身も、そうでした。今は「Flaskアプリを起動するために必要な、大切なおまじない」と捉えておけば大丈夫です。講座を進めていくうちに、点と点が繋がって線になるように、その意味が自然と理解できる瞬間が必ず訪れます。

開発サーバーの起動とブラウザでの確認

コードが書けたら、いよいよサーバーを起動します。ターミナルに戻り、以下のコマンドをOSに合わせて実行してください。

1. 起動するアプリケーションをFlaskに教える

まず、flaskコマンドに対して、どのファイルを実行すればいいのかを「環境変数」という仕組みを使って教えます。

Windows (コマンドプロンプト)

# ターミナル (cmd)
set FLASK_APP=run.py

macOS (ターミナル)

# ターミナル
export FLASK_APP=run.py

2. 開発サーバーを起動する

次に、以下のコマンドでFlaskの開発用Webサーバーを起動します。

# ターミナル
flask run

ターミナルに以下のようなメッセージが表示されれば、あなたのWebサーバーは正常に起動し、インターネットからの（今はあなたのPCからの）アクセスを待ち受けている状態です。

3. ブラウザで確認する

さあ、Webブラウザを開き、アドレスバーにハイライトされているURL http://127.0.0.1:5000 を入力してEnterキーを押してください。

画面に「Hello, World!」と表示されましたか？

あなたは今、Web開発者としての輝かしい第一歩を踏み出しました。あなたの書いたPythonコードが、Webサーバーとしてリクエストに応答した瞬間です。

4. サーバーを終了する

Flaskの学習中以外はサーバーを止めないとずっと裏で動き続け、パソコンの負担になってしまうので、最後にFlask開発用Webサーバーを終了しましょう。

Windowsの場合はCtrl + C、MacOSの場合もControl + Cを押すことでサーバーを止めることができます。

なおくん

ちなみにWindowsのコマンドプロンプトでも、MacOSのターミナルでも矢印キーの上下を使用することで過去に実行したコマンドを呼び出すことができるから、同じコマンドを何回も打つ必要がないよ。
でもターミナルを閉じると履歴がリセットされて過去のコマンドを呼び出すことができなくなるから注意。

初回でつまずかないためのエラー対処法

プログラミング学習、特に新しいツールの環境構築では、予期せぬエラーがつきものです。しかし、ここで絶対に挫折しないでください。エラーはあなたの敵ではなく、学びを深めてくれる最高の教師です。

ここでは、この第1回で遭遇する可能性のある代表的な「つまずきポイント」とその対処法をまとめました。もし何か問題が起きたら、まずはこのセクションを確認してみてください。

Pythonやpipコマンドに関するエラー

エラー: ‘python’ や ‘pip’ はコマンドとして認識されていません

表示されるエラー (Windows): 'python' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

表示されるエラー (macOS):

zsh: command not found: python

原因: OSが、あなたが打ち込んだコマンド（pythonやpip）がどこにあるのかを見つけられずにいます。これは多くの場合、Pythonインストール時に「PATHを通す」という設定がうまくできていないことが原因です。

対策:

Windows: Pythonのインストーラーを再度起動し、「Modify (変更)」を選択します。次の画面で「py launcher」と「Add Python to environment variables」にチェックが入っていることを確認して進めてください。
macOS: python3 や pip3 のように、コマンドの末尾に3を付けて実行してみてください。macOSは、古いPython2系と区別するためにpython3というコマンド名を使うことが多いためです。

エラー: pip installがネットワークエラーで失敗する

表示されるエラー: ProxyError, SSLError, CERTIFICATE_VERIFY_FAILED といった単語が含まれる、長いエラーメッセージが表示される。

原因: あなたが利用しているネットワーク環境（会社の社内LANや大学のWi-Fiなど）が、セキュリティ上の理由でPythonライブラリのダウンロードサイトへのアクセスを制限している可能性があります。
対策: これはネットワーク環境に深く依存する問題です。最も簡単な解決策は、一度ネットワークを切り替え、ご自宅のインターネット回線やスマートフォンのテザリングなど、制限の少ない環境で再度pip installを試してみることです。

仮想環境(venv)に関するエラー

エラー(Windows): activate実行時に赤いエラーメッセージが表示される

表示されるエラー: このシステムではスクリプトの実行が無効になっているため、ファイル Venv\Scripts\activate.ps1 を読み込むことができません。 (PowerShellの場合)

原因: Windowsのセキュリティ設定が、信頼されていないスクリプトの実行をデフォルトでブロックしているためです。
対策: 本講座ではコマンドプロンプト(cmd)を推奨しているため、まずは起動しているターミナルがPowerShellではなくコマンドプロンプトであることを確認してください。もしPowerShellを使い続けたい場合は、一度PowerShellを「管理者として実行」し、Set-ExecutionPolicy RemoteSigned -Scope CurrentUser というコマンドを実行してから、再度activateを試してみてください。

現象(macOS): activateしてもプロンプトに(venv)が表示されない

現象: venv/bin/activate と打ち込んでも何もエラーは出ないが、プロンプトの先頭に(venv)という目印が表示されない。

原因: source venv/bin/activate とすべきところを、先頭のsourceを付け忘れています。sourceを付けないと、スクリプトは実行されますが、現在のターミナルセッションには反映されません。
対策: 必ずsourceコマンドを付けて、source venv/bin/activate と実行してください。

Flaskサーバーに関するエラー

エラー: Could not locate a Flask application.

表示されるエラー: Error: Could not locate a Flask application. You did not provide the "FLASK_APP" environment variable.

原因: flask runコマンドが、実行すべきアプリケーションファイルを見つけられていません。これはFLASK_APPという環境変数が設定されていないか、設定したファイル名が間違っている場合に発生します。
対策: flask runを実行する前に、必ずset FLASK_APP=run.py (Windows) または export FLASK_APP=run.py (macOS) を実行してください。ファイル名がrun.pyでない場合は、実際のファイル名に置き換えてください。

エラー: Address already in use (ポートが使用中です)

表示されるエラー (Windows): OSError: [WinError 10048] 通常、各ソケットアドレスに対してプロトコル、ネットワークアドレス、またはポートのどれか 1 つのみを使用できます。

表示されるエラー (macOS): OSError: [Errno 48] Address already in use

原因: Flaskが使おうとしているポート番号5000番を、他のプログラムが既に使用しています。以前に起動したFlaskサーバーが正常に終了していない場合などにも発生します。
対策:
- 解決策① (最も簡単): 現在開いているターミナルを一度完全に閉じて、新しいターミナルを開き、仮想環境の有効化からやり直してみてください。
- 解決策② (ポート変更): flask run --port 5001 のように、別のポート番号を指定してサーバーを起動してください。この場合、ブラウザでアクセスするURLもhttp://127.0.0.1:5001になります。