TypeScript入門｜JavaScriptとの違い
おい、みんな元気にしてるか？ きこにいこと、株式会社終焉祝祭 代表取締役の俺だ。
今日は、俺がどん底から這い上がって、今こうして事業を回していく中で、改めてその重要性を痛感しているプログラミング言語の話をしようと思う。そう、TypeScriptだ。
「え、きこにいってプログラマーだったの？」って思った奴もいるかもしれないな。正直に言うと、俺はゴリゴリのエンジニア出身ってわけじゃない。元年商1.6億から2億の負債を抱え、自己破産、うつ病と、壮絶な地獄を見てきた男だ。そんな俺が、TikTok配信をきっかけに再起して、今ではコミュニティ「アジト」の運営から、様々な事業展開まで手掛けてる。
そんな俺がなぜ、今さらプログラミング言語、特にTypeScriptについて語るのか？ それは、俺が事業を立ち上げていく中で、ウェブサービス開発の現場を間近で見てきて、**「これ、もっと早く知ってれば、余計なコスト払わずに済んだな」**って心底思ったからなんだ。
特に、スタートアップや中小企業で、限られたリソースの中で品質の高いサービスを早くリリースしたいと考えているなら、TypeScriptは本当に心強い味方になる。今日は、JavaScriptとの違いを中心に、TypeScriptの魅力を俺なりの視点で語っていくぜ。
俺がJavaScriptで見た「終焉の予兆」
まず、TypeScriptを理解するためには、そのルーツであるJavaScriptについて触れておかないと始まらない。
JavaScriptは、ウェブサイトに動きをつけるために生まれた言語だ。今では、フロントエンドだけでなく、Node.jsの登場でバックエンド開発にも使われるようになり、ウェブ開発のデファクトスタンダードと言っても過言じゃない。俺の周りのエンジニアも、ほとんどがJavaScriptを触ったことがあるだろう。
俺も最初の頃は、自社サービス開発でエンジニアから「これ、JavaScriptでやります！」って言われて、「お、なんか早そうじゃん！」って思ってたんだ。確かに、書き始めるハードルは低い。ちょっとした動きなら、サクッと実装できる。
だけどな、事業が大きくなっていくにつれて、**「あれ、なんかおかしいぞ？」**って違和感を覚えるようになったんだ。
具体的には、こんな感じだ。
- バグの頻発: 「あれ、さっきまで動いてたはずなのに…」みたいなことがしょっちゅう起こる。特に、機能を追加したり、既存のコードを修正したりすると、別のところでエラーが出たりするんだ。
- 「これ、誰が書いたコード？」問題: 開発メンバーが増えたり、時間が経ったりすると、過去のコードが何を意図しているのか全く分からなくなる。コメントも少ないし、変数名も適当だしで、解読に時間と労力がかかるんだ。
- リファクタリング地獄: バグを直したり、新機能を追加したりするたびに、既存のコードを大規模に修正する「リファクタリング」が必要になるんだが、これがまた大変で。ちょっといじっただけで、どこに影響が出るか分からないから、テストも時間かかるし、常にヒヤヒヤするんだ。
俺は自己破産で2億の負債を抱えた男だから、コストにはめちゃくちゃ敏感だ。これらの問題は、結果的に開発コストの増大に直結する。バグ修正に費やす時間、コードの解読に費やす時間、リファクタリングに費やす時間…これ全部、人件費として俺の懐から出ていく金なんだ。
正直、あの頃の俺は「このままじゃ、また終焉が来るぞ…」って内心ビビってた。
TypeScriptが俺に教えてくれた「安定と成長」
そんなJavaScriptの「終焉の予兆」を感じていた時に、エンジニアの一人が「きこにいさん、これからはTypeScriptが主流になりますよ」って進言してくれたんだ。最初は「また新しい言語かよ…」って正直うんざりした部分もあった。俺は新しいものに飛びつくタイプだけど、失敗続きだったから、無駄な投資はしたくなかったんだ。
でも、説明を聞いて、実際に導入してみると、これが大当たりだった。TypeScriptは、一言で言えば**「JavaScriptに型システムを導入したもの」**だ。
「型システム」って聞くと、なんか難しそうに聞こえるかもしれないが、簡単に言うと「この変数は数字しか入らないよ」「この関数は文字列と数字を受け取って、真偽値を返すよ」みたいに、データの種類をあらかじめ決めておくルールなんだ。
この「型」があるかないかで、開発の現場が劇的に変わる。
TypeScript導入で得られた具体的な効果
俺の会社でTypeScriptを導入して、実際にこんなメリットがあった。
バグの早期発見・減少: これが一番デカい。JavaScriptでは実行してみないと分からなかった型に関するエラーが、TypeScriptだとコードを書いている段階で教えてくれるんだ。まるで、優秀な秘書が「きこにいさん、これ間違ってますよ」って指摘してくれるみたいに。これにより、開発中のバグが激減し、リリース後の重大な障害もほとんどなくなった。おかげで、深夜にエンジニアから「ヤバい、バグです！」って連絡が来ることもなくなったし、俺も安心して眠れるようになった（笑）。
コードの可読性・保守性の向上: 型があることで、「この変数は何を表しているのか」「この関数は何を返すのか」が一目で分かるようになる。新しくプロジェクトに参加したエンジニアも、すぐにコードの全体像を把握できるようになるんだ。これによって、新しい機能の追加や既存コードの修正が格段にやりやすくなった。開発スピードも上がったし、俺の金も浮いたわけだ。
開発効率の向上: 型情報があることで、エディタがコードの補完を賢くやってくれるようになる。例えば、「ユーザー」オブジェクトの後に「.」を打つと、そのユーザーが持っている「名前」とか「年齢」とかのプロパティを候補として表示してくれるんだ。いちいちドキュメントを見たり、コードを遡ったりする手間が省けるから、開発スピードがグンと上がる。俺も、エンジニアがサクサクコードを書いてるのを見て、「お、こいつら、仕事できるようになったな！」って思ったもんだ。
大規模開発への対応力: 俺の会社も、ありがたいことに事業が大きくなってきてる。機能もどんどん増えるし、開発メンバーも増えていく。そんな中で、JavaScriptのような「自由すぎる」言語だと、すぐにカオスになる。でも、TypeScriptなら、しっかりとしたルールがあるから、大人数で開発しても秩序が保たれるんだ。これが、俺が目指す「アジト」の成長、そして「終焉祝祭」の永続的な発展には不可欠だと確信してる。
もちろん、TypeScriptにもデメリットがないわけじゃない。学習コストがJavaScriptよりも少し高いとか、コンパイルという工程が必要になるとか、最初のうちは戸惑うこともあるだろう。でも、それらを補って余りあるメリットが、TypeScriptにはあると俺は断言する。
JavaScriptとTypeScriptの具体的な違いを比較！
ここまで俺の経験談を交えて話してきたが、もう少し具体的なコードで違いを見てみよう。
JavaScriptの例 (型なし)
function greet(person) {
return "Hello, " + person + "!";
}
console.log(greet("きこにい")); // "Hello, きこにい!"
console.log(greet(123)); // "Hello, 123!" (実行時にエラーにならないが、意図しない結果)
このJavaScriptの例だと、greet関数はどんな引数でも受け取ってしまう。文字列を期待しているのに数字を渡しても、実行時までエラーにならない。これが規模が大きくなると、どこで何が起こっているのか分からなくなり、「あのバグ、どこから発生したんだ！？」ってなるわけだ。
TypeScriptの例 (型あり)
function greet(person: string): string {
return "Hello, " + person + "!";
}
console.log(greet("きこにい")); // "Hello, きこにい!"
// console.log(greet(123)); // コンパイル時にエラー: Argument of type 'number' is not assignable to parameter of type 'string'.
TypeScriptの例では、greet関数の引数personがstring型であることを明示している。さらに、この関数が返す値もstring型であることを定義している（: stringの部分）。
これで、もしgreet(123)のように数字を渡そうとすると、コードを書いている最中やコンパイル時に、**「おい、きこにい！ここ、文字列じゃないとダメだぞ！」**って怒ってくれるんだ。実行する前に間違いに気づける。この安心感はデカい。
さらに、オブジェクトの型を定義することもできる。
interface User {
id: number;
name: string;
age?: number; // ? は省略可能であることを示す
}
function displayUserInfo(user: User): void {
console.log(`ID: ${user.id}, Name: ${user.name}`);
if (user.age) {
console.log(`Age: ${user.age}`);
}
}
const kiconneet: User = { id: 1, name: "きこにい", age: 31 };
displayUserInfo(kiconneet); // ID: 1, Name: きこにい, Age: 31
const anotherUser: User = { id: 2, name: "アジトの住人" };
displayUserInfo(anotherUser); // ID: 2, Name: アジトの住人
// const invalidUser: User = { id: "a", name: "bad user" }; // コンパイルエラー: Type 'string' is not assignable to type 'number'.
このように、Userという型を定義することで、displayUserInfo関数に渡すオブジェクトがどのような形をしているべきか、明確に指示できる。これによって、オブジェクトのプロパティを間違えてアクセスしたり、期待しないデータ形式を渡してバグを発生させたりするリスクを大幅に減らせるんだ。
まとめ｜俺がTypeScriptを推す理由
俺は、一度はすべてを失い、2億の負債を抱え、自己破産してうつ病になった男だ。そんな俺が再起をかけて立ち上げた事業で、本当に大事だと痛感しているのは、**「いかに無駄をなくし、効率的に、そして持続的に成長していけるか」**ということだ。
TypeScriptは、まさにその答えの一つだと俺は思ってる。
「JavaScriptより書くコードが増える」なんて意見もあるかもしれない。確かに、最初は型の記述に手間を感じることもあるだろう。でもな、その手間は、後々のバグ修正にかかる時間や、コードの解読にかかる時間、そして何より、事業の停滞という大きなリスクを考えれば、取るに足らないものだ。
初期の小さな投資が、将来の大きなリターンに繋がる。これは、ビジネスの原則と全く同じだ。俺の経験が、TypeScript導入を迷っているお前らの背中を押すきっかけになれば、これほど嬉しいことはない。
俺はこれからも、コミュニティ「アジト」のメンバーと共に、そして、俺の周りの優秀なエンジニアたちと共に、TypeScriptのような優れた技術を武器に、終焉を祝祭に変えるべく邁進していくぜ。
じゃあな！ また次の記事で会おう！