Help us understand the problem. What is going on with this article?

LaravelでJavascriptやCSSを使おう( Laravel Mix )

はじめに

Laravelを学んで「一通りデータベースとのCRUD処理はもう出来た!」という人のための記事。
次はそのサイトにJavascriptやCSSを使ってみよう。
今回はJavascriptでアラートを表示させてみます。

Laravel Mixとは

Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。(Laravel公式リファレンス)

何言ってんだ・・・?
僕もわかりません笑
簡単にいうと、

Laravel Mixはjsファイルやcss(sass)ファイルをLaravel上で使えるようにしてくれるやつ。
( jsファイルやsassファイルをコンパイルしてLaravel上で使えるようにするAPI )

インストールと準備

以下をお手元のパソコン君にインストールしてください
・ node.js (node.js公式サイト)
・ npm (node.js用のパッケージマネージャ。Vue.js, React, Bootstrapなどがインストール出来ます。Node.jsをインストールすれば使えるようになります。)

インストール方法

今回は以下の2つの方法を紹介したいと思います。

A. CUIを使ったコマンドでのインストール方法( 難易度: 普通 )
B. 公式サイトからインストーラをダウンロードしてくる方法( 難易度: 低い )

僕はAのCUIでのインストール方法をおすすめしています。

A. CUIでのインストール( Homebrewを使うのでMacのみです )

手順は以下になります。

  1. Homebrewのインストール( Homebrew公式サイト )
  2. nodebrewのインストール
  3. node.jsのインストール

1. Homebrewのインストール

まずはターミナル( コンソール画面 )を開きましょう。そこに、

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

こちらを丸々コピーして実行( エンターキー )してください。
インストールは時間がかかるので新たにコマンドは打たず、$マークが出るまでほうっておきましょう。
( 2019/9/28 現在のコマンドになりますので、公式サイトを確認してください。)

無事にインストールが出来たらbrew -vコマンドを打ってみましょう。( Homebrewのバージョンを確認するコマンドです。 )

スクリーンショット 2019-09-28 15.03.27.png

このように「Homebrew ○.○.○○」と表示されていれば成功です。

2. nodebrewのインストール

Homebrewが無事にインストール出来たのでnodebrewをインストールできるようになりました。ターミナル上に、

brew install nodebrew

こちらを打って実行してください。
このコマンドはHomebrewを使ってnodebrewをインストールするコマンドです。

インストールが完了したらnodebrew -vコマンドを打ってみましょう。( nodebrewのバージョンを確認するコマンドです。 )

スクリーンショット 2019-09-28 15.15.12.png

何やらたくさん出てきましたが一番上に「nodebrew ○.○.○」と表示されていれば成功です。 ( なお、他に表示されているのは使い方の例や使えるコマンド集です。いわば説明書ですね。 )

3. node.jsのインストール

お待たせしましたやっとnode.jsがインストール出来ます。
ターミナルは開いていますね?以下を入力して実行してください。

nodebrew install-binary stable

このコマンドはnodebrewを使って安定版のnodeをインストールするコマンドです。なお、最新版をインストールしたい場合は、

nodebrew install-binary latest

としてください。

インストールが完了したらnodebrew lsコマンドを実行してください。
このコマンドはインストールされたnodeのリストを表示するコマンドです。

スクリーンショット 2019-09-28 15.28.50.png

このように「v○.○.○」と表示されていればインストール成功です。
その下にcurrent: noneと出ているのはインストールした直後は有効化されていない為です。

そこで、

nodebrew use v○.○.○

コマンドで有効化します。( ○はお使いのバージョンを入力してください。 )
もう一度nodebrew lsコマンドを実行すると、

スクリーンショット 2019-09-28 15.27.56.png

インストールしたバージョンのnodeが設定されました。

* nodeコマンドを使えるように環境PATHを通す

nodeが無事にインストール出来ましたがこのままではnodeコマンドが使えません。パソコン君にnodeコマンドを使うための道筋を教えてあげましょう。( お使いのshellがbashの場合 )

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

こちらのコマンドは.bash_profileというファイルに''の中身を追記しているコマンドです。
source ~/.bash_profileを実行してください。
このコマンドで再読み込みさせます。
最後にnode -vコマンドを実行してください。

スクリーンショット 2019-09-28 15.44.03.png

このように「v○○.○○.○」と表示されていれば成功です。

B. 公式サイトからインストーラをダウンロードする方法

手順は以下になります。

  1. 公式サイトで最新版もしくは推奨板のインストーラをダウンロード
  2. インストーラをダブルクリックして起動
  3. 指示に従ってインストール
  4. ターミナルでnode -v,npm -vを打ってみて確認

非常に簡単です。

Laravel Mixを使ってみよう

「あれ、これなんの記事だっけ?」そう思ったあなた。
大丈夫です。僕も同じことを思っていました。

環境構築は時間がかかるのです。やっと準備が整ったので、
新しくLaravelのプロジェクトを立ち上げましょう。
ターミナルを起動してください。

mkdir {フォルダ名}コマンドでフォルダを新規作成してください。
次に、cd {フォルダ名}コマンドで作成したフォルダに移動してください。その中で、

composer create-project --prefer-dist laravel/laravel {プロジェクト名} 5.7

こちらのコマンドを打ってプロジェクトを作成してください。
( 時間がかかるのでしばらく待ちましょう。 )

スクリーンショット 2019-09-28 16.11.29.png

無事に作成が完了すると、「○○○○ successfully」みたいな文字列が表示されて$マークが現れます。

今回使うエディタはVisual Studio Codeです。

code {プロジェクト名}コマンドを入力してvscodeでプロジェクトを開きましょう。


ここからはvscodeでの操作になります。
vscode上でSHIFT(↑) + control(^) + backquote(`)を押してください。
vscodeでターミナルが使えるようになります。

npmのインストール

npm installコマンドを実行してください。
このコマンドは作成したLaravelのプロジェクトのフィルダ直下に入っている「package.json」を参照してそこに記載されているパッケージをインストールしています。
このコマンドを実行するとLaravel Mixが使えるようになります。

javascriptのファイルを作成

resourcesフォルダにassetsフォルダを作成してください。
そしてその中にさらにjsフォルダを作ってください。
その中にapp.jssample.jsを作成してください
(resources<assets<js<app.js,sample.js)

スクリーンショット 2019-09-28 17.01.32.png

そして、sample.jsを開いて以下のように記入してください。

sample.js
alert('CAUTION!!');

次に、app.jsを開いて以下のように記入してください。

app.js
require('./sample');

webpack.mix.jsを編集

作成したLaravelプロジェクトの直下に入っているwebpack.mix.jsファイルを開いてください。

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')
    .sass('resources/sass/app.scss', 'public/css');

// 以下を追加
mix.js('resources/assets/js/app.js', 'public/js');

上記の「以下を追加」の下の部分を追加してください。
これはresources/assets/js/app.jsの中身を
public/jsの中に入れる( コンパイル )という意味で、
public/jsで先ほど書いたapp.jsを読み込めるということです。
( app.jsにはsample.jsを読み込めるように
require('./sample')を記入しているのでapp.jsだけ読み込めれば大丈夫ということです。 )

sample.blade.phpを作成

jsファイルを読み込む準備が出来たので読み込みたいページを作ります。
resources/viewsの中にsample.blade.phpを作成してください。

次にターミナル上で以下のコマンドを実行してください。
php artisan make:auth
するとviews/layoutsフォルダが作成されます。

スクリーンショット 2019-09-28 17.46.19.png

sample.blade.phpを開いてください。
そして、以下のように記入してください。

sample.blade.php
@extends('layouts.app')

web.phpを編集

routesフォルダに入っているweb.phpを開いてください。
以下のように一箇所編集してください。

web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('sample');  // ここを編集 (welcome->sample)
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

コンパイルとサーバーの立ち上げ

今まで書いてきたコードを適応させるために以下のコマンドを実行してください。
( 時間がかかるのでしばらく待っていてください。 )
npm run dev
成功したら以下のように表示されます。
(なお、npm run devは開発環境においてのコンパイル方法で余計な機能が付いてきます。実際にサービスとしてデプロイする場合にはnpm run productionコマンドでコンパイルしてください。)
スクリーンショット 2019-09-28 18.02.27.png

次にサーバーを立ち上げます。
php artisan serveコマンドを実行してください。
スクリーンショット 2019-09-28 18.05.14.png

http://127.0.0.1:8000へアクセス

スクリーンショット 2019-09-28 18.09.51.png

無事にアラートが表示されましたか?


参考サイト

Laravel mix事始め
Node.js と npm インストールとアップデート
[Laravel 5.6] Laravel 開発で Javascript を書きたいとき(Laravel Mix の使い方とか)
MacにNode.jsをインストール
Node.js / npm をインストール (Mac環境)

shunyaendoh
セブ島にてエンジニア留学+語学留学をしている大学生です。 勉強していて躓いた箇所や課題をまとめています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした