スプレッドシートを、目が回るほど見つめ続けた経験はありませんか？

私には間違いなくあります。

データのクリーニング、トレンドの分析、そしてそのたった一つの重要なインサイト（洞察）を見つけ出すために、私たちは何時間も費やします。

しかし、そこからが本当の難関です。

それを提示しなければならないのです。

通常、それは静的なPowerPointのスライドや、Excelのグラフのスクリーンショットを見せることを意味します。

その瞬間に、ワクワク感は消え失せてしまいます。

聞き手は静的な表など見たくありません。

彼らはデータを自分で操作したいのです。

「この変数を変えたらどうなるのか？」「地域Xではどう見えるのか？」といった問いを投げかけたいのです。

そこで登場するのが、データストーリーテリングです。

そして、それを実現するツールを作るために、Web開発者である必要はありません。

今日は、シンプルなデータセットを完全にインタラクティブなWebアプリケーションに変える方法をご紹介します。

使用するのはPython、そしてまるで魔法のようなライブラリ、Streamlitです。

私がStreamlitを強く勧める理由

かつて私はダッシュボードの作成を恐れていました。

以前は、モデルや可視化を共有したければ、FlaskやDjangoを学ばなければなりませんでした。

HTML、CSS、JavaScriptと格闘しなければなりませんでした。

Pythonでコードを書きたいだけのデータサイエンティストにとっては悪夢でした。

そんな時、Streamlitに出会いました。

Streamlitはデータスクリプトを数分で共有可能なWebアプリに変えてくれます。

すべて純粋なPythonだけで。

フロントエンドの経験は一切不要です。

それは、Jupyter Notebookと洗練されたプロダクトとの間に架け橋を作ります。

信じられないほどの速さで反復作業ができます。

Pythonの行を変更し、保存を押せば、Webアプリは即座に更新されます。

今回のチュートリアルでは「My Core Pick」を代表してお届けするため、品質とスピードに重点を置いています。

では、最初のナラティブ（物語のある）ダッシュボードを構築する方法に飛び込んでみましょう。

舞台設定：環境の準備

コードを一行も書く前に、ワークスペースをセットアップする必要があります。

Pythonがインストールされていることを前提とします。

もしそうでなければ、python.orgから最新バージョンを入手してください。

依存関係をクリーンに保つために、常に仮想環境で作業することをお勧めします。

ターミナルまたはコマンドプロンプトを開きます。

プロジェクト用の新しいフォルダを作成します。

bash mkdir streamlit_dashboard cd streamlit_dashboard

次に、仮想環境を作成します。

bash python -m venv venv

有効化します（Windowsでは venv\Scripts\activate、Mac/Linuxでは source venv/bin/activate を使用）。

さて、主役たちをインストールしましょう。

アプリ用にStreamlit、データ操作用にPandas、美しいインタラクティブなチャート用にPlotlyが必要です。

bash pip install streamlit pandas plotly

これで完了です。

コーディングの準備が整いました。

基礎：データの読み込み

app.pyという新しいファイルを作成します。

お気に入りのコードエディタで開いてください（私はVS Codeを使っています）。

まずはライブラリをインポートしましょう。

python import streamlit as st import pandas as pd import plotly.express as px

次にタイトルが必要です。

Streamlitを使えば信じられないほど簡単です。

python st.set_page_config(page_title="Sales Dashboard", layout="wide") st.title("📊 Global Sales Narrative") st.markdown("## Analyze sales performance across different regions.")

次にデータが必要です。

この例では、sales_data.csvという名前のCSVファイルがあると仮定しましょう。

（手持ちのデータセットを使うか、オンラインでSuperstore Salesのサンプルデータセットをダウンロードしてください）。

データを読み込む関数を書きます。

なぜ関数なのか？

それはStreamlitのキャッシュ機能を使いたいからです。

キャッシングの力

ユーザーがStreamlitアプリを操作するたび（ボタンクリックやフィルタ変更など）、スクリプト全体が上から下まで再実行されます。

もし500MBのCSVファイルを読み込んでいるとしたら、それは苦痛なほど遅くなります。

これを解決するために @st.cache_data デコレータを使います。

これはStreamlitにこう伝えます。「この関数が以前に実行されていたら、保存された結果をくれ。もう一度実行しないでくれ」と。

私が書くコードは以下の通りです：

```python @st.cache_data def get_data(): df = pd.read_csv("sales_data.csv") # A little cleaning helps df["Order Date"] = pd.to_datetime(df["Order Date"]) return df

df = get_data() ```

では、正しく動作するか確認しましょう。

私は正気かどうか確認するために、最初に生データを表示するのが好きです。

python if st.checkbox("Show Raw Data"): st.dataframe(df.head())

ファイルを保存してください。

ターミナルに行き、以下を実行してください：

bash streamlit run app.py

ブラウザウィンドウがポップアップします。

おめでとうございます、Webアプリが起動しました。

物語の構築：サイドバーとフィルタ

物語は、聞き手が道を選ぶとき、より良いものになります。

静的なダッシュボードが退屈なのは、すべての人にすべてを見せようとするからです。

ユーザーにコントロールを与えたいのです。

Streamlitには、そのためのサイドバーが用意されています。

これにより、メインエリアを可視化のために空けておくことができます。

「Region（地域）」と「Year（年）」のフィルタを追加しましょう。

サイドバーの作成

要素を左側に配置するために st.sidebar を使用します。

```python st.sidebar.header("Filter Options")

Create a multiselect for Region

region = st.sidebar.multiselect( "Select Region:", options=df["Region"].unique(), default=df["Region"].unique() ) ```

これで、この選択に基づいて実際にデータフレームをフィルタリングする必要があります。

ここでインタラクティブ性が生まれます。

python df_selection = df.query("Region == @region")

ユーザーがサイドバーから「North America」を外すと、df_selection は即座に更新されます。

データが反応しているか確認しましょう。

メインページの最上部にトップレベルの指標（KPI）を表示できます。

KPIの表示

私は st.metric コンポーネントを使うのが大好きです。

プロフェッショナルに見え、重要な数字を強調できます。

フィルタリングされたデータに基づいて、総売上と平均評価を計算しましょう。

```python total_sales = int(df_selection["Sales"].sum()) average_rating = round(df_selection["Rating"].mean(), 1)

left_column, right_column = st.columns(2)

with left_column: st.metric(label="Total Sales", value=f"${total_sales:,}")

with right_column: st.metric(label="Average Rating", value=f"{average_rating} ⭐") ```

st.columns(2)にお気づきですか？

これでレイアウトを管理します。

画面を2つの等幅の列に分割します。

これにより垂直方向の流れが分断され、単に画面に放り込まれただけでなく、デザインされたダッシュボードに見えます。

ストーリーの可視化

これでユーザー入力に反応するデータができました。

それを可視化する時です。

Streamlitには基本的なチャートがありますが、私は Plotly Express を好みます。

Plotlyのチャートはデフォルトでインタラクティブです。

データポイントにカーソルを合わせたり、ズームインしたり、チャートをPNGとしてダウンロードしたりできます。

棒グラフ

「どの製品ラインが最もパフォーマンスが良いか？」という質問に答えましょう。

製品ライン別の売上を示す棒グラフを作成します。

```python sales_by_product = ( df_selection.groupby(by=["Product Line"]).sum()[["Sales"]].sort_values(by="Sales") )

fig_product_sales = px.bar( sales_by_product, x="Sales", y=sales_by_product.index, orientation="h", title="Sales by Product Line", color_discrete_sequence=["#0083B8"] * len(sales_by_product), template="plotly_white", ) ```

これで図のオブジェクト（fig_product_sales）ができました。

これをStreamlitで描画する必要があります。

python st.plotly_chart(fig_product_sales, use_container_width=True)

use_container_width=True 引数は重要です。

これにより、チャートが列や画面の幅いっぱいに広がるようになります。

異なる画面サイズでもアプリがレスポンシブに見えるようになります。

時系列

すべてのデータストーリーにはタイムラインが必要です。

売上が時間の経過とともにどう推移したかを示しましょう。

これは季節性や突然の落ち込みを特定するのに役立ちます。

```python

Group by month

df_selection["month_year"] = df_selection["Order Date"].dt.to_period("M") line_chart_data = df_selection.groupby(df_selection["month_year"].astype(str))["Sales"].sum().reset_index()

fig_sales_over_time = px.line( line_chart_data, x="month_year", y="Sales", title="Sales Over Time", template="plotly_white" )

st.plotly_chart(fig_sales_over_time, use_container_width=True) ```

これで、サイドバーで地域を変更すると、棒グラフと折れ線グラフの両方が即座に更新されます。

ユーザーは単に読んでいるだけでなく、物語を探求しているのです。

ユーザー体験を磨く

機能性は確保しました。

しかし、プロフェッショナルなダッシュボードには少し磨きが必要です。

「My Core Pick」では、良質と偉大の違いは細部にあると信じています。

デフォルトスタイルの非表示

Streamlitには、右上に「ハンバーガー」メニュー、そして「Made with Streamlit」というフッターが付いています。

クリーンでプロフェッショナルな外観にするために、私は通常CSSインジェクションを使ってこれらを隠します。

はい、CSSは必要ないと言いましたが、これは私が隠し持っている小さなオプションのスニペットです。

python hide_st_style = """ <style> #MainMenu {visibility: hidden;} footer {visibility: hidden;} header {visibility: hidden;} </style> """ st.markdown(hide_st_style, unsafe_allow_html=True)

コンテキスト（文脈）の追加

単にチャートを見せるだけではいけません。

ユーザーが見ているものを説明しましょう。

st.markdown を使ってコメントを追加したり、データの異常値を説明したりします。

例えば、折れ線グラフの下に次のように追加できます：

python st.markdown("---") st.caption("Note: Sales dipped in Q2 due to supply chain shortages in the North region.")

このコンテキストが、生の数字を実際のビジネスインテリジェンスに変えます。

デプロイ：ストーリーの共有

あなたはそれを作りました。ローカルで動いています。

しかし、それはあなたのノートPCの中に閉じ込められています。

チームや世界に見せるには、デプロイする必要があります。

断然簡単な方法は Streamlit Community Cloud です。

ワークフローは以下の通りです：

1. requirements.txt ファイルを作成する。 サーバーにインストールするライブラリを伝えます。 ターミナルで pip freeze > requirements.txt を実行します。

2. コードをGitHubにプッシュする。 リポジトリを作成し、app.py、sales_data.csv、requirements.txt をアップロードします。

3. Streamlit Cloudにサインアップする。 GitHubアカウントと連携します。

4. リポジトリを選択する。 「Deploy」をクリックします。

約2分で、ライブURLが発行されます。

そのリンクを上司やクライアントにメールしたり、LinkedInに投稿したりできます。

彼らはスマホやノートPCで開くことができます。

彼ら側にインストールは不要です。

結論

私たちは静的なCSVファイルから、完全にインタラクティブでデプロイされたWebアプリケーションへと移行しました。

しかも100行未満のPythonコードで。

これがStreamlitの力です。

データの可視化を民主化します。

急な学習曲線なしに、データサイエンティストがフルスタック開発者になれるようにします。

あなたのデータには語るべき物語があります。

スプレッドシートに押し込めておかないでください。

声を与えてあげましょう。

ダッシュボードを構築し、デプロイし、ユーザー自身にその物語を探求させましょう。

今週末にぜひ試してみてください。

あなたが気になっているデータセット——Spotifyの再生履歴やフィットネストラッキングのデータなど——を手に取ってください。

自分のためにダッシュボードを作ってみましょう。

自分に反応してくれるツールを作り始めたら、もう二度と静的なスライドには戻りたくなくなるでしょう。