Big5性格診断テストのしくみ

(Sample)

今回は、Webブラウザ上で動く「Big5性格テスト（ビッグファイブ）」のサンプルコードをもとに、質問フォームの自動生成から性格診断結果の判定・表示までのロジックをやさしく解説します。

「心理テストってどうやって作るの？」「JavaScriptでこんなこともできるの？」と思っている方、必見です！

Big5性格理論ってなに？

まずは前提知識から。

Big5性格理論（Five Factor Model）は、以下の5つの性格特性から人間の性格を測る心理学理論です。

全体の仕組みをざっくり把握！

このテストの主な処理の流れはこうです：

1. JavaScriptで20問の質問を生成してHTMLに追加
2. ユーザーが選択肢をラジオボタンで回答
3. 「結果を見る」ボタンでスコアを集計
4. 各特性の点数に応じて評価・説明を表示

質問の構造と生成方法

質問データ

const questions = [
  { text: "私は新しい経験や冒険を楽しむ", trait: "openness" },
  { text: "私は責任感が強い", trait: "conscientiousness" },
  ...
];

• 各質問には、テキストと**対応する性格特性（trait）**がセットで定義されています。
• たとえば「私は人との交流が好き」→ traitはextraversion。

h3. 質問フォームを自動生成

questions.forEach((question, index) => {
  // ラジオボタンを5個生成（1〜5点）
});

• 5段階評価のラジオボタンが自動で追加されます。
• 表示ラベルは「全く当てはまらない」〜「非常に当てはまる」。

選択肢の意味（1〜5のスコア）

回答を集計してスコアを計算

スコアの初期化

let scores = {
  openness: 0,
  conscientiousness: 0,
  extraversion: 0,
  agreeableness: 0,
  neuroticism: 0,
};

回答を加算

const selector = `input[name=question${index}]:checked`;
const userAnswer = document.querySelector(selector)?.value;
if (userAnswer) {
  scores[question.trait] += parseInt(userAnswer);
}

• 各質問の trait に対して、選ばれた数値を加算。
• 点数は traitごとの合計値 で管理。

スコアの評価と説明

得点率に応じてレベル分け

const maxScore = 質問数 × 5;
const percentage = (score / maxScore) * 100;

• traitごとの最大得点を基準に、パーセンテージ化。
• その値に応じて、5段階で診断を表示します。

各特性ごとの説明文

getTraitExplanation(trait, traitLevel)

• traitごとに診断レベルに応じた説明文が表示されます。
• たとえば「誠実性が高い」なら、「計画的で、信頼性が高い...」。

出力例（診断結果）

<h3>誠実性: 21 (高い)</h3>
<p>計画的で、信頼性が高く、目標に向かって努力する傾向があります。</p>

このコードの良い点・改善点

メリット

• JavaScriptだけで動く！サーバー不要
• traitごとの質問を効率的に処理できる構造
• スコアとレベルによる直感的な評価

改善点

今後の学習の指針

このBig5診断の仕組みを理解したら、以下のような発展もおすすめです！

1. バリデーション機能を追加
   → 「未回答の項目があります」と警告を出す処理を入れる。
2. 結果をチャートで表示する
   → Chart.js などのライブラリで棒グラフにしてみよう！
3. 選択肢を逆転スコアに対応させる
   → 逆の意味をもつ質問には reverse: true を追加して 6 - score。
4. 他の心理尺度にも応用してみよう
   → MBTI診断、エニアグラム、バーンアウトチェックなどにも応用可能！

いかがでしたか？
心理テストも、実はJavaScriptでサクッと作れてしまいます。
このコードをベースに、自分だけの診断ツールを作ってみてくださいね！学びながら楽しく成長できますよ！