2018.10.04 2019.01.02

LaravelのフロントエンドにTypeScriptを導入する

Laravelのフロントエンドではlaravel-mixというwebpackの拡張機能を利用しています。今回はlaravel-mixの機能を利用してTypeScriptをjsにトランスパイラし、フロントエンド開発を行う準備をしていきます。

Laravel TypeScript

フロントエンド

[ 目次 ]

はじめに
Typescripをインストール
@types/jqueryのインストール
@types/bootstrapのインストール
設定ファイル tsconfig.json 作成
laravel-mixの設定変更
app.ts作成
最後に

参考記事

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

javascriptはコーディングルールが厳しくなく、自由に書けることにより、ソースが汚くなりがちです。また、型がない、クラスを定義したオブジェクト指向でコーディングしずらいなどの問題があります。TypeScriptはそんなjavascriptの問題を解決してくれます。

TypeScriptについては、Qiita: TypeScriptを使う理由がとても親切に解説してくれています。こちらも参考にしてください。

それでは、LaravelでTypeScriptを利用する方法をまとめていきます
以下の環境を前提として進めていきます。

■ 環境

ライブラリ	バージョン
PHP	^7.1.3
Laravel	5.7.*
Bootstrap	4.1.0
jQuery	3.2

Laravel5.7でプロジェクト作成した際のデフォルト構成を活かした形にする為、Bootstrap4, jQuery3を利用します。

Typescripをインストール

■ npmを利用する場合

$ npm install ts-loader typescript --save-dev

■ yarnを利用する場合

$ yarn add -D ts-loader typescript

@types/jqueryのインストール

Laravelプロジェクト作成時に、jQueryがインストールされていることが前提となります。
@types/jqueryは、TypeScriptでjQueryを利用する際のモジュールになります。
npm or yarnを利用してインストールします。

■ npmを利用する場合

$ npm install @types/jquery --save-dev

■ yarnを利用する場合

$ yarn add -D @types/jquery

@types/bootstrapのインストール

Laravelプロジェクト作成時に、Bootstrap4がインストールされていることが前提となります。
@types/bootstrapは、TypeScriptでBootstrapを利用する際のモジュールになります。
npm or yarnを利用してインストールします。

■ npmを利用する場合

$ npm install @types/bootstrap --save-dev

■ yarnを利用する場合

$ yarn add -D @types/bootstrap

設定ファイル tsconfig.json 作成

TypeScriptの設定ファイルとして、tsconfig.jsonを用意します。
以下のようなファイルを作成しましょう。

{
    "compilerOptions": {
      "outDir": "./built/",
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitAny": true,
      "module": "es2015",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "moduleResolution": "node",
      "target": "es6",
      "lib": [
        "es2016",
        "dom"
      ]
    },
    "include": [
      "resources/ts/**/*" // TypeScriptのソース配置場所
    ]
}

laravel-mixの設定変更

laravel-mixではjsを読み込むようになっているので、ts(TypeScript)を読み込むように変更します。以下ように修正します。

const mix = require('laravel-mix');
mix.ts('resources/ts/app.ts', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

app.ts作成

laravel-mixの設定では、エントリーポイントをapp.jsからapp.tsに変更しました。
app.tsの初期実装は以下のようにしています。

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';

// 画面読み込み完了時の処理（jqueryを利用）
$(document).ready(() => {
  // Bootstrapで利用するjsの読み込み
  bootstrap;
});