Laravel6 表示するビューにJavaScriptを含める

# 目的

- LaravelのビューにJavaScriptのコードを含めて動的なページを作成する方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 6.X | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |
| Node.jsバージョン | v8.9.4 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでNode.jsをインストールする](https://qiita.com/miriwo/items/73d1546220f1c091a7d5) |

# 前提条件

- 実施環境に記載されてたソフトウエア環境に近い環境が構築されていること

# 前提情報

- 参考文献を読みながら実際に手を動かし作業を行い、LaravelのビューにJavaScriptのコードを書いて動作させることができるかを確かめる。その過程でのメモや方法などを記載する。
- Laravelのアプリ作成部分の方法は記載しない。
- Macに直接立てたLaravelの開発環境本件を確認している。
- ルーティング情報は下記のものが既に記載されているものとする。

    ```routes/web.php
    Route::get('/js/index', 'JsTestController@index')->name('js.index');
    ```
- コントローラは下記のアクションが既に記載されているものとする。

    ```app/Http/Controller/JsTestController.php
    public function index(Type $var = null)
    {
        return view('js_tests.index');
    }
    ```
- 下記のパスのビューファイルにJavaScriptを含んだソースを記載する。
    - `resorces/view/js_tests/index.blade.php`
- 表示するJavaScriptのソースは下記記事で紹介したものとする。
    - [avaScript 超基礎 ダイアログボックスを表示する](https://qiita.com/miriwo/items/588c318740a9b169044f)

# 詳細

1. 直接ビューファイルにJavaScriptのコードを記載する方法
    1. `resorces/view/js_tests/index.blade.php`を開く。
    1. 下記の内容を記載する。

        ```アプリ名ディレクトリ/resorces/view/js_tests/index.blade.php
        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1>JavaScript</h1>
        
            <script>
                window.alert('ダウンロードを開始します！');
            </script>
        </body>
        </html>
        ```
    1. ローカルサーバを起動し[http://127.0.0.1:8000/js/index](http://127.0.0.1:8000/js/index)にアクセスして表示したときにダイアログボックスが表示されることを確認する。
1. 別ファイルにJavaScriptのコードを記載する方法
    1. 下記コマンドを実行してJavaScriptファイルを作成して開く。

        ```terminal
        vi resources/js/test.js
        ```
        
    1. 下記の内容を記載する。

        ```アプリ名ディレクトリ/resources/js/test.js
        window.alert('ダウンロードを開始します！');
        ```
    1. アプリ名ディレクトリで下記コマンドを実行してLaravel Mixの設定ファイルを開く。

        ```terminal
        vi webpack.mix.js
        ```
    1. 下記のように追記する。

        ```アプリ名ディレクトリ/webpack.mix.js
        const mix = require('laravel-mix');
        
        /*
         |--------------------------------------------------------------------------
         | Mix Asset Management
         |--------------------------------------------------------------------------
         |
         | Mix provides a clean, fluent API for defining some Webpack build steps
         | for your Laravel application. By default, we are compiling the Sass
         | file for the application as well as bundling up all the JS files.
         |
         */
        
        mix.js('resources/js/app.js', 'public/js')
            /* 下記を追記する */
            .js('resources/js/test.js', 'public/js')
            .sass('resources/sass/app.scss', 'public/css');
        ```
    1. アプリ名ディレクトリで下記コマンドを実行してLaravel Mixをインストールする。

        ```terminal
        $ npm install
        ```
    1. 下記コマンドを実行してJavaScriptのファイルをコンパイルする。

        ```terminal
        $ npm run dev
        ```
    1. `resorces/view/js_tests/index.blade.php`を開く。
    1. 下記の内容を記載する。

        ```アプリ名ディレクトリ/resorces/view/js_tests/index.blade.php
        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1>JavaScript</h1>
        
            <script src="{{mix('/js/test.js')}}"></script>
        </body>
        </html>
        ```

# 参考文献

- [https://qiita.com/u-dai/items/83766b69a0e18488b005](https://qiita.com/u-dai/items/83766b69a0e18488b005)
- [https://qiita.com/ntm718/items/fed0e1060557a4e28ef3](https://qiita.com/ntm718/items/fed0e1060557a4e28ef3)