【実践チャレンジその1】

第1章の学習お疲れ様でした！ ここまでの知識を使って、簡単な課題に挑戦してみましょう。

課題：プロフィール画面を完成させよう

下の画面を見てください。「エンジニアプロフィール」というアプリですが、すべて st.write() だけで書かれているため、非常に見づらい状態です。

このコードをブラウザ上で直接書き換えて、以下の要件を満たすアプリに作り変えてください。

1. タイトル: st.title() を使って大きく表示する。
2. 表データ: st.dataframe() を使って、スキル一覧を表として表示する（pandasのDataFrameを使うこと）。
3. 指標: st.metric() を使って、学習時間をかっこよく表示する。

プレイグラウンド

コードを編集して Ctrl + Enter (または Cmd + Enter) を押すと、右側のプレビューに反映されます。 間違えても「リセット」ボタンで最初に戻せるので、自由に試してください！

↺ リセット ↗ 新しいタブで開く

---

解答例

思うように動きましたか？ 以下は解答の一例です。

クリックして解答コードを見る

challenge_solution.py

import streamlit as st
import pandas as pd

# 1. タイトルで見出しを強調
st.title("エンジニア プロフィール")

st.write("---")

# 2. データフレームで見やすく表示
st.subheader("▼ スキル一覧")

# 辞書をデータフレームに変換
df = pd.DataFrame({
    "言語": ["Python", "TypeScript", "SQL"],
    "レベル": ["得意", "勉強中", "普通"],
    "経験年数": [3, 1, 2]
})
st.dataframe(df)

st.write("---")

# 3. メトリックで数値を強調
st.subheader("学習状況")
st.metric(label="今月の学習時間", value="45時間", delta="+12時間")

実行結果はこのようになります。

↺ リセット ↗ 新しいタブで開く

解説

• 情報の強弱: アプリ作りにおいて「何が重要か」を伝えるのは大切です。タイトルは大きく、本文は普通に、と使い分けましょう。
• データの可視化: Pythonの辞書型（Dictionary）は見づらいですが、pd.DataFrame に変換して st.dataframe に渡すだけで、ソート可能な綺麗な表になります。
• KPIの強調: 数値の変化を見せたい時は st.metric が最適です。

これで第1章は完了です。次はボタンや入力フォームを使って、ユーザーと対話するアプリを作っていきましょう！