function Component({ title }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "行動タイプ診断テスト", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } "use client"; function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(0); const [answers, setAnswers] = React.useState([]); const [showResult, setShowResult] = React.useState(false); const [loading, setLoading] = React.useState(false); const [selectedButton, setSelectedButton] = React.useState(null); const questions = [ { question: "計画を立ててからでないと、不安で行動に移せない", type: "turtle" }, { question: "やるからには、失敗しないように準備したい", type: "turtle" }, { question: "「まだ準備不足かも…」と感じて行動をためらうことがある", type: "turtle" }, { question: "情報が多すぎると、何をすべきか分からなくなる", type: "spiral" }, { question: "「もっと良いやり方があるかも」と考えすぎてしまう", type: "spiral" }, { question: "頭の中でシミュレーションして動けなくなったことがある", type: "spiral" }, { question: "気分が乗らないと、動けないことが多い", type: "mood" }, { question: "感情が乱れると、やるべきことが手につかなくなる", type: "mood" }, { question: "一度気分が下がると、立て直すのに時間がかかる", type: "mood" }, { question: "忙しくて自分のための時間が取れないと感じる", type: "busy" }, { question: "周りの期待に応えたくて、自分のことが後回しになる", type: "busy" }, { question: "やることが多すぎて、どこから手をつければいいか分からない", type: "busy" }, { question: "新しいことに挑戦するのは少し不安がある", type: "comfort" }, { question: "今のやり方を変えるのがなんとなく億劫", type: "comfort" }, { question: "失敗して誰かに迷惑をかけるくらいなら、やらない方がいいと思う", type: "comfort" } ]; const personalityTypes = { turtle: { title: "🐢 じっくり準備くん", description: "あなたは「じっくり準備くん」タイプ。\n石橋をたたいて渡る、慎重で丁寧な性格です。\n失敗を避けたい思いや責任感の強さから、「準備が整うまで動けない」と感じることもあるかもしれません。", advice: "でも、完璧じゃなくて大丈夫。「やりながら整える」のも立派な準備なんです。\nまずは小さな一歩から始めてみましょう。今のあなたならきっと大丈夫です。" }, spiral: { title: "🌀 ぐるぐる考えさん", description: "あなたは「ぐるぐる考えさん」タイプ。\n情報収集や思考が得意で、よく考えてから行動したい慎重派です。\nただ、考えすぎて選べなかったり、迷いが深まって動けなくなることも。", advice: "正解は動いた先に見えてくることがほとんど。\n完璧な答えを探すより、今できる小さなアクションを選んでみませんか？" }, mood: { title: "🌬️ きもちまかせちゃん", description: "あなたは「きもちまかせちゃん」タイプ。\n感受性が豊かで、自分の気分や状態にとても敏感な人です。\nだからこそ「やる気が出ないと動けない」ことがあるかもしれません。", advice: "でも大丈夫。行動が気分を変えることもあります。\nまずは「やる気がないままでも5分だけやってみる」ことを、自分に約束してみてくださいね。" }, busy: { title: "🐙 やることいっぱいマン", description: "あなたは「やることいっぱいマン」タイプ。\n周りの期待に応えようとして、自分のことが後回しになりがちかもしれません。\n忙しさで自分の時間が見えにくくなることもありますが、", advice: "「自分に戻る時間」を取ることが、行動のエネルギーを生み出します。\nまずは1日5分、あなたのためだけの時間をつくってみましょう。" }, comfort: { title: "🐈 ぬくぬく現状さん", description: "あなたは「ぬくぬく現状さん」タイプ。\n現状を大切にし、変化に対して慎重な姿勢を持っています。\n現状に安心していることは悪くありませんが、", advice: "変化は破壊ではなく「成長のしるし」でもあります。\n小さなことから少しだけ変えてみることで、新しい発見があるかもしれません。\nやさしい一歩を応援しています。" } }; const handleAnswer = async (score)=>{ setAnswers((prev)=>[ ...prev, score ]); setSelectedButton(score); await new Promise((resolve)=>setTimeout(resolve, 200)); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedButton(null); } else { setLoading(true); setTimeout(()=>{ setShowResult(true); setLoading(false); }, 1500); } }; const calculatePersonalityType = ()=>{ const typeScores = { turtle: 0, spiral: 0, mood: 0, busy: 0, comfort: 0 }; questions.forEach((q, i)=>{ typeScores[q.type] += answers[i]; }); Object.keys(typeScores).forEach((type)=>{ typeScores[type] /= questions.filter((q)=>q.type === type).length; }); return Object.entries(typeScores).reduce((a, b)=>a[1] > b[1] ? a : b)[0]; }; const resetTest = ()=>{ setCurrentQuestion(0); setAnswers([]); setShowResult(false); }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-64 mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-48", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }))); } if (showResult) { const type = calculatePersonalityType(); const result = personalityTypes[type]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "あなたの行動タイプ診断結果", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, type === "turtle" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/be70fb1e-4910-4d89-aca3-b87defc2856c/-/format/auto/", alt: "じっくり準備くんのイラスト", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }), type === "spiral" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/1c658777-b57c-4dd4-ad13-d35c4dbd5a98/-/format/auto/", alt: "ぐるぐる考えさんのイラスト", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }), type === "mood" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/e8a0bb4c-58aa-443e-9dd2-40f3ca0375bd/-/format/auto/", alt: "きもちまかせちゃんのイラスト", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }), type === "comfort" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/27c1b861-43b8-429a-ae92-86bf08c06a5d/-/format/auto/", alt: "ぬくぬく現状さんのイラスト", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }), type === "busy" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/edec717d-8099-4539-8b68-5161bfca2102/-/format/auto/", alt: "やることいっぱいマンのイラスト", className: "w-48 h-48 mx-auto mb-6", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md mb-4 whitespace-pre-line", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, result.description), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md mb-4 whitespace-pre-line", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, result.advice), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "詳しい診断結果は一般社団法人リードマインドジャパンのLINE公式アカウントから確認できます！"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "おすすめのアクションの中から自分に合うものを探してやってみてくださいね。"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "診断結果をダウンロードするときに、ご自身の診断結果がキーワードとなります。忘れないようにメモしてください"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md font-bold", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "あなたの合言葉は「", type === "turtle" && "じっくり", type === "spiral" && "ぐるぐる", type === "mood" && "きもち", type === "busy" && "やること", type === "comfort" && "ぬくぬく", "」です"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "LINE登録をしてダウンロードする時に、この合言葉を入力してください"), /*#__PURE__*/ React.createElement("a", { href: "https://lin.ee/mRj8uCn", target: "_blank", rel: "noopener noreferrer", className: "inline-block", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://scdn.line-apps.com/n/line_add_friends/btn/ja.png", alt: "友だち追加", className: "h-9 hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: resetTest, className: "w-full md:w-auto px-6 py-3 bg-gray-900 text-white rounded hover:bg-gray-800 transition-colors font-inter mt-6", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "もう一度診断する")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-6", __source: { fileName: "", lineNumber: 242, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 243, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "行動タイプ診断テスト", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-md", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, "各質問について、どのくらい当てはまるか5段階で答えてください")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 251, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-900 rounded-full transition-all duration-300", style: { width: `${(currentQuestion + 1) / questions.length * 100}%` }, __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, currentQuestion + 1, " / ", questions.length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-4", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((score)=>{ const isSelected = selectedButton === score; return /*#__PURE__*/ React.createElement("button", { key: `${currentQuestion}-${score}`, onClick: ()=>handleAnswer(score), className: `w-full text-left p-3 rounded border ${isSelected ? "bg-gray-100 border-gray-400" : "border-gray-200 hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this }, score === 1 && "全く当てはまらない", score === 2 && "あまり当てはまらない", score === 3 && "どちらともいえない", score === 4 && "やや当てはまる", score === 5 && "とても当てはまる"); }))))); }