Laravelでアプリ制作する際にしておきたいこと(モデル追加～Vue.js/Sassの実装まで)

はじめに

ポートフォリオ制作にあたり、Laravelで最初にしておきたい初期設定を覚え書きしておきます。

環境

Laravel バージョン6.8、XAMPP(MySQL)

またプロジェクトは作成している前提です。

プロジェクト作成コマンド(–prefer-distを使うとZip形式で少し速くなるらしい。)

composer create-project "laravel/laravel=6.8" アプリ名 // バージョンは数字を変えれば変更可能。

1.データベースの設定

①phpMyAdminでデータベースを新規作成。

②Laravelプロジェクト側の.envファイルを編集して紐づけ。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=(phpMyAdminで作成したデータベース名)
DB_USERNAME=root //必要に応じて変更
DB_PASSWORD=

③マイグレーションするとデフォルトのユーザーテーブルが作成できる。

$table->bigIncrements('id'); // ユーザーごとのユニークID
$table->string('name'); // 名前
$table->string('email')->unique(); // メールアドレス(ユニーク)
$table->timestamp('email_verified_at')->nullable(); // メール送信機能 (デフォルトはnull。利用時は別途設定が必要)
$table->string('password'); // パスワード
$table->rememberToken(); // トークン(パスワードリセット用)
$table->timestamps(); // タイムスタンプ(updated_atとcreated_at)

カラムを追加したい場合

①マイグレーションする前にマイグレーションファイルを編集

②マイグレーション後は以下のコマンドでカラム追加

php artisan make:migration add_column_to_users_table

③作成されたマイグレーションファイルと対応するモデルの$fillableに追記。

2.タイムゾーンと日本語設定

①config/app.blade.phpを編集

デフォルト

タイムゾーン：アメリカ
言語：英語

変更後

タイムゾーン：日本
言語：日本語

- 'timezone' => 'UTC',
+ 'timezone' => 'Asia/Tokyo,
~~
- 'locale' => 'en',
+ 'locale' => 'ja,
~~

3.エラーメッセージの日本語化

①resources/langにjaフォルダを作成し以下コマンドでファイルを保存。

※windowsだとcurlコマンドが実行できないので、URLにアクセスしてコピペ。笑

$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/auth.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/pagination.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/passwords.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/validation.php

②追加したい項目があればvalidation.phpのattributes欄に追記。

'attributes' => [
'name'=>'名前',
'email'=>'メールアドレス',
'password'=>'パスワード',
'self_introduction'=>'自己紹介文',
],

4.認証機能の追加

コマンドを利用せずに作る方法もあるので使い分けは必要。コマンド使わない場合の説明はコチラがおすすめです。

①laravel/uiのインストール(“1.x”を付けないと最新がインストールされ、Laravelのバージョン6と整合が取れない。)

composer require laravel/ui "1.x" --dev

※composer.jsonに追記されます

②Auth関連ファイルの作成。–authオプションで認証機能も同時に追加する。

php artisan ui bootstrap --auth
php artisan ui vue --auth // こっちだとBootstrapに加えVueの機能も同時に追加される

コマンド後変更される項目

• web.phpにAuth追記
• HomeController※Authフォルダにある諸々のコントローラーはデフォルトで作成されている。
• Viewフォルダ内でauthフォルダに諸々のビュー、layouts/app.blade.php、home.blade.php(ログイン後のホーム画面)

※Userモデルはデフォルトで作成済。

③インストール(node_modulesフォルダが作成される)

npm install // 略すとnpm i

④フロント側のモジュール組み込み。(package.jsonの適用⇒public内にcssなど諸々のファイルが作成される。)

npm run dev

npm install --save-dev cross-env

5.Vue.jsのインストール

①package.jsonに以下を追記。

"devDependencies": {
  "axios": "^0.19",
  "cross-env": "^5.1",
  "laravel-mix": "^4.0.7",
  "lodash": "^4.17.13",
  "resolve-url-loader": "^2.3.1",
  "sass": "^1.15.2",
  "sass-loader": "^7.1.0", 
+ "vue": "^2.6.11",
+ "vue-template-compiler": "^2.6.11"
}

②インストール

npm install

webpack.mix.jsの確認。versionメソッドがない場合は追記。

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js') // トランスパイルされてpublic/jsディレクトリに保存される。
    .sass('resources/sass/app.scss', 'public/css')
    .version(); // mix関数の処理に使う。

③ビルド

Laravel Mix(webpack.mix.js)の読み込みが行われてVueの利用が可能になる。

npm run build

④resources/js/components/Example.vueを作成。

<template>
  <div>
    Hello Example.vue
  </div>
</template>

resources/js/app.jsを以下のように編集

import './bootstrap'
import Vue from 'vue'
import Example from './components/Example'

const app = new Vue({
  el: '#app',
  components: {
    Example
  }
})

トランスパイル(かつJSファイルの変更があれば自動的に変更を適用する)

npm run watch-poll

resources/views/welcome.blade.phpを編集

<div id="app"> // app.jsで記載していた#app、ここにapp.jsで設定した内容のVue.jsファイルがマウントされる。
  <example /> // #app内で指定のコンポーネントを読み込み。
</div>
<script src="{{ mix('js/app.js') }}"></script> // mix関数でコンパイル時に任意のハッシュ(idパラメータ)を付けて常に最新の状態を保つ。

php artisan serve後、http://127.0.0.1:8000へアクセス。以下のように表示されればOK。

6.Sassの導入

※Scss記法での場合です。

Laravel Mixを使う方法とComposerを使う方法の2パターンがあります。

基本はパターン①を利用していれば問題ないかと思います。

パターン①　Laravel Mixでインストール

※上述laravel/uiもしくはVue.jsを実装した場合はnpm installの必要なし。

①Laravel Mixのインストール

package.jsonの記載を確認後実行、後package-lock.jsonが作成される

npm install

webpack.mix.jsを確認(どのファイルをどのディレクトリへコンパイルするかが記載されている。)

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js') // resources/js/app.js を public/js ディレクトリにコンパイル
.sass('resources/sass/app.scss', 'public/css');

②コンパイルの実行

npm run dev
npm run watch // 変更を逐一監視

※npm run devができない場合

sassのバージョンを変更することで解消される。

$ npm uninstall --save-dev sass-loader
$ npm install --save-dev sass-loader@7.1.0

③上述のVue.jsのインストールで使ったwelcome.blade.phpを編集。

(サンプルひどいけどあくまで例としてです。笑)

<link href="{{ asset('css/app.css') }}" rel="stylesheet"> //　scssからトランスパイルされたcssの読み込み
<div id="app">
  <p><example /></p>
</div>
<script src="{{ mix('js/app.js') }}"></script>

p {
  color :red;
}

サイトを更新して確認。npm run watchがされていればアクセスすると自動でトランスパイルされます。

変更が適用されているのを確認できました。

補足

app.scss以外にもファイルを作った場合はwebpack.mix.jsを以下のように追記していけばOKです。

.sass('resources/sass/app.scss', 'public/css');
.sass('resources/sass/appcopy.scss', 'public/css'); // 追記

パターン②　composerでインストール

①composer.jsonを編集

"require-dev": {
"filp/whoops": "~2.0",
"fzaninotto/faker": "~1.4",
"mockery/mockery": "~1.0",
"phpunit/phpunit": "~6.0",
"symfony/thanks": "^1.0",
"panique/laravel-sass": "dev-master"　//　ここを追記
},

②public/index.blade.phpの最終行に追記

scssディレクトリのファイルをcssディレクトリにコンパイル

SassCompiler::run("scss/", "css/");

③public/scssディレクトリを作成する(Sassファイルを格納)

④インストール

composer update

⑤CSSファイルの読み込み(任意のファイルに追記)

<link href="{{ asset('css/styles.css') }}" rel="stylesheet">

asset()関数でpublicディレクトリのファイルを読み込むことが可能。

⑥コンパイルしたいファイルのあるページへアクセス

アクセスすると自動でコンパイルされる。

7.ファイルの整理

アプリ制作を効率よく行うためにファイルの整理及びビューの共通化を行います。

認証機能追加後のコードは以下の記事に別途まとめました。

【Laravel×Vue.js】装飾一切なしの汎用テンプレート～認証周りからAxiosまで～

①resources/viewsディレクトリにlayoutsディレクトリを作成し、その中にapp.blade.phpを作成。

app.blade.phpをアプリ全体で共有するビューとして扱います。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>アプリ名</title>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
  <p><example /></p> // vue.jsを実装している場合なのでここは任意
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>

views/index.blade.phpを編集。

@extendsを使うことで継承ができます。※記述はこれだけです。

@extends('layouts.app')

②routes/web.phpを編集。

Route::get('/', function () {
    return view('index'); // ここを編集
});

再度アクセスすると上述のSassインストール後の表示と同じ表示がされます。

8.テーブル・モデル・コントローラの作成

※モデル名などは仮です。

工程1.テーブル・モデルの作成

①マイグレーションファイルの作成

php artisan make:migration create_posts_table --create=posts

–createオプションでテーブル名を指定すると新規でテーブル作成。参照　※なくても問題なく動作。

②create_posts_tableの編集(実装したい機能に応じて)

Schema::create('listings', function (Blueprint $table) {
  $table->bigIncrements('id');
+ $table->string('title');
+ $table->integer('user_id');
  $table->timestamps();

+ $table->foreign('user_id')->references('id')->on('users'); //外部キー制約
});

③マイグレートでテーブルに反映

php artisan migrate

④モデルの作成(テーブルの単数形で自動的に紐づけされる)

php artisan make:model Post

工程2.コントローラの作成

①コントローラの作成

php artisan make:controller PostsController

②PostsControllerの編集

<?php
namespace App\Http\Controllers;
use App\Post; // モデルの追加
use Illuminate\Http\Request;

class PostsController extends Controller
{
        public function index()
    {
        return view('index'); // indexアクションされた際に返すビューを記載
    }
}

<?php
Route::get('/','PostsController@index');

トップページに再度アクセス。(表示変わらなければOK。)

その他

デプロイ

デプロイは手軽にするならHerokuが良さげ。

コチラの教材が参考になる。

追記：こちらも参考になる。両方ともTechpitの教材。

Font Awesomeのインストール

npm install --save-dev @fortawesome/fontawesome-free

npm install後にresources/sass/app.scssに追記。

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import '~@fortawesome/fontawesome-free/scss/solid'; 
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

参考

GETとPOSTの違いについて

LaravelでSassを利用する

Laravel5.8は、マイグレーションスタブの主キーのデフォルトが、increments()からbigIncrements()になった

LaravelにSCSSの導入方法　※npm installでの実装

LaravelにSassを3分で導入する　※composerでの実装

Laravel/uiを用いた場合のapp.scssの使い方