とにかく簡単にReact+TypeScriptで開発したい!
SPAとかしなくていいからとりあえずReactとTypeScriptで開発したい!CDNで使うのと同じくらい簡単に!というのを求めている方へ向けた記事です。ファイル構成とかは何も考えてません。とにかく動かすだけの記事です。
0.Node.jsをインストールする
CDNと同じくらい簡単に!とは言いましたが、さすがにそこまでは無理でした。Node.jsは必要です。逆に言えば、ローカルの環境はNode.jsくらいでしか汚さずに済みます。
公式サイトからダウンロードしてインストールしてください。PowerShellやらBashやらでnode -vとnpm -vを叩いてバージョン番号が出てきたら成功です。
1.TypeScriptをコンパイルする環境を整える
Node.jsのインストールが完了したら、以下のコマンドをPowerShellにて叩いてください。なぜPowerShellかというと、私がWindowsユーザーだからです。
New-Item .\minimal-react-typescript -ItemType Directory
Set-Location .\minimal-react-typescript\
npm init #何か聞かれると思いますが、全てEnterで大丈夫です
npm install --save-dev typescript
.\node_modules\.bin\tsc.ps1 --init
ここまで完了したら、まずtsconfig.jsonを開いてください。コメントアウトされた"jsx": "preserve"が存在すると思いますが、その部分のコメントアウトを外し、"jsx": "react"に書き換えてください。
次に、package.jsonを開いてください。"scripts"が存在し、その中には恐らく"test"だけ存在すると思いますが、以下のように書き換えてください。
"scripts": {
"tsc": "tsc",
"tsc-watch": "tsc --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
これでコンパイルの用意は完了です。
2.TypeScriptでReactを書く
その前に、必要なモジュールをインストールしましょう。以下のコマンドを実行してください。
npm install --save-dev react react-dom @types/react @types/react-dom
Reactの動作を確認するためのHTMLを適当に作りましょう。
New-Item .\index.html
中身は以下のようにしてください。VSCodeのEmmetに、ReactのCDNやコンポーネントを含めるためのdiv要素とかを追加したくらいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./index.js"></script>
</body>
</html>
さて、いよいよTypescriptでReactを書いていきます。tsxファイルを作成してください。
New-Item index.tsx
中身は以下のようにしてください。
const App = () => <p>これはReactとTypeScriptのテストです。</p>
ReactDOM.render(<App />, document.getElementById('app'));
それでは、PowerShellで以下のコマンドを実行し、index.htmlをブラウザで開いてみましょう。
npm run tsc-watch
これはReactとTypeScriptのテストです。
上の文字列が表示されたはずです。ヤッター!
しかし、Reactと言えばコンポーネントです。コンポーネントも使えるのかどうか試してみましょう。
npm run tsc-watchは継続したまま、新しくPowerShellを開いて、適当にtsxファイルを作成します。
New-Item .\test-component.tsx
test-component.tsxの内容を以下のようにします。
const TestComponent = () => <p>これはコンポーネントです。</p>
index.tsxを以下のように書き換えます。
const App = () => (
<>
<p>これはReactとTypeScriptのテストです。</p>
<TestComponent />
</>
)
ReactDOM.render(<App />, document.getElementById('app'));
最後に、index.htmlを以下のように書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./test-component.js"></script> ← この行を追加
<script src="./index.js"></script>
</body>
</html>
これはReactとTypeScriptのテストです。
これはコンポーネントです。
上の文字列が表示されたはずです。スゴイヤッター!
付録
今回使用したソースコードはGitLabにアップロードしてあります。
この記事が気に入ったらサポートをしてみませんか?