TypeScriptでの関数定義とJavaScriptの違いを理解しよう！初心者向け解説

1. TypeScriptとJavaScriptの関数定義の基本

1. TypeScriptとJavaScriptの関数定義の基本

TypeScriptとJavaScriptは、どちらもWeb開発で使われるプログラミング言語です。JavaScriptは型を指定しないので自由に書けますが、その分間違いに気づきにくいという弱点があります。そこで登場するのがTypeScriptの関数定義です。TypeScriptでは、関数の入力（引数）と結果（戻り値）に型注釈（型を明記すること）ができます。

2. JavaScriptでの関数定義

2. JavaScriptでの関数定義

まずはJavaScriptの関数の書き方から見てみましょう。型は書かずに自由に実行できます。

function add(a, b) {
    return a + b;
}

このままだと、間違って文字を渡してしまっても実行されてしまい、バグにつながる危険があります。

3. TypeScriptでの関数定義（型を指定）

3. TypeScriptでの関数定義（型を指定）

TypeScriptではこのように書きます。引数と戻り値に型を指定することで、安全性が大幅アップします。

function add(a: number, b: number): number {
    return a + b;
}

もし数字以外を渡そうとすると、実行前にエラーが表示されるので安心です。

4. アロー関数の違い

4. アロー関数の違い

短く書けるアロー関数（=>）でも、TypeScriptなら型をしっかり付けられます。

const greet = (name: string): string => {
    return `こんにちは、${name}さん`;
}

5. オプション引数や戻り値の型指定

5. オプション引数や戻り値の型指定

TypeScriptでは「ある引数はあってもなくても良い」という場合に?をつけられます。

function hello(name?: string): string {
    return name ? `こんにちは${name}` : "こんにちは！";
}

6. TypeScriptを使うメリット

6. TypeScriptを使うメリット

関数に型があると、以下のような良いことがあります。

• 間違った値を渡したときにすぐ気づける
• 他の人が読んでも分かりやすい
• 自動補完（入力支援）がさらに便利になる
• 開発が大規模になっても安心して作り続けられる

まさに、設計図を持って家を建てるような安心感が得られます。

7. プログラミング初心者にこそTypeScriptが最適

7. プログラミング初心者にこそTypeScriptが最適

最初はエラーメッセージが多くてびっくりするかもしれません。でも、それは「ここを直した方がいいよ」と教えてくれる先生のような存在です。失敗しながら学べるので、正しい書き方が自然と身に付きます。

関数を分ける、名前を分かりやすくする、型をつける。この3つを意識できるようになれば、あなたのコードはどんどん成長します。

TypeScriptを使って、より楽しく安全なプログラミングを始めていきましょう！

まとめ

まとめ

TypeScriptとJavaScriptの関数定義を振り返ろう

この記事では、TypeScriptとJavaScriptにおける関数定義の違いについて、初心者にも分かりやすい形で解説してきました。JavaScriptは型を指定せずに関数を定義できるため、シンプルで自由度が高いという特徴があります。その反面、引数や戻り値にどのような値が渡るのかが分かりにくく、思わぬバグにつながることがあります。特にプログラミングを始めたばかりの頃は、「なぜ動かないのか分からない」という状態に陥りやすく、ここでつまずいてしまう人も少なくありません。

それに対してTypeScriptでは、関数の引数や戻り値に型を指定することができます。型を指定することで、「この関数には数値を渡す」「この関数は文字列を返す」といったルールが明確になります。その結果、間違った使い方をした場合に、プログラムを実行する前の段階でエラーとして教えてくれます。この仕組みが、TypeScriptの大きな特徴である型安全性です。

関数に型を付けることの重要性

関数はプログラムの中でも特に重要な部品です。処理をまとめて再利用できる便利な仕組みですが、引数や戻り値が分かりにくいと、使い方を間違えてしまう原因になります。TypeScriptで関数定義に型を付けると、その関数がどのように使われるべきかが一目で分かるようになります。これは自分自身の理解を助けるだけでなく、他の人がコードを読むときにも大きな助けになります。

また、アロー関数やオプション引数といった書き方でも型を指定できる点は、実際の開発現場でも非常に役立ちます。短く書けるからといって安全性を犠牲にすることなく、読みやすさと安心感を両立できるのがTypeScriptの魅力です。関数定義に型を付ける習慣を身に付けることで、自然と整理されたコードを書く力が身に付きます。

まとめとしてのサンプルプログラム

ここで、TypeScriptの関数定義の考え方を改めて確認できる簡単なサンプルを見てみましょう。引数と戻り値の型を意識するだけで、関数の役割がとても分かりやすくなります。

// 型を指定した関数の例
function multiply(x: number, y: number): number {
    return x * y;
}

const result = multiply(3, 5);
console.log(result);

このように書くことで、「数値を受け取り、数値を返す関数」であることが明確になります。もし文字列などを渡そうとすると、その場でエラーが表示されるため、間違いにすぐ気づけます。これがTypeScriptを使った関数定義の大きなメリットです。