はじめに：バックオフィスにも「コードを読む力」が必要な時代
経理、人事、総務などのバックオフィス業務において、今やExcel VBAやGoogle Apps Script (GAS) は「あって当たり前」のツールになりつつあります。さらには業務効率化のためにPythonやSQLに触れる機会も増えてきました。
しかし、現場でよく起きるのが「たった1行の記述ミス」や「全角スペースの混入」で業務が止まってしまうという事態です。
「エンジニアに頼むほどでもないけれど、自分で直すにはエラーの原因がわからない…」 そんな「名もなき仕事」の停滞を解消するために、プログラミング言語の「あるあるミス」をゲーム感覚で瞬時に見抜くトレーニングツール『コードレビュー道場』を個人開発しました。
今回は、このツールに込めた実務的なこだわりと、WordPress（HTML/JS）での実装の裏側について紹介します。
作ったもの：コードレビュー道場
画面の上から流れてくるコードを見て、瞬時に「OK（正しい）」か「BAD（バグあり）」かを判定するブラウザゲームです。
URL: https://ushiro-pocke.com/tools-code-review-dojo/
対応言語: 15言語（VBA, GAS, Python, SQL, Java, JS, TS, PHP, C#, Ruby, Go, Swift, Kotlin, HTML/CSS, Shell）
技術スタック: HTML5, CSS3, Vanilla JS (アイコン用にLucideを使用)
なぜ作ったのか
私は普段、バックオフィス業務の支援を行う活動をしています。その中で、ノンプログラマーの方が「プログラミング＝怖いもの」と感じてしまう最大の要因が、**「真っ赤なエラーメッセージ」**にあると感じていました。
しかし、エラーの多くは論理的な難問ではなく、単なる「作法の間違い」や「タイポ」です。 これらを「勉強」としてではなく、「間違い探しゲーム」として数をこなすことで、**「あ、これ見たことある！」という"違和感に気づく力"**を養えるのではないかと考えました。
技術的な実装ポイント
WordPressの記事内に埋め込むことを前提としていたため、複雑なビルド環境は使わず、1つのHTMLファイルに完結させる形で実装しました。
1. データ構造：実務的な「あるある」を詰め込む
単なる構文チェックではなく、「実務でやりがちなミス」をデータセットとして持たせています。
JavaScript
const problems = {
vba: {
name: "Excel VBA",
desc: "経理・総務の必須スキル",
data: [
// Set忘れ（オブジェクト変数の罠）
{t:'Pass', c:'Set rng = Range("A1")'},
{t:'Error', c:'rng = Range("A1")'},
// 全角スペースの混入（Webからのコピペあるある）
{t:'Error', c:'Dim x As Integer'},
]
},
gas: {
name: "Google Apps Script",
desc: "業務自動化の要",
data: [
// 行番号と配列インデックスのズレ
{t:'Pass', c:'sheet.getRange(1, 1)'},
{t:'Error', c:'sheet.getRange(0, 1)'},
]
},
// ...他13言語
};
2. 正規表現による簡易シンタックスハイライト
外部の重たいライブラリを使わずに動作を軽くするため、正規表現で簡易的に色付けを行っています。特にこだわったのが「全角スペースの可視化」です。
JavaScript
function highlight(code, lang) {
// 全角スペースを「□」として可視化し、赤く強調する（ここが一番やりたかったこと）
let s = code.replace(/ /g, '<span style="background:#fb7185; color:white;">□</span>');
// HTMLエスケープ処理
s = s.replace(/</g, "<").replace(/>/g, ">");
// 文字列、数値のハイライト
s = s.replace(/(".*?"|'.*?')/g, '<span class="s">$1</span>');
s = s.replace(/\b(\d+)\b/g, '<span class="n">$1</span>');
// 言語ごとのキーワード定義（一部抜粋）
let kws = "";
if(lang === 'vba') kws = "Dim|As|Set|If|Then|End|Sub...";
else if(lang === 'python') kws = "def|class|if|elif|import...";
// ...
if(kws) s = s.replace(new RegExp(`\\b(${kws})\\b`, 'gi'), '<span class="k">$1</span>');
return s;
}
3. デザイン：ぷっくり＆ニューモーフィズム
「業務ツール＝堅苦しい」というイメージを払拭するため、CSSで「ぷっくり」とした質感のボタンやカードをデザインしました。また、スマホでの操作性を考慮し、touch-action: none; や pointer-events の制御を行い、連打してもズームやスクロールが起きないように調整しています。
CSS
.up-btn-pukkuri {
border: none;
border-radius: 24px;
box-shadow: 0 6px 0 var(--up-blue-dark); /* 影で立体感を出す */
transition: transform 0.1s;
}
.up-btn-pukkuri:active {
transform: translateY(4px); /* 押した沈み込み */
box-shadow: none;
}
収録した「エラーあるある」の例
開発にあたり、各言語の「ハマりポイント」を洗い出しました。これらは実際に私が現場で遭遇したり、相談を受けたりした事例がベースになっています。
VBA: Integer型の罠（32,767を超えてオーバーフローする案件。今はLong推奨）
Python: インデントのズレ、リスト追加の push（JS脳） vs append
SQL: DELETE FROM に WHERE 句がない（全件削除の恐怖）
Java: 文字列比較の == 使用（equals忘れ）
Shell: 変数代入時のスペース VAR = val（スペース厳禁） など
おわりに
バックオフィス業務のDX（デジタルトランスフォーメーション）は、高度なシステム導入だけでなく、こうした「現場担当者の小さなITリテラシー向上」の積み重ねで進んでいくものだと信じています。
もしよければ、息抜きがてら遊んでみてください。そして、ご自身の得意な言語で「自分なら0.5秒で気づけるか？」を試していただけると嬉しいです。