目次

    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');

    Laravel MixでTypeScriptを変換できるように Web pack.mix.js に記載する


    mix.ts('resources/ts/sample.ts', 'public/js')

    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処理を行うことができました。

    PREV
    2022.01.11
    初心者向け Google Analytics ユーザーを攻略せよ【集客】項目
    NEXT
    2022.02.10
    バンドワゴン効果とWEBサイト