Streamlitで単語帳アプリを作ろう！

今回は英単語アプリを作成したいと思います。

完成イメージ
コード全体
コードの詳細

完成イメージ

今回のアプリは、単語の追加、削除、一覧表示、クイズを作成します。
トップページはまずはこのようになります。

単語の追加は追加部分で可能です。

追加後は一覧に追加されます

単語テストもランダムで選ばれた単語が表示されます。

不正解の場合です。

コード全体

import streamlit as st
import random

# データを格納するリストを作成
if 'word_list' not in st.session_state:
    st.session_state.word_list = []

# 現在の単語のインデックスを session_state で追跡
if 'current_word_index' not in st.session_state:
    st.session_state.current_word_index = None

# Streamlitアプリのタイトルを設定
st.title("英単語の暗記アプリ")

# 単語を追加するセクション
st.header("単語を追加")
word = st.text_input("単語を入力してください")
meaning = st.text_input("意味を入力してください")
if st.button("追加"):
    st.session_state.word_list.append({"word": word, "meaning": meaning})
    st.success(f"{word} を追加しました")

# 単語を表示するセクション
st.header("単語一覧")
for entry in st.session_state.word_list:
    st.write(f"{entry['word']} - {entry['meaning']}")

# 単語を削除するセクション
st.header("単語を削除")
word_to_remove = st.text_input("削除する単語を入力してください")
if st.button("削除"):
    for entry in st.session_state.word_list:
        if entry['word'] == word_to_remove:
            st.session_state.word_list.remove(entry)
            st.success(f"{word_to_remove} を削除しました")
            break
    else:
        st.warning(f"{word_to_remove} は見つかりません")

# 単語テストセクション
st.header("単語テスト")
if st.session_state.word_list:
    if st.session_state.current_word_index is None:
        # 新しい単語をランダムに選択
        st.session_state.current_word_index = random.randint(0, len(st.session_state.word_list) - 1)

    current_entry = st.session_state.word_list[st.session_state.current_word_index]
    st.write("意味を当ててください:")
    user_guess = st.text_input(f"{current_entry['word']} の意味は？")

    if st.button("チェック"):
        if user_guess.strip().lower() == current_entry['meaning'].strip().lower():
            st.success("正解です！")
        else:
            st.error(f"不正解です。正解は {current_entry['meaning']} です。")

        # 次の単語に進むために current_word_index を更新
        st.session_state.current_word_index = random.randint(0, len(st.session_state.word_list) - 1)

else:
    st.warning("単語リストが空です。単語を追加してください。")

コードの詳細

単語を追加するセクション

st.header("単語を追加")
word = st.text_input("単語を入力してください")
meaning = st.text_input("意味を入力してください")
if st.button("追加"):
    word_list.append({"word": word, "meaning": meaning})
    st.success(f"{word} を追加しました")

この部分では、単語を追加するセクションを作成しています。

st.header("単語を追加"): セクションの見出しを表示します。
word = st.text_input("単語を入力してください"): ユーザーが単語を入力するためのテキスト入力フィールドを表示します。
meaning = st.text_input("意味を入力してください"): ユーザーが単語の意味を入力するためのテキスト入力フィールドを表示します。
if st.button("追加"): ユーザーが「追加」ボタンをクリックした場合に以下のコードを実行します。
word_list.append({"word": word, "meaning": meaning}): 入力された単語と意味を辞書として word_list リストに追加します。
st.success(f"{word} を追加しました"): ユーザーに成功メッセージを表示します。

単語を表示するセクション

st.header("単語一覧")
for entry in word_list:
    st.write(f"{entry['word']} - {entry['meaning']}")

この部分では、単語を表示するセクションを作成しています。

st.header("単語一覧"): セクションの見出しを表示します。
for entry in word_list: word_list リスト内の各単語エントリーに対して以下のコードを繰り返し実行します。
st.write(f"{entry['word']} - {entry['meaning']}"): 単語と意味を表示します。

単語を削除するセクション

st.header("単語を削除")
word_to_remove = st.text_input("削除する単語を入力してください")
if st.button("削除"):
    for entry in word_list:
        if entry['word'] == word_to_remove:
            word_list.remove(entry)
            st.success(f"{word_to_remove} を削除しました")
            break
    else:
        st.warning(f"{word_to_remove} は見つかりません")

この部分では、単語を削除するセクションを作成しています。

st.header("単語を削除"): セクションの見出しを表示します。
word_to_remove = st.text_input("削除する単語を入力してください"): ユーザーが削除したい単語を入力するためのテキスト入力フィールドを表示します。
if st.button("削除"): ユーザーが「削除」ボタンをクリックした場合に以下のコードを実行します。
for entry in word_list: word_list リスト内の各単語エントリーに対して以下のコードを繰り返し実行します。
- if entry['word'] == word_to_remove: 削除対象の単語が見つかった場合、以下のコードを実行します。
- word_list.remove(entry): word_list リストから該当するエントリーを削除します。
- st.success(f"{word_to_remove} を削除しました"): ユーザーに成功メッセージを表示します。
else: 削除対象の単語が見つからなかった場合、以下のコードを実行します。
- st.warning(f"{word_to_remove} は見つかりません"): ユーザーに警告メッセージを表示します。

お疲れ様でした。GoogleColaboratoryでの動かせるコードは以下↓
GogoleColabのコード