はじめに
今回は、Streamlitを使ってシンプルなMBTI診断アプリを作成したので、その制作過程を記録してみようと思います。
使用技術
Streamlit: シンプルなWebアプリをサクッと作れるフレームワーク。フロントエンドを意識せずにアプリケーションを開発できるのが強みです。
Python: 全体のロジックやデータ処理部分はPythonで書いています。
実装のステップ
1. 基本的なロジックの設計
まず、MBTI診断の基本的な仕組みを簡単にまとめました。質問は「外向的か内向的か」「感覚か直感か」などの4つの項目で構成されており、それぞれの選択肢から最終的なタイプ（例えば "INTJ"）が決まります。ちなみに僕はENFJです。
ロジックは簡単で、以下のように各質問の結果を文字列に組み合わせていく形です。
q1 = 'I' # 内向的なら"I"
q2 = 'N' # 直感型なら"N"
q3 = 'T' # 思考型なら"T"
q4 = 'J' # 判断型なら"J"
mbti = q1 + q2 + q3 + q4
2. Streamlitを使ったUI作成
Streamlitのradioコンポーネントを使って、ユーザーが4つの質問に答えられるようにしました。このとき、選択肢がそのままタイプの略称（I、E、N、Sなど）になるので、5文字目（q1[5]）を利用して選択された文字を取得する工夫を入れました。
q1 = st.radio('あなたはどちらですか？', ('外向的 (E)', '内向的 (I)'))
q2 = st.radio('情報をどのように得ることが多いですか？', ('感覚型 (S)', '直感型 (N)'))
q3 = st.radio('意思決定はどのように行いますか？', ('思考型 (T)', '感情型 (F)'))
q4 = st.radio('生活の進め方は？', ('判断型 (J)', '柔軟型 (P)'))
3. MBTIによる結果の出力
こちらのタイプごとの説明をお借りし、タイプ別で結果が出せるようにしました。
つまずいた点
一番引っかかったのは、選択肢から直接MBTIのタイプを生成する部分です。radioで選択肢を表示した後、その選択肢の5文字目を使ってタイプを決定するロジックは、最初うまくいきませんでした。
解決策としては、選択肢に対応する文字を直接扱うか、radioの戻り値をそのまま使う方法に変更しました。最終的に、リファクタリングして直接文字列を結合する形に変更しました。
完成品
こちらが完成したアプリです！
ソースコードも置いておきます
まとめ
今回の制作で感じたのは、Streamlitの素晴らしさです。Webアプリの開発が短時間で完了し、特にフロントエンドの実装に煩わされることなくロジックに集中できました。また、ユーザーが直接インタラクションできるUIを簡単に実装できる点も非常に便利でした。
短期間で楽しく制作できたので、次回はもう少し複雑な診断ロジックを組み込んだアプリに挑戦してみたいと思います！