LaravelにTypeScriptを導入してajax通信を行う

初めに

最近のプロジェクトではJavaScriptを使うときにTypeScriptを使用するケースが増えているかと思います。
今回はLaravelアプリを作成する際のTypeScriptの導入方法とajax通信をする方法を解説していきます。

Laravel プロジェクトでTypeScriptを実行する

npmはインストールされている前提で進めます。

TypeScriptのインストール
最新の安定版を以下コマンドでインストールができます。

$ npm install -g typescript

インストールできているかバージョン確認も兼ねて-v オプションで確認

$ tsc -V
Version 4.5.5

開発環境への TypeScript ・ts-loaderのインストール

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

tsconfig.jsonを作成します。

{
	"compilerOptions": {
	"sourceMap": true
	}
}

webpack.mix.jsファイルにtsファイルが読み込まれるように追記します。

TypeScriptファイルの作成

/resource/ts/sample.tsを作成する

Console.log('sample');

Jsファイルをviewで読み込み

app.blade.php

<script  src="{{ asset('js/flash_message.js') }}" defer></script>

npmでtsファイルをコンパイル

$ npm run dev

Public/js/sample.jsファイルが作成されていることを確認
画面を確認してみるとコンソールにsampleが表示されるようになりました。
これでLaravelでTypeScriptが使用できるようになったことがわかります。

Sample sample.js

TypeScript でjqueryを用いてajax通信を行う
Npmでインストールしたjqueryを外部モジュールとしてimportする形で使用します。

まずはこのコマンドでjqueryをインストールします。

$ npm install --save jquery @types/jquery
$npm install --save -dev webpack webpack-cli webpack-dev-server typescript 
ts-loader

インポートした後、tsconfig.jsonファイルに以下を追記します。
これを追記しないと、コンパイルエラーが発生するため追記する必要があるようです。
これでJqueryをインポートして使用できていることを確認できました。

view側でDOMの設定

前提としてlaravel側でコントローラ、モデルが作成されている上で解説をしていきます。
HTML側でボタンを押してajax処理を行うようにします。
buttonにid=“delete-button”を設定します。
また、data-urlにpostしたいメソッド先のrouteを指定します。

Sample.html

<div class="text-center">
     <button type="submit" class="btn btn-outline-primary" id="delete-button" data-url="{{ route('delete', ['id' => $user->id]) }}">削除</button>
</div>

<script src="{{ asset('js/flash_message.js') }}" defer></script>

TypeScript側での設定

Urlはdata(‘url’)とすることでdata attrに設定した値を取得することができます。
指定したrouteにPOSTして、コンソールにSUCCESSと表示されれば正常にPOSTできたことがわかります。
これでtypescriptを用いてajax処理を行うことができました。