Laravel8でTypeScript版Reactを使う方法

Posted: 2021.03.14 / Category: PHP / Tag: Laravel, React

Laravel8でTypeScript環境のReact.jsを使用する方法をご紹介します。

Laravelのインストール

最初にコンポーザーでLaravelのインストールをします。

$ composer create-project laravel/laravel typescript-react
$ cd typescript-react

Laravel Mixの設定

Laravelではwebpack的な設定はwebpack.mix.jsファイルに書くことになります。
デフォルトではJavaScriptをコンパイルするようになっているので、TypeScriptがコンパイルできるように編集しましょう。
CSSもPostCssになっているので、SASSを使用する場合は変更しておきます。

webpack.mix.js

mix.ts('resources/ts/app.tsx', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

if (mix.inProduction()){
	mix.version();
}

npmインストールでモジュールをインストールしましょう。

$ npm install

package.jsonに記述されたコマンドを何でもいいので実行してください。

$ npm run watch

モジュールが不足している為停止しますが、package.jsonにtypescriptとかsassが追加されています。

package.json

{
	"private": true,
	"scripts": {
		"dev": "npm run development",
		"development": "mix",
		"watch": "mix watch",
		"watch-poll": "mix watch -- --watch-options-poll=1000",
		"hot": "mix watch --hot",
		"prod": "npm run production",
		"production": "mix --production"
	},
	"devDependencies": {
		"axios": "^0.21",
		"laravel-mix": "^6.0.6",
		"lodash": "^4.17.19",
		"postcss": "^8.1.14",
		"resolve-url-loader": "^3.1.2",
		"sass": "^1.32.8",
		"sass-loader": "^10.1.1",
		"ts-loader": "^8.0.18",
		"typescript": "^4.2.3"
	}
}

lodashとかpostcssが必要なければ削除してしまいましょう。

Reactのインストール

ReactとType定義ファイルをインストールします。

$ npm i -D react react-dom @types/react @types/react-dom

npmインストールを実行します。

$ npm install

TypeScriptの設定

下記コマンドでtsconfig.jsonファイルが書き出されます。

$ npx tsc --init --jsx react

* React 17以降の場合は下記を実行してください。

$ npx tsc --init --jsx react-jsx

バージョンによって変わりますが下記のようなファイルが生成されると思います。

tsconfig.json

{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"jsx": "react",
		"strict": true,
		"esModuleInterop": true
	}
}

動作確認

これで準備は整いましたので、簡単なファイルを作成し動作確認してみましょう。
webpack.mix.jsで設定した起点となるファイルに下記を作成します。

resources/ts/app.tsx

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

const App = () => {
	const title: string = 'TypeScript React !!'
	return (
		<h1>{title}</h1>
	)
}

ReactDOM.render(
	<App />,
	document.getElementById('app')
)

コンパイルを実行します。

$ npm run prod

public/jsにapp.jsが作られることを確認してください。

ビューファイルでjs/app.jsを読み込んで、idがappのdivを配置します。

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Laravel</title>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script src="{{ mix('js/app.js') }}"></script>
</html>

「TypeScript React !!」と表示されれば成功です。

動画版はこちら。