0Pricing
Python For Kids · レッスン

シンプルな Web アプリの構築

Flask を使って最初の Web アプリケーションを作成します。

「シンプルな Web アプリの構築」はCoddyKit上の無料Python For Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはPython For Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Python For Kidsコースには全4レッスンが含まれています。

シンプルなWebアプリを構築する

Flaskの基本を学んだので、次はシンプルなWebアプリケーションを構築しましょう。このアプリには、複数のルート、HTMLテンプレート、いくつかのインタラクティブな機能を含めます。

このレッスンでは、基本的なWebアプリを手順に沿って作成します。

シンプルな Web アプリの構築 — イラスト1

手順1: プロジェクトをセットアップする

プロジェクト用の新しいフォルダーを作成し、仮想環境を初期化します。

python -m venv venv

仮想環境を有効にして、Flaskをインストールします。

pip install flask
# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

ステップ2：アプリの構成を作成する

次のフォルダーとファイルを作成します。

  • app.py：メインのアプリケーションファイル
  • templates/：HTMLテンプレート用のフォルダー
  • static/：CSSや画像などの静的ファイル用のフォルダー

ステップ3：ルートの定義

app.pyで、ホームページと概要ページのルートを定義します。

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

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

ステップ4：テンプレートを追加する

templates/フォルダー内に、home.htmlという名前のHTMLファイルを作成します。

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

ステップ5：render_templateを使用する

homeルートとaboutルートを更新し、テンプレートを使用するようにします。

# Using templates
from flask import render_template

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

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

ステップ6：静的ファイルの追加

static/フォルダー内にstyle.cssファイルを作成し、home.htmlからリンクします。

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

ステップ7：アプリを実行する

Flaskアプリケーションを実行します。

python app.py

ブラウザーを開き、http://127.0.0.1:5000/にアクセスすると、Webアプリの動作を確認できます。

Webアプリ構築でよくある間違い

次のような間違いに注意してください。

  • アプリの構成を整理しない（例：templates/フォルダーやstatic/フォルダーがない）。
  • url_for()を使わず、URLをハードコードする。
  • デバッグモードでアプリをテストしない。

学んだこと

このレッスンでは、次の内容を学びました。

  • Flaskプロジェクトの構成をセットアップする方法。
  • ルートを定義し、テンプレートを使用する方法。
  • CSSなどの静的ファイルをアプリに含める方法。
  • Flaskアプリケーションを実行し、ブラウザーで表示する方法。

よくできました。次のトピックに進みましょう。

シンプルな Web アプリの構築 — イラスト11

よくある質問

「シンプルな Web アプリの構築」レッスンは無料ですか？

はい。「シンプルな Web アプリの構築」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Python For Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Python For Kidsコースには全4レッスンが含まれています。

「シンプルな Web アプリの構築」で何を学びますか？

Flask を使って最初の Web アプリケーションを作成します。 ブラウザで直接実行するハンズオンコードでPython For Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Python For Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのPython For Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「シンプルな Web アプリの構築」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このPython For Kidsレッスンでコードを書いて実行できますか？

はい。すべてのPython For Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Web フレームワークの基礎
  2. Flask 入門
  3. シンプルな Web アプリの構築
  4. Python とデータベースの接続
← Python For Kidsに戻る