AI文章チェッカーをJavaScriptだけで作る方法【ChatGPTプロンプト自動生成付き】

前回の記事で公開した「AI文章チェッカー」は、テキストを貼り付けるだけで読みやすさ・SEO・冗長表現・表記ゆれをチェックし、AIプロンプトまで自動生成するツールだ。

この記事では、そのAI文章チェッカーをHTML/CSS/JavaScriptだけで作る方法を解説する。サーバーサイドの処理は一切不要。ブラウザだけで完結する。

完成したツールはこちら → AI文章チェッカー【無料】

目次 [ close ]
  1. ツールの全体構成
  2. HTML構造
  3. スコアゲージの実装（SVG）
  4. 読みやすさスコアの計算ロジック
  5. 冗長表現チェック（正規表現35パターン）
  6. 表記ゆれチェック（24グループ）
  7. AIプロンプト自動生成
  8. デザイン（ダークテーマ + ガラスモーフィズム）
  9. まとめ

ツールの全体構成

このツールは単一のHTMLファイルで構成されている。CSS・JavaScriptもすべてインラインで記述する。主な機能は6つ。

  1. 文字数・読了時間カウント（リアルタイム）
  2. 読みやすさスコア（平均文長・漢字比率・ひらがな比率で100点満点採点）
  3. SEOチェック（タイトル文字数・メタディスクリプション・キーワード密度）
  4. 冗長表現チェック（35パターン以上の正規表現で検出）
  5. 表記ゆれチェック（24グループの表記揺れパターン）
  6. AIプロンプト自動生成（チェック結果をもとにChatGPT/Claude用プロンプト生成）

HTML構造

レイアウトはシンプルな2カラム構成。左側にテキスト入力エリア、右側にチェック結果パネルを配置する。モバイルではCSS Gridで上下配置に切り替わる。

<div class="awc-main">
  <div class="awc-input-panel">
    <textarea id="awcText"></textarea>
  </div>
  <div class="awc-result-panel">
    <!-- スコア・チェック結果 -->
  </div>
</div>

awc-mainにdisplay: grid; grid-template-columns: 1fr 1fr;を指定し、@media(max-width:880px)で1frに切り替えるだけでレスポンシブ対応できる。

スコアゲージの実装（SVG）

総合スコアの円形ゲージはSVGで実装する。stroke-dasharrayとstroke-dashoffsetを使ってプログレスを表現する仕組みだ。

function updateGauge(score) {
  var circle = document.getElementById('awcGaugeFill');
  var circumference = 2 * Math.PI * 68;
  var offset = circumference - (score / 100 * circumference);
  circle.style.strokeDashoffset = offset;
  circle.style.stroke = getScoreColor(score);
}

読みやすさスコアの計算ロジック

読みやすさスコアは3指標の加重平均で算出する。

  • 平均文長スコア（40%）：理想は40〜60文字
  • 漢字比率スコア（30%）：理想は20〜30%。Unicode範囲0x4E00〜0x9FFFでカウント
  • ひらがな比率スコア（30%）：理想は50〜70%。Unicode範囲0x3040〜0x309Fでカウント
function getCharRatios(text) {
  var clean = text.replace(/[\s\n\r\t]/g, '');
  var kanji = 0, hira = 0, kata = 0;
  for (var i = 0; i < clean.length; i++) {
    var c = clean.charCodeAt(i);
    if (c >= 0x4E00 && c <= 0x9FFF) kanji++;
    else if (c >= 0x3040 && c <= 0x309F) hira++;
    else if (c >= 0x30A0 && c <= 0x30FF) kata++;
  }
  return {
    kanji: Math.round(kanji / clean.length * 1000) / 10,
    hiragana: Math.round(hira / clean.length * 1000) / 10
  };
}

冗長表現チェック（正規表現35パターン）

冗長表現の検出は正規表現パターンの配列でマッチングする。代表的なパターンを紹介する。

var redundantPatterns = [
  { re: /することができ([るますせんたい])/g,
    suggestion: '「〜できる」に短縮' },
  { re: /させていただ([くきけい])/g,
    suggestion: '「〜します」に' },
  { re: /まず最初に/g,
    suggestion: '「まず」だけでOK' },
  { re: /基本的に(は)?/g,
    suggestion: '削除しても意味が通じる場合が多い' },
  // ... 計35パターン
];

表記ゆれチェック（24グループ）

同じ意味の言葉のバリエーションをグループ化し、テキスト内に複数のバリエーションが存在するかを検出する。

var notationGroups = [
  { variants: ['できる', '出来る'], label: 'できる／出来る' },
  { variants: ['わかる', '分かる', '判る'], label: 'わかる／分かる' },
  { variants: ['すべて', '全て'], label: 'すべて／全て' },
  // ... 計24グループ
];

AIプロンプト自動生成

このツールの差別化ポイントがAIプロンプト自動生成だ。チェック結果からChatGPTやClaudeに貼り付けるだけで文章を改善できるプロンプトを構築する。プロンプトには改善方向性、具体的な修正指示、修正ルール、元の文章全文を含める。

デザイン（ダークテーマ + ガラスモーフィズム）

UIはダークテーマをベースに、ガラスモーフィズム（半透明カード + backdrop-filter）で統一感を出している。

.awc-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  backdrop-filter: blur(12px);
}
.awc-header h2 {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

まとめ

AI文章チェッカーはHTML/CSS/JavaScriptだけで実装できる。サーバー不要、API不要で、ブログに埋め込むだけで動作する。正規表現で冗長表現を35パターン検出し、Unicode範囲で漢字・ひらがな比率を算出し、SVGで円形ゲージを実装し、チェック結果からAIプロンプトを自動構築する。

ソースコード全体は1ファイル約960行。自分のブログに導入したい方は、ぜひカスタマイズして使ってほしい。

完成ツール → AI文章チェッカー【無料】

同じ技術で作った「AI文字数カウンターの作り方」も参考にしてほしい。文字種別判定やSEO分析の実装を解説している。