WEBOPIXEL

Laravel8でTypeScript版Reactを使う方法

Laravelロゴ

Posted: 2021.03.14 / Category: PHP / Tag: ,

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

Sponsored Link

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ファイルが書き出されます。

$ tsc --init --jsx react

tscコマンドが実行できない場合は次のファイルを作成してください。

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/jsapp.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 !!」と表示されれば成功です。

動画版はこちら。