【React】最低限の構成にTypeScriptを追加

「【React】最低限の構成で動かしてみる」にTypeScriptを追加してみました。

【React】最低限の構成で動かしてみる

Reactプロジェクト作成時の構成理解と最低限の構成でReactを動かしてみるための手順。

tokuty.com

2023.02.17

今回はLinux環境です。

動作環境

環境構築

Linux環境のため、node.js、npm、nvmをaptコマンドを使用してインストールしました。

node.jsをインストール

sudo apt install nodejs

npmをインストール

sudo apt install npm

node.jsのversion管理を行うためnvmをインストール

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm

github.com

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

node.jsのversionを調べる。

nvm ls-remote

version指定してインストール

nvm install v20.11.0

「nvm:コマンドが見つかりません」のエラーが出た場合は以下の手順を行うとコマンドが使用できるようになります。

command -v nvm

Linuxのディストリビューションによって３パターンのコマンドがあります。今回使用したLinuxのディストリビューションはDebian系なのでkshでした。

bash

source ~/.bashrc

zsh

source ~/.zshrc

ksh

. ~/.profile

実行環境

TypeScriptを動作させるため、ライブラリを追加していきます。

【React】最低限の構成で動かしてみる

Reactプロジェクト作成時の構成理解と最低限の構成でReactを動かしてみるための手順。

tokuty.com

2023.02.17

構成について

index.tsxとtsconfig.jsonを追加しています。

tsconfig.jsonはTypeScriptの設定ファイルです。

C:\REPOS\STOCK_FRONT
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   └── index.tsx
└── tsconfig.json

TypeScriptに必要なパッケージをインストールする。

npm install @types/react @types/react-dom typescript

tsconfig.jsonを作成する。

npx tsc --init

追加した箇所は３点。

terget:どのバージョンのJavaScriptに変換するのか指定する。

jsx:どのreactのversionに変換するかを指定する。preserveは変換なし。

include:コンパイル対象のディレクトリを指定する。

• target: “es5”
• jsx:”preserve”
• include :”src”

要件によって変わる部分なのでドキュメントを見ながら、変更・追加していく。

tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』

Node.jsはそれ自身ではTypeScriptをサポートしているわけではないため、TypeScriptの導入をする時はTypeScriptの設定ファイルであるtsconfig.jsonが必要です。

typescriptbook.jp

tsconfig.ts

{
  "compilerOptions": {
    "target": "es5", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "skipLibCheck": true, 
    "jsx": "react-jsx"
  },
  "include":[
    "src"
  ]
}

Buttonに型を追加してみました。型を指定することで不具合防止に繋がります。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

const Button = ({title}: {title: string}) => {
  return (<button>{title}</button>);
}

ReactDOM.render(
  <React.StrictMode>
    <div><Button title="Hello World"/></div>
  </React.StrictMode>,
  document.getElementById('root')
);

起動

npm start

無事表示されました！

npm startで起動したが上手くレンダリングされずに真っ白状態になった場合はもしかしらたpackeage.jsonに不要なパス指定が設定されているかも？

不用な設定を削除したら表示されました。

"homepage":"https://github.com/xxxxxxxxxxxx"

今回学んだこと

おすすめの書籍

おすすめのUdemy講座

モダンJavaScriptの基礎から始める挫折しないためのReact入門

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座