最近、ウェブ開発ではTypeScriptとReactがとても人気です。TypeScriptはJavaScriptの拡張で、静的型チェックを行うことでバグを減らすことができます。一方、Reactはユーザーインターフェイスを簡単に作るためのライブラリです。この記事では、初学者向けに簡単にプロジェクトを始める方法を紹介します。

必要なものを準備しよう

Node.jsのインストール

まず、Node.jsをインストールします。Node.jsがあれば、JavaScriptのコードを実行したり、さまざまなパッケージをインストールしたりすることができます。

Node.jsの公式サイトから、あなたのOSに合ったインストーラをダウンロードして、手順に従ってインストールしてください。

エディタを選ぼう

次に、コードを書くためのエディタを選びます。初学者には、以下のエディタがオススメです。

• Visual Studio Code：多くの機能があり、無料で使えます。
• Sublime Text：軽量で使いやすいエディタです。
• Atom：カスタマイズ性が高いエディタです。

プロジェクトを作成しよう

Create React Appでスタート

Create React Appは、Reactのプロジェクトを簡単に始めるためのツールです。まず、以下のコマンドを使って新しいプロジェクトを作成します。

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

このコマンドを実行すると、「my-app」という名前の新しいReactプロジェクトがTypeScriptを使って作成されます。作成が完了したら、プロジェクトのフォルダに移動します。

cd my-app

プロジェクトを起動しよう

次に、以下のコマンドを実行してプロジェクトを起動します。

npm start

このコマンドを実行すると、自動的にブラウザが開き、「http://localhost:3000」でアプリが表示されます。これで、基本的なセットアップが完了です！

TypeScriptの基本を学ぼう

TypeScriptの型について

TypeScriptでは、変数の型を指定することができます。例えば、数値（number）や文字列（string）などです。以下のように書きます。

let number: number = 10;
let name: string = "John";

コンポーネントを作成してみよう

Reactの特徴はコンポーネントです。コンポーネントは、UIの一部を作るための部品のようなものです。簡単なコンポーネントを作ってみましょう。

import React from 'react';

const HelloWorld: React.FC = () => {
    return 
Hello, World!
;
};

export default HelloWorld;

このコンポーネントを使うことで、「Hello, World!」と表示されるウェブページが作れます。