プログラミングに向いていない人の特徴は？向き不向きの見極め方と対処法

// ❌ 「向いていない」と錯覚してしまう初心者の学習パターン
// ネットで見つけた高度な型定義をいきなり理解しようとして挫折する
type ApiResponse<T> = {
  status: number;
  data: T extends object ? { [K in keyof T]: T[K] } : never;
};
// 🚨 初心者：「extends? keyof? 全く意味がわからない…才能ないかも」


// ⭕ 挫折しないための正しいステップ（まずはシンプルに）
// 実務の初期段階やプロトタイプ開発では、このくらいシンプルな型から始めます
interface User {
  id: number;
  name: string;
}

interface UserResponse {
  status: number;
  data: User;
}

// 実際にデータを作ってみて、型がどう守ってくれるかを確認する
const response: UserResponse = {
  status: 200,
  data: {
    id: 1,
    name: "山田太郎"
  }
};

console.log(response.data.name);

// 商品情報を管理する型定義
interface Product {
  id: string;
  name: string;
  price: number;
  isAvailable: boolean;
}

// ❌ 初心者がパニックになる状況
// 以下の配列に商品を追加しようとしたとします
const cart: Product[] = [];

// 🚨 ここで赤い波線（エラー）が出ます
cart.push({
  id: "A001",
  name: "ワイヤレスイヤホン",
  price: 5000
});

/* 💡 エディタに表示されるTypeScriptのエラーメッセージ（英語）
Argument of type '{ id: string; name: string; price: number; }' is not assignable to parameter of type 'Product'.
  Property 'isAvailable' is missing in type '{ id: string; name: string; price: number; }' but required in type 'Product'.

👇 初心者はこれを「怒られた」と感じますが、翻訳するとこうなります。
「Product型には 'isAvailable'（在庫あり/なし）というデータが必須だけど、あなたが入れたデータにはそれが欠けていますよ！」
*/

// ⭕ エラーを「ヒント」として受け取り、正しく修正する
cart.push({
  id: "A001",
  name: "ワイヤレスイヤホン",
  price: 5000,
  isAvailable: true // 👈 ヒント通りに欠けていたプロパティを追加すれば即解決！
});

// ❌ 暗記に頼った初心者が書きがちなコード
// 文法は合っているが、データの構造（全体像）が見えておらず、後で破綻する
const userName: string = "田中";
const userAge: number = 25;
const userIsActive: boolean = true;
// 変数がバラバラで管理され、他の関数に渡すのが極めて困難になる


// ⭕ 脳のネットワークを正しく使う（論理と構造を設計する）コード
// 「User」というひとつの抽象的な概念（メンタルモデル）を先に定義する
interface User {
  name: string;
  age: number;
  isActive: boolean;
}

// 構造を定義してから、具体的なデータを当てはめる
const currentUser: User = {
  name: "田中",
  age: 25,
  isActive: true,
};

function activateUser(user: User): User {
  // スプレッド構文で現在の状態を保持しつつ、一部だけ更新する（実務で頻出の論理構造）
  return { ...user, isActive: true };
}

// 外部APIから取得するデータのレスポンスを想定
interface ApiResponse<T> {
  statusCode: number;
  data: T; // ジェネリクス：あとで具体的な型を入れるための「変数」のようなもの
}

interface Article {
  id: number;
  title: string;
}

// ❌ 規則性（メンタルモデル）を理解していない初心者のミス
// エラーを消すために as（強制的な型変換）を使ってシステムを騙す
const badResponse = { statusCode: 200, data: { title: "TypeScript入門" } } as ApiResponse<Article>;
// 🚨 Article型には「id」が必須なのに、idがないデータでもエラーが出なくなってしまう！


// ⭕ 規則性を理解し、型システムに従う正しいアプローチ
// ジェネリクス <T> を使って「どんなデータが来ても対応できる一貫したルール」を作る
const goodResponse: ApiResponse<Article> = {
  statusCode: 200,
  data: {
    id: 1,           // 💡 必須項目を入れないと正しくエディタが怒ってくれる
    title: "TypeScript入門",
  },
};

// 規則に従えば、エディタの補完機能が 100% 正確に働く
console.log(goodResponse.data.title);

// 💡 認知特性に合わせたTypeScriptのコード記述例

// 【言語優位の人向け・またはチームへの配慮】
// JSDoc（コメントによる型定義の説明）を豊富に書くことで、文章としてコードの意図を理解・伝達する

/**
 * ユーザーの年齢から割引率を計算する関数
 * @param age ユーザーの年齢
 * @returns 適用される割引率（0.1 = 10%引き、0 = 割引なし）
 * @throws 年齢がマイナスの場合にエラーをスロー
 */
function calculateDiscount(age: number): number {
  if (age < 0) {
    throw new Error("年齢は正の数である必要があります");
  }
  if (age >= 60) return 0.2; // シニア割引
  if (age <= 18) return 0.1; // 学生割引
  return 0; // 通常料金
}

// 【視覚優位の人向けのアプローチ（コード外の工夫）】
// 上記の関数を書く前に、以下のような「型と条件の分岐」を紙やホワイトボードに図式化します。
// [入力: age(number)] ---> (age >= 60) ---> [出力: 0.2(number)]
//                    |---> (age <= 18) ---> [出力: 0.1(number)]
//                    |---> (それ以外)  ---> [出力: 0(number)]

// ❌ ワーキングメモリを無駄に消費する、認知負荷が高いコード
// 引数の obj が何を持っているか、関数の中を全部読まないとわからない
function processOrder(obj: any) {
  // 開発者の脳内：「えっと、objの中にはpriceとtaxがあって...isPaidも確認して...」
  if (obj.isPaid && obj.price > 0) {
    const total = obj.price + (obj.price * obj.tax);
    console.log("発送準備をします", total);
  }
}


// ⭕ ワーキングメモリをエディタに委託する（認知負荷を下げる）コード
// 「Order」という型を定義することで、「この引数にはこれしかない」と脳を安心させる
interface Order {
  price: number;
  tax: number;
  isPaid: boolean;
}

// 引数で「分割代入」を使うことで、さらに見通しを良くする
function processOrderOptimized({ price, tax, isPaid }: Order) {
  // エディタが全て補完してくれるので、変数の存在を「記憶」する必要がゼロになる
  if (isPaid && price > 0) {
    const total = price + (price * tax);
    console.log("発送準備をします", total);
  }
}

// 呼び出す時も、型があるため「何を渡せばいいか」を暗記する必要がない
processOrderOptimized({ price: 1000, tax: 0.1, isPaid: true });

// ❌ 楽しさを感じられない初心者の受動的なコード
// 教材の通りに打っただけで、何が起きているか実感がない
const message: string = "Hello World";
console.log(message);


// ⭕ モノづくりの楽しさを実感する能動的なコード
// 自分で型を作り、関数を組み立てる「ブロック遊び」の感覚を持つ
interface Player {
  name: string;
  level: number;
}

function levelUp(player: Player): Player {
  console.log(`✨ ${player.name} は レベル ${player.level + 1} に上がった！`);
  return { ...player, level: player.level + 1 };
}

let myCharacter: Player = { name: "勇者", level: 1 };
// 実行して結果が変わることを楽しむ
myCharacter = levelUp(myCharacter);
myCharacter = levelUp(myCharacter);

// ❌ 論理が整理されていない初心者のコード（認知負荷が高い）
function calculatePrice(price: number, isMember: boolean, isSale: boolean) {
  // 条件が複雑に絡み合い、読むだけで疲れる
  if (isMember) {
    if (isSale) {
      return price * 0.8;
    } else {
      return price * 0.9;
    }
  } else {
    if (isSale) {
      return price * 0.95;
    } else {
      return price;
    }
  }
}

// ⭕ 論理をシンプルに分割するアプローチ（実務的）
// 「割引率を計算する」という役割だけを切り出す
function getDiscountRate(isMember: boolean, isSale: boolean): number {
  if (isMember && isSale) return 0.8;
  if (isMember) return 0.9;
  if (isSale) return 0.95;
  return 1.0;
}

function calculatePriceOptimized(price: number, isMember: boolean, isSale: boolean) {
  const rate = getDiscountRate(isMember, isSale);
  return price * rate;
}

// ❌ 課題解決を諦めたコード（anyへの逃避）
function getUserName(user: any): string {
  // エラーは出ないが、userがnameを持っている保証がどこにもない
  return user.name; 
}


// ⭕ 執着心を持って「型」に向き合ったコード
// わからないなりに、期待するデータの形をしっかり定義する
interface UserData {
  name: string;
  age?: number; // わからない部分はオプショナル（?）にするなど工夫する
}

function getUserNameSafe(user: UserData): string {
  return user.name;
}

interface Product {
  id: number;
  title: string;
}

// ❌ 初心者がパニックになる状況
const myItem: Product = {
  id: 1,
  name: "キーボード" 
};
// 🚨 エラー: Type '{ id: number; name: string; }' is not assignable to type 'Product'.
// Object literal may only specify known properties, and 'name' does not exist in type 'Product'.

// 💡 解決策：ストレスを感じる前に翻訳ツール（DeepLなど）やAIにエラー文を投げる
// 翻訳：「'name' は Product 型には存在しませんよ。」
// ⭕ 原因は「title」と書くべきところを「name」と書いていたタイポ（ミス）だと冷静に気づける。

// ❌ 好奇心が薄い人が書きがちな古いコード（非推奨）
// varは変数の有効範囲（スコープ）が曖昧で、意図しない上書きバグを生みやすい
var count = 0;
if (true) {
  var count = 10; // 外側のcountまで書き換わってしまう
}
console.log(count); // 10


// ⭕ 新しい知識（モダンな書き方）をキャッチアップしたコード
// letやconstを使い、さらにTypeScriptで型を明示する
let safeCount: number = 0;
if (true) {
  let safeCount: number = 10; // ブロック内だけの別の変数として安全に扱える
}
console.log(safeCount); // 0 （外側の変数は守られている）

// ❌ チーム開発を意識していない孤独なコード
// 変数名が適当で、他の人が読んでも何をする処理かわからない
function calc(a: number, b: number, c: number): number {
  return a * b - c;
}


// ⭕ コードは「チームメンバーへのメッセージ」であると理解したコード
// TypeScriptの型と適切な命名で、意図を明確に伝える
interface OrderDetails {
  unitPrice: number;
  quantity: number;
  discount: number;
}

function calculateTotalAmount(details: OrderDetails): number {
  return (details.unitPrice * details.quantity) - details.discount;
}

// ❌ 几帳面さに欠ける人のコード（読みにくく、ミスに気づきにくい）
const  user ={id:1,name: "taro" ,
  age:20}
  function  show(u:any){
console.log( u.name)}


// ⭕ 細部に気を配ったコード（自動フォーマッターを適用した状態）
// 適切にインデントされ、型も明記されているため、一目で構造がわかる
interface User {
  id: number;
  name: string;
  age: number;
}

function showUserName(user: User): void {
  console.log(user.name);
}

// 💡 実務でハマりやすい複雑な型の例（初心者が一人で抱え込むと危険）
type DeepPartial<T> = T extends Function ? T : T extends Array<infer U> ? _DeepPartialArray<U> : T extends object ? _DeepPartialObject<T> : T | undefined;
// ☝️ ネットから拾ってきたこのような複雑な型でエラーが出た場合、
// 初心者が一人で解決するのは不可能です。

// ⭕ 正しいアクション
// 「この型定義を導入しようとしたら、○○行目で××というエラーが出ました。
// 実現したいことは△△なのですが、アプローチが間違っているでしょうか？」
// と、早めに先輩やチームメンバー（あるいはChatGPTなどのAI）に状況を整理して質問する。

// ❌ 心身が疲弊している時にやりがちな「逃げ」のコード
const fetchData = (url: any, options: any): any => {
  // 本来は型を定義すべきだが、疲れているので全部anyでごまかす
  
  // @ts-ignore (エラーが出ているが、考える気力がないので無視して強制突破)
  const result = window.SomeLegacyLibrary.getData(url); 
  return result;
}


// ⭕ 心身が健康な状態で、未来のバグを防ぐために書くコード
interface FetchOptions {
  method: "GET" | "POST";
  headers?: Record<string, string>;
}

interface ApiResponse<T> {
  data: T | null;
  error?: string;
}

// きちんと型を定義することで、明日以降の自分（やチームメンバー）の疲労を軽減する
const fetchDataSafe = async <T>(url: string, options: FetchOptions): Promise<ApiResponse<T>> => {
  try {
    // 適切な処理（ここではダミー）
    return { data: null };
  } catch (err) {
    return { data: null, error: "取得に失敗しました" };
  }
}

// ❌ 今のレベルに合っていない高度な型を無理に使おうとしたコード
interface User {
  id: number;
  name: string;
  email: string;
}

// 「ネットで見たかっこいい書き方」を真似したが、自分が何をしたいのか分からなくなっている
type UpdateUserDto = Partial<Omit<User, 'id'>> & Record<string, unknown>;
// 🚨 初心者：「Partial？Omit？Record？……もう無理、才能ない」


// ⭕ 今の自分のレベルに合わせて、愚直に分かりやすく書くコード
// （実務でも、過度に複雑化するよりこちらの方が好まれるケースが多いです）
interface UpdateUserRequest {
  name?: string;  // 更新するかもしれないので「?」をつける
  email?: string;
}

function updateUser(userId: number, data: UpdateUserRequest) {
  // 愚直だが、誰が見ても「nameとemailだけ更新できるんだな」と一瞬でわかる
  console.log(`ユーザー ${userId} を更新します`, data);
}

interface Company {
  name: string;
  manager?: { // managerは存在しないかもしれない（?）
    name: string;
    contact?: { // contactも存在しないかもしれない（?）
      email: string;
    }
  }
}

const myCompany: Company = { name: "テスト株式会社" };

// ❌ メンターがいない初心者が自力でひねり出した苦しいコード
// TypeScriptのエラー（Cannot read properties of undefined）を避けるためにif文の地獄になる
let managerEmail = "未登録";
if (myCompany.manager) {
  if (myCompany.manager.contact) {
    if (myCompany.manager.contact.email) {
      managerEmail = myCompany.manager.contact.email;
    }
  }
}

// ⭕ メンター（やAI）に質問すれば一瞬で解決するモダンな書き方
// オプショナルチェーン（?.）と Nullish Coalescing（??）を使う
const elegantEmail = myCompany.manager?.contact?.email ?? "未登録";

// ❌ 業務内容に興味が持てず、思考停止で書かれた型定義
// ただデータが入ればいいという投げやりな設計。何を表しているか伝わらない。
interface ItemData {
  id: string;
  val1: string;
  val2: number;
  status: string; // "A", "B", "C" のどれかが入るらしいが不明
}


// ⭕ 興味を持って、業務の仕様（ドメイン）を型で表現したコード
// ユニオン型（Literal Types）を使って、状態を厳密に管理する
type TaskStatus = "TODO" | "IN_PROGRESS" | "DONE";

interface TaskItem {
  taskId: string;
  title: string;
  estimatedHours: number;
  status: TaskStatus; // 💡 許可された3つの文字列しか絶対に入らない！
}

function updateTask(task: TaskItem, newStatus: TaskStatus) {
  task.status = newStatus;
  console.log(`タスク「${task.title}」を ${newStatus} に更新しました`);
}

// updateTask(myTask, "CANCELLED"); // 🚨 "CANCELLED"は定義されていないので実行前にエラーになる

// ❌ 目的を見失い、挫折を招く過剰な型定義（オーバースペック）
// 初心者が「TypeScriptを極めなきゃ」と勘違いして書こうとする複雑なコード
type PickByValueType<T, ValueType> = Pick<
  T,
  { [Key in keyof T]-?: T[Key] extends ValueType ? Key : never }[keyof T]
>;
// 🚨 「何を作っているか」ではなく「どう書くか」に固執すると、モノづくりの楽しさが消滅します。


// ⭕ 目的（ゴール）に直結する、シンプルで実務的なコード
// 「ユーザーの画面を表示する」という目的にフォーカスし、必要な型だけを素直に定義する
interface UserProfile {
  name: string;
  role: "admin" | "editor" | "viewer";
}

// 画面に表示するためのデータを準備できれば、それで100点満点です
function displayUserRole(user: UserProfile): string {
  if (user.role === "admin") return `${user.name}さんは管理者です`;
  return `${user.name}さんは一般ユーザーです`;
}

// 決済ステータスの型定義（ユニオン型）
type PaymentStatus = "SUCCESS" | "FAILED" | "PENDING";

// ❌ 論理的思考が苦手な人が、頭の中だけで考えて書くバグりやすいコード
function showMessageBad(status: PaymentStatus) {
  if (status === "SUCCESS") {
    console.log("決済完了");
  } else if (status === "FAILED") {
    console.log("決済失敗");
  }
  // 🚨 PENDING（保留中）の処理が漏れているが、JavaScriptでは気づけない！
}


// ⭕ TypeScriptの「網羅性チェック」で、論理の漏れを機械に防がせるコード
function showMessageGood(status: PaymentStatus) {
  switch (status) {
    case "SUCCESS":
      return "決済完了";
    case "FAILED":
      return "決済失敗";
    case "PENDING":
      return "処理中...";
    default:
      // ここに到達することは型システム上あり得ないが、
      // 将来ステータスが追加された時に、上のcaseを書き忘れるとここでエラーを出して教えてくれる
      const _exhaustiveCheck: never = status;
      return _exhaustiveCheck;
  }
}

// Webページ上のボタン要素を取得すると想定
// ❌ 独学初心者が何時間もハマる、DOM要素の取得エラー
const btnElement = document.getElementById("submit-btn");

// 🚨 エラー：オブジェクトは 'null' である可能性があります。
// 初心者「ボタンは絶対にあるのになぜ！？向いてないかも...」
// btnElement.addEventListener("click", () => console.log("クリック！"));


// ⭕ メンターが教える「TypeScriptの安全な書き方（オプショナルチェーン）」
// ボタンが存在しない（null）場合は、後の処理を安全にスキップしてくれる
btnElement?.addEventListener("click", () => {
  console.log("クリックされました！");
});

// または、早期リターンで明確に処理を分ける（実務で最も好まれる書き方）
if (!btnElement) {
  console.error("送信ボタンが見つかりません。HTMLを確認してください。");
  // ここで処理を終了させる
} else {
  // このブロック内では btnElement は確実に存在するとTSが認識する
  btnElement.addEventListener("click", () => console.log("クリック！"));
}

// ⭕ 自己効力感を回復させるための、超シンプルな「成功体験」コード
// 複雑なフレームワークは使わず、純粋なTypeScriptだけで作るミニ機能

interface Task {
  title: string;
  isDone: boolean;
}

// タスクを完了状態にするだけのシンプルな関数
function completeTask(task: Task): Task {
  return { ...task, isDone: true };
}

// 自分でデータを作り、関数を通してみる
const myTask: Task = { title: "TypeScriptで自信を取り戻す", isDone: false };

console.log("実行前:", myTask);
// 実行前: { title: 'TypeScriptで自信を取り戻す', isDone: false }

const finishedTask = completeTask(myTask);

console.log("実行後:", finishedTask);
// 実行後: { title: 'TypeScriptで自信を取り戻す', isDone: true }