- 投稿日:2021-01-12T19:19:56+09:00
Nuxt / Laravel(Docker)で作るシンプルなCRUDアプリ
タイトルの通り、フロントはNuxt、バックエンドはLaravelでシンプルなCRUDアプリを制作し、herokuにデプロイしました。それぞれの具体的な解説は別の記事にまとめていきたいと思っています。
NuxtはSSR(ユニバーサル)、API認証にsanctumを使用しています。
機能
- バリデーション: コメントを投稿したユーザー(本人)のみ編集と削除ができる
- いいね機能: 自分がいいねしたボタンは色が黄色に変化する。再び押すと取り消される。
課題
- エラーハンドリング
- 登録フォームでのエラーメッセージもっと作り込む必要がある。 当初はvee-validate(プラグイン)を導入したが、使い勝手が悪かったため現状はシンプルなメッセージで対応している。
- 前までは動いていたはずなのに、ケアレスミスでいつの間にか動かなくなっている、という状況が発生。 時間のロスなので、テストの重要性を感じた。 それぞれの機能を疎結合にしてテストしやすくしたい。
- Nuxt
- 非同期の理解を深め有効に活用したい。
- 監視プロパティーを活用し、よりインタラクティブな処理を書きたい。
- AWSにデプロイしたい。
参考
- 投稿日:2021-01-12T18:33:18+09:00
DLしたLaravelの環境構築方法(Linux)
【前提条件】composerがインストール済み Lamp環境が正常に構築できている。
githubからDLしたLaravelプロジェクトをとりあえず動かせる
用にするまでの設定します。1、laravelプロジェクトをDLしてみる
ギットハブにアクセスしてとりあえず適当なLaravelのプロジェクトをDLしてみましょう【プロジェクト名testlaravel】
2、composerをインストールする
DLしたtestlaravelプロジェクトのserveを起動しようとするとこのようなエラーが出てきます。
/var/www/html/testlaravel$ php artisan serve こんなエラーが出てきます↓ PHP Warning: require(/var/www/html/testlaravel/vendor/autoload.php): failed to open stream: No such file or directory in /var/www/html/testlaravel/artisan on line 18 Warning: require(/var/www/html/testlaravel/vendor/autoload.php): failed to open stream: No such file or directory in /var/www/html/testlaravel/artisan on line 18 PHP Fatal error: require(): Failed opening required '/var/www/html/testlaravel/vendor/autoload.php' (include_path='.:/usr/share/php') in /var/www/html/testlaravel/artisan on line 18 Fatal error: require(): Failed opening required '/var/www/html/testlaravel/vendor/autoload.php' (include_path='.:/usr/share/php') in /var/www/html/testlaravel/artisan on line 18Composerが入っていないためLaravelプロジェクトが起動できないのでcomposerをインストールします
/var/www/html/testlaravel# composer install3、composerのインストールが完了したら
composerのインストールが完了したら早速testlaravelプロジェクトを立ち上げてみましょう
/var/www/html/testlaravel# php artisan serve立ち上がることは立ち上がりますが、ここで必ず500サーバーエラーが発生します。
4、.envファイルとAPP_KEYの設定を行う
ここでエラーが発生する要因としてlaravelに.envファイルが作成されていない
APP_keyが作成されていない事が要因でサーバーエラーが発生しています。まずは.envファイルを作成してみます。コマンドで以下の用に入力します
cp .env.example .envこの段階ではまだenvファイルは作成されてませんのでAPP_KEYの作成をしてみます
php artisan key:generatevi .envと入力して無事.envファイルが作成されていれば完成です
↓こんな奴ですAPP_NAME= APP_ENV= APP_KEY= APP_DEBUG= APP_URL= LOG_CHANNEL= DB_CONNECTION= DB_HOST= DB_PORT= DB_DATABASE= DB_USERNAME= DB_PASSWORD= (以下略)
- 投稿日:2021-01-12T12:42:55+09:00
【Laravel】ローカルにLaravelのプロジェクトを作成しページを表示する方法。
ローカルにLaravelのプロジェクトを作成しページを表示する方法。思ってた以上に手軽だった、、
- composerのインストール
- laravelのインストール
- laravelサーバーの起動
- ディレクトリ構造
- ルーティングの追加
- ビューの作成とルーティングの変更
- マイグレーションの作成
- DBにテーブルを作成(sqlite3)
- テーブルの確認
laravelによるページの表示までなら手順3で完了。3以降は補足。
1. composerのインストール
2. laravelのインストール
$ composer create-project laravel/laravel [プロジェクト名] --prefer-dist指定したプロジェクト名でフォルダが作成される。
・
--prefer-dist
オプション
高速ダウンロード用。このオプションをつけると圧縮されていないファイルを優先してダウンロードする。また、すべてのVSC(バージョン管理ソフト)を取得しないので軽量となる。
3. laravelサーバーの起動
php artisan serve
$ php artisan serve Starting Laravel development server: http://127.0.0.1:8000表示されたURLにアクセス
http://127.0.0.1:8000
上記画面が表示され完了。
サーバーの終了は
ctrl + c
。
(補足)artisanとは?
アルチザンとは職人の意味。
PHPではサーバーの起動やコントローラーを作成したりなど専門的な処理を実行してくれるため職人を意味するartisan
を使っていると想定される。
4. ディレクトリ構造
作成したプロジェクトのディレクトリ構造は以下のようになる。
5. ルーティングの追加
新たに、usersというパスでページを表示できるようにする。
ルーティングか書かれている routes/web.phpを開く。
コードの最後に以下を追加。
Route::get('users', function() { return 'Users!'; });これで、http://127.0.0.1:8000/users
にアクセスすると、Users!というテキストが表示される。usersというルートが渡されたら、「Users!」を返すという意味。
(補足)デフォルトのルート
Route::get('/', function () { return view('welcome'); });デフォルトで記載されている上記処理は、ルートパスへの要求がきたら、welcome.blade.phpというファイルを返すという意味。
拡張子
.blade.php
はlaravelにおけるviewファイル。
6. ビューの作成とルーティングの変更
自分でビューファイル(.balde.php)を作成し表示してみる。
.balde.phpファイルの中で別の.balde.phpファイルを呼び出すことも可能。今回は、
users.blade.php
の中でlayout.blade.php
を呼び出してみる。ビューファイルは、resources/viewsフォルダ配下に設置する。
layout.blade.php<html> <body> <h1>Laravelクイックスタート</h1> @yield('content') </body> </html>users.blade.php@extends('layout') @section('content') Users! @stop
@
がつく記述をディレクティブとよび、HTMLと同時に記述することでphpを実行することができる。・
@extends('layout')
ビューの拡張。layout.blade.phpを呼び出す。・
@section('セクション名')
内容@stop
セクションの作成。
引数内の変数に値を代入する処理。@yield('セクション名')
で定義したセクションの内容を読み込むことができる。セクションの終わりは
@stop
で指定(必須)。エイリアスである@endsection
でもOK。
作成したビューファイルを表示するようにルーティングを変更する。先ほどのusesのルーティングの戻り値を
view('ビューファイル名')
とする。Route::get('users', function() { return view('users'); });
以上で作成したビューファイルを表示できる。
7. マイグレーションファイルの作成
LaravelでDBを扱うために必要なマイグレーションファイルを作成する。
laravelはマイグレーションファイルの内容を元にDB操作を行う。
マイグレーションファイルにはDBで使用するカラムの定義が入る。・
php artisan make:migration create_[テーブル名]_table
$ php artisan make:migration create_flights_table Created Migration: 2021_01_12_055029_create_flights_table実行すると、database/migrationsフォルダ配下に指定したテーブル名のマイグレーションファイルが作成される。
作成したマイグレーションファイル名はクラス名に直結する。
yyy_mm_dd_sec_create_flights_table.phpclass CreateFlightsTable extends Migration
create_と_tableの意味
ちなみに、先頭と末尾の
create_
と_table
はなくてもマイグレーションファイルを作成できる。例$ php artisan make:migration test Created Migration: 2021_01_12_060050_test作成したファイルがマイグレーションファイルであることを明示的に示すために
create_テーブル名_table
とするのが一般的。
マイグレーションファイルの構造
マイグレーションファイルには指定したテーブル名のクラス(移行クラスと呼ぶ)が作成され、中にupとdownの2つのメソッドが用意される。
・upメソッド:
DBにテーブルやカラムを追加するメソッド。・downメソッド:
以前の状態に戻すメソッド。マイグレーションファイルの中身<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateFlightsTable extends Migration { //マイグレーションの実行 public function up() { Schema::create('flights', function (Blueprint $table) { $table->id(); $table->timestamps(); }); } //マイグレーションを戻す public function down() { Schema::dropIfExists('flights'); } }
upメソッドの中身
public function up() { Schema::create('flights', function (Blueprint $table) { $table->id(); $table->timestamps(); }); }Schemaファサードを使ってcreateメソッドを実行し、カラムにidとタイムスタンプをもつテーブルflightsを作成する処理となる。
・
Blueprint
テーブルにカラムやインデックスを追加するために使用するインスタンス。・
$table
テーブルの名前が入った変数
ファサードとは
ファサードとはクラスの中のメソッドをインスタンスを呼び出さずに実行できる機能。
使用するメリットはコードを単純化できること。
・
use Illuminate\Support\Facades\ファサード名;
冒頭に記述してファサードを使えるようにする。ファサードの本来の意味は「建物の正面」。人まとまりのプログラミングを建物とすると、その建物全てを用意せずとも、正面さえ用意すればそのプログラムが使えるようにすると言ったところ。
▼主なファサード
Schema以外にも、Route, Session, Request, Viewなどがある。
ヘルパー関数とファサードの違い
ファサードと似た処理でヘルパー関数がある。
ヘルパー関数はファサードを更に縮めたコード。▼ビューファイルの呼び出し
profile.blade.phpを呼び出す場合、以下2つは同じ処理になる。・Viewファサードでmakeメソッドを使う
return View::make('profile');
・ヘルパー関数を使う
return view('profile');
ファサードを使うよりヘルパー関数を使う方がわかりやすい。
テーブルにカラム追加
Schemaファサードのcreateメソッドを使って、テーブルにカラムを追加することができる。
・
$table->型('カラム名')->カラム修飾子()
public function up() { Schema::create('flights', function (Blueprint $table) { $table->id(); $table->string('name')->unique(); $table->string('email')->nullable(); $table->integer('age'); $table->boolean('membership')->default(false); $table->timestamps(); }); }ユーザー情報用に、name, email, age, membeshipを追加。
必要に応じてカラム修飾子をつける。カラム修飾子
指定したカラムに条件を追加する。
・nullable()
nullを許容する。・default($value)
デフォルト値を指定する。型とカラム修飾子はかなりの種類がある。一覧はlaravel公式ページを参考。
インデックス修飾子
カラム修飾子と似ている。型に条件を追加する。
主キーや重複の禁止を指定できる。上記設定では、
unique()
が該当。
8. DBにテーブルを作成(sqlite3)
laravelとDBを接続する。
簡易的なテストのためDBはsqlite3を使用。(macは標準インストール済み)step1. .envファイルの変更
.env(変更前)DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=↓ 以下に変更
.env(変更後)DB_CONNECTION=sqlite
step2. database.sqliteの作成
database/database.sqliteを作成する。
プロジェクトのルートディレクトリで以下を実行。
$ touch database/database.sqlite
step3. マイグレーションの実行
・
php artisan migrate
作成したマイグレーションファイルをベースにDBにテーブルを作成する。$ php artisan migrate:refresh Rolling back: 2019_08_19_000000_create_failed_jobs_table Rolled back: 2019_08_19_000000_create_failed_jobs_table (2.46ms) Rolling back: 2014_10_12_100000_create_password_resets_table Rolled back: 2014_10_12_100000_create_password_resets_table (0.98ms) Rolling back: 2014_10_12_000000_create_users_table Rolled back: 2014_10_12_000000_create_users_table (0.84ms) Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (1.82ms) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (1.36ms) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (1.36ms) Migrating: 2021_01_12_074652_create_flights_table Migrated: 2021_01_12_074652_create_flights_table (1.38ms)以上でDBの作成が完了。
マイグレーションファイルを変更したとき
マイグレーションファイルを変更した場合は、
refresh
をつけて実行する。・
$ php artisan migrate:refresh
9. テーブルの確認
マイグレーションでDBに正しくテーブルが作成できたか確認する。
・
sqlite> .table
#sqlite3を起動 $ sqlite3 SQLite version 3.28.0 2019-04-15 14:49:49 Enter ".help" for usage hints. #テーブル一覧を表示 sqlite> .table failed_jobs password_resets users migrations flights
- 投稿日:2021-01-12T12:30:55+09:00
【Laravel】composerインストール手順と注意点。composerコマンドを実行できるようにする。
Laravelのcomposerをインストールし、composerコマンドを実行できるようにする方法。
1. (macの場合)homevrewとopensslのインストール
composerをインストールするためにはopenSSLでの通信が必要だが、macOS 10.12 (Sierra) 以降の macOS では、 デフォルトで OpenSSL がインストールされていない。
opneSSLをインストールするためには、homebewというパッケージ管理ツールをインストールする必要がある。
#homebrewのインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" #opensslのインストール brew install openssl
2. composer.pharのダウンロード
composerの公式ページに沿ってcomposer.pharをローカル環境にダウンロードする。
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');"2行目のハッシュ値はバージョンがアップデートされるごとに変わるので、公式ページから最新版をコピー
実行が完了すると、ローカルにcomposer.pharが作成される。
$ ls composer.phar
▼注意点
コードをコピーする場合は原文のページで行うこと。エラーが出てしまう場合はこちらを参照
3. グローバルのパスを通す
composer
コマンドをどこからでも実行できるようにファイルをグローバルのパスが通ったディレクトリに移動する。mv composer.phar /usr/local/bin/composer
4. composerコマンドの実行
composer --version
で、composerが実行できるかを確認。$ composer --version Composer version 2.0.8 2020-12-03 17:20:38以上でcomposerのインストールが完了。
- 投稿日:2021-01-12T11:53:53+09:00
【Laravel】composerインストール時のエラー 内容と対処法。Googleの自動翻訳してませんか?
Laravelの導入にあたりPHPのライブラリ管理ツールのcomposerをインストールしようとするとエラーが発生する。
インストールのコードは公式サイトを参照している。
公式サイトのインストール手順
公式サイトより以下コードを使用。
公式サイト(日本語翻訳ページ)php -r "copy( 'https://getcomposer.org/installer'、'composer-setup.php');" php -r "if(hash_file( 'sha384'、 'composer-setup.php')=== '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3'){echo 'インストーラー検証済みphp ');} echo PHP_EOL; " php composer-setup.php php -r "unlink( 'composer-setup.php');"
解決方法まとめ
エラー解消のために実行することは2つ。
(1) homebrewでopensslのインストール。
(2) Google翻訳を解除し原文のコードを使う。原文のコードphp -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');"詳細は以下ご参照。
1行目のエラー
$ php -r "copy( 'https://getcomposer.org/installer'、'composer-setup.php');" Parse error: syntax error, unexpected ''https://getcomposer.org/insta' (T_CONSTANT_ENCAPSED_STRING) in Command line code on line 1>エラー内容
Parse error: syntax error, unexpected ''https://getcomposer.org/insta' (T_CONSTANT_ENCAPSED_STRING) in Command line code on line 1これはOpenSSLがインストールされていないために発生するエラー。
macOS 10.12 (Sierra) 以降の macOS では、 デフォルトで OpenSSL がインストールされていない。
解決策
Homebrewをインストールして、opensslをインストールすればOK。
#homebrewのインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" #opensslのインストール brew install openssl上記実行後に1行目を再度実行すればOK。
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
2行目のエラー
続いて2行目のコードを実行してもエラーが発生する。
エラー$ php -r "if(hash_file( 'sha384'、 'composer-setup.php')=== '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3'){echo 'インストーラー検証済みphp ' );} echo PHP_EOL; " Parse error: syntax error, unexpected ''sha384'' (T_CONSTANT_ENCAPSED_STRING) in Command line code on line 1>エラー内容
Parse error: syntax error, unexpected ''sha384'' (T_CONSTANT_ENCAPSED_STRING) in Command line code on line 1
解決策
google翻訳した状態でコードを貼り付けたことでシンタックスエラーが発生している。
原文に戻し、実行すればOK。
原文のコードphp -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"composerのバージョンによってコード内容が異なるため、最新コードは公式ページで確認のこと。
成功した場合$ php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" Installer verifiedコードが実行されると
Installer verified
が表示される。3行目は問題なし
3行目は指定通りのコードを実行すればエラーが発生せず実行できる。
3行目の処理結果$ php composer-setup.php All settings correct for using Composer Downloading... Composer (version 2.0.8) successfully installed to: /Users/s01386/projects/composer.phar Use it: php composer.phar4行目のエラー
こちらも2行目と同じくgoogle翻訳されたことが原因。原文に戻してコードを実行すれば処理できる。
php -r "unlink('composer-setup.php');"以上でcomposerのインストールが完了。
翻訳後のコード比較
2行目はコード内に日本語が混入しているのでエラー発生はわかるが、4行目のコードは翻訳前後で英語のみのため、全く同じに見える、、
比較php -r "unlink('composer-setup.php');" #翻訳前(原文) php -r "unlink( 'composer-setup.php');" #翻訳後比較してみると、翻訳後に空白が追加されていることがわかる、、
Google翻訳は便利だけどコードの場合は注意が必要。
- 投稿日:2021-01-12T10:21:55+09:00
Laravel,Graghql,Lighthouseで複数カラムのバリデーション
環境
Laravel 6.18.6
lighthouse: 4.11.0コード
user.graghql# 下記の定義はサンプルです。 createUser ( user_name: String! password: String! ): Userapp\Graghql\Directives\Validations\createUserValidation.php/** * @return mixed[] */ public function rules(): array { return [ "foo" => [ new Bar($this->args['bar']) ] ]; }結論
$this->args['foo'];で取れる。