初書：2021/1/13 
laravel : v8.21.0 
php : 7.4.14
接続用リンク：<a href="https://qiita.com/yuu_1st/items/6e8c8b74478de37918eb" target="_blank" rel="nofollow noopener noreferrer">素のPHPしか触ってなかった人がlaravelを触ってみる - Qiita</a>
<h1 id="laravel-mix%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#laravel-mix%E3%81%A8%E3%81%AF" aria-hidden="true"></a> laravel mixとは</h1>
<a href="https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17" target="_blank" rel="nofollow noopener noreferrer">Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita</a>
つまり、jsやcssをコンパイルして、本番環境でも使いやすくするよ、みたいなやつ（適当）
<h1 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h1>
laravalの場合はnpmをインストールするだけ。
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh">% npm install
</code></pre></div><h1 id="javascript%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%81%8F">
<a class="header-anchor-link" href="#javascript%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%81%8F" aria-hidden="true"></a> javascriptを書いていく</h1>
とりあえずファイルがなければ話にはなりません。 
作成するファイルは<code>resources/assets/</code>以下に置く 
laravel mixではtypescriptも扱えるようなので、せっかくなのでtypescriptも勉強してみる 
（タイトルと盛大に矛盾）
<div class="code-block-container">
<div class="code-block-filename-container">resources/assets/ts/test.ts</div>
<pre class="language-ts"><code class="language-ts">let str: string = "this is a test";
const doc: HTMLElement | null = document.getElementById("tes");

if(doc){
 doc.innerHTML = str;
}
</code></pre>
</div><code>#tes</code>要素の中身を<code>this is a test</code>にするだけ。
<h1 id="typescript%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#typescript%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> typescriptの設定</h1>
これは先ほどtypescriptを書いた場合のみ必要。javascriptを書いた場合は不要
後にコンパイルする際に、多少設定が必要なので、先に設定
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh">% tsc --init
</code></pre></div><code>tsc --init</code>を実行し、<code>tsconfig.json</code>を作成 
ファイルを開き、以下を書き換え（任意）
<div class="code-block-container">
<div class="code-block-filename-container">tsconfig.json</div>
<pre class="diff-highlight "><code class="diff-highlight ">-"target": "es5",
+"target": "es2020",
</code></pre>
</div>tsconfig.jsonのより詳しい設定： 
<a href="https://qiita.com/ryokkkke/items/390647a7c26933940470" target="_blank" rel="nofollow noopener noreferrer">tsconfig.jsonの全オプションを理解する（随時追加中） - Qiita</a>
<h1 id="%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> コンパイルしてみる</h1>
コンパイルする前に、一つ準備が必要 
まずは<code>webpack.mix.js</code>を開く 
以下の行を追加する
<div class="code-block-container">
<div class="code-block-filename-container">webpack.mix.js</div>
<pre class="language-js"><code class="language-js">mix.js('resources/js/app.js', 'public/js')
 .ts('resources/ts/test.ts', 'public/js') // &lt;-この１行を追加
 .postCss('resources/css/app.css', 'public/css', [
 //
 ]);
</code></pre>
</div>記述できれば以下を実行
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh">% npm run dev
(長い出力)
✔ Compiled Successfully in 3625ms
</code></pre></div>（ちなみに本番環境向けは<code>npm run production</code>。これで圧縮もされる）
最後に<code>Compiled Successfully</code>と出力されれば完了。<code>public/js/test.js</code>にファイルが出来ているはず
<h1 id="%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%87%BA%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%87%BA%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 実際に出力してみる</h1>
あとはblade.phpで出力するだけ。
<code>resources/views/test.blade.php</code>を作成し、以下を記述
<div class="code-block-container">
<div class="code-block-filename-container">resources/views/test.blade.php</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
 &lt;title&gt;テスト&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="tes"&gt;&lt;/div&gt;
 &lt;script src="{{ mix('js/test.js') }}"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>同様に<code>routes/web.php</code>の最後の行に以下を記述
<div class="code-block-container">
<div class="code-block-filename-container">routes/web.php</div>
<pre class="language-php"><code class="language-php">// 前略
Route::get('/test', function () {
 return view('test');
});
</code></pre>
</div><h1 id="%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 表示してみる</h1>
<code>http://127.0.0.1:8000/test</code>にアクセスしてみると、<code>This is the test</code>が表示されている。
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h1>
一度やってみると分かるが、一度やるまでが難しいLaravel。慣れるまでまだまだ時間がかかりそう・・・。 
（ところで、laravelの投稿にphpのタグを含めるのは適切だと思いますか・・・？）
続き？：<a href="https://zenn.dev/yuuyu/articles/09009dad030b6c" target="_blank">【laravel】laravel mixのwebpack.mix.jsの書き換えを省略したい！</a>
<h1 id="%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%9A">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%9A" aria-hidden="true"></a> 参考サイト：</h1>
<a href="https://tech.arms-soft.co.jp/entry/2020/04/01/090000" target="_blank" rel="nofollow noopener noreferrer">Laravel Mixでフロントエンド開発環境を手軽に構築　2020年版 作業環境を晒します〜フロントエンド開発環境編〜 - arms inc. Engineers' Blog</a>

【laravel】laravel mixを使ってみる

Discussion