【コピペで動く】PythonでCSVデータを読み込んでブラウザに表示するWebアプリを作ろう！
プログラミング初心者必見！この記事では、Pythonを使ってCSVファイルを読み込み、その内容をWebブラウザ上に表形式で表示する簡単なWebアプリケーションの作り方を、どこよりも丁寧に解説します。専門知識は不要です。紹介するコードをコピー＆ペーストするだけで、あなたのパソコンで動くアプリが完成します。「動いた！」という感動を、ぜひ体験してください。
はじめに：この記事を書いている僕は、ほんの数ヶ月前まで皆さんと同じでした
こんにちは！この記事を書いている僕は、ほんの数ヶ月前までプログラミングの「プ」の字も知らない、完全な初心者でした。エラーが出るたびに頭を抱え、「自分には向いてないかも…」と何度も挫折しかけました。
でも、AI（人工知能）を相棒に試行錯誤を繰り返すうちに、少しずつコードが読めるようになり、気づけば1ヶ月半で2つのWebサイト（buyonjapan.com, copicode.com）を一人で立ち上げることができました。
この記事は、そんな僕が「あの頃の自分が読みたかった！」と思える内容を、当時のつまずきポイントや解決策を交えながら、とことん初心者目線で書いています。専門用語はできるだけ使わず、使う場合も分かりやすく解説するので、安心して読み進めてくださいね。
STEP 1: アプリ開発の準備をしよう（環境構築）
まずは、アプリを作るための準備から始めましょう。料理でいうところの「材料と調理器具を揃える」ステップです。難しいことはないので、一つずつ確認していきましょう。
1. PythonとFlaskの準備
このアプリは、Pythonというプログラミング言語と、Flask（フラスク）という道具（専門用語で「Webフレームワーク」と言います）を使って作ります。
Flaskは、PythonでWebアプリを驚くほど簡単に作れるようにしてくれる魔法の箱のようなものです。まずは、このFlaskをあなたのパソコンにインストールしましょう。
お使いのパソコンの「ターミナル」（Windowsなら「コマンドプロンプト」や「PowerShell」）を開いて、以下の呪文をコピー＆ペーストして実行してください。
pip install Flask※もし「pipって何？」となっても大丈夫です。Pythonをインストールすると一緒についてくる、便利な道具（ライブラリ）を追加するためのコマンド、と覚えておけばOKです。
2. 作業フォルダとファイルの準備
次に、アプリの設計図や材料を置くための場所（フォルダ）を用意します。パソコンの好きな場所に、「csv_app」という名前のフォルダを新しく作ってください。
そして、その「csv_app」フォルダの中に、以下の3つのファイルを作ります。
- app.py: アプリのメインの動きを決める、Pythonの設計図ファイル。
- data.csv: ブラウザに表示したいデータが入っている、CSVファイル。
- templates フォルダ
- このフォルダの中に index.html を作ります。これは、ブラウザに表示されるページの見た目を作るファイルです。
フォルダの構成は、このようになります。
csv_app/
├── app.py
├── data.csv
└── templates/
└── index.html【重要ポイント】HTMLファイルは、必ず「templates」という名前のフォルダの中に入れてください。これはFlaskのルールで、「ここにページの見た目ファイルが入ってるよ」とFlaskに教えるためのお約束事です。名前が違うとエラーになるので注意してくださいね。
STEP 2: 表示するデータ（data.csv）を準備しよう
次に、アプリで表示するCSVデータを用意します。先ほど作成した data.csv ファイルに、以下の内容をコピー＆ペーストして保存してください。
今回は、簡単な会員名簿を例にしてみましょう。
ID,氏名,メールアドレス,登録日
1,佐藤 優子,yuko.sato@example.com,2024-05-01
2,鈴木 健太,kenta.suzuki@example.com,2024-05-15
3,高橋 明日香,asuka.takahashi@example.com,2024-06-03
4,田中 渉,wataru.tanaka@example.com,2024-06-21
5,伊藤 さくら,sakura.ito@example.com,2024-07-10気をつけるべき点：文字コード
ファイルを保存するときは、文字コードを「UTF-8」にすることをおすすめします。これはコンピュータが文字を理解するための世界共通のルールのようなもので、これにしておけば、日本語が「???」のように表示されてしまう「文字化け」という現象を防ぐことができます。
僕も初心者の頃、この文字化けで何時間も悩んだことがあります…。もしアプリがうまく動いて文字化けが起きたら、まずこのCSVファイルの文字コードを疑ってみてください。
STEP 3: Pythonでサーバーを動かすプログラムを書こう (app.py)
いよいよメインのプログラムです！ app.py ファイルに、以下のコードをまるごとコピー＆ペーストしてください。一つ一つの意味は、コードの後に詳しく解説します。
# 必要な道具（ライブラリ）をインポート
from flask import Flask, render_template
import csv
# Flaskアプリの本体を作成
app = Flask(__name__)
# 特定のURLにアクセスされたときの処理を定義
@app.route('/')
def index():
# CSVファイルを開いてデータを読み込む準備
# encoding='utf-8' を指定して文字化けを防ぐ
with open('data.csv', 'r', encoding='utf-8') as file:
# csvモジュールのreaderを使って、カンマ区切りのデータを読み込む
csv_reader = csv.reader(file)
# 1行目（ヘッダー）を先に読み込む
header = next(csv_reader)
# 残りのデータ行をリストとして読み込む
data = [row for row in csv_reader]
# HTMLにデータを渡して、ページを生成する
return render_template('index.html', header=header, data=data)
# このファイルが直接実行された場合に、Webサーバーを起動する
if __name__ == '__main__':
# debug=True にすると、コードを修正したときに自動でサーバーが再起動して便利
app.run(debug=True)
コードの解説（超ざっくり）
from flask import ...,import csv
「Flask」と「csv」という、これから使う便利な道具箱を使えるようにするおまじないです。app = Flask(__name__)
Flaskアプリの本体を作っています。これも決まった書き方なので、今は「こう書くんだな」でOKです。@app.route('/')
「Webサイトのトップページ（'/'）にアクセスが来たら、すぐ下の関数（index()）を実行してね」という指令書です。def index():
トップページにアクセスがあったときに、実際に動く処理内容です。with open(...): CSVファイルを開いています。encoding='utf-8'が文字化け対策の重要ポイントです。withを使うと、処理が終わったあとにファイルを自動で閉じてくれるので便利です。csv.reader(file): 開いたCSVファイルを、Pythonが扱いやすいようにカンマで区切ってくれる機能です。header = next(csv_reader): CSVファイルの最初の1行（ID, 氏名, ...）を「ヘッダー（見出し）」として取り出しています。data = [row for row in csv_reader]: 残りのデータ行をすべて取り出して、「data」という名前のリスト（データの集まり）に格納しています。
return render_template(...)
これが一番のキモです。「index.htmlという見た目ファイルを使って、Webページを作ってね！そのとき、さっき読み込んだheaderとdataの情報も一緒に渡すから、よろしく！」とFlaskに命令しています。if __name__ == '__main__': ...
このPythonファイルが直接実行されたときに、開発用のWebサーバーを起動するための決まり文句です。
最初は呪文のように見えるかもしれませんが、「ファイルを読んで」「HTMLに渡す」というシンプルな流れが分かれば大丈夫です！
STEP 4: データを表示する見た目（HTML）を作ろう (templates/index.html)
次は、Pythonから渡されたデータを表示するための「器」となるHTMLファイルを作ります。templatesフォルダの中にあるindex.htmlに、以下のコードをコピー＆ペーストしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSVデータ表示アプリ</title>
<!-- ダークモード用の簡易的なスタイル -->
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
th {
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSVデータ一覧</h1>
<!-- データが存在する場合にテーブルを表示 -->
{% if data %}
<table>
<thead>
<tr>
<!-- Pythonから渡されたヘッダーを表示 -->
{% for col in header %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<!-- Pythonから渡されたデータを1行ずつ表示 -->
{% for row in data %}
<tr>
{% for cell in row %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>表示するデータがありません。</p>
{% endif %}
</body>
</html>HTMLの中の特殊な記号 {% ... %} と {{ ... }}
このHTMLコードの中に、見慣れない {% ... %} や {{ ... }} という記号がありますね。これは Jinja2（ジンジャツー） という、Flaskが使っているテンプレートエンジンの書き方です。
{% for ... %} ... {% endfor %}
Pythonの「for文（繰り返し）」と同じ役割です。「Pythonから渡されたデータの数だけ、中のHTMLを繰り返してね」という意味になります。これを使うことで、データが5行あれば5行分のテーブル行を、100行あれば100行分のテーブル行を自動で生成できます。{{ ... }}
Pythonから渡された変数の「中身」を、その場所に表示させるための印です。{{ col }}はヘッダーの列名を、{{ cell }}は各データのセルの中身を表示します。
このように、Python（データ処理）とHTML（見た目）を分離することで、管理がしやすく、より複雑なアプリも作りやすくなるのです。これがFlaskのようなフレームワークを使う大きなメリットの一つです。
STEP 5: アプリを動かしてみよう！
さあ、すべての準備が整いました！いよいよアプリを動かしてみましょう。
もう一度ターミナル（コマンドプロンプト）を開き、cd コマンドで先ほど作成した「csv_app」フォルダに移動してください。
そして、以下のコマンドを実行します。
python app.pyコマンドを実行すると、ターミナルに以下のようなメッセージが表示されるはずです。
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: ...「Running on http://127.0.0.1:5000」という表示が出たら成功です！あなたのパソコンの中で、Webサーバーが動き始めました。
Webブラウザ（Google Chromeなど）を開いて、アドレスバーに以下のURLをコピー＆ペーストしてアクセスしてください。
どうでしょうか？ブラウザに、data.csvの中身がキレイな表で表示されたはずです！これが、あなたがPythonで作ったWebアプリケーションです。おめでとうございます！🎉
【応用編】Pandasを使ってもっと簡単にしてみよう！
今の方法でも十分ですが、PythonにはPandas（パンダス）という、データ分析にめちゃくちゃ強いライブラリがあります。これを使うと、CSVの読み込みとHTMLへの変換が、さらにシンプルになります。
興味のある方は、ぜひこちらも試してみてください。
1. Pandasのインストール
まずはPandasをインストールします。ターミナルで（Ctrl+Cで一度サーバーを止めてから）実行してください。
pip install pandas2. app.py の書き換え
app.py を以下のように書き換えます。CSVを読み込む部分が、驚くほど短くなっているのが分かるでしょうか。
from flask import Flask, render_template
import pandas as pd # pandasをpdという名前でインポート
app = Flask(__name__)
@app.route('/')
def index():
# Pandasを使ってCSVファイルを読み込む（たった1行！）
df = pd.read_csv('data.csv', encoding='utf-8')
# DataFrameをHTMLのtableタグに変換する（これも1行！）
# classes属性でCSSのクラスを指定したり、border=0で枠線を消したりできる
html_table = df.to_html(classes='data-table', index=False, border=0)
# HTMLにテーブルデータを渡してページを生成
return render_template('index_pandas.html', table=html_table)
if __name__ == '__main__':
app.run(debug=True)
3. index_pandas.html の作成
PandasはテーブルのHTMLをまるごと作ってくれるので、HTML側もシンプルになります。templatesフォルダに、新しくindex_pandas.htmlというファイルを作り、以下を貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSVデータ表示アプリ (Pandas版)</title>
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
/* to_htmlで指定したクラス名にスタイルを適用 */
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.data-table th, .data-table td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
.data-table thead th { /* ヘッダー行のスタイル */
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSVデータ一覧 (Pandas版)</h1>
<!-- Python(Pandas)から渡されたHTMLテーブルをそのまま表示 -->
{{ table|safe }}
</body>
</html>ポイントは {{ table|safe }} の部分です。Pandasが作ったHTMLコードには <table> などのタグが含まれているため、Flaskに「これは安全なHTMLだから、そのまま表示してね」と教えるために |safe というフィルターを付けています。
再度 python app.py を実行してアクセスすると、同じように表が表示されるはずです。コードがスッキリし、より本格的なデータ操作への扉が開かれましたね！
まとめ：小さな「できた！」が、次への大きな一歩になる
今回は、PythonとFlaskを使って、CSVデータをブラウザに表示する簡単なWebアプリを作成しました。「コピペで動く」を体験していただけたでしょうか？
プログラミング学習は、壮大な山登りのようなものです。最初から頂上を目指すと、あまりの険しさに心が折れてしまいます。でも、「まずは麓のキャンプ地まで行ってみよう」「次はあの見晴らしの良い丘まで」と、小さな目標を一つずつクリアしていくことで、着実に頂上へ近づくことができます。
この記事で体験した「自分の書いた（貼り付けた）コードで、Webアプリが動いた！」という小さな成功体験が、あなたの次の一歩を踏み出すための大きな自信に繋がれば、これ以上嬉しいことはありません。
ここからさらに、「検索機能を追加してみよう」「データを編集できるようにしてみよう」など、色々な改造にチャレンジしてみてください。エラーが出ても大丈夫。それも学習の一部です。AIに聞いたり、エラーメッセージで検索したりしながら、自分だけのアプリを作り上げていく楽しさを、ぜひ味わってください。
おまけ：まるっと動く完全HTMLのソースコード（ブラウザ表示結果）
参考までに、今回作成した最初のアプリ（標準ライブラリ版）を動かしたときに、Webブラウザ上で実際に生成されているHTMLソースコードを以下に示します。Pythonプログラムが、CSVファイルの内容を元に、このようなHTMLを動的に作り出している、というイメージを掴むのに役立ちます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSVデータ表示アプリ</title>
<!-- ダークモード用の簡易的なスタイル -->
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
th {
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSVデータ一覧</h1>
<!-- データが存在する場合にテーブルを表示 -->
<table>
<thead>
<tr>
<!-- Pythonから渡されたヘッダーを表示 -->
<th>ID</th>
<th>氏名</th>
<th>メールアドレス</th>
<th>登録日</th>
</tr>
</thead>
<tbody>
<!-- Pythonから渡されたデータを1行ずつ表示 -->
<tr>
<td>1</td>
<td>佐藤 優子</td>
<td>yuko.sato@example.com</td>
<td>2024-05-01</td>
</tr>
<tr>
<td>2</td>
<td>鈴木 健太</td>
<td>kenta.suzuki@example.com</td>
<td>2024-05-15</td>
</tr>
<tr>
<td>3</td>
<td>高橋 明日香</td>
<td>asuka.takahashi@example.com</td>
<td>2024-06-03</td>
</tr>
<tr>
<td>4</td>
<td>田中 渉</td>
<td>wataru.tanaka@example.com</td>
<td>2024-06-21</td>
</tr>
<tr>
<td>5</td>
<td>伊藤 さくら</td>
<td>sakura.ito@example.com</td>
<td>2024-07-10</td>
</tr>
</tbody>
</table>
</body>
</html>