世界を旅して暮らしたい放浪エンジニアブログ

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

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

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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;
});

最後に

TypeScriptの導入方法をまとめてみました。
今後は画面ごとの個別実装の設計など、実装方針を検討していきたいと考えています。

参考記事

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts