LaravelでJavaScript、CSSを使う

# 目次
Laravelの記事一覧は下記
[PHPフレームワークLaravelの使い方](https://qiita.com/toontoon/items/c4d0371e504c37f6576e)

# Laravelバージョン
動作確認はLaravel Framework 7.19.1で行っています

# 前提条件
[eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)](https://qiita.com/toontoon/items/76fa7f8845b20776077c)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています

# 必要なものをインストールする
npm(JavaScriptのパッケージ管理ツール。PHPにおけるComposerと同じ役割です)を使います
npmはNode.jsをインストールするときに一緒にインストールできます
下記からNode.jsをダウンロードします
[https://nodejs.org/ja/](https://nodejs.org/ja/)
インストールします

# JavaScriptライブラリのインストール
コマンドラインで 
`cd sample`
`npm install`
eclipseプロジェクトを右クリック→リフレッシュ
/sample/node_moduleに多くのファイルが現れます
`npm install`は/sample/package.json(PHPにおけるcomposer.jsonです)に書いてある内容にしたがって、必要なJavaScriptをダウンロードしてnode_module配下に配置してくれます
今回はこのインストールされたJavaScriptライブラリの内、laravel-mixを使います
laravel-mixは[webpack](https://webpack.js.org/)を実行し、jsファイルやcssファイル等フロントエンドで使用するファイルををまとめてくれるツールです

# スタイルシートの作成
(1) /sample/resources/sassフォルダ作成
/sample/resources/sass/sample.sass作成

```sample.sass
$sample_color: #00FF00

.sample-sass
  border: 5px solid $sample_color
  background: url('../images/sample.png')
  width: 30px
  height: 30px
```

(2) /sample/resources/lessフォルダ作成
/sample/resources/less/sample.less作成

```sample.less
@sample_color: #0000FF;
.sample-less {
  border: 5px solid @sample_color;
  background: url('../images/sample.png');
  width: 30px;
  height: 30px;
}
```

(3) /sample/resources/cssフォルダ作成
/sample/resources/css/sample1.css作成

```sample1.css
.sample-css1 {
  border: 5px solid #FF00FF;
  background: url('../images/sample.png');
  width: 30px;
  height: 30px;
}
```

(4) /sample/resources/css/sample2.css作成

```sample2.css
.sample-css2 {
  border: 5px solid #FFFF00;
  background: url('../images/sample.png');
  width: 30px;
  height: 30px;
}
```

# JavaScriptの作成
(1) /sample/resources/js/sample1.js作成

```sample1.js
function sample1(){
	alert("sample1");
}
```

(2) /sample/resources/js/sample2.js作成

```sample2.js
function sample2(){
	alert("sample2");
}
```

#画像の作成
/sample/public/imagesフォルダ作成
/sample/public/images/sample.png作成
sample.pngをペイント等の適当な画像作成ソフトで作成してください。画像の内容はなんでもいいです

#JavaScript、CSSビルド設定
/sample/webpack.mix.js修正
Laravelのプロジェクトを作成したときにwebpack.mix.jsが自動的にできています。これを修正します

```webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .scripts(['resources/js/sample1.js', 'resources/js/sample2.js'], 'public/js/all.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/sample.sass', 'public/sass')
    .less('resources/less/sample.less', 'public/less')
    .styles(['resources/css/sample1.css', 'resources/css/sample2.css'], 'public/css/all.css')
    .options({
        processCssUrls: false
    });

```
作成したスタイルシートとJavaScriptファイルをビルド対象として追記しました
js()はECMAScript2015をECMAScript5への変換、モジュール結合、.vueファイルのコンパイル、`npm run production`実行した際の圧縮をしてくれます。第一引数に配列を渡せば、複数ファイルを結合してくれます
scripts()は複数のjsファイルを結合、`npm run production`実行した際の圧縮をしてくれます。生JavaScriptを書いている場合に使用します
sass()はSassをCSSに変換してくれます
less()はLessをCSSに変換してくれます
styles()は複数のcssファイルを結合してくれます。生CSSを書いている場合に使用します
`options({processCssUrls: false});`はsassやlessのURLリライトをさせない設定になります。sassやlessファイルの中にurl('../images/sample.png')のような記述があると、laravel-mixはそのurlのパスに該当する画像ファイル(今回、sassやlessファイルから'../images/sample.png'に該当するファイルは/sample/resources/images/sample.pngになります)を探し出し、public/images配下にコピーし、sass、lessファイル内のurl('../images/sample.png')をurl(/images/sample.png?xxxxxxxx);のように書き換えます。このように相対パスが/からはじまる絶対パスになった場合、今回のサンプルのようにhttpd.confに`Alias /laravelSample "eclipseのLaravelプロジェクトフォルダ/public"`のようなAlias設定をしていると、画像のある場所とurl()内のパスが合わなくなります。`options({processCssUrls: false});`をすると画像ファイルのコピーと、url()内のパスの書き換えが行われなくなります

#JavaScript、CSSビルド実行
コマンドラインで
`cd sample`
`npm run dev`
eclipseプロジェクトを右クリック→リフレッシュ
/sample/publicのcss、js、less、sass配下にファイルが現れます
現れたファイルは/sample/resources配下に作成したJavaScriptやスタイルシートがwebpack.mix.jsの内容に従って結合、コンパイル、圧縮され、/sample/publicに配置されたファイルです
`npm run dev`ではなく`npm run production`を実行した場合はjsファイルの中身が圧縮されます

# Controllerにメソッド追加
(1) /sample/app/Http/Controllers/SampleController.phpにjscssメソッドを追記

```
    public function jscss()
    {
        return view('sample.jscss');
    }
```

(2) /sample/routes/web.phpに下記を追記
`Route::get('sample/jscss', 'SampleController@jscss');`

# viewの作成
/sample/resources/views/sample/jscss.blade.phpファイル作成

```jscss.blade.php
<html>
    <head>
        <title>sample</title>
        <link href="{{ asset('/css/all.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('/less/sample.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('/sass/sample.css') }}" rel="stylesheet" type="text/css">
        <script src="{{ asset('/js/all.js') }}"></script>
    </head>
    <body>
        <div class="sample-less"></div>
        <div class="sample-sass"></div>
        <div class="sample-css1"></div>
        <div class="sample-css2"></div>
        <input type="button" value="sample1" onclick="sample1();">
        <input type="button" value="sample2" onclick="sample2();">
    </body>
</html>
```

# 動作確認
`http://localhost/laravelSample/sample/jscss`

divタグの枠と背景に今回作成したスタイルシートが適用されました
ボタンをクリックすると今回作成した関数が実行されました