Zenn
🩵

TypeScriptで人生が変わった話

に公開
JavaScript
TypeScript
frontend
型安全
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
idea

はじめに - TypeScriptへの愛を込めて

『Zenn TypeScript記事投稿コンテスト』
こんなコンテストがあるなんて...！

文章は下手だし、みんなみたいに豊富な経験があるわけでもないけれど、このTypeScriptへの愛と学びは発信しておかないと、TypeScriptLoverとしての名が廃る。

そんな想いで、気づいたときにはキーボードを叩いていました。

ちなみに、AIが目まぐるしい勢いで成長している昨今、いつか自分の手でコードを書けなくなる日が来るかもしれません...😱 でも声を大にして宣言します。AIがどれだけ発展しても、TypeScriptは己が手一本で書き続きます！ これは譲れない。愛だから。

まずはこの愛らしさを見てほしい

愛を語る前に、まずはこれを見てください。

TypeScript公式サイト: https://www.typescriptlang.org/docs

このブルーのアイコン、めちゃくちゃかわいくないですか？？
シンプルで洗練されたデザイン。青い背景に白い「TS」の文字。
VSCodeでTypeScriptファイルを開いた時に表示されるこのアイコンを見るたびに、「今日も一緒にがんばろうね」って話しかけたくなります。愛らしい。🩵
そして公式ドキュメントの美しさよ...！
読みやすいレイアウト、豊富なサンプルコード、丁寧な解説。こんなに愛されて作られた言語なんだな、と感じずにはいられません。
見た目も中身も美しい、それがTypeScript。
完全にベタ惚れです。😍

昔の私「型？なにそれ美味しいの？」

フロントエンドエンジニア4年目の私。今まではJavaScript一筋で、たまに動的型付けのPHPを少々触る程度でした。

静的型付け言語の話は開発界隈でよく聞いていたものの、正直こんな風に思っていました。

型の良さって、よく話には聞くけどあまりイメージついてないな...

なんか数値のところに文字列が入らないようにしたりするだけでしょう？

そこまで便利かな？🤔

そんな私が、TypeScriptと出会って...

「ところがどっこい」- 人生が変わった瞬間

TypeScriptを導入した瞬間、世界が、人生が、私の生きている宇宙が変わりました。

瞬間① IDEの補完機能が最強になった

Before: 地獄の手探り開発

// これ何のプロパティあったっけ...？
user.  // ← ここで補完が出ない絶望
// nameだっけ？userNameだっけ？？
// API仕様書を開いて確認する日々...

After: 天国の自動補完

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

// これが...
user.  // ← name, email, id, isActive が全部出てくる感動！

初めてVS CodeでTypeScriptのコードを書いて、オブジェクトの後に.を打った瞬間...

プロパティが全部出てきた時の感動は今でも忘れません。

「え、マジで！？これが型の力！？」

私、TypeScript好きかも...///

瞬間② Type駆動開発という新世界

今の私の開発フローはこうです：

  1. API仕様書を見る
  2. まず一番最初に型定義を書く ← ここ重要！　← この時間が一番好き🩵
  3. あとは補完に従って爆速開発
// API仕様書を見て、まずはこれを定義
interface CreateUserRequest {
  name: string;
  email: string;
  age: number;
}

interface CreateUserResponse {
  id: number;
  name: string;
  email: string;
  age: number;
  createdAt: string;
}

// もうこの時点で開発の8割は終わってる感覚
const createUser = async (userData: CreateUserRequest): Promise<CreateUserResponse> => {
  // ここはもう補完が効くので爆速
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(userData),
    headers: { 'Content-Type': 'application/json' }
  });
  
  return response.json(); // 型安全！
};

もはやAPI仕様書 → 型定義が私の開発の出発点になりました。

これで本当に爆速で開発できるようになったんです。
〇〇駆動開発が沢山ある現代でこの開発手法やってる人他にいますかね？笑

瞬間③ Build時のエラー検出で感動の涙

そして、TypeScriptで一番「撫でたくなった」瞬間がこれ。

interface User {
  id: number;
  name: string;
  email: string;
}

// 色んなところでUserを使ってる
const UserCard = ({ user }: { user: User }) => (
  <div>
    <h3>{user.name}</h3>
    <p>{user.email}</p>
  </div>
);

const UserList = ({ users }: { users: User[] }) => (
  <div>
    {users.map(user => (
      <UserCard key={user.id} user={user} />
    ))}
  </div>
);

ある日、API仕様が変更になって、UserにisActiveプロパティが追加されることに。

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean; // 追加
}

そしてビルドを実行すると...

Error: Property 'isActive' is missing in type '{ id: number; name: string; email: string; }' 
but required in type 'User'.

「まさかの影響箇所に気付けた！」

これまでだったら、「あれ？なんかユーザー情報がうまく表示されないな...」と数日後に気づくパターンだったのに、ビルド時に教えてくれる。

この時、本気でTypeScriptを撫でたくなりました。
そして一生添い遂げることを誓いました。

「ありがとう、TypeScript...君がいてくれて本当に良かった...」

TypeScriptから学んだ「型安全」という生き方

TypeScriptを使い続けて気づいたのは、これは単なる「バグを防ぐツール」じゃないということです。

設計思考が変わった

型を定義することで、自然と「この関数は何を受け取って、何を返すのか」を明確に考えるようになりました。

// Before: なんとなく書いてた
function processData(data) {
  // dataが何なのかよくわからない...
  return something;
}

// After: 意図が明確
function processUserData(users: User[]): ProcessedUser[] {
  // 何をするかが明確！
  return users.map(user => ({
    id: user.id,
    displayName: user.name,
    status: user.isActive ? 'active' : 'inactive'
  }));
}

チーム開発での安心感

他の人が書いたコードを読む時も、型定義を見れば「あ、この関数はこういう使い方をするんだな」とすぐに理解できる。

そして何より、リファクタリング時の安心感が半端じゃない。
まーーじでコードの修正が怖くなくなった。

「この変更、他に影響ないかな...？」という不安から解放されました。

愛するTypeScriptへ

JavaScriptで育った私にとって、TypeScriptは本当に革命でした。

  • 補完機能で開発体験が劇的に向上
  • Type駆動開発で設計から変わった
  • ビルド時エラー検出で安心してコードが書ける

「型なんて面倒なだけ」と思っていた昔の自分に教えてあげたい。

型は制約じゃない、自由だ。

型があることで、安心してコードを書ける。
型があることで、堂々とリファクタリングできる。
型があることで、チームで開発するのが楽しくなる。

さいごに - これからTypeScriptを始める人へ

もしこの記事を読んで、「TypeScript、ちょっと気になるかも」と思った方がいたら、ぜひ一度試してみてください。

最初は「型を書くのめんどくさいな...」と思うかもしれません。

でも、ある瞬間、きっと感じるはずです。

「あ、これが型の力か」

その瞬間を味わったら、もうあなたもTypeScriptの虜です。😊

一緒にTypeScriptを愛しましょう！

この記事は、TypeScriptへの愛と感謝を込めて書きました。
TypeScriptに出会えて、本当に幸せです。

Discussion