Cohorz Dev

プロジェクトの実践： フロントエンドとバックエンドでのTypeScriptの利用

公開日：November 17, 2024更新日：November 28, 2024
JavaScriptTypeScriptCoding📄

TypeScriptは、フロントエンドとバックエンドの両方で利用できる強力なツールです。ここでは、フロントエンドとバックエンドでTypeScriptを活用する方法について、それぞれのユースケースと一緒に説明します。

フロントエンドでのTypeScriptの利用 ​

フロントエンド開発では、TypeScriptはReact、Vue、Angularなどのフレームワークと組み合わせて利用されることが多いです。TypeScriptを使用することで、コードの型安全性を確保し、メンテナンスしやすいアプリケーションを作成できます。

1. Reactでの利用 ​

Reactは、TypeScriptと非常に相性が良いフレームワークです。TypeScriptを使ってReactコンポーネントを作成することで、開発者はプロパティやステートに対して型注釈を加えることができ、エラーを未然に防ぐことができます。

Reactプロジェクトのセットアップ ​

まず、新しいReactプロジェクトをTypeScript対応で作成します。

bash
npx create-react-app my-react-app --template typescript

このコマンドで、TypeScriptが有効になったReactプロジェクトが生成されます。

TypeScriptでのコンポーネントの例 ​

以下は、TypeScriptを使ったReactコンポーネントの例です。

typescript
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

この例では、Greetingというコンポーネントがnameというstring型のプロパティを受け取ることを指定しています。これにより、nameに数値などの誤った型が渡された場合、コンパイル時にエラーが発生し、バグを未然に防ぐことができます。

2. Vueでの利用 ​

VueでもTypeScriptを利用することができます。特に、Vue 3以降ではTypeScriptとの統合が強化されており、オブジェクト指向プログラミングと相性の良い構造で開発することが可能です。

Vueプロジェクトのセットアップ ​

Vue CLIを使って新しいプロジェクトをTypeScriptで作成します。

bash
vue create my-vue-app

プロジェクト作成時にTypeScriptを有効にするオプションを選択してください。

TypeScriptでのVueコンポーネントの例 ​

typescript
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Greeting',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return {
      greetingMessage: `Hello, ${props.name}!`
    };
  }
});
</script>

<template>
  <h1>{{ greetingMessage }}</h1>
</template>

この例では、VueのコンポーネントにTypeScriptを利用して、プロパティの型を明確にしています。

バックエンドでのTypeScriptの利用 ​

バックエンド開発でもTypeScriptは有効です。Node.js環境でTypeScriptを使うことで、サーバーサイドロジックにおいても型安全性を確保し、複雑なコードのメンテナンスを容易にします。

1. Expressでの利用 ​

ExpressはNode.jsで最も使われているWebフレームワークの一つであり、TypeScriptでの開発にも適しています。

Expressプロジェクトのセットアップ ​

新しいExpressプロジェクトをTypeScript対応でセットアップするには、以下の手順を実行します。

bash
mkdir my-express-app
cd my-express-app
npm init -y
npm install express
npm install --save-dev typescript ts-node @types/node @types/express
npx tsc --init

TypeScriptでのExpressサーバーの例 ​

以下は、TypeScriptで記述された簡単なExpressサーバーの例です。

typescript
import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript with Express!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

このコードでは、RequestとResponseに型注釈を付けることで、リクエストやレスポンスに関連するプロパティの補完やエラーチェックが可能になります。

2. TypeORMを使ったデータベースの利用 ​

バックエンドでデータベースを利用する際に、TypeScriptのORM（Object-Relational Mapping）であるTypeORMを使うことがよくあります。TypeORMを使うと、データベースとオブジェクトのマッピングが簡単になり、型安全にデータを操作できます。

TypeORMプロジェクトのセットアップ ​

まず、必要なパッケージをインストールします。

bash
npm install typeorm reflect-metadata sqlite3
npm install --save-dev @types/node

TypeORMでのエンティティの例 ​

以下は、TypeORMを使ってUserエンティティを定義する例です。

typescript
import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  age: number;
}

この例では、Userエンティティを定義し、データベースのテーブルにマッピングしています。TypeScriptの型注釈を利用することで、データベース操作においても型安全性が確保されます。

まとめ ​

フロントエンドとバックエンドの両方でTypeScriptを活用することで、アプリケーション全体に一貫した型安全性を持たせることができます。フロントエンドではReactやVueと組み合わせることでユーザーインターフェースの型チェックを行い、バックエンドではExpressやTypeORMを使ってサーバーサイドロジックやデータベース操作を安全に管理できます。これらの技術を組み合わせて、フルスタックのTypeScriptプロジェクトに挑戦してみましょう。

Copyright © 2024 Cohorz Dev
Powered by VitePress