Flaskで始める初心者のためのWebアプリ開発

# 1.はじめに
この記事は、Webアプリ開発初心者が、PythonのWebアプリケーションフレームワーク「Flask」を使ってHelloWorldできるようになるためのチュートリアルです。

# 2.環境
Windows11

# 3.参考サイト
正直以下をしっかり読み進めたらWindowsでの環境構築は完了しますが、初心者でもつまらないように出来るだけ丁寧に書いていきます。

https://learn.microsoft.com/ja-jp/windows/python/web-frameworks

# 4.環境構築
Linux 用 Windows サブシステム (WSL) を使用して、Windows10上でLinuxを使用できるようにしたうえで、WSLにPythonをインストールします。

## 4.1.WSLをインストール
### 4.1.1.PowerShellを管理者権限で開く
![スクリーンショット 2025-01-04 165155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977443/66100776-a183-5526-2d29-484e30609f73.png)

### 4.1.2.WSLをインストール
```powershell:powershell
wsl --install
```
```:実行結果
インストール中: 仮想マシン プラットフォーム
仮想マシン プラットフォーム はインストールされました。
インストール中: Linux 用 Windows サブシステム
Linux 用 Windows サブシステム はインストールされました。
インストール中: Ubuntu
Ubuntu はインストールされました。
要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。
```
上記の通りコンピュータを再起動する必要があるので再起動します。


### 4.1.3.PWとユーザ名を設定
コンピュータを再起動すると以下の通り自動的にインストールしたUbuntuが起動します。
```:Ubuntu
Ubuntu は既にインストールされています。
Ubuntu を起動しています...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username:
```
新しくインストールされたLinuxディストリビューションのユーザーアカウントとパスワードを作成する必要があるため、指示通りユーザ名とパスワードを設定します。（Windowsのユーザ名とは別物です。）

## 4.2.VSCodeを設定
### 4.2.1.VSCodeをインストール
[公式サイト](https://code.visualstudio.com)からWindows用のVSCodeをダウンロードして、WindowsPCにインストールします。
![{90CD285A-1BE3-4797-8FB9-CFB69E20F18F}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977443/433c0273-0550-2281-5b6c-6c279f0e50b1.png)

### 4.2.2.WSL環境と接続できるようにする
先ほどインストールしたVSCodeに[Remote-WSL拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)をインストールします。
![{9E330EAE-8DF1-470C-91B7-952654BFA918}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977443/c4df43ac-40c6-3fe8-35ce-12f67fe3a14b.png)
上記画像のInstallボタンを押下すると、VSCodeが開き、以下の通りVSCodeでのインストール画面が出てくるので、再度Installボタンを押下するとインストールできます。
![{3E3C813E-0CE3-41D2-9193-C93957849D61}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977443/4cb591b2-2eca-0b1e-57ca-f4e5f5a2c700.png)
これにより、WSLからVSCodeを開くことができるようになります。

## 4.3.プロジェクトディレクトリを作成
VSCodeを閉じ、4.1.でインストールしたLinux(Ubuntu)ファイルシステムに作業用のプロジェクトディレクトリを作成します。
（もし閉じてしまっていた場合は、Windowsの検索窓でUbuntuと検索したら出てきます。）

例えば、今回はこのあとHelloWorldアプリを作成予定なので、以下のようにディレクトリを作成してみます。
```:Ubuntu
~$ mkdir python-projects
~$ cd python-projects/
~/python-projects$ mkdir HelloWorld
~/python-projects$ cd HelloWorld/
~/python-projects/HelloWorld$
```
## 4.4.Pythonインストール
Ubuntuには初めからPython3がインストールされているはずですので、以下コマンドでPythonのバージョンを確認します。
```:Ubuntu
python3 --version
```

## 4.5.pip、venv をインストール
次に、以下コマンドで pip、venv をインストールします。
```:Ubuntu
sudo apt install python3-pip
sudo apt install python3-venv
```
もしうまくインストールできなかったら、以下コマンドでUbuntuのバージョンを更新してからやり直してみてください。
```:Ubuntu
sudo apt update && sudo apt upgrade
```

## 4.6.仮想環境を作成
バージョン管理上の競合を避けるなどの目的から、仮想環境を使用してアプリ開発することが必要ですので、**HelloWorldディレクトリ**で次のコマンドを使用して **.venv** という名前の仮想環境を作成します
```:Ubuntu
python3 -m venv .venv
```
作成した仮想環境は以下コマンドで起動することができます。
```:Ubuntu
source .venv/bin/activate
```
成功した場合、コマンドプロンプトの前に **(.venv)** と表示されます。

## 4.7.Flaskをインストール
仮想環境が起動されている状態で、以下コマンドによりFlaskをインストールします。
```:Ubuntu
python3 -m pip install flask
```
Pythonコード用のファイルを作成しておきます。
```:Ubuntu
touch app.py
```

## 4.8.VS Code で WSL ターミナル ウィンドウを開く
そのまま以下コマンドを入力してみてください。
```:Ubuntu
code . 
```
しばらくすると、VSCodeが自動的に立ち上がります。
これで、Linux(Ubuntu)ファイルシステム上のHelloWorldディレクトリのファイルをVSCodeで編集することが出来るようになりました。

## 4.9.Microsoft Python 拡張機能をインストール
**Ctrl + Shift + X**を押して VS Code 拡張機能ウィンドウを開き、**ms-python.python**を検索しインストールします。

# 5.Hello Worldアプリを作成
## 5.1.app.pyを記載
4.7.で作成したapp.pyに以下をコピペし、保存してください。
```Python:app.py
# Flaskをインポート
from flask import Flask
# Flaskオブジェクトのインスタンスを作成
app = Flask(__name__)
# ルート "/" にアクセスされた際に表示するコンテンツ
@app.route("/")
def home():
    return "Hello World!"
```
## 5.2.アプリを起動
**Ctrl + `キー**を押してターミナルを開き以下コマンドを実行するとアプリが起動されます。
```:ターミナル
python3 -m flask run
```
以下のように **Hello World!** が表示されているはずです。
![{CCC4953A-3643-4992-9357-9D2F1E48B406}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977443/78892cac-1540-606c-4c82-297baea76772.png)

# 6.おわりに
これで、Flaskでアプリ開発を始める準備は整ったかと思います。

宣伝ですが、↓がFlask初心者の私が２ヶ月で作成したWebアプリです。
家庭教師の個人契約を気軽にチャット形式で検索して締結できるようなアプリになっていますので、よければ登録お願いします！

https://katekyochat.com