目次
はじめに
ポートフォリオ制作にあたり、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モデルはデフォルトで作成済。
上記コマンドでVue.jsをインストールすると、jsディレクトリ内にVue.js用のファイルが一式生成される。
・components/ExampleComponent.vue
・app.jsへVueインスタンスが追記
③インストール(node_modulesフォルダが作成される)
npm install // 略すとnpm i
④フロント側のモジュール組み込み。(package.jsonの適用⇒public内にcssなど諸々のファイルが作成される。)
npm run dev
①cross-envが見つからない
npm install --save-dev cross-env
②resources/sass/app.scssのエラー
ファイル内を一旦全削除。
※よくコンパイル先のファイルの記述によってエラーが起きるので随時記述を見直していけば解消されます。
5.Vue.jsのインストール
Vue.jsはLaravelディレクトリ直下のwebpack.mix.js(Laravel Mix)でresources/js/app.js(Vue.js関連をインポートした心臓部)をトランスパイル。
public/js下にapp.jsとして保存。
そのファイルをblade側で読み込むことで連携させます。
①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>
④resources/sass/app.scssを編集
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.ファイルの整理
アプリ制作を効率よく行うためにファイルの整理及びビューの共通化を行います。
認証機能追加後のコードは以下の記事に別途まとめました。
①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アクションされた際に返すビューを記載 } }
③web.phpを編集(⑦で記載の内容を上書きします。)
<?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';
参考
Laravel5.8は、マイグレーションスタブの主キーのデフォルトが、increments()からbigIncrements()になった
LaravelにSCSSの導入方法 ※npm installでの実装
LaravelにSassを3分で導入する ※composerでの実装
コメントを残す