プログラミングがつまらない理由とは？退屈にならない学習方法を解説！

// ❌ つまらない写経の例（目的が見えないコード）
// 教材の通りに打っているだけで、何に使うデータなのか実感が湧かない
const data1: string = "Hello";
const data2: number = 123;
function doSomething(a: string, b: number): string {
  return a + b;
}


// ⭕ 楽しくなる能動的なコード（目的と想像力を持つ）
// 自分の好きなゲームや趣味を題材にして、TypeScriptの型を作ってみる
interface RpgCharacter {
  name: string;
  job: "勇者" | "魔法使い" | "戦士"; // ユニオン型で選択肢を絞る
  hp: number;
}

// 自分でルール（型）を決めて、関数を動かすと「ゲームを作っている感覚」が生まれる
function attackMonster(character: RpgCharacter, damage: number) {
  console.log(`${character.name}の攻撃！ モンスターに${damage}のダメージ！`);
}

const myHero: RpgCharacter = { name: "アルス", job: "勇者", hp: 100 };
attackMonster(myHero, 50);

// ❌ 黒い画面に出力するだけの地味なコード（飽きやすい）
const isChecked: boolean = true;
if (isChecked) {
  console.log("チェックされています");
} else {
  console.log("チェックされていません");
}

// ==========================================

// ⭕ 画面の動き（DOM操作）を伴う楽しいコード
// HTMLに <button id="myBtn">いいね</button> があると想定してください

// TypeScriptを使って、ボタンがクリックされたら色と文字を変える！
const buttonElement = document.getElementById("myBtn");

// 要素が本当に存在するか、ボタン要素（HTMLButtonElement）かを型で安全にチェックする
if (buttonElement instanceof HTMLButtonElement) {
  buttonElement.addEventListener("click", () => {
    // クリックされると画面上で視覚的な変化が起きる！（楽しい）
    buttonElement.style.backgroundColor = "blue";
    buttonElement.style.color = "white";
    buttonElement.textContent = "いいねしました！";
  });
}

// ユーザー情報を更新する関数
interface UserInfo {
  id: string;
  email: string;
  age: number;
}

// ❌ エラーで心が折れる初心者のアプローチ（anyへの逃避）
// 入力されたデータが不完全な時に、型をanyにしてTypeScriptを黙らせてしまう
function updateUserInfoBad(data: any) {
  // エラーは出ないが、dataの中にemailがある保証がなく、後で画面が真っ白になるバグを生む
  console.log(data.email.toUpperCase());
}


// ⭕ エラーを味方につけ、達成感を得る正しいアプローチ
// わからないなりに型をしっかり定義し、エディタの強力な補完機能（サジェスト）の恩恵を受ける
function updateUserInfoGood(data: UserInfo) {
  // 💡 data. と打った瞬間に「id, email, age」が候補として表示される！
  // エディタが自分をサポートしてくれる快感を味わうことができる
  console.log(`ユーザー ${data.id} のメールを ${data.email} に更新します`);
}

// 呼び出す際も、足りないプロパティがあればエディタが親切に教えてくれる
// updateUserInfoGood({ id: "U01", age: 20 }); 
// 🚨 エラー: プロパティ 'email' が欠けています。（← 実行前にバグを未然に防げた！）

// ❌ AI開発の作業感を嫌がり、型定義をサボった初心者の危険なコード
async function fetchAiRecommendationBad(userInput: string) {
  const response = await fetch("https://api.openai.com/v1/chat/completions", { /* 省略 */ });
  const data: any = await response.json(); // AIの返答をanyで受け取る
  
  // 🚨 AIがたまに "recommendation" ではなく "result" というキーで返してくると、
  // ここで undefined となり、画面がクラッシュする
  console.log(data.choices[0].message.content.recommendation); 
}


// ⭕ AIを「制御する」楽しさを見出す、TypeScriptの堅牢なコード
// AIに「絶対にこの型（形式）で返してね」というルール（スキーマ）を定義する
interface AiRecommendation {
  title: string;
  reason: string;
  confidenceScore: number;
}

// 取得したデータが本当に指定した型に合致しているか検証する関数（型ガード）
function isValidRecommendation(data: any): data is AiRecommendation {
  return (
    typeof data === "object" &&
    data !== null &&
    typeof data.title === "string" &&
    typeof data.reason === "string" &&
    typeof data.confidenceScore === "number"
  );
}

async function fetchAiRecommendationGood(parsedAiContent: any) {
  // 実務ではZodなどのバリデーションライブラリを使いますが、基本はこのようにチェックします
  if (isValidRecommendation(parsedAiContent)) {
    // 💡 ここからは parsedAiContent が AiRecommendation 型として安全に扱える！
    console.log(`おすすめ: ${parsedAiContent.title} (信頼度: ${parsedAiContent.confidenceScore})`);
  } else {
    console.error("AIが想定外のフォーマットで返答しました。再試行します。");
  }
}

// 💡 例えば「ユーザー登録機能を作って」とAIに指示した結果

// ❌ AIが勝手に推測して生成した、一見正しそうに見える危険な型定義
// 初心者はこれをコピペして満足してしまう
interface UserRegistrationFormAI {
  username: string;
  email: string;
  phoneNumber?: string; 
  passwordHash: string; // 🚨 フロントエンドからハッシュ化パスワードを送るのは設計としておかしい
}


// ⭕ 開発者（人間）が「設計者」としてAIのコードをレビュー・修正したコード
// AIの提案を鵜呑みにせず、ビジネスルールに従って型を再定義する
interface UserRegistrationFormHuman {
  username: string;
  email: string;
  phoneNumber: string; // 💡 会社のルールで電話番号は必須項目（?を外す）
  rawPassword: string; // 💡 フロントエンドからは生パスワードを送り、バックエンドで処理する
}

function submitRegistration(form: UserRegistrationFormHuman) {
  // 人間の意志で設計した型に従い、安全に処理を進める
  console.log("登録処理を開始します", form.email);
}

// ❌ AI時代に取り残される、設計（型）のないアプローチ
// いきなり処理を書こうとするため、AIもどんなデータが来るか予測できず適当なコードを返す
function processPaymentBad(data: any) {
  // AIに「決済処理を書いて」と丸投げ
  return data.amount * 1.1; 
}


// ⭕ AI時代に価値を生み出す、設計（型）主導のアプローチ
// まず人間が「ビジネスルール」を型として定義（設計）する
type Currency = "JPY" | "USD" | "EUR";

interface PaymentRequest {
  transactionId: string;
  userId: number;
  amount: number;
  currency: Currency; // 通貨を厳密に制限
  couponCode?: string; // クーポンは任意
}

interface PaymentResult {
  isSuccess: boolean;
  chargedAmount: number;
  errorMessage?: string;
}

// 💡 ここまで型（設計図）を用意して、初めてAIに「この引数と戻り値で関数を実装して」と指示を出す！
async function processPaymentGood(request: PaymentRequest): Promise<PaymentResult> {
  // 型が明確なため、AIはクーポン割引や通貨ごとの処理を「一発で正確に」実装してくれる
  let finalAmount = request.amount;
  if (request.couponCode === "SUMMER2026") {
    finalAmount *= 0.9;
  }
  
  return {
    isSuccess: true,
    chargedAmount: finalAmount
  };
}

// 💡 React × TypeScript でのフロントエンド開発のイメージ
import React, { useState } from "react";

// ⭕ 楽しく開発するための基本：コンポーネントが受け取るデータを型（Props）でしっかり定義する
interface LikeButtonProps {
  initialCount: number;
  label?: string; // ? をつけると省略可能（渡されなかった場合はデフォルト値を使う）
}

// ❌ 楽しくない（エラーに悩まされる）初心者の書き方
// const LikeButton = (props: any) => { ... } // propsの中身が分からずエディタの補完も効かない

// ⭕ エディタの補完が効いて気持ちいい、モダンなフロントエンドの書き方
export const LikeButton: React.FC<LikeButtonProps> = ({ initialCount, label = "いいね" }) => {
  // useState（状態管理）もTypeScriptが型を推論してくれるため安全！
  const [count, setCount] = useState<number>(initialCount);

  return (
    <button 
      onClick={() => setCount(count + 1)}
      style={{ padding: "10px", backgroundColor: count > 0 ? "pink" : "white" }}
    >
      {/* 画面上でクリックするたびに数字が増え、色が変わる！（視覚的な楽しさ） */}
      {label}: {count}
    </button>
  );
};

// ❌ 実務で嫌われる、やりすぎた型パズル（自己満足の型体操）
// 文字列から特定の文字だけを抽出するような複雑すぎる型（読むだけで疲弊する）
type ExtractLetters<S extends string> = S extends `${infer First}${infer Rest}` 
  ? First extends "A" | "B" ? First | ExtractLetters<Rest> : ExtractLetters<Rest>
  : never;


// ⭕ 実務で役立ち、かつ書いていて楽しい「Template Literal Types」のパズル
// 文字列の組み合わせをゲーム感覚で自動生成する
type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

// 💡 テンプレートリテラル型を使うと、掛け合わせの型を一瞬で生成できる！
type ButtonClass = `btn-${Size}-${Color}`;
// 結果として "btn-small-red" | "btn-small-blue" | ... という9パターンの型が自動完成する

// このように設定しておけば、タイポ（打ち間違い）を絶対に防げる
function createButton(className: ButtonClass) {
  console.log(`ボタンを作成します: ${className}`);
}

// ⭕ エディタの補完候補に "btn-small-red" などがズラッと並ぶ快感！
createButton("btn-medium-blue"); 

// 🚨 もちろん間違えれば即座にエラー
// createButton("btn-big-red"); // エラー: 'btn-big-red' は ButtonClass 型に割り当てられません。