スポンサーリンク

Python初心者がFlaskでWebアプリを作る方法|最小構成で始めるWeb開発

Webアプリ開発
  1. 1. はじめに|Python初心者でもWebアプリが作れる?
  2. 2. Flaskとは?|軽量でシンプルなPythonフレームワーク
    1. フレームワークってそもそも何?
    2. Flaskのすごいところ3つ!
      1. ① コードがとにかくシンプル
      2. ② インストールが簡単
      3. ③ 学習コストが低い
    3. Djangoとの違いは?
  3. 3. Flaskのインストールと準備
    1. 1. まずはPythonをインストールしよう(済んでる人はスキップ)
    2. 2. プロジェクト用のフォルダを作ろう
    3. 3. 仮想環境を作成しよう(venv)
      1. ◆ コマンド(ターミナル or コマンドプロンプト)で以下を実行:
      2. ◆ 仮想環境を有効化する(OS別)
    4. 4. Flaskをインストールしよう!
    5. 5. 最小構成のファイルを作る
      1. フォルダの中身:
  4. 4. 最初のアプリを作ってみよう
    1. 1. app.pyを作成しよう
    2. 2. 最小構成のFlaskコードを書く
      1. 💡 このコードの意味は?
    3. 3. アプリを起動してみよう!
    4. 4. ブラウザでアクセスしてみよう!
    5. 5. よくあるエラーと対処法
      1. ❌ エラー:「flask コマンドが見つかりません」
      2. ❌ エラー:「ModuleNotFoundError: No module named ‘flask’」
  5. 5. Webページをテンプレートで表示する
    1. HTMLテンプレートってなに?
    2. 1. templates フォルダを作ろう
    3. 2. index.html を作ってみよう
    4. 3. app.py を修正しよう
    5. 4. サーバーを再起動して確認!
    6. 5. ちょっと応用:文字を渡してみよう
      1. app.py
      2. index.html
  6. 6. Flask開発の次のステップへ
    1. 1. フォーム入力を受け取ってみよう!
    2. 2. 外部CSSでデザインを整えよう!
    3. 3. 複数ページを作るには?
    4. 4. Webアプリを公開してみよう!
      1. 🔧 初心者におすすめの無料公開サービス:
    5. 5. データベースを使ってみよう!
    6. 🏁ステップアップまとめ
  7. 7. まとめ|FlaskでWeb開発の一歩を踏み出そう!
    1. 📌 今日のおさらい
    2. 💡 一歩踏み出したあなたへ
    3. 🔗 あわせて読みたい
  8. よくある質問(Q&A)
    1. 関連投稿:

1. はじめに|Python初心者でもWebアプリが作れる?

Pythonを勉強し始めてしばらく経つと、
「そろそろ実際に動くものを作ってみたい」
「Webアプリってどうやって作るんだろう?」
と感じる人は多いのではないでしょうか。

そんなPython初心者におすすめなのが、Flask(フラスク)を使ったWebアプリ開発です。

Flaskは、PythonでWebアプリを作るための軽量なフレームワークで、
最小限のコードだけでWebページを表示できるのが大きな特徴です。
難しい設定や複雑な仕組みを後回しにして、「まず動かす」体験ができるため、
Web開発がはじめての人でも安心して取り組めます。

この記事では、Python初心者でも迷わず進められるように
Flaskを使って「Hello, Flask!」と表示するだけの
最小構成のWebアプリを一から作る手順を、ステップごとに解説します。

環境構築から実行までを通して、
「PythonでWebアプリが動いた!」という成功体験を得ることがこの記事のゴールです。




2. Flaskとは?|軽量でシンプルなPythonフレームワーク

さて、「Flask(フラスク)」という名前、初めて聞いた方も多いかもしれませんね。
でも心配しないでください。FlaskはPythonでWebアプリを作りたい人の“最初の一歩”にぴったりなツールなんです!


フレームワークってそもそも何?

まず「フレームワーク」って聞くと、ちょっと難しそうに感じますよね。

でも実は、「便利な道具があらかじめ詰まっている箱」みたいなイメージでOKです!

たとえば:

  • Webページを表示するしくみ
  • リクエスト(アクセス)に応じた返答をする機能
  • HTMLテンプレートとの連携

などなど、Webアプリを作るときによく使う機能が、Flaskにはもう準備されているんです。
つまり、**1から全部作らなくても大丈夫!**ということですね。


Flaskのすごいところ3つ!

じゃあ、Flaskのどんなところが初心者にとってうれしいのか、3つのポイントで紹介します👇

① コードがとにかくシンプル

FlaskでWebアプリを作るには、たった数行のコードでOK!

たとえば、画面に「Hello, Flask!」と表示するアプリも、10行くらいで書けちゃいます。

② インストールが簡単

FlaskはPythonさえインストールされていれば、pip install flask というコマンド1つで使えるようになります。環境構築もシンプル!

③ 学習コストが低い

Flaskには最低限の機能しかついていません。
つまり、「難しい機能はあとで!」と割り切って、まずは動かす体験に集中できます。


Djangoとの違いは?

実は、PythonでWebアプリを作る方法には「Django(ジャンゴ)」という超有名なフレームワークもあります。

項目FlaskDjango
特徴軽量・自由度が高い高機能・すぐ作れる
初心者向け?◎ やさしい△ 機能が多くて最初はちょっと大変
開発の自由度高いある程度ルールに従う必要あり

ということで、「とにかくまず1つWebアプリを作ってみたい!」という人にはFlaskがぴったりなんです。




3. Flaskのインストールと準備

さて、ここからは実際にFlaskを自分のパソコンに入れて、Webアプリを作る準備をしていきましょう!
プログラミング初心者の方でも、順番にやればちゃんとできるので安心してくださいね😊


1. まずはPythonをインストールしよう(済んでる人はスキップ)

すでにPythonが入っている人は、このステップは飛ばしてOKです!

まだの人は、以下の記事でくわしく解説しています👇
🔗 WindowsでPythonを始めよう!IDLEのインストールと基本の使い方ガイド


2. プロジェクト用のフォルダを作ろう

まずは、自分のパソコンの好きな場所(デスクトップなど)に新しいフォルダを作りましょう。

フォルダ名はたとえば:

flask_hello_app

などがわかりやすくておすすめです!


3. 仮想環境を作成しよう(venv)

Pythonでは、**「仮想環境(virtual environment)」**という仕組みを使って、プロジェクトごとに設定を分けるのが一般的です。

◆ コマンド(ターミナル or コマンドプロンプト)で以下を実行:

python -m venv venv

「venv」という名前の仮想環境が作られます。

◆ 仮想環境を有効化する(OS別)

  • Windows:
venv\Scripts\activate
  • Mac/Linux:
source venv/bin/activate

成功すると、コマンドラインの左側に (venv) と表示されるようになります!


4. Flaskをインストールしよう!

仮想環境ができたら、いよいよFlaskをインストールします。

pip install flask

これでFlaskが使えるようになりました🎉


5. 最小構成のファイルを作る

Flaskアプリの最小構成はとってもシンプルです。
以下のように、1つのPythonファイルだけでも動かせます!

フォルダの中身:

flask_hello_app/
├── venv/ ← 仮想環境(自動作成)
└── app.py ← メインのPythonファイル(自分で作る)

このapp.pyにFlaskのコードを書いていくことになります。




4. 最初のアプリを作ってみよう

いよいよ、FlaskでWebアプリを作る本番です!
ここでは、画面に「Hello, Flask!」と表示される超シンプルなアプリを作ってみます。

「えっ、そんなの意味あるの?」って思うかもしれませんが、実はここにWeb開発の基本がギュッと詰まってるんです😊
では、さっそく始めましょう!


1. app.pyを作成しよう

まずは、前の章で作ったフォルダ(例:flask_hello_app)の中に、新しいファイルを1つ作りましょう。

📄 ファイル名:app.py


2. 最小構成のFlaskコードを書く

app.pyの中に、以下のコードをコピペしてください。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
return 'Hello, Flask!'

💡 このコードの意味は?

解説
from flask import FlaskFlaskという便利ツールを使えるようにします
app = Flask(__name__)Flaskアプリの本体を作ります
@app.route('/')アクセスされたURL(今回は /)に反応するルートを設定します
def hello(): return ...実際に画面に表示する内容を返す関数です

3. アプリを起動してみよう!

仮想環境が有効な状態で、以下のコマンドを実行してください👇

flask run

すると、次のような表示が出るはずです:

* Running on http://127.0.0.1:5000

4. ブラウザでアクセスしてみよう!

パソコンのブラウザ(Chromeなど)を開いて、以下のURLにアクセスしてみてください:

http://127.0.0.1:5000

画面に「Hello, Flask!」と表示されていたら、大成功です🎉


5. よくあるエラーと対処法

❌ エラー:「flask コマンドが見つかりません」

→ 仮想環境を有効にしていない可能性があります。
venv\Scripts\activate(Windows)または source venv/bin/activate(Mac/Linux)をもう一度実行してください。

❌ エラー:「ModuleNotFoundError: No module named ‘flask’」

pip install flask を忘れていないか確認しましょう!

これであなたは、Pythonで動くWebアプリを1つ作ったことになります!
とってもシンプルですが、ここからどんどんステップアップできますよ💪




5. Webページをテンプレートで表示する

前の章では、Flaskを使って「Hello, Flask!」と文字だけを表示するシンプルなWebアプリを作りましたね。
今回はもう一歩ステップアップして、HTMLファイルを使って見た目のあるWebページを表示してみましょう!


HTMLテンプレートってなに?

HTMLテンプレートは、Webページのデザインや構造を記述したファイルです。
Flaskでは、このテンプレートを使って、もっと自由にWebページを作ることができるんです!


1. templates フォルダを作ろう

Flaskは、テンプレート用のHTMLファイルを**templates**という名前のフォルダに入れる決まりになっています。

📁 プロジェクトのフォルダ構成はこんな感じ:

flask_hello_app/
├── venv/
├── app.py
└── templates/
└── index.html

templates フォルダは 自分で作成してください!


2. index.html を作ってみよう

templates フォルダの中に、index.html というファイルを作りましょう。
中身は以下のようにシンプルでOKです👇

<!DOCTYPE html>
<html>
<head>
<title>My Flask App</title>
</head>
<body>
<h1>こんにちは!FlaskからHTMLページを表示しています!</h1>
</body>
</html>

これで、FlaskからHTMLページを呼び出す準備が整いました。


3. app.py を修正しよう

次に、app.pyの中身を、テンプレートを表示できるように変更します。

from flask import Flask, render_template

app = Flask(__name__)

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

ポイントは、render_template() という関数を使って index.html を読み込んでいるところです。


4. サーバーを再起動して確認!

もう一度、ターミナルで Flask アプリを起動しましょう。

flask run

そして、ブラウザで http://127.0.0.1:5000 にアクセスすると…

💡 HTMLページが表示される!

タイトルや <h1> の見出しが表示されていたら、バッチリ成功です✨


5. ちょっと応用:文字を渡してみよう

Flaskでは、テンプレートにPythonからデータを渡すこともできます。
たとえば次のようにして、名前を送ってみましょう👇

app.py

@app.route('/hello')
def hello():
return render_template('index.html', name='Taro')

index.html

<body>
<h1>こんにちは、{{ name }}さん!</h1>
</body>

このように {{ name }} のような「中かっこ」は、**Jinja2(Flaskのテンプレートエンジン)**の記法です。
Pythonの変数をHTMLに埋め込むことができます。

これでFlaskアプリにHTMLテンプレートを組み込むことができました!
HTMLが使えるようになると、ぐっとWebアプリらしくなってきますよね✨




6. Flask開発の次のステップへ

ここまでで、「Hello, Flask!」の表示やHTMLテンプレートの使い方を学びました。
かなりWebアプリっぽくなってきましたよね!
次は、もっと便利な機能や応用テクニックにステップアップしていきましょう💪


1. フォーム入力を受け取ってみよう!

Webアプリといえば、「名前を入力するとあいさつしてくれる」とか「検索ボックスで探せる」など、ユーザーからの入力を受け取る機能がよくありますよね。

Flaskでは、フォームを作ってデータを受け取るのも簡単です!

たとえば:

  • ユーザーが入力した名前を表示する
  • 検索フォームでキーワードを受け取る
  • アンケートの回答を保存する

なども、数行のコードで実現できます。

📘 詳しくは今後の記事でご紹介予定です!


2. 外部CSSでデザインを整えよう!

今のままだと、白背景に黒文字のちょっと地味なページになっているはず。
そこで、CSSを使ってページを見やすく・おしゃれに整えてみましょう!

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

↑こうすることで、FlaskでもCSSファイルを読み込めます。
static フォルダを作って、そこにCSSファイルを置くのがFlask流です。


3. 複数ページを作るには?

Flaskでは、URLごとに処理を分けることができます。

たとえば:

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

こうするだけで、http://127.0.0.1:5000/about にアクセスすると「about.html」を表示できます!

複数ページのWebサイトも、少しずつ作れるようになります😊


4. Webアプリを公開してみよう!

せっかく作ったアプリ、「自分だけ」じゃもったいない!
インターネット上に公開すれば、友達に見せたり、ポートフォリオに使ったりできます。

🔧 初心者におすすめの無料公開サービス:

どちらも無料で使えて、Flaskアプリを簡単に公開できますよ!


5. データベースを使ってみよう!

今のアプリではデータを保存できませんが、SQLiteなどのデータベースを使えば、次のようなこともできます:

  • ユーザーの入力を保存
  • 投稿された内容を一覧表示
  • ログイン・ログアウト機能の作成

これもFlaskならしっかり対応してくれます!


🏁ステップアップまとめ

機能やれること
フォーム入力名前やメッセージを送れる
CSSデザインページを見やすく・キレイに
複数ページWebサイトっぽくなる
公開インターネットで見てもらえる
データベース情報を保存&表示できる

ここから先は、「やってみたい!」と思ったことにどんどん挑戦してOK!
Flaskは小さく始めて、大きく育てられるとっても自由なフレームワークです。




7. まとめ|FlaskでWeb開発の一歩を踏み出そう!

ここまで、Flaskを使って超シンプルなWebアプリを作る方法を紹介してきました。
Python初心者でも「Webアプリが作れた!」という体験、できましたか?😊


📌 今日のおさらい

ステップやったこと
1Flaskって何かを学んだ
2Pythonで最小構成のアプリを作った
3HTMLテンプレートを使ってWebページを表示した
4フォームやCSS、公開方法などの次のステップを知った

Flaskはとても軽くてシンプルなフレームワークなので、「とにかく作ってみたい!」という初心者にはぴったりです。
難しい知識がなくても、まず動かせる、そこがFlaskの魅力ですね✨


💡 一歩踏み出したあなたへ

プログラミングって、はじめの一歩が一番むずかしいんです。
でも、こうして「Hello, Flask!」と画面に表示できた今、あなたはもうWeb開発の世界に一歩踏み出しています。

この小さなアプリから、ログイン機能付きのサービスや掲示板、データベース連携のアプリなど、無限の可能性が広がっています!


🔗 あわせて読みたい

よくある質問(Q&A)

Q
Flaskの勉強を続けるにはどうしたらいい?
A

公式ドキュメント(https://flask.palletsprojects.com/)がとてもわかりやすくておすすめです。YouTubeやUdemyなどの動画教材も◎。

Q
アプリにログイン機能をつけるには?
A

FlaskにはFlask-Loginという便利なライブラリがあります。少し難しくなりますが、ステップアップにはぴったりです!

Q
データを保存したい場合はどうすればいい?
A

SQLiteという軽量なデータベースとFlaskはとても相性がよく、Flask-SQLAlchemyという拡張でかんたんに使えます。

※当サイトはアフィリエイト広告を利用しています。リンクを経由して商品を購入された場合、当サイトに報酬が発生することがあります。

※本記事に記載しているAmazon商品情報(価格、在庫状況、割引、配送条件など)は、執筆時点のAmazon.co.jp上の情報に基づいています。
最新の価格・在庫・配送条件などの詳細は、Amazonの商品ページをご確認ください。

スポンサーリンク