このページでは、AIが生成しがちな冗長・重複・やりすぎなコードを題材に、DRY / KISSを武器にしたコードレビュー形式の4択クイズで実戦力を鍛えます。理屈を読むだけでなく、「どこがまずい？どう直す？」を自分の判断として身につけるのが狙いです。
4択クイズ（10問・全問解説付き）で腕試し → 解説でなぜその修正が効くのかを腹落ち。「読む→解く→わかる」で、AIコードをスリムに整えるリファクタの勘所を鍛えていきましょう！
function validateName(name) {
if (!name) {
return '名前は必須です';
}
if (name.length > 20) {
return '名前は必須です';
}
return '';
}
function showUserLoading() {
const el = document.getElementById('user-section');
el.innerHTML = '読み込み中...
';
}
function showOrderLoading() {
const el = document.getElementById('order-section');
el.innerHTML = '読み込み中...
';
}
function process(user) {
if (user) {
if (user.isActive) {
if (!user.isBanned) {
// メイン処理
doSomething(user);
}
}
}
}
function fetchUsers() {
return fetch('/api/users', {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
credentials: 'include'
});
}
function fetchOrders() {
return fetch('/api/orders', {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
credentials: 'include'
});
}
function submitForm(data) {
// 入力チェック
if (!data.name) {
alert('名前は必須です');
return;
}
if (!data.email) {
alert('メールアドレスは必須です');
return;
}
// 保存用データ整形
const payload = {
name: data.name,
email: data.email,
createdAt: new Date().toISOString()
};
// 保存API
fetch('/api/contacts', {
method: 'POST',
body: JSON.stringify(payload)
}).then(() => {
alert('送信しました');
location.href = '/thanks';
}).catch(() => {
alert('送信に失敗しました');
});
}
function loadUsers() {
return fetch('/api/users')
.then(res => {
if (!res.ok) {
throw new Error('ユーザーの取得に失敗しました');
}
return res.json();
});
}
function loadProjects() {
return fetch('/api/projects')
.then(res => {
if (!res.ok) {
throw new Error('プロジェクトの取得に失敗しました');
}
return res.json();
});
}
function isNewUser(user) {
return user.daysSinceRegistered < 10;
}
function isRecentOrder(order) {
return order.daysSincePlaced < 10;
}
const isAdult = (age) => age != null && age >= 18 ? true : false;
function createUserLabel(user) {
return user.lastName + ' ' + user.firstName + '（' + user.id + '）';
}
function createOrderLabel(order) {
const user = order.user;
return user.lastName + ' ' + user.firstName + '（' + user.id + '）';
}
function isValidUserName(name) {
return typeof name === 'string' && name.length >= 3 && name.length <= 20;
}
function isValidProjectName(name) {
return typeof name === 'string' && name.length >= 3 && name.length <= 20;
}
※本ページは学習支援を目的とした要約です。実務適用時は原典もご参照ください。
もちもちみかん（社内SE）
運営者は、グループ企業向けの業務アプリを要件定義から運用まで担当している社内SEです。PHP・JavaScript・MySQL・CSSを使った実務経験をもとに、一次情報や実際の運用で得た気づきを整理しています。
AIにコードを書かせて終わりではなく、どこで迷ったか・どこを人がレビューすべきかまで含めて、 やさしく噛みくだいてまとめています。
経験：Webアプリ・業務システム
得意：PHP・JavaScript・MySQL・CSS
制作・運用中：フォーム生成基盤・クイズ学習プラットフォーム・htmx逆引きレシピ 等
AI時代のエンジニアタイプ診断：CSPF/とろとろみかん
詳しいプロフィールはこちら！ もちもちみかんのプロフィール
