function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(-1); const [answers, setAnswers] = React.useState([]); const [result, setResult] = React.useState(null); const questions = [ "友達や家族とチャットやメッセージ交換を頻繁にするほうだ", "自分の趣味やアイデアをビジネスにできないか考えることがよくある", "最新のガジェットやアプリをチェックするのが好きだ", "InstagramなどのSNSで写真や動画を投稿することに興味がある", "家具の配置や部屋のインテリアを考えたり、模様替えをよくするほうだ", "数字やデータを見て分析するのが好きなほうだ", "問題解決をするときは論理的に物事を考えることが多い", "相談に乗ることが多く、その人に合ったアドバイスをするのが得意なほうだ", "物事を効率的に進めるためにはどう工夫すれば良いか考えることが多い", "自分のアイデアを形にするために必要な道筋を考えることが得意だ", "映画や動画を見て、そのシーンや編集に興味を持つことが多い", "謎解きやパズルのような頭を使うゲームが好きだ", "新しいテクノロジーやツールの使い方を人に教えることは苦手ではない", "日常の買い物は、実店舗よりもオンラインですることが多い", "自分でビジネスを起こしてみたいと考えることがよくある", "SNSやネットで見つけた有益な情報を友達に共有することがよくある", "最新の家電やガジェットは、説明書を読まなくても使いこなせるほうだ", "新しいトレンドを自分でキャッチして、誰かに伝えることが好きだ", "楽しめる旅行やイベントを計画するのが得意なほうだ", "慣れていることよりも、新しい場所や体験をすることが好きだ", "簡単なことよりも、複雑なことをじっくり理解していくことが好きだ", "データや統計を使って問題を解決していくことが好きだ", "自分のアイデアや知識を他の人にシェアすることが好きだ", "インドアより、アウトドアで活動するほうが好きだ", "SNSで情報発信したり、フォロワーとやり取りしたりすることが好きだ" ]; const skills = [ "Web制作", "Webデザイン", "動画編集", "ドローン", "Java", "Webアプリ開発", "Shopify", "Python", "AIライティング", "LINE構築" ]; const handleAnswer = (answer)=>{ setAnswers([ ...answers, answer ]); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { calculateResult(); } }; const getSkillComment = (skill)=>{ const comments = { Web制作: "新しい技術やデザインを取り入れ、ユーザーに使いやすいWebサイトを構築する素質があります。技術的な問題解決に取り組むことが得意で、論理的な思考力と持続的な努力が光ります！プロジェクトを形にする力があり、着実に成長できるタイプです。", Webデザイン: "美的感覚が鋭く、視覚的な表現力に優れているあなたは、デザインを通じてユーザーに魅力を伝える力を持っています。細かい部分にもこだわり、クリエイティブな発想でコンテンツを作り出す能力があります！自分のスタイルを大切にしつつ、トレンドにも敏感です。", 動画編集: "映像を通じてストーリーを魅力的に伝え、細かい編集作業にも集中力を発揮できるあなた。映像の美しさや展開にこだわり、視覚的に人を惹きつける才能を活かせるクリエイタータイプです！新しい手法にも柔軟に対応でき、常に挑戦を続ける前向きさがあります。", ドローン: "新しいテクノロジーやガジェットへの興味が強く、冒険心旺盛なあなたは、空からの視点で新しい世界を捉えることに適しています！クリエイティブな撮影や技術的な操作を楽しみ、屋外での活動や自然に触れることに喜びを感じるタイプです。", Java: "論理的な思考とプログラミングの技術に優れ、複雑な問題解決の過程を楽しむあなた。安定したパフォーマンスを発揮し、システムを効率的に構築する素質があります！長期的なプロジェクトに取り組む忍耐力があり、深い知識を追求できるタイプです。", Webアプリ開発: "技術的な探究心が強く、実用的なアプリケーションを構築する力を持つあなた。新しい技術を取り入れ、世の中に役立つWebアプリを作り上げる素質を持っています！論理的かつ創造的な発想で、問題を解決しながら価値あるものを生み出すことに長けています。", Shopify: "創造的なアイデアをビジネスに変える力を持ち、柔軟な思考で新しい挑戦にも積極的に取り組めるあなた。ビジネスマインドを活かして、自分の価値を世の中に広めることに優れています！成長意欲が高く、挑戦を楽しめる姿勢が強みです。", Python: "自動化や効率化を重視し、データを使った問題解決に興味を持つあなたは、プログラミングで成果を出す能力があります！Pythonを活用して効率的にプロジェクトを進め、未来をより良くするための技術を探究する力があります。", AIライティング: "文章で物事の魅力を伝えることに情熱を持ちながらも、AIの力を活用して効率よく作業を進めたいあなたは、テクノロジーとクリエイティブの融合を得意としています！アイデアを効率的に形にすることに長けており、新しい技術にも柔軟に対応する力があります。", LINE構築: "シンプルで効率的なコミュニケーションを得意とし、他者との連携を大切にするあなたは、ツールを活用して素早く問題を解決する力を持っています！柔軟な発想と協力的な姿勢で、多くの人をサポートする役割に適しています。" }; return comments[skill] || "このスキルを活かして新しい可能性を探りましょう。"; }; const calculateResult = ()=>{ const scoreMap = { Web制作: [ 2, 5, 9, 12, 18 ], Webデザイン: [ 3, 4, 17, 18, 24 ], 動画編集: [ 3, 10, 17, 19, 24 ], ドローン: [ 4, 8, 19, 23, 24 ], Java: [ 5, 6, 11, 12, 20 ], Webアプリ開発: [ 2, 9, 11, 15, 21 ], Shopify: [ 1, 13, 14, 15, 16 ], Python: [ 6, 8, 11, 20, 21 ], AIライティング: [ 7, 10, 16, 21, 22 ], LINE構築: [ 0, 7, 13, 16, 19 ] }; const scores = skills.map((skill)=>{ const relevantQuestions = scoreMap[skill]; return relevantQuestions.reduce((sum, qIndex)=>sum + (answers[qIndex] === "はい" ? 2 : answers[qIndex] === "どちらでもない" ? 1 : 0), 0); }); const sortedSkills = skills.map((skill, index)=>({ skill, score: scores[index] })).sort((a, b)=>b.score - a.score); const top3Skills = sortedSkills.slice(0, 3); setResult(top3Skills); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFE8D6] py-6 flex flex-col justify-center", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative py-3 sm:max-w-xl sm:mx-auto px-4 sm:px-0", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#f1f1f1] shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl hidden sm:block", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#f1f1f1] shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl hidden sm:block", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative px-8 py-16 bg-white shadow-lg rounded-3xl sm:p-20", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 sm:space-y-6", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -top-2 left-8 w-24 h-24 sm:top-2 sm:left-12", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/16cbb085-66db-4b9f-9ff8-672f0dad00e0/-/format/auto/", alt: "デイトラlogo", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl sm:text-3xl font-bold text-[#FF9933] text-center mb-8", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "Webスキル診断"), currentQuestion === -1 ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base sm:text-xl font-bold mb-6 text-[#333333]", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, "あなたに最適なWebスキルを診断します。"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-48 sm:h-56 flex items-center justify-center mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/45e7df61-ec07-468e-a7ad-17a45e5cf86a/-/format/auto/", alt: "デイトラちゃん", className: "max-w-full max-h-full object-contain", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentQuestion(0), className: "px-12 py-3 text-lg font-semibold rounded-full text-white bg-gradient-to-r from-[#FF9933] to-[#FFCC66] hover:from-white hover:to-white hover:text-[#FF9933] border-2 border-[#FF9933] transition-all duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, "診断をスタートする")) : !result ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, currentQuestion > 0 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentQuestion(currentQuestion - 1), className: "text-gray-500 hover:text-gray-700 mr-2", __source: { fileName: "", lineNumber: 155, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-sm", __source: { fileName: "", lineNumber: 159, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-base sm:text-lg text-[#666666]", __source: { fileName: "", lineNumber: 162, columnNumber: 21 }, __self: this }, "質問 ", currentQuestion + 1, " / ", questions.length)), /*#__PURE__*/ React.createElement("p", { className: "text-lg sm:text-xl font-bold mb-6 text-[#333333]", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, questions[currentQuestion]), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, [ "はい", "どちらでもない", "いいえ" ].map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>handleAnswer(option), className: "px-6 py-3 text-lg font-medium rounded-full text-white bg-gradient-to-r from-[#FF9933] to-[#FFCC66] hover:from-white hover:to-white hover:text-[#FF9933] border-2 border-[#FF9933] transition-all duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 171, columnNumber: 23 }, __self: this }, option)))) : /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-xl font-bold mb-6 text-[#333333]", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, "あなたにピッタリのWebスキルは..."), result.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 sm:mb-5 text-left", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl sm:text-2xl font-bold sm:font-semibold bg-gradient-to-r from-[#FF9933] to-[#FFCC66] text-transparent bg-clip-text mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }, index + 1, "位 : ", item.skill), index === 0 && /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base font-medium sm:font-normal text-[#666666] leading-relaxed sm:leading-normal", __source: { fileName: "", lineNumber: 192, columnNumber: 25 }, __self: this }, getSkillComment(item.skill)))), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-[#333333] mb-3 font-medium", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }, "＼強みを活かしてWebスキルに挑戦！／"), /*#__PURE__*/ React.createElement("a", { href: "https://www.daily-trial.com/", target: "_blank", rel: "noopener noreferrer", className: "px-10 sm:px-12 py-3 text-lg font-semibold rounded-full text-white bg-gradient-to-r from-[#FF8282] to-[#FF8282] hover:from-white hover:to-white hover:text-[#FF8282] border-2 border-[#FF8282] transition-all duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, "公式サイトを見てみる"))))))); }