# Flaskでできることを確認しながら簡単なWebアプリを作ってみよう！

> 当サイト【スタビジ】の本記事では、Pythonの軽量WebアプリケーションフレームワークであるFlaskを使って簡単なWebアプリケーションを作成していきたいと思います。Pythonを開発言語としても使えるようになると、幅が広がりますよー！

- URL: https://toukei-lab.com/python-flask
- 公開: 2022.11.29 / 更新: 2024.12.17
- サイト: スタビジ（https://toukei-lab.com）

:::talk{who="umatan"}
当サイト【スタビジ】の本記事では、Pythonの軽量WebアプリケーションフレームワークであるFlaskでできることを適宜確認しながら実際に簡単なWebアプリケーションの実例を作成していきたいと思います。Pythonを開発言語としても使えるようになると、幅が広がりますよー！
:::

こんにちは！

データサイエンティストでありながら最近はWeb開発に没頭しているウマたん([@statistics1012](https://twitter.com/statistics1012?lang=ja))です。

Webブラウザで動くアプリケーションのことを**Webアプリケーション**と呼びます！

アプリケーションと言えば、スマホのネイティブアプリのイメージが強いかもしれませんが<mark>Webブラウザで動くWebアプリケーションも負けていません！</mark>

そして、そんなWebアプリケーションであれば**Python・Javascript・HTML・CSS**を使って簡単に作ることが可能です！

Pythonは普段データ解析用の言語として用いているのですが、<mark>実はWebアプリケーションを開発するサーバーサイド言語としても使えます。</mark>

Pythonは非常に優秀なプログラミング言語なのです。

この記事では、Pythonの**Flask**というモジュールを用いて簡単なWebアプリケーションを作っていきます！

## PythonのフレームワークFlaskとは？

![](/wp-content/uploads/2019/04/52ceff2ccf51b6465679ab4c976fc8b0_s.jpg)

Webアプリケーションを実装する言語としてはRubyや[PHP](/php_learn)などもありますが、<mark>Webアプリケーションのロジック部分で数値計算を行うのであれば[Python](/category/programming/python)を同時に使用してしまった方がラクです。</mark>

高度な数値計算もWebアプリケーション開発も同時に出来てしまうのがPythonの特徴であり最強である所以なのです。

そんなPythonでWebアプリケーションを開発するためには**Django**を使うパターンと**Flask**を使うパターンがありますが、<mark>Flaskの方が軽量で簡単に実装が可能なため最初はFlaskでWebアプリケーション開発に慣れたほうが良いでしょう。</mark>

<https://toukei-lab.com/flask-django>

複雑なWebアプリケーションを実装する際にはDjangoの方が良い場合があります。

<https://toukei-lab.com/django-study>

ちなみにFlaskのリファレンスは以下のサイトを参考にしてみてくださいね！

<https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/>

## Flaskを使って実現したいこと

![](/wp-content/uploads/2019/06/magic-cube-1976725_960_720.jpg)

ここでは、**数値を入力したら有意差を算出してくれるWebアプリケーション**を作成していきたいと思います。

データのやり取りや有意差計算を行うのはPythonになりますが、<mark>表示する画面を作るのはHTML・CSS・Javascriptになります。</mark>

まずは、有意差計算のための数値を入れる画面をHTML・CSS・Javascriptを使って作ります。

そしてAjaxで非同期にデータをサーバーサイドに渡しPythonで有意差計算をしてクライアントサイドに戻し表示するという流れになります。

有意差に関しては詳しく以下の記事にまとめていますのでご覧ください！

<https://toukei-lab.com/significant-difference>

## Flaskを使ったロジック部分の例を見てみよう

![](/wp-content/uploads/2018/09/goriIMGL9703_TP_V1-e1555747456954.jpg)

まずは、PythonのFlaskを使ってロジックを作っていきます。

以下がコードになります。

```python title="sig.py"
import pandas as pd
import numpy as np
from scipy.stats import chi2_contingency
from flask import Flask, redirect ,request,render_template,jsonify
from flask_bootstrap import Bootstrap
import json
import requests

nc = Flask(__name__)

@nc.route("/")
def check():
    return render_template('sig.html')

@nc.route('/output', methods=['POST'])
def output():
    #json形式でURLを受け取る
    allA = int(request.json['allA'])
    allB = int(request.json['allB'])
    CVA = int(request.json['CVA'])
    CVB = int(request.json['CVB'])

    a,b,c,d=chi2_contingency(np.array([[allA,CVA],[allB,CVB]]))

    return_data = {"result":b}
    return jsonify(ResultSet=json.dumps(return_data))

if __name__ == '__main__':
    nc.run(host="127.0.0.1", port=8080)
```

:::talk{who="robotan"}
うーん、なんかたくさんあって難しそう、、、
:::

:::talk{who="umatan"}
ゆっくり解説していくから安心して！
:::

順番にコードを見ていきましょう！

```python
nc = Flask(__name__)
```

こちらはFlaskを定義する部分。おまじないみたいなモノです。

最終的にここで定義したncをrunしてWebアプリケーションを走らせていきます。

```python
@nc.route("/")
def check():
    return render_template('sig.html')
```

続いて@nc.routeでルートを指定します。Webサイトで言うURLにあたります。

ここでsig.htmlという画面表示部分をレンダリングしています。

sig.htmlについては後で見ていきましょう！

```python
@nc.route('/output', methods=['POST'])
def output():
    #json形式でURLを受け取る
    allA = int(request.json['allA'])
    allB = int(request.json['allB'])
    CVA = int(request.json['CVA'])
    CVB = int(request.json['CVB'])

    a,b,c,d=chi2_contingency(np.array([[allA,CVA],[allB,CVB]]))

    return_data = {"result":b}
    return jsonify(ResultSet=json.dumps(return_data))
```

この部分では、画面上で入力してもらった数値を動的にAjaxでPOST形式でサーバーサイドに送信しています。

送信形式はPOSTとGETがありますが、POSTの方が秘匿性が高くなっており今回はPOSTを用いています。

json形式でデータをもらった後は、有意差を計算していきます。

今回はAとBのパターンの有意差は[カイ二乗検定](/chisq-test)を行って算出しています。

Webマーケティングでありがちなメールの[ABテスト](/ab-test)などを実装できます。

```python
if __name__ == '__main__':
    nc.run(host="127.0.0.1", port=8080)
```

最後にこのWebアプリケーションを実装して終了です。

## Webアプリケーション表示部分の例を見てみよう

![](/wp-content/uploads/2018/08/PAK85_MBAdesagyou20140312_TP_V-e1557018085482-1024x575.jpg)

ロジック部分が出来上がったので、続いてWebアプリケーションの表示部分を作っていきます！

コードは以下です。

```html title="sig.html"
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テキスト分析</title>
    <!-- <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" /> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-info">
<br>ABテストの有意差計算</h1>
&nbsp;
  <form class="form-inline">
  <div class="form-group">
    <label>A</label>
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="allA" name="allA" placeholder="全体数" required/>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="CVA" name="CVA" placeholder="CV数" required/>
      </div>
    </div>
  </div>
  </form>
  <form class="form-inline">
  <div class="form-group">
    <label>B</label>
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="allB" name="allB" placeholder="全体数" required/>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="CVB" name="CVB" placeholder="CV数" required/>
      </div>
    </div>
  </div>
  </form>
  &nbsp;
  <button class="btn btn-info" id="button1">有意差算出</button>
  <div></div>
  &nbsp;
  <font color='696969' size=5><div id="match1" >有意差は</div></font>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <!-- temp -->
  <script type="text/javascript">
  $(function(){
    $("#button1").on("click", function(){
      var textData = JSON.stringify({"allA":$("#allA").val(),"allB":$("#allB").val(),"CVA":$("#CVA").val(),"CVB":$("#CVB").val()});
      $.ajax({
        type:'POST',
        url:'/output',
        data:textData,
        contentType:'application/json',
        // 非同期通信が成功したら実行される
        success:function(data){
          var result = JSON.parse(data.ResultSet).result;
          if(result>0.05){
          $("#match1").text("有意であるとは言えない");
          }
          else if(result>0.01){
          $("#match1").text("95％有意である");
          }
          else{
          $("#match1").text("99％有意である");
          }
        }
      });
     });
   });
  </script>
  <!-- temp -->
</body>
</html>
```

ここでは、簡単に見やすいUIを作成することの出来るBootstrapというフレームワークを使っています。

<mark>HTMLやCSSの細かい知識がなくても比較的簡単に綺麗な画面を作成</mark>することができますが、ある程度の知識は必要です。

HTMLやCSSについて勉強したい方は以下の記事をご覧ください。

<https://toukei-lab.com/html_css_study>

BootstrapはTwitter社が作成したフレームワークです。

以下細かいリファレンスが載っているので参考にしてみてください。

<https://getbootstrap.com/>

以下でBootstrapを使って画面部分を記述していきます。

```text
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テキスト分析</title>
    <!-- <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" /> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-info">
<br>ABテストの有意差計算</h1>
&nbsp;
  <form class="form-inline">
  <div class="form-group">
    <label>A</label>
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="allA" name="allA" placeholder="全体数" required/>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="CVA" name="CVA" placeholder="CV数" required/>
      </div>
    </div>
  </div>
  </form>
  <form class="form-inline">
  <div class="form-group">
    <label>B</label>
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="allB" name="allB" placeholder="全体数" required/>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <input class="form-control" type="text" id="CVB" name="CVB" placeholder="CV数" required/>
      </div>
    </div>
  </div>
  </form>
  &nbsp;
  <button class="btn btn-info" id="button1">有意差算出</button>
  <div></div>
  &nbsp;
  <font color='696969' size=5><div id="match1" >有意差は</div></font>
```

比較的見やすい画面表示が出来上がりました。

![](/wp-content/uploads/2019/08/flask-1024x535.jpg)

続いて入力された数値を非同期にサーバーサイドに送信していきます。

```javascript
<script type="text/javascript">
  $(function(){
    $("#button1").on("click", function(){
      var textData = JSON.stringify({"allA":$("#allA").val(),"allB":$("#allB").val(),"CVA":$("#CVA").val(),"CVB":$("#CVB").val()});
      $.ajax({
        type:'POST',
        url:'/output',
        data:textData,
        contentType:'application/json',
        // 非同期通信が成功したら実行される
        success:function(data){
          var result = JSON.parse(data.ResultSet).result;
          if(result>0.05){
          $("#match1").text("有意であるとは言えない");
          }
          else if(result>0.01){
          $("#match1").text("95％有意である");
          }
          else{
          $("#match1").text("99％有意である");
          }
        }
      });
     });
   });
  </script>
```

ここでJavascriptの出番です。Javascriptは少し複雑なのですが、非常に重要なのでおさえておきましょう。

以下の記事で勉強方法についてまとめています。

<https://toukei-lab.com/javascript_learn>

ここでは、非同期処理（Ajax処理）といってボタンを押すと同時にサーバーサイド側にデータを送り計算結果を受け取り画面に表示する処理をJavascriptで記載しています。

画面遷移せずに処理を行う非同期処理は様々な場面で使うので覚えておきましょう。

ちなみにFlaskのルールとして、HTMLファイルはPythonファイルと同じディレクトリ内に「**templates**」という名前のファイルを作成し、その中に格納しておかなくてはいけませんので注意しましょう。

CSSファイルやJSファイルは「**static**」ファイルに入れる必要があるのですが、今回はHTMLの中で全て完結させたので問題ありません。

続いて簡易的にアプリを一時的にデプロイできるngrokというツールを使っていきます。

ngrokに関しては以下の記事をチェックしてみてください！

<https://toukei-lab.com/ngrok>

今回作ったアプリをベースにGoogle Colabにて[ngrok](/ngrok)で有意差計算アプリを実行するコードを置いていきますので参考にしてみてください。

途中のAuthtokenは自分でngrokに登録して取得し記載する必要があります。

<https://colab.research.google.com/drive/19Vl_y4UOsI2JFNE0EOB5rHscBAstj4Yi?usp=sharing>

## Python flask　まとめ

これで有意差計算Webアプリケーションが完成しました。

<mark>Flaskを使ってWebアプリケーションを作るのは比較的簡単であること</mark>が分かってもらえたと思います。

Flaskに関しては以下の僕のUdemy講座で勉強できるのでぜひチェックしてみてください！

[**【実践】ビジネスケースとつなげてPythonで出来ること5つを学べる3日間集中コース**](https://www.udemy.com/course/python-can/?referralCode=2CBAD21040FF57199084)

[![Udemy python](/wp-content/uploads/2020/04/Udemy-me2-min-1024x554.jpg)](https://www.udemy.com/course/python-can/?referralCode=2CBAD21040FF57199084)

<table class="table">
<tbody>
<tr>
<th>【オススメ度】</th>
<td><span class="stars" role="img" aria-label="5点中5点" data-value="5"></span></td>
</tr>
<tr>
<th>【講師】</th>
<td>僕自身！今なら購入時に「FLSHDGEJURXF」という講師クーポンコードを入れると90%オフ以上の割引価格になりますのでぜひご受講ください！</td>
</tr>
<tr>
<th>【時間】</th>
<td><span>3.5時間</span></td>
</tr>
<tr>
<th>【レベル】</th>
<td><span>初級～中級</span></td>
</tr>
</tbody>
</table>

Pythonで出来ることのうち以下の5つを網羅して学んでいきます。

:::box
**・データ集計・加工・描画**\
**・機械学習を使ったモデル構築**\
**・Webスクレイピング**\
**・APIの利用**\
**・Webアプリケーション開発**
:::

データ集計・加工・描画と機械学習モデル構築に関しては[Kaggle](/kaggle)というデータ分析コンペティションのWalmartの小売データを扱いながら学んでいきます。

[Webスクレイピング](/python-scraping)とAPI利用と[Webアプリケーション開発](/python-webapp)に関しては、楽天の在庫情報を取得してSlackに自動で通知するWebアプリケーションを作成して学んでいきます。

Pythonで何ができるのか知りたい！という方には一番はじめにまず受けていただきたいコースです！

Twitterアカウント([@statistics1012](https://twitter.com/statistics1012?lang=ja))にメンションいただければ2000円以下になる講師クーポンを発行いたします！

::button[このコースを見てみる]{href="https://www.udemy.com/course/python-can/?referralCode=2CBAD21040FF57199084" note="＼30日以内なら返金無料／"}

さらに詳しくPythonやWebアプリの勉強がしたい！という方は当サイト「スタビジ」が提供する[スタビジアカデミー](https://toukei-lab.com/achademy/)というサービスで体系的に学ぶことが可能ですので是非参考にしてみてください！

:::box
**AIデータサイエンス特化スクール「スタアカ」**

![スタアカ（スタビジアカデミー）のトップページ](/wp-content/uploads/2026/10/achademy-top.jpg)
:::

<table class="table">
<tbody>
<tr>
<th>【価格】</th>
<td>ライトプラン：1,280円/月（全コースが受講し放題）<br>
プレミアムプラン：129,800円（通常149,800円・買い切り）</td>
</tr>
<tr>
<th>【オススメ度】</th>
<td><span class="stars" role="img" aria-label="5点中5点" data-value="5"></span></td>
</tr>
<tr>
<th>【サポート体制】</th>
<td><span class="stars" role="img" aria-label="5点中4点" data-value="4"></span></td>
</tr>
<tr>
<th>【受講形式】</th>
<td>オンライン形式</td>
</tr>
<tr>
<th>【学習範囲】</th>
<td>統計学・機械学習・ディープラーニングを網羅的に学ぶ<br>
生成AI（LLM・RAG・プロンプトエンジニアリング）を学ぶ<br>
SQLとPythonを組み合わせて実データを使った様々なワークを行う<br>
実践的なビジネスフレームワークを学ぶ<br>
マーケティングの実行プラン策定</td>
</tr>
</tbody>
</table>

データサイエンティストとしての自分の経験をふまえてエッセンスを詰め込んだのがこちらのスタビジアカデミー、略して「[スタアカ](https://toukei-lab.com/achademy/)」！！

当メディアが運営するスクールです。

月額1,280円のライトプランで、統計学から機械学習・生成AIまで全コースが受講し放題です！

<mark>プレミアムプランでは、24時間以内の質問対応と現役データサイエンティストとの1on1（30分×4回）を実施します！</mark>

カリキュラム自体は、他のスクールと比較して圧倒的に良い自信があるのでぜひ受講してみてください！

他のスクールのカリキュラムはPythonでの機械学習実装だけに焦点が当たっているものが多く、実務に即した内容になっていないものが多いです。

<mark>そんな課題感に対して、実務で使うことの多いSQLや機械学習のビジネス導入プロセスの理解なども合わせて学べるボリューム満点のコース</mark>になっています！

Pythonが初めての人でも学べるようなカリキュラムにしておりますので是非チェックしてみてください！

ウォルマートのデータを使って商品の予測分析をしたり、実務で使うことの多いGoogleプロダクトのBigQueryを使って投球分析をしたり、データサイエンティストに必要なビジネス・マーケティングの基礎を学んでマーケティングプランを作ってもらったりする盛りだくさんの内容になってます！

:::box
**・BigQuery上でSQL、Google Colab上でPythonを使い野球の投球分析**\
**・世界最大手小売企業のウォルマートの実データを用いた需要予測**\
**・ビジネス・マーケティングの基礎を学んで実際の企業を題材にしたマーケティングプランの策定**\
**・生成AIのAPIを使ってチャットボットやAIエージェントを作る**
:::

::button[スタアカの受講はこちら]{href="https://toukei-lab.com/achademy/" note="＼今すぐ試す／"}

以下の記事でその他にPythonが学べるスクールをまとめていますよ！チェックしてみてくださいね！

<https://toukei-lab.com/python-school>

Pythonはデータ解析やスクレイピングそしてWebアプリケーション作成まで出来る幅広いプログラミング言語！

以下の記事で、FlaskとDjango2つのWebアプリケーションフレームワークを用いた開発についてまとめていますのであわせてチェックしてみてください！

<https://toukei-lab.com/python-webapp>

最近ではPythonのWebアプリのフレームワークで「[Streamlit](/streamlit)」や「[Gradio](/gradio)」がデータサイエンスの分野でよく利用されているのでチェックしてみて下さい。

:::related
・[StreamlitでWebアプリを開発してみよう！](/streamlit)\
・[GradioでWebアプリを開発してみよう！](/gradio)
:::

PythonではWebアプリ以外にゲーム開発をすることも出来ます、興味がある方は以下の記事をチェックしてみて下さい。

<https://toukei-lab.com/python_game>

また、以下の記事で初心者がPythonを習得する方法についてまとめていますのでよければご覧ください！

<https://toukei-lab.com/python-learn>