Flaskの0.000001歩目を体験する

# はじめに
本記事では、最低限の手順を踏んでFlaskアプリの作成を体験します。
内容としては、Flaskアプリを起動して、ブラウザ画面に文字を表示することをゴールとします。
Flaskってこんなものなんだなぁ、くらいの理解を目指します。

# 前提
本記事では、macOSを使用しています。
Windowsを使用されている方は、「ターミナル」を「コマンドプロンプト」に読み替えてください。

# やること
項目数に反してやることは少ないです。
1. ライブラリインストール
2. ファイル作成
    2. 1. import
    2. 2. オブジェクト生成
    2. 3. ルーティング
    2. 4. 起動処理
3. 実行

**+α1** htmlファイル
&nbsp;&nbsp;　+α1. 1. HTMLファイル作成
&nbsp;&nbsp;　+α1. 2. import
&nbsp;&nbsp;　+α1. 3. ルーティング


# 実施
それでは、気楽にやっていきましょう。

## **1.ライブラリインストール**
ターミナルで下記コマンドを実行して、ライブラリをインストールします。
```terminal
pip install Flask
```
「Flask」はその名の通り、Flaskアプリ実装に使用する様々な機能を使えるようにしてくれます。

正常にインストールされたか確認するために、下記コマンドをターミナルで実行しましょう。
```terminal
pip list
```
「Package」欄に「Flask」が表示されていればOKです。
```terminal
# 実行結果
Package      Version
------------ -------
click        8.1.3
Flask        2.2.3
Flask-Login  0.6.2
isort        5.12.0
itsdangerous 2.1.2
Jinja2       3.1.2
MarkupSafe   2.1.2
pip          22.0.4
setuptools   58.1.0
Werkzeug     2.2.3
```

## **2.ファイル作成**
Flaskの処理を記述するファイルを作成します。
今回は、アプリを管理するためにtestappディレクトリを作成し、その中にapp.pyファイルを作成します。
ファイルの拡張子は、必ず「.py」にしましょう。

以下の構造ができていればOKです。
```
testapp
└─ app.py
```

### **2. 1. import**
Flaskの機能を実装できるようにします。
app.pyに以下のコードを記述しましょう。
```app.py
from flask import Flask 
```

### **2. 2. オブジェクト生成**
Flaskのオブジェクトを作成します。
app.pyに以下のコードを記述しましょう。
```app.py
app = Flask(__name__)
```
Flaskの操作は、ここで作成した「app」を用いることによって実施します。

### **2. 3. ルーティング**
今回は、Flaskアプリ起動時に実行される処理を記述します。
app.pyに以下のコードを記述しましょう。
```app.py
@app.route('/')
def index():
    return '文字を表示できた！'
```
一つずつ見ていきます。
```python
@app.route('/')
```
これは、Flaskアプリ起動時に実行される処理であることを示しています。
実行される処理はその下に記述します。
今回であれば、
```python
def index():
    return '文字を表示できた！'
```
が実行される処理です。


もう少し詳しく説明すると、アプリケーションには、その処理を記述したファイルの位置を示すURLが紐づいています。
URLとは、ブラウザ画面の上部に表示されれたhttps:\//qiita.com/timelineのような文字列です。
このURLの内、https:\//qiita.comをルートと呼び、「**/**」で表現します。

つまり、
```python
@app.route('/')
def index():
    return '文字を表示できた！'
```
は、Flaskアプリのルートにアクセスした際に実行される処理ということです。

### **2. 4. 起動処理**
Flaskアプリを起動するための処理を記述します。
app.pyに以下のコードを記述しましょう。
```app.py
if __name__ == '__main__':
    app.run()
```
一つずつ見ていきます。
```python
if __name__ == '__main__':
```
これは、app.pyが直接実行されたか否かを判定する条件分岐です。
今回は、app.pyを直接実行するため、Trueとして処理されると理解しましょう。
条件通過後、
```python
app.run()
```
が実行されます。
これは、Flaskオブジェクトであるappを起動する処理です。

---
以上でapp.pyの記述は終了です。
それでは、app.pyの全体を見てみましょう。
```app.py
from flask import Flask 

app = Flask(__name__)

@app.route('/')
def index():
    return '文字を表示できた！'

if __name__ == '__main__':
    app.run()
```
分量は非常に少ないですが、文字列の表示のみであれば、これだけの記述でOKです。


## **3. 実行**
それでは、Flaskアプリを起動します。

まず、apptestディレクトリに移動してください。
app.pyと同じ階層にいればOKです。
```terminal
testapp
│<< ここに移動 
└─ app.py
```

次に、ターミナルで以下のコマンドを実行してください。
```terminal
python app.py
```
これにより、Flaskアプリが起動してブラウザ画面が表示されます。
![gamen0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237378/7a9e0aff-9824-babe-16d0-1f264812cc70.png)

今回の目的はこれで達成です。

## **+α1** htmlファイル
Flaskアプリ起動時、文字列ではなく、htmlファイルで作成された画面を表示します。
Flaskアプリが返す値を文字列からhtmlファイルに変更します。

### **+α1. 1. HTMLファイル作成**
htmlファイルを作成します。

まず、testappディレクトリ内にtemplatesディレクトリを作成します。
続けて、templatesディレクトリ内にinde.htmlを作成します。
ディレクトリ名が「templates」ではない場合、Flaskアプリがhtmlファイルを読み取ることはできません。

```terminal
testapp
├── templates  << これを作成
│   └── index.html  << これを作成
└─ app.py
```
今回は、index.htmlファイルに以下を記述します。
```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>htmlファイルです!</h1>
</body>
</html>
```
### **+α1. 2. import**
Flaskアプリがhtmlファイルにアクセスできるようにします。

app.pyのインポートにrender_templateを追加します。
app.pyを以下に従って修正しましょう。
```diff:app.py
-  from flask import Flask
+  from flask import Flask, render_template
```
「render_template」は、引数にhtmlファイルを指定すると、そのファイルにアクセスできるようになります。

### **+α1. 3. ルーティング**
Flaskアプリ起動時、htmlファイルを表示する処理を記述します。
app.pyを以下に従って修正しましょう。
```diff:app.py
  def index():
-    return '文字を表示できた！'
+    return render_template('index.html')
```

「return render_template('index.html')」によって、指定したhtmlファイルをブラウザ画面に返しています。
今回は、作成したindex.htmlをブラウザに表示することになります。

修正後のapp.pyを見てみましょう。
```app.py
from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run()
```
---
それでは、アプリを実行してみましょう。

![gamen2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237378/842a1902-3726-8d15-50fe-09ddd1d3694b.png)

ブラウザのタブ名や表示された文字列から、htmlファイルを使用できたことを確認できました。


# 終わりに
今回は、最低限の記述でFlaskアプリの作成を体験しました。
本記事の内容をベースにして、少しずつFlaskの学習をしていただけたら幸いです。