このページでは、AIが作りがちな密結合な設計を題材に、凝集度／結合度の観点で読み解くコードレビュー形式の4択クイズに挑戦します。AIに任せるほど、境界と責務を人間が設計できるかが差になります。
4択クイズ（10問・全問解説付き）で腕試し → 解説で責務の切り方・依存の減らし方を復習。「読む→解く→わかる」で、AIが迷わない疎結合設計へ導く視点を鍛えましょう！
function updateUserName(user) {
const input = document.getElementById('user-name-input');
user.name = input.value;
}
function getFirstItemPrice(cart) {
return cart.items[0].price;
}
class MailService {
constructor(client) {
this.client = client;
}
sendWelcomeMail(user) {
const body = `ようこそ ${user.name} さん`;
this.client.send(user.email, body);
}
sendByeMail(user) {
const body = `ご利用ありがとうございました ${user.name} さん`;
this.client.send(user.email, body);
}
}
function sendPasswordReset(user, token) {
const url = `https://example.com/reset?token=${token}`;
const message = `こちらからパスワードを再設定してください: ${url}`;
SmtpClient.send(user.email, message);
}
function onClickSaveButton() {
const user = collectFormData();
// ドメインロジックを直接 new
const service = new UserService();
service.save(user);
alert('保存しました');
}
function createReport(params) {
// params = {
// userId, userName, userAge,
// projectId, projectName,
// startDate, endDate,
// includePrivate, includeDeleted,
// ...
// }
// 複雑なレポート生成処理
}
class PaymentService {
constructor(http) {
this.http = http;
}
async pay(order) {
console.log('PAYMENT START', new Date(), order.id);
const result = await this.http.post('/payments', { orderId: order.id });
console.log('PAYMENT END', new Date(), order.id, result.status);
return result;
}
}
class Utils {
static formatDate(date) { /* ... */ }
static calculateTax(price) { /* ... */ }
static validateEmail(email) { /* ... */ }
static sendMail(to, body) { /* ... */ }
}
class UserProfileScreen {
constructor(apiClient) {
this.apiClient = apiClient;
}
async loadUser(userId) {
const user = await this.apiClient.get(`/users/${userId}`);
this.render(user);
}
async updateUser(user) {
await this.apiClient.put(`/users/${user.id}`, user);
this.render(user);
}
render(user) {
// DOMを書き換えてプロフィール画面を描画
}
}
function calculateDiscount(user, now = new Date()) {
if (user.isPremium && now.getDay() === 5) {
return 0.2;
}
return 0;
}
※本ページは学習支援を目的とした要約です。実務適用時は原典もご参照ください。
もちもちみかん（社内SE）
運営者は、グループ企業向けの業務アプリを要件定義から運用まで担当している社内SEです。PHP・JavaScript・MySQL・CSSを使った実務経験をもとに、一次情報や実際の運用で得た気づきを整理しています。
AIにコードを書かせて終わりではなく、どこで迷ったか・どこを人がレビューすべきかまで含めて、 やさしく噛みくだいてまとめています。
経験：Webアプリ・業務システム
得意：PHP・JavaScript・MySQL・CSS
制作・運用中：フォーム生成基盤・クイズ学習プラットフォーム・htmx逆引きレシピ 等
AI時代のエンジニアタイプ診断：CSPF/とろとろみかん
詳しいプロフィールはこちら！ もちもちみかんのプロフィール
