見出し画像
Photo by peishum

とにかく簡単にReact+TypeScriptで開発したい！

人間

SPAとかしなくていいからとりあえずReactとTypeScriptで開発したい！CDNで使うのと同じくらい簡単に！というのを求めている方へ向けた記事です。ファイル構成とかは何も考えてません。とにかく動かすだけの記事です。

０．Node.jsをインストールする

CDNと同じくらい簡単に！とは言いましたが、さすがにそこまでは無理でした。Node.jsは必要です。逆に言えば、ローカルの環境はNode.jsくらいでしか汚さずに済みます。

公式サイトからダウンロードしてインストールしてください。PowerShellやらBashやらでnode -vとnpm -vを叩いてバージョン番号が出てきたら成功です。

１．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"
 },

これでコンパイルの用意は完了です。

２．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にアップロードしてあります。

https://gitlab.com/nDIUSHyDRImA/minimal-react-typescript

この記事が気に入ったらサポートをしてみませんか？