LaravelでJavaScript、CSSを使う

目次

Laravelの記事一覧は下記
PHPフレームワークLaravelの使い方

Laravelバージョン

動作確認はLaravel Framework 7.19.1で行っています

前提条件

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

必要なものをインストールする

npm(JavaScriptのパッケージ管理ツール。PHPにおけるComposerと同じ役割です)を使います
npmはNode.jsをインストールするときに一緒にインストールできます
下記からNode.jsをダウンロードします
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を実行し、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タグの枠と背景に今回作成したスタイルシートが適用されました
ボタンをクリックすると今回作成した関数が実行されました