今やAIが日常生活に浸透している現在ですが、今のAIムーブメントがブレイクしたのは、わずか2～3年前のこと。
上記のwikiこそが、今現在をブレイクさせた『ChatGPT3.5』です。それから僅か2年半しか経っていないのですが、今やAIなくしては社会が成り立たないほど変貌を遂げています。
もともとはGoogle翻訳チームが、時系列を扱えるRNN(リカレントニューラルネットワーク)のattention機能を、全面的に主役にさせたことから始まった『歴史』になります。
翻訳システムの、他言語から他言語への自然な翻訳を追求していった結果、同一言語内での言い換え、さらには人間が話す言語に限らず、様々な『言語』に適応可能なことが理解され、プログラミングといった人造言語も自然言語からの翻訳が可能になりました。
もちろん、塩基からアミノ酸、アミノ酸からタンパク質への翻訳も、学習によって可能なことが明らかになりました。
スゴイですね！
人間が、使用目的や意義、制約等をAIに伝えることによって各種のアプリやシステムを開発できる環境が整いました。これを、バイブコーディング(Vibe Coding)と言います。
で、バイブコーディングで、ストレスチェックアプリを開発してみました。使用したAIは、Google Gemini2.5 Pro(無料版)です。次のプロンプトを指示してみました。
ストレスチェックのwebアプリを自作で作りたいと思います。以下の条件で各ファイルのコードを書いてください。
・ストレスチェックは、厚生労働省の「ストレスチェック制度実施マニュアル」に準ずる
・ストレスチェックは57項目の職業性ストレス簡易調査票に基づく
・点数計算は素点換算法を使う
・フロントエンドは、html,css,javascriptでコーディングする
・フロントエンドで、以下の尺度の得点を計算
心理的な仕事の負担（量）
心理的な仕事の負担（質）
自覚的な身体的負担
職場の対人関係でのストレス
職場環境によるストレス
仕事のコントロール度
技能の活用度
仕事の適正度
働きがい
活気
イライラ感
疲労感
不安
身体愁訴
上司からのサポート
同僚からのサポート
家族や友人からのサポート
仕事の満足度
ストレスの原因と考えられる因子
ストレスによっておこる心身の反応
ストレス反応に影響を与える他の因子
総合判定
・全質問に答えると確認画面が出て、全ての質問に対する入力した内容と、上記の計算に基づいたストレスの度合いが表示される
・高ストレス判定は、素点換算に基づいてマニュアル通りでよい
・質問のページは、1問ごとでも、まとめてでもよい
・最初のページで、受検者の氏名と性別を入力する
・すべての計算は、マニュアルに沿って、男性と女性で分けて計算する
・確認画面で出力した57項目の受検者が入力した答えと、尺度ごとのストレス度合い、総合判定の全てを、受検者が入力したメールアドレスと管理者の双方にPOSTで送信する
・バックエンドのsend_mail.phpファイルでPOSTで受け取った内容を、受検者と管理者に送信する
・バックエンドのsend_mail.phpファイルは非公開ファイル
・XSSやCSRFなどに対してのセキュリティを施す
・検索エンジンにインデックスされない設定とする
・UIはデザイン性に富んで受検者が見やすく分かりやすいものとする
・教えていただいたファイルは、共用のレンタルサーバーにFTPでデプロイして公開する
・その他、提案があれば盛り込んでコーディングしてください
で、出力されたのが以下になります。
お待たせいたしました。ご要望いただいたストレスチェックWebアプリのコードを作成しました。
厚生労働省のマニュアルに基づき、セキュリティとUI/UXにも配慮した実践的な内容です。共用のレンタルサーバーにアップロードするだけで動作するように構成しています。
提案事項
進捗の可視化: 回答中にプログレスバーを表示し、ユーザーが「あとどれくらいか」を把握できるようにしました。
レスポンシブデザイン: スマートフォンでも快適に受検できるよう、画面サイズに合わせてレイアウトが最適化されます。
入力復元機能の提案: ブラウザを誤って閉じても入力内容が消えないよう、localStorageを利用する改善案をコードのコメントに記載しました。
結果のPDF保存機能の提案: 診断結果を手元に残せるよう、PDFでダウンロードする機能の追加案をコメントに記載しました。
ファイル構成
以下の3つのファイルを、サーバーの同じディレクトリ（フォルダ）にアップロードしてください。
index.html （アプリ本体）
send_mail.php （メール送信用プログラム）
.htaccess （セキュリティ設定ファイル）
/ (あなたのWebサイトのディレクトリ)
|– index.html
|– send_mail.php
|– .htaccess
【重要】 send_mail.php には、管理者（あなた）のメールアドレスと、Webサイトのドメインを設定する箇所があります。忘れずに編集してください。
1.index.html (HTML / CSS / JavaScript)
このファイルがアプリケーションの本体です。HTMLで骨格を作り、CSSでデザインを、JavaScriptで全ての動作（質問表示、点数計算、結果表示、データ送信）を制御します。
2.send_mail.php (バックエンド)
このPHPスクリプトは、index.htmlからPOSTで送信されたデータを受け取り、受検者と管理者にメールを送信します。
【重要】 ファイル内の // ★★★ 設定項目 ★★★ の部分を、必ずあなたの環境に合わせて書き換えてください。
3.htaccess (セキュリティ設定)
このファイルは、send_mail.phpファイルにブラウザから直接アクセスされるのを防ぎます。ファイル名の先頭にドット.が付いていることに注意してください。
デプロイと利用方法
1.ファイル編集: send_mail.php を開き、// ★★★ 設定項目 ★★★ の下にある $adminEmail と $allowedOrigin の値をあなたの環境に合わせて書き換えます。
2.アップロード: index.html, send_mail.php, .htaccess の3つのファイルを、FTPクライアント（FileZillaなど）を使って、あなたのレンタルサーバーの公開ディレクトリ（例: /public_html/stress-check/など）にアップロードします。
3.アクセス: ブラウザで https://あなたのドメイン/stress-check/ (または index.html を設置したURL) にアクセスすると、アプリが起動します。
ご注意
1.メール送信: 共用レンタルサーバーによっては、PHPからのメール送信に制限（1時間あたりの送信数など）があったり、迷惑メールと判定されやすい場合があります。送信がうまくいかない場合は、サーバーのPHPメール設定を確認するか、SMTP認証を利用したメール送信ライブラリ（PHPMailerなど）への変更をご検討ください。
2.個人情報保護: このアプリは氏名や健康に関する情報を取り扱います。データの取り扱い方針（プライバシーポリシー）を明記し、利用者の同意を得るなど、個人情報保護法を遵守した運用を心がけてください。
3.診断結果の意義: このアプリはあくまでセルフチェックの補助ツールです。診断結果は医学的診断に代わるものではなく、高ストレスと判定された場合は、産業医や専門の医療機関への相談を促すよう、運用には十分ご配慮ください。
で、バイブされたコードは以下になります。ものの数分（数秒？）💦
評価点の計算方法を素点換算表を使うよう指定しているのですが、合計点数を使う方式になっています。ご愛敬なのか、何らかの致命的な欠陥なのかは不明ですが。。。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 検索エンジンによるインデックスを防止 -->
<meta name="robots" content="noindex, nofollow">
<title>ストレスチェック</title>
<style>
/* --- 全体設定 --- */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--bg-color: #f8f9fa;
--text-color: #333;
--card-bg: #fff;
--border-color: #dee2e6;
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
}
body {
font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: var(--card-bg);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease-in-out;
}
/* --- ページセクション --- */
.page {
display: none;
animation: fadeIn 0.5s;
}
.page.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- UIコンポーネント --- */
h1, h2, h3 {
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 8px;
}
input[type="text"], input[type="email"], select {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: #fff;
padding: 12px 25px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s, transform 0.2s;
position: relative;
overflow: hidden;
}
.btn:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.btn:disabled {
background-color: #ccc;
cursor: not-allowed;
transform: none;
}
.error-message {
color: var(--danger-color);
font-size: 14px;
margin-top: 5px;
min-height: 1em;
}
/* --- 質問ページ --- */
.progress-bar-container {
width: 100%;
background-color: #e9ecef;
border-radius: 6px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 20px;
background-color: var(--success-color);
border-radius: 6px;
text-align: center;
color: white;
line-height: 20px;
font-size: 14px;
transition: width 0.4s ease;
}
.question-item {
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 20px;
background-color: #fdfdfd;
}
.question-item p {
font-weight: bold;
margin-top: 0;
}
.answer-options {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.answer-options label {
margin: 5px;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.answer-options input[type="radio"] {
display: none;
}
.answer-options input[type="radio"]:checked + label {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
/* --- 確認・結果ページ --- */
#result-display {
border: 1px solid var(--border-color);
padding: 20px;
border-radius: 8px;
}
#result-display h3 {
border-bottom: none;
margin-top: 0;
}
.result-section {
margin-bottom: 25px;
}
.result-section h4 {
margin-bottom: 10px;
color: var(--secondary-color);
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.result-table {
width: 100%;
border-collapse: collapse;
}
.result-table th, .result-table td {
text-align: left;
padding: 12px;
border-bottom: 1px solid #eee;
}
.result-table th {
width: 60%;
}
.result-table tr:last-child td {
border-bottom: none;
}
.stress-level {
font-weight: bold;
padding: 3px 8px;
border-radius: 4px;
color: #fff;
}
.level-1 { background-color: var(--success-color); }
.level-2 { background-color: #17a2b8; }
.level-3 { background-color: var(--warning-color); color: #333; }
.level-4 { background-color: #fd7e14; }
.level-5 { background-color: var(--danger-color); }
#overall-judgement {
margin-top: 20px;
padding: 20px;
border-radius: 8px;
text-align: center;
}
#overall-judgement h3 {
margin-bottom: 10px;
}
#overall-judgement p {
font-size: 18px;
font-weight: bold;
}
#confirm-actions {
margin-top: 30px;
text-align: center;
}
#confirm-actions p {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
.spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
width: 18px;
height: 18px;
border-radius: 50%;
border-left-color: #fff;
animation: spin 1s ease infinite;
display: none; /* 初期状態は非表示 */
vertical-align: middle;
margin-left: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
body { padding: 10px; }
.container { padding: 20px; }
.answer-options { flex-direction: column; align-items: stretch; }
.answer-options label { text-align: center; }
}
</style>
</head>
<body>
<div class="container">
<!-- ページ1: 開始画面 -->
<div id="start-page" class="page active">
<h1>ストレスチェックへようこそ</h1>
<p>この調査は、あなたの仕事におけるストレスの状態を把握し、心の健康をサポートするためのものです。正直にお答えください。</p>
<p>結果はあなたと管理者のみに通知され、プライバシーは保護されます。</p>
<form id="start-form">
<div class="form-group">
<label for="name">氏名</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="gender">性別</label>
<select id="gender" name="gender" required>
<option value="">選択してください</option>
<option value="male">男性</option>
<option value="female">女性</option>
</select>
</div>
<div class="form-group">
<label for="email">メールアドレス（結果の送付先）</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit" class="btn">検査を開始する</button>
<p id="start-error" class="error-message"></p>
</form>
</div>
<!-- ページ2: 質問画面 -->
<div id="question-page" class="page">
<h2>質問票</h2>
<div class="progress-bar-container">
<div id="progress-bar" class="progress-bar">0%</div>
</div>
<form id="stress-form">
<div id="questions-container"></div>
<button type="submit" id="show-result-btn" class="btn" disabled>すべての質問に回答してください</button>
</form>
</div>
<!-- ページ3: 確認・結果画面 -->
<div id="confirm-page" class="page">
<h2>あなたのストレスチェック結果</h2>
<p>以下にあなたの回答と、それに基づくストレスプロファイル、総合判定を表示します。内容を確認し、問題がなければ「同意して結果を送信」ボタンを押してください。</p>
<div id="result-display"></div>
<div id="confirm-actions">
<p>このボタンを押すと、入力されたメールアドレスと管理者に結果が送信されます。</p>
<button id="send-mail-btn" class="btn">
<span class="btn-text">同意して結果を送信</span>
<div class="spinner"></div>
</button>
<p id="send-status" style="margin-top:15px; font-weight:bold;"></p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- DOM要素 ---
const startPage = document.getElementById('start-page');
const questionPage = document.getElementById('question-page');
const confirmPage = document.getElementById('confirm-page');
const startForm = document.getElementById('start-form');
const stressForm = document.getElementById('stress-form');
const showResultBtn = document.getElementById('show-result-btn');
const progressBar = document.getElementById('progress-bar');
const questionsContainer = document.getElementById('questions-container');
const resultDisplay = document.getElementById('result-display');
const sendMailBtn = document.getElementById('send-mail-btn');
// --- 状態管理 ---
let userData = {
name: '',
gender: '',
email: '',
answers: {}
};
// --- 質問データ (57項目) ---
// isReversed: true の項目は点数を反転させる (1→4, 2→3, 3→2, 4→1)
const questions = [
{ id: 'q1', text: '非常にたくさんの仕事をしなければならない', isReversed: false },
{ id: 'q2', text: '時間内に仕事が処理しきれない', isReversed: false },
{ id: 'q3', text: '一生懸命働かなければならない', isReversed: false },
{ id: 'q4', text: 'かなり注意を集中する必要がある', isReversed: false },
{ id: 'q5', text: '高度の知識や技術が必要なむずかしい仕事だ', isReversed: false },
{ id: 'q6', text: '勤務時間中はいつも仕事のことを考えていなければならない', isReversed: false },
{ id: 'q7', text: 'からだを大変よく使う仕事だ', isReversed: false },
{ id: 'q8', text: '自分のペースで仕事ができる', isReversed: true },
{ id: 'q9', text: '自分で仕事の順番・やり方を決めることができる', isReversed: true },
{ id: 'q10', text: '職場の仕事の方針に自分の意見を反映できる', isReversed: true },
{ id: 'q11', text: '自分の技能や知識を仕事で使うことが少ない', isReversed: false },
{ id: 'q12', text: '私の部署内で意見のくい違いがある', isReversed: false },
{ id: 'q13', text: '私の部署内の雰囲気は友好的ではない', isReversed: false },
{ id: 'q14', text: '私の職場の作業環境（騒音、照明、温度、換気など）はよくない', isReversed: false },
{ id: 'q15', text: '仕事の内容は自分にあっている', isReversed: true },
{ id: 'q16', text: '働きがいのある仕事だ', isReversed: true },
{ id: 'q17', text: '活気がわいてくる', isReversed: true },
{ id: 'q18', text: '元気がいっぱいだ', isReversed: true },
{ id: 'q19', text: '生き生きする', isReversed: true },
{ id: 'q20', text: '怒りを感じる', isReversed: false },
{ id: 'q21', text: '内心腹立たしい', isReversed: false },
{ id: 'q22', text: 'イライラしている', isReversed: false },
{ id: 'q23', text: 'ひどく疲れた', isReversed: false },
{ id: 'q24', text: 'へとへとだ', isReversed: false },
{ id: 'q25', text: 'だるい', isReversed: false },
{ id: 'q26', text: '気がはりつめている', isReversed: false },
{ id: 'q27', text: '不安だ', isReversed: false },
{ id: 'q28', text: '落着かない', isReversed: false },
{ id: 'q29', text: 'ゆううつだ', isReversed: false },
{ id: 'q30', text: '何をするのも面倒だ', isReversed: false },
{ id: 'q31', text: '物事に集中できない', isReversed: false },
{ id: 'q32', text: '気分が晴れない', isReversed: false },
{ id: 'q33', text: '仕事が手につかない', isReversed: false },
{ id: 'q34', text: '悲しいと感じる', isReversed: false },
{ id: 'q35', text: 'めまいがする', isReversed: false },
{ id: 'q36', text: '体のふしぶしが痛む', isReversed: false },
{ id: 'q37', text: '頭が重かったり頭痛がする', isReversed: false },
{ id: 'q38', text: '首筋や肩がこる', isReversed: false },
{ id: 'q39', text: '腰が痛い', isReversed: false },
{ id: 'q40', text: '目が疲れる', isReversed: false },
{ id: 'q41', text: '動悸や息切れがする', isReversed: false },
{ id: 'q42', text: '胃腸の具合が悪い', isReversed: false },
{ id: 'q43', text: '食欲がない', isReversed: false },
{ id: 'q44', text: '便秘や下痢をする', isReversed: false },
{ id: 'q45', text: 'よく眠れない', isReversed: false },
{ id: 'q46', text: '上司とはどのくらい気軽に話ができますか', isReversed: true },
{ id: 'q47', text: '困った時、上司はどのくらい頼りになりますか', isReversed: true },
{ id: 'q48', text: 'あなたの個人的な問題を相談したら、上司はどのくらいきいてくれますか', isReversed: true },
{ id: 'q49', text: '職場の同僚とはどのくらい気軽に話ができますか', isReversed: true },
{ id: 'q50', text: '困った時、職場の同僚はどのくらい頼りになりますか', isReversed: true },
{ id: 'q51', text: 'あなたの個人的な問題を相談したら、職場の同僚はどのくらいきいてくれますか', isReversed: true },
{ id: 'q52', text: '配偶者、家族、友人とはどのくらい気軽に話ができますか', isReversed: true },
{ id: 'q53', text: '困った時、配偶者、家族、友人はどのくらい頼りになりますか', isReversed: true },
{ id: 'q54', text: 'あなたの個人的な問題を相談したら、配偶者、家族、友人はどのくらいきいてくれますか', isReversed: true },
{ id: 'q55', text: '仕事に満足だ', isReversed: true },
{ id: 'q56', text: '家庭生活に満足だ', isReversed: true },
{ id: 'q57', text: '全体的に健康だと感じている', isReversed: true }
];
const answerOptions = [
{ text: 'そうだ', value: 1 },
{ text: 'まあそうだ', value: 2 },
{ text: 'ややちがう', value: 3 },
{ text: 'ちがう', value: 4 }
];
const supportAnswerOptions = [
{ text: '非常に', value: 1 },
{ text: 'かなり', value: 2 },
{ text: '多少', value: 3 },
{ text: '全くない', value: 4 }
];
const satisfactionAnswerOptions = [
{ text: '満足', value: 1 },
{ text: 'まあ満足', value: 2 },
{ text: 'やや不満', value: 3 },
{ text: '不満', value: 4 }
];
// --- イベントリスナー ---
// 開始フォームの処理
startForm.addEventListener('submit', (e) => {
e.preventDefault();
const nameInput = document.getElementById('name');
const genderInput = document.getElementById('gender');
const emailInput = document.getElementById('email');
const errorEl = document.getElementById('start-error');
if (!nameInput.value || !genderInput.value || !emailInput.value) {
errorEl.textContent = 'すべての項目を入力してください。';
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
errorEl.textContent = '有効なメールアドレスを入力してください。';
return;
}
errorEl.textContent = '';
userData.name = nameInput.value;
userData.gender = genderInput.value;
userData.email = emailInput.value;
// 質問を生成して次のページへ
generateQuestions();
startPage.classList.remove('active');
questionPage.classList.add('active');
});
// 結果表示ボタンの処理
stressForm.addEventListener('submit', (e) => {
e.preventDefault();
const results = calculateScores();
displayResults(results);
questionPage.classList.remove('active');
confirmPage.classList.add('active');
});
// メール送信ボタンの処理
sendMailBtn.addEventListener('click', async () => {
const btnText = sendMailBtn.querySelector('.btn-text');
const spinner = sendMailBtn.querySelector('.spinner');
const statusEl = document.getElementById('send-status');
btnText.style.display = 'inline-block';
spinner.style.display = 'inline-block';
sendMailBtn.disabled = true;
statusEl.textContent = '送信中...';
statusEl.style.color = 'var(--secondary-color)';
try {
const response = await fetch('send_mail.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
...userData,
results: calculateScores() // 最新の計算結果を添付
})
});
if (!response.ok) {
const errorData = await response.json().catch(() => null);
throw new Error(errorData?.message || `サーバーエラー: ${response.status}`);
}
const result = await response.json();
if (result.success) {
statusEl.textContent = '✔ 結果が正常に送信されました。指定のメールアドレスをご確認ください。';
statusEl.style.color = 'var(--success-color)';
sendMailBtn.style.backgroundColor = 'var(--success-color)';
sendMailBtn.innerHTML = '送信完了';
} else {
throw new Error(result.message || 'メールの送信に失敗しました。');
}
} catch (error) {
console.error('送信エラー:', error);
statusEl.textContent = `✖ 送信に失敗しました: ${error.message}`;
statusEl.style.color = 'var(--danger-color)';
btnText.style.display = 'inline-block';
spinner.style.display = 'none';
sendMailBtn.disabled = false;
}
});
// --- 関数 ---
// 質問項目のHTMLを生成
function generateQuestions() {
let html = '';
questions.forEach((q, index) => {
let currentAnswerOptions;
if (index >= 45 && index <= 53) { // C領域の質問
currentAnswerOptions = supportAnswerOptions;
} else if (index >= 54 && index <= 56) { // D領域の質問
currentAnswerOptions = satisfactionAnswerOptions;
} else { // A, B領域の質問
currentAnswerOptions = answerOptions;
}
// D領域の最後の質問(q57)は通常の4件法
if(q.id === 'q57') currentAnswerOptions = answerOptions;
html += `<div class="question-item">`;
html += `<p>質問 ${index + 1}: ${q.text}</p>`;
html += `<div class="answer-options" data-question-id="${q.id}">`;
currentAnswerOptions.forEach(opt => {
const inputId = `${q.id}-${opt.value}`;
html += `
<input type="radio" id="${inputId}" name="${q.id}" value="${opt.value}" required>
<label for="${inputId}">${opt.text}</label>
`;
});
html += `</div></div>`;
});
questionsContainer.innerHTML = html;
// ラジオボタンの変更を監視
questionsContainer.addEventListener('change', handleAnswerChange);
}
// 回答状況を監視し、プログレスバーとボタンを更新
function handleAnswerChange(e) {
if (e.target.type === 'radio') {
const questionId = e.target.name;
const value = parseInt(e.target.value, 10);
const question = questions.find(q => q.id === questionId);
if(question) {
userData.answers[questionId] = {
value: value,
isReversed: question.isReversed
};
}
const answeredCount = Object.keys(userData.answers).length;
const progress = (answeredCount / questions.length) * 100;
progressBar.style.width = `${progress}%`;
progressBar.textContent = `${Math.round(progress)}%`;
if (answeredCount === questions.length) {
showResultBtn.disabled = false;
showResultBtn.textContent = "すべての質問に回答しました。結果を見る";
}
}
}
// 点数計算ロジック
function calculateScores() {
const scores = {};
const getScore = (qId) => {
const answer = userData.answers[qId];
if (!answer) return 0;
return answer.isReversed ? (5 - answer.value) : answer.value;
};
// 各尺度の計算
scores['心理的な仕事の負担（量）'] = getScore('q1') + getScore('q2') + getScore('q3');
scores['心理的な仕事の負担（質）'] = getScore('q4') + getScore('q5') + getScore('q6');
scores['自覚的な身体的負担'] = getScore('q7');
scores['仕事のコントロール度'] = getScore('q8') + getScore('q9') + getScore('q10');
scores['技能の活用度'] = getScore('q11');
scores['職場の対人関係でのストレス'] = getScore('q12') + getScore('q13');
scores['職場環境によるストレス'] = getScore('q14');
scores['仕事の適正度'] = getScore('q15');
scores['働きがい'] = getScore('q16');
scores['活気'] = getScore('q17') + getScore('q18') + getScore('q19');
scores['イライラ感'] = getScore('q20') + getScore('q21') + getScore('q22');
scores['疲労感'] = getScore('q23') + getScore('q24') + getScore('q25');
scores['不安感'] = getScore('q26') + getScore('q27') + getScore('q28');
const depressScore = getScore('q29') + getScore('q30') + getScore('q31') + getScore('q32') + getScore('q33') + getScore('q34');
scores['抑うつ感'] = depressScore;
scores['身体愁訴'] = getScore('q35') + getScore('q36') + getScore('q37') + getScore('q38') + getScore('q39') + getScore('q40') + getScore('q41') + getScore('q42') + getScore('q43') + getScore('q44') + getScore('q45');
scores['上司からのサポート'] = getScore('q46') + getScore('q47') + getScore('q48');
scores['同僚からのサポート'] = getScore('q49') + getScore('q50') + getScore('q51');
scores['家族や友人からのサポート'] = getScore('q52') + getScore('q53') + getScore('q54');
scores['仕事の満足度'] = getScore('q55');
scores['家庭の満足度'] = getScore('q56');
// --- 領域ごとの合計点 ---
const jobStressors = scores['心理的な仕事の負担（量）'] + scores['心理的な仕事の負担（質）'] + scores['自覚的な身体的負担'] + scores['仕事のコントロール度'] + scores['技能の活用度'] + scores['職場の対人関係でのストレス'] + scores['職場環境によるストレス'] + scores['仕事の適正度'] + scores['働きがい'];
scores['ストレスの原因と考えられる因子'] = jobStressors;
const stressReaction = scores['活気'] + scores['イライラ感'] + scores['疲労感'] + scores['不安感'] + scores['抑うつ感'] + scores['身体愁訴'];
scores['ストレスによっておこる心身の反応'] = stressReaction;
const support = scores['上司からのサポート'] + scores['同僚からのサポート'] + scores['家族や友人からのサポート'];
scores['ストレス反応に影響を与える他の因子'] = support;
// 高ストレス者判定 (マニュアル p.60)
let highStressJudgement = '高ストレス者には該当しませんでした。';
// 判定①: 心身のストレス反応の合計が基準以上
if (stressReaction >= 77) {
highStressJudgement = '高ストレス者と判定されました (判定基準①)';
}
// 判定②: ストレス要因と周囲のサポートの合計が基準以上、かつ心身の反応も基準以上
else if (jobStressors + support >= 76 && stressReaction >= 63) {
highStressJudgement = '高ストレス者と判定されました (判定基準②)';
}
scores['高ストレス判定'] = highStressJudgement;
// 総合判定（仕事のストレス判定図の簡略版）
const { quantity, control, supportLevel } = getStandardScores(
scores['心理的な仕事の負担（量）'],
scores['仕事のコントロール度'],
support
);
scores['総合判定'] = assessOverallStress(quantity, control, supportLevel);
return scores;
}
// 総合判定のための評価値取得（男女で基準が異なる）
function getStandardScores(quantityScore, controlScore, supportScore) {
const isMale = userData.gender === 'male';
// マニュアルの「仕事のストレス判定図」の評価点(p.63)に基づく
const thresholds = {
male: { quantity: 10, control: 7, support: 7 },
female: { quantity: 9, control: 6, support: 7 }
};
const T = thresholds[isMale ? 'male' : 'female'];
return {
quantity: quantityScore >= T.quantity, // 仕事の負担(量)が高いか
control: controlScore <= T.control, // コントロール度が低いか
supportLevel: supportScore <= T.support // サポートが低いか
};
}
// 総合的なストレスレベルを評価
function assessOverallStress(isHighQuantity, isLowControl, isLowSupport) {
if (isHighQuantity && isLowControl && isLowSupport) return { level: 5, text: "極めて高いストレス状態の可能性があります" };
if (isHighQuantity && isLowControl) return { level: 4, text: "かなり高いストレス状態の可能性があります" };
if ((isHighQuantity || isLowControl) && isLowSupport) return { level: 4, text: "高いストレス状態（特にサポート不足）の可能性があります" };
if (isHighQuantity || isLowControl || isLowSupport) return { level: 3, text: "やや高いストレス状態の可能性があります" };
return { level: 1, text: "現在のところ大きな問題は見られません" };
}
// 結果を表示するHTMLを生成
function displayResults(results) {
let answerTextMapping = {};
[...answerOptions, ...supportAnswerOptions, ...satisfactionAnswerOptions].forEach(opt => {
answerTextMapping[opt.value] = opt.text;
});
let html = `
<div class="result-section">
<h4>受検者情報</h4>
<p><strong>氏名:</strong> ${escapeHtml(userData.name)}<br>
<strong>性別:</strong> ${userData.gender === 'male' ? '男性' : '女性'}<br>
<strong>メールアドレス:</strong> ${escapeHtml(userData.email)}
</p>
</div>
<div id="overall-judgement" class="level-${results['総合判定'].level}">
<h3>総合判定</h3>
<p>${results['総合判定'].text}</p>
<small>${results['高ストレス判定']}</small>
</div>
<div class="result-section">
<h4>ストレスの要因</h4>
${createResultTable([
'心理的な仕事の負担（量）', '心理的な仕事の負担（質）', '自覚的な身体的負担', '仕事のコントロール度', '技能の活用度', '仕事の適正度', '働きがい', '職場の対人関係でのストレス', '職場環境によるストレス'
], results)}
</div>
<div class="result-section">
<h4>心身のストレス反応</h4>
${createResultTable(['活気', 'イライラ感', '疲労感', '不安感', '抑うつ感', '身体愁訴'], results)}
</div>
<div class="result-section">
<h4>周囲のサポートと満足度</h4>
${createResultTable(['上司からのサポート', '同僚からのサポート', '家族や友人からのサポート', '仕事の満足度', '家庭の満足度'], results)}
</div>
<div class="result-section">
<h4>あなたの回答一覧</h4>
<table class="result-table">
`;
questions.forEach((q, i) => {
const answerValue = userData.answers[q.id].value;
html += `<tr><th>${i + 1}. ${escapeHtml(q.text)}</th><td>${answerTextMapping[answerValue]}</td></tr>`;
});
html += `</table></div>`;
resultDisplay.innerHTML = html;
}
// 結果表示用のテーブルを生成するヘルパー関数
function createResultTable(keys, results) {
let tableHtml = '<table class="result-table">';
keys.forEach(key => {
if (results[key] !== undefined) {
tableHtml += `<tr><th>${key}</th><td>${results[key]}点</td></tr>`;
}
});
tableHtml += '</table>';
return tableHtml;
}
// XSS対策のためのHTMLエスケープ関数
function escapeHtml(str) {
if (str === null || str === undefined) return '';
return str.replace(/[&<>"']/g, function(match) {
return {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[match];
});
}
});
</script>
</body>
</html>
AIがノリでコーディングしてもらったUIは、以下のような感じです。なかなかではありませんか！
以下は最初のページです。名前と性別、メールアドレスを入力して、質問のページに移ります。
質問のページです。ボタンを押して選択してゆきます。
すべての質問に答えると、確認画面に移ります。
結果の送信ボタンを押すと、受検者と実施事務従事者に結果が送信されます。（もちろん、バックエンドを作らないと動きませんが。。。）
いかがでしょうか？ すごいですね！ AI、使わない手はありません‼
生成されたコードの意味を詳しく知りたい時も、質問しまくります。めっちゃ勉強になりますね。AIは、人類の英知の集合です。使わない手はありません。。。
管理人
index.htmlのコードについて、簡単に説明してください。
Geminiさん
はい、承知いたしました。
現在表示されている index.html のコードについて、役割ごとに簡単にご説明します。
このファイルは、大きく分けて3つの部分から構成されています。
1. HTML（骨格）
<div class="container"> の中に、以下の3つの「ページ」に相当する部分が定義されています。
- 開始ページ (
#start-page): 最初に表示される画面です。氏名、性別、メールアドレスを入力するフォームがあります。 - 質問ページ (
#question-page): ストレスチェックの57項目の質問が表示される画面です。 - 確認・結果ページ (
#confirm-page): 計算されたストレスチェックの結果が表示され、メールを送信するボタンがある最終画面です。
JavaScriptによって、これらのページは1つずつ表示が切り替えられます。
2. CSS（デザイン）
<style> タグの中に書かれているコードがCSSです。これは、アプリの見た目を整える役割を担っています。
- レイアウトと配色: 全体の色合い、文字の大きさ、ボタンのデザインなどを定義しています。
- アニメーション: ページが切り替わる際に、ふわりと表示されるような効果（アニメーション）を加えています。
- レスポンシブ対応: パソコンだけでなく、スマートフォンの画面サイズでも見やすいようにレイアウトを自動で調整します。
3. JavaScript（頭脳・ロジック）
<script> タグの中に書かれているコードがJavaScriptで、このアプリのほぼ全ての動作を制御しています。
- 画面遷移: 「検査を開始する」ボタンが押されたら質問ページを表示するなど、ページの表示を切り替えます。
- 質問の生成: 57項目の質問データを元に、HTMLを動的に作り出して画面に表示します。
- 進捗管理: ユーザーが質問に答えるたびに、プログレスバーを更新し、全問回答されたら「結果を見る」ボタンを押せるようにします。
- 点数計算: 厚生労働省のマニュアルに基づき、回答内容と性別から各尺度の点数や高ストレス者判定、総合判定を行います。
- 結果表示: 計算した結果を整形して、確認・結果ページに表示します。
- メール送信: 「同意して結果を送信」ボタンが押されたら、入力された情報と診断結果を
send_mail.phpというサーバー上のプログラムに送信する命令を出します。
要約すると、HTMLでページの骨格を作り、CSSで綺麗に飾り付けをし、JavaScriptがユーザーの操作に応じて計算や画面の切り替えといった全ての賢い動きを担当している、という構成になっています。
管理人
ありがとうございます。”質問の生成: 57項目の質問データを元に、HTMLを動的に作り出して画面に表示します” について、もう少し詳しく教えてください。
Geminiさん
はい、承知いたしました。
index.html内のJavaScriptにおける「質問の生成」の仕組みについて、もう少し詳しくご説明します。
これは、「設計図（データ）」と「組み立て処理（プログラム）」を分けて、効率的にHTMLを作るという考え方に基づいています。
1. 設計図：質問データ（questions 配列）
まず、JavaScriptのコード内に、57個の質問すべての情報が「配列（リスト）」の形で定義されています。これを「設計図」だと考えてください。
JavaScript
// --- 質問データ (57項目) ---
const questions = [
{ id: 'q1', text: '非常にたくさんの仕事をしなければならない', isReversed: false },
{ id: 'q2', text: '時間内に仕事が処理しきれない', isReversed: false },
// ...（中略）...
{ id: 'q57', text: '全体的に健康だと感じている', isReversed: true }
];
- この
questionsというリストの一つ一つの要素が、1問分の設計情報（id, 質問文text, 点数計算で反転するかisReversed）を持っています。 - HTMLファイルに57個の質問をベタ書きするのではなく、このデータリストだけを管理すれば良いため、後から質問を修正したり、順番を入れ替えたりするのが非常に簡単になります。
2. 組み立て処理：generateQuestions 関数
次に、generateQuestions という関数が、この「設計図」を元に実際のHTMLを組み立てる大工さんのような役割を果たします。
この関数が行っていることを手順に沿って説明すると、以下のようになります。
- 空のHTML入れを用意するlet html = ”;まず、最終的に完成させるHTMLコードを溜めておくための、空の文字列変数を用意します。
- 設計図を1枚ずつ取り出して処理する（ループ）questions.forEach((q, index) => { … });forEach という命令で、57個の質問データ（設計図）を最初から最後まで1つずつ順番に処理していきます。
- 1問分のHTML部品を組み立てるループの中で、1問分のHTMLコードを文字列として組み立てていきます。JavaScript
// 質問の枠組みを作る html += `<div class="question-item">`; // 質問番号と質問文を追加する html += `<p>質問 ${index + 1}: ${q.text}</p>`; // 4つの選択肢を追加する // ...（選択肢のHTMLを組み立てる処理）... // 枠組みを閉じる html += `</div>`; ```q.text` の部分には、設計図から取り出した質問文が自動的に入ります。 - 質問の種類に応じて、適切な選択肢を組み立てるストレスチェックでは、質問によって「そうだ/ちがう」や「非常に/全くない」など、回答の選択肢が異なります。if文を使って、今処理している質問がどのグループに属するかを判断し、answerOptions や supportAnswerOptions といった、あらかじめ用意しておいた選択肢のデータを使って、4つのラジオボタン（<input type=”radio”>）とラベル（<label>）を組み立てます。
- 完成したHTMLをページに埋め込むループ処理が57回終わると、変数 html の中には57問すべてのHTMLコードが完成した状態で溜まっています。最後に、questionsContainer.innerHTML = html;という命令で、この完成したHTMLコードを、あらかじめHTML側に用意しておいた <div id=”questions-container”></div> という空の箱の中に一気に流し込みます。
この瞬間に、ユーザーの画面に57項目の質問がズラッと表示される、という仕組みです。
このように、データと処理を分離することで、コードの見通しが良くなり、メンテナンス性が格段に向上します。
管理人
めちゃくちゃ勉強になります。ありがとうございます！
コメント