こちらは10本の記事で構成されています ①Vue.js & Laravel（環境構築） ②Vue.js & Laravel（CRUDシステムの準備） ③Vue.js & Laravel（Read...データベースからデータを取得） ④Vue.js & Laravel（Create...データベースにデータを保存） ⑤Vue.js & Laravel（Update…データベースのデータを更新） ⑥Vue.js & Laravel（Delete…データベースのデータを削除） ⑦Vue.js & Laravel（リアルなダミーデータを大量に挿入） ⑧Vue.js & Laravel（検索機能の実装） ⑨Vue.js & Laravel（ページャーの実装） ⑩Vue.js & Laravel（認証機能の実装） 【目標】データベースにAPIでデータを送信し、保存する 【手順】①フロントエンドからAPIにリクエストする②APIからコントローラーにリクエストを送る③コントローラーからモデルにリクエストを送る④モデルからデータベースに保存する ①フロントエンドからAPIにリクエストする /resources/js/components/task/Task.vue <template> <div class="taskComponent"> + <form @submit.prevent="taskCreate"> + 緊急：<input v-model="newtask.emergency" type="checkbox"><br> + 内容：<input v-model="newtask.content" type="text"> + <button>create</button> + </form> + <hr> <ul> <li v-for="(task, index) in tasks" :key="index"> 緊急：<input type="checkbox" v-model="task.emergency"><br> 内容：<span :class="{red:task.emergency}">{{task.content}}</span> </li> </ul> </div> </template> <script> export default { data() { return { + newtask: { + content: "", + emergency: false, + }, tasks:[], }; }, methods: { + taskCreate() { + if (this.newtask.content != "") { + axios.post("/api/task/create", this.newtask).then((res) => { + this.newtask.emergency = false; + this.newtask.content = ""; + this.taskRead(); + }); + } + }, taskRead() { axios.get("/api/task/read").then((res) => { this.tasks = res.data; }); }, }, mounted() { this.taskRead(); }, }; </script> <style lang="scss" scoped> li{ list-style: none; margin-bottom: 15px; } .red{ color: red; } </style> これで「①フロントエンドからAPIにリクエストする」が達成されました ②APIからコントローラーにリクエストを送る /Applications/MAMP/htdocs/hoge/routes/api.php <?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; + Route::post('/task/create', 'TaskController@create'); Route::get('/task/read', 'TaskController@read'); これで「②APIからコントローラーにリクエストを送る」が達成されました ③コントローラーからモデルにリクエストを送る /app/Http/Controllers/TaskController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Task; class TaskController extends Controller { + public function create(Request $request) + { + Task::create([ + 'emergency' => $request->emergency, + 'content' => $request->content, + ]); + } public function read() { $data = Task::get(); return $data; } } これで「③コントローラーからモデルにリクエストを送る」が達成されました ④モデルからデータベースに保存する /app/Task.php <?php namespace App; use Illuminate\Database\Eloquent\Model; class Task extends Model { + protected $fillable = [ + 'emergency', + 'content' + ]; } これで「④モデルからデータベースに保存する」が達成されました 【達成】今回の目標「データベースにAPIでデータを送信し、保存する」が達成されました。 次回↓↓↓↓⑤Vue.js & Laravel（Update…データベースのデータを更新）

Dockerを用いてlaravelの環境構築を試みている時に起こったエラーです。 開発環境 Docker 20.10.5 docker-compose 1.28.5 php 7.2 laravel 7.30.4 Composer 2.0.12 MySQL 8.0 nginx 1.15.12-alpine エラー Dockerで作成したコンテナに入り、MySQLに接続するために php artisan migrateを実行するとターミナルに下記のエラーが表示される。 Illuminate\Database\QueryException SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known (SQL: select * from information_schema.tables where table_schema = development and table_name = migrations and table_type = 'BASE TABLE') at vendor/laravel/framework/src/Illuminate/Database/Connection.php:671 667| // If an exception occurs when attempting to run a query, we'll format the error 668| // message to include the bindings with SQL, which will make this exception a 669| // lot more helpful to the developer instead of just the database's errors. 670| catch (Exception $e) { > 671| throw new QueryException( 672| $query, $this->prepareBindings($bindings), $e 673| ); 674| } 675| +36 vendor frames 37 artisan:37 Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput)) 解決策 調べてみると上記エラーは.envでホスト名が間違ってる時に出るものだそうです。 .env DB_CONNECTION=mysql DB_HOST=db DB_PORT=3306 DB_DATABASE=laravel_local DB_USERNAME=laravel_user DB_PASSWORD=laravel123 docker-compose.yml version: '3' services: #省略 mysql: image: mysql:8.0 container_name: app_db ports: - 3306:3306 environment: MYSQL_DATABASE: laravel_local MYSQL_ROOT_USER: root MYSQL_ROOT_PASSWORD: root MYSQL_USER: laravel_user MYSQL_PASSWORD: laravel123 TZ: 'Asia/Tokyo' volumes: - ./docker-config/mysql/data:/var/lib/mysql - ./docker-config/mysql/my.cnf:/etc/mysql/conf.d/my.cnf depends_on: - mysql-volume mysql-volume: image: busybox volumes: - ./docker-config/mysql/data:/var/lib/mysql #省略 .envの中のDB_HOST=dbが誤ってるということなので調べてみると、 DB_HOSTはserviceの名前らしいです。 今回はdocker-compose.ymlでmysqlと命名しているので合わせる必要があります。 .env DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=laravel_local DB_USERNAME=laravel_user DB_PASSWORD=laravel123 これで再度コンテナ内でphp artisan migrateを実行すれば上記のエラーは解消されます。 おまけ（SQLSTATEエラー) このエラーは.envのどこの設定が間違っているかで表示されるものが違うんじゃないかと思い、ロールバックして試してみます。 DB_CONNECTIONが異なる場合 Database connection [DB] not configured. DB_PORTが異なる場合 SQLSTATE[HY000] [2002] Connection refused DB_HOSTが異なる場合 SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known DB_DATABASEが異なる場合 SQLSTATE[HY000] [1045] Access denied for user 'laravel_user'@'%' (using password: YES) DB_USERNAMEが異なる場合 SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client DB_PASSWORDが異なる場合 SQLSTATE[HY000] [1045] Access denied for user 'laravel_user'@'%'

初めに プロジェクトの一環として、先輩から任されたツール作成。 この手のタスクにもだいぶ慣れ、サクッとLaravelでコードを書き上げる。 いつも通りローカルで念入りに動作確認し、無事に動くことを確認する。 そしてAWS上の保守環境へ適用するためにパイプラインを実行。 いざ画面で動作確認... すると、エラー画面へ遷移。 何度やっても「申し訳ありませんが、再度操作をやり直してください」。 「なぜ？」と思いながらCloudWatchへ。 ログ「そんなファイルないぞ」 私「え？」 結論 ファイル名の大文字小文字は正確に打ちましょう。 OSによっては読み込まれないことがあります。 ディレクトリにも大文字小文字を不用意に混ぜないようにしましょう。 詳しいお話 長々と冒頭を書いたが、なんてことはない、ファイル名（というかフォルダ名）の打ち間違いである。 今回のエラーはこれ。とってもシンプル。 　View [pages.tool.TestView] not found. そして引っかかったのがコントローラー内の以下のコード。 TestController.php return view('pages.tool.TestView', ['action' => 'get']); 実際のファイル構造はこんな感じ views └pages 　 └Tool 　 　 └ TestView.blade.php ...皆さんもわかっただろう。 "tool"と"Tool"の間違いという、ひっっじょうにしょうもないミスである。 「じゃあなんでローカルだと動いたの？」という話であるが、 どうやらローカルとAWS（EC2）のOSの違いが原因だったらしい。 私のローカル環境 　PHPのビルドインサーバーを利用。PCはWindows。 EC2の設定 　インスタンスはLinux指定。 ここでこちらの記事から引用させていただくと、 PHPは文法においては大文字小文字を区別しない（ケースインセンシティブ）。 しかしファイル名となると、 これは実はPHPは関係なく、ファイルシステム(OS)に依存します。 一般的にWindowsやmacOSのデフォルトのファイルシステムではファイル名はケースインセンシティブ(大文字小文字を区別しない)、GNU/Linuxではケースセンシティブ(大文字小文字を区別する)です。 つまり、PHPの文法上ではifだろうがIfだろうがIFだろうが許容されるから ファイル名も大文字小文字関係ない...というわけではなく、 ファイル名は大文字小文字をしっかり区別しうるのだ。 そして今回は、ローカル環境がケースインセンシティブなWindowsだったのに対し、 保守環境がケースセンシティブなLinuxだったため、 ローカルではちゃんと動いたにもかかわらず保守環境上でファイルが正しく読み込まれなくなったという話。 まとめ ファイルやフォルダの命名規則はちゃんと守って、 大文字小文字はちゃんと区別しておきましょう。 特に今回は、コントローラーをtoolフォルダに、ビューをToolフォルダに、という あまりにがさつすぎる管理をしていた自分が100％悪いという結果に。 リリース前でほんとよかった... OSによる文字区別については、経験のあるエンジニアの皆さんには常識かもしれないが 自分にとってはかなり衝撃的だった。 ちゃんとサーバーやOSについても理解を深めたいと思った次第である。 参考ページ ・ローカル環境（XAMPP）では読み込めたのに、サーバーにアップすると読み込めないファイルが…。原因はファイル名にある？(https://incloop.com/file-case-differences/) ・Q. PHPは大文字小文字を区別するか？(https://qiita.com/tadsan/items/6c6329eeb43929271119)

【目標】データベースからAPIでデータを取得し、画面に表示させる 【手順】①フロントエンドからAPIにリクエストする②APIからコントローラーにリクエストを送る③コントローラーからデータベースにリクエストを送る④レスポンスを画面に表示させる ①フロントエンドからAPIにリクエストする /resources/js/components/task/Task.vue <template> <div class="taskComponent"> タスク画面 </div> </template> <script> export default { data() { return { + tasks:[], }; }, methods: { + taskRead() { + axios.get("/api/task/read").then((res) => { + this.tasks = res.data; + }); + }, }, mounted() { + this.taskRead(); }, }; </script> <style lang="scss" scoped> </style> これで「①フロントエンドからAPIにリクエストする」が達成されました ②APIからコントローラーにリクエストを送る /routes/api.php <?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; - /* - |-------------------------------------------------------------------------- - | API Routes - |-------------------------------------------------------------------------- - | - | Here is where you can register API routes for your application. These - | routes are loaded by the RouteServiceProvider within a group which - | is assigned the "api" middleware group. Enjoy building your API! - | - */ - Route::middleware('auth:api')->get('/user', function (Request $request) { - return $request->user(); - }); + Route::get('/task/read', 'TaskController@read'); これで「②APIからコントローラーにリクエストを送る」が達成されました ③コントローラーからデータベースにリクエストを送る /app/Http/Controllers/TaskController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Task; class TaskController extends Controller { + public function read() + { + $data = Task::get(); + return $data; + } } これで「③コントローラーからデータベースにリクエストを送る」が達成されました ④レスポンスを画面に表示させる /resources/js/components/task/Task.vue <template> <div class="taskComponent"> - タスク画面 + <ul> + <li v-for="(task, index) in tasks" :key="index"> + 緊急：<input type="checkbox" v-model="task.emergency"><br> + 内容：<span v-if="!task.edit" :class="{red:task.emergency}">{{task.content}}</span> + </li> + </ul> </div> </template> <script> export default { data() { return { tasks:[], }; }, methods: { taskRead() { axios.get("/api/task/read").then((res) => { this.tasks = res.data; }); }, }, mounted() { this.taskRead(); }, }; </script> <style lang="scss" scoped> + li{ + list-style: none; + margin-bottom: 15px; + } + .red{ + color: red; + } </style> これで「④レスポンスを画面に表示させる」が達成されました 【達成】今回の目標「データベースからAPIでデータを取得し、画面に表示させる」が達成されました。

こちらは10本の記事で構成されています ①Vue.js & Laravel（環境構築） ②Vue.js & Laravel（CRUDシステムの準備） ③Vue.js & Laravel（Read...データベースからデータを取得） ④Vue.js & Laravel（Create...データベースにデータを保存） ⑤Vue.js & Laravel（Update…データベースのデータを更新） ⑥Vue.js & Laravel（Delete…データベースのデータを削除） ⑦Vue.js & Laravel（リアルなダミーデータを大量に挿入） ⑧Vue.js & Laravel（検索機能の実装） ⑨Vue.js & Laravel（ページャーの実装） ⑩Vue.js & Laravel（認証機能の実装） 【目標】データベースからAPIでデータを取得し、画面に表示させる 【手順】①フロントエンドからAPIにリクエストする②APIからコントローラーにリクエストを送る③コントローラーからデータベースにリクエストを送る④レスポンスを画面に表示させる ①フロントエンドからAPIにリクエストする /resources/js/components/task/Task.vue <template> <div class="taskComponent"> タスク画面 </div> </template> <script> export default { data() { return { + tasks:[], }; }, methods: { + taskRead() { + axios.get("/api/task/read").then((res) => { + this.tasks = res.data; + }); + }, }, mounted() { + this.taskRead(); }, }; </script> <style lang="scss" scoped> </style> これで「①フロントエンドからAPIにリクエストする」が達成されました ②APIからコントローラーにリクエストを送る /routes/api.php <?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; - /* - |-------------------------------------------------------------------------- - | API Routes - |-------------------------------------------------------------------------- - | - | Here is where you can register API routes for your application. These - | routes are loaded by the RouteServiceProvider within a group which - | is assigned the "api" middleware group. Enjoy building your API! - | - */ - Route::middleware('auth:api')->get('/user', function (Request $request) { - return $request->user(); - }); + Route::get('/task/read', 'TaskController@read'); これで「②APIからコントローラーにリクエストを送る」が達成されました ③コントローラーからデータベースにリクエストを送る /app/Http/Controllers/TaskController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Task; class TaskController extends Controller { + public function read() + { + $data = Task::get(); + return $data; + } } これで「③コントローラーからデータベースにリクエストを送る」が達成されました ④レスポンスを画面に表示させる /resources/js/components/task/Task.vue <template> <div class="taskComponent"> - タスク画面 + <ul> + <li v-for="(task, index) in tasks" :key="index"> + 緊急：<input type="checkbox" v-model="task.emergency"><br> + 内容：<span :class="{red:task.emergency}">{{task.content}}</span> + </li> + </ul> </div> </template> <script> export default { data() { return { tasks:[], }; }, methods: { taskRead() { axios.get("/api/task/read").then((res) => { this.tasks = res.data; }); }, }, mounted() { this.taskRead(); }, }; </script> <style lang="scss" scoped> + li{ + list-style: none; + margin-bottom: 15px; + } + .red{ + color: red; + } </style> これで「④レスポンスを画面に表示させる」が達成されました 【達成】今回の目標「データベースからAPIでデータを取得し、画面に表示させる」が達成されました。 次回↓↓↓↓④Vue.js & Laravel（Create…データベースにデータを保存）

三項演算子とNull合体演算子 ?: if ($Foo) { echo $Hoge } else { echo $Fuga } は echo $Foo ? $Hoge : $Fuga とかける ?? if (isset($Foo)) { echo $Foo } else { echo $Hoge } は echo $Foo ?? $Hoge とかける

はじめに phpを使う上でよくemptyやis_null、issetを使うが、完全に条件を覚えていないので簡単に見返せるよう、自分用に書く。 empty emptyは厳しい bool $checkVal=1 false $checkVal='1' false $checkVal=0 true $checkVal='0' true $checkVal=[] true $checkVal=[0] false $checkVal true $checkVal='' true $checkVal=null true is_null is_nullはゆるい bool $checkVal=1 false $checkVal='1' false $checkVal=0 false $checkVal='0' false $checkVal=[] false $checkVal=[0] false $checkVal true $checkVal='' false $checkVal=null true if ifは厳しい bool $checkVal=1 true $checkVal='1' true $checkVal=0 false $checkVal='0' false $checkVal=[] false $checkVal=[0] true $checkVal false $checkVal='' false $checkVal=null false isset issetはゆるい bool $checkVal=1 true $checkVal='1' true $checkVal=0 true $checkVal='0' true $checkVal=[] true $checkVal=[0] true $checkVal false $checkVal='' true $checkVal=null false 総評 isがついてたらゆるい empty is_null if isset $checkVal=1 false false true true $checkVal='1' false false true true $checkVal=0 true false false true $checkVal='0' true false false true $checkVal=[] true false false true $checkVal=[0] false false true true $checkVal true ​ true false false $checkVal='' true false false true $checkVal=null true true false false

MacでLaravel開発環境を整備するまでの手順 macOS11.2でPHPフレームワークのLaravelの開発環境を調えるための手順を自身の備忘録も兼ねて書き留めておきます。初心者で知識も不足しているので間違っている所があれば、ご指摘頂けると幸いです。 Laravelとは Homebrewのインストール Homebewが入っていない場合はインストールしておきます。執筆時点では次のコマンドでインストールできます。 ターミナルにコピペしてください。 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh) なお、インストールコマンドはバージョンによって変わっている事があるので、ホームページで最新版を確認する事をオススメします。 Composerのインストール ComposerはPHPのパッケージ管理ソフトです。 Hombrewでインストールします。 Homebrewのアップデート はじめにHomebrewをアップデートしておきます。 この処理には時間がかかる事があるので気長に待ちましょう。 brew update インストール アップデートが完了したらComposerをインストールします。 brew install composer インストールの確認 インストールが完了したら次のコマンドで正しくインストール出来ているか確認します。 composer -v 次のように表示されればOKです。 ______ / ____/___ ____ ___ ____ ____ ________ _____ / / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/ / /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ / \____/\____/_/ /_/ /_/ .___/\____/____/\___/_/ /_/ Composer version 2.0.12 2021-04-01 10:14:59 Laravelのインストール 次はいよいよLaravelのインストールです。 （正確にはLaravelインストーラーのダウンロードですが、今は細かい事は気にしないでください！） インストール 次のコマンドを実行します。 composer global require laravel/installer パスを通す インストールは完了しましたが、今の状態ではまだパスが通っておらず、 laravelコマンドが使用出来ないので、パスを通す必要があります。 laravelは ＄HOME.composer/vendor/laravel/installer/bin にあるので ここにパスを通してやれば良いです。 つまり、次のようにします。 export PATH=$HOME/.composer/vendor/laravel/installer/bin:$PATH これでパスが通りました。試しに次のコマンドを打ってみてください。 laravel -V 次のように表示されれば完了です！ おつかれ様でした！（※バージョンはインストールされて時期によって異なります） Laravel Installer 4.2.4 参考サイト

目的 カラムを削除する際のマイグレーションファイルの記載方法をまとめる 情報 ハードウェア環境 項目 情報 OS macOS Catalina(10.15.5) ハードウェア MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) プロセッサ 2 GHz クアッドコアIntel Core i5 メモリ 32 GB 3733 MHz LPDDR4 グラフィックス Intel Iris Plus Graphics 1536 MB ソフトウェア環境 項目 情報 備考 PHP バージョン 7.4.8 Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする Laravel バージョン 6.X commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う MySQLバージョン 8.0.19 for osx10.13 on x86_64 Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする Node.jsバージョン v12.14.1 Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする 方法 「delete_flag」というカラムを削除したい場合下記のように記載する。 $table->dropColumn('delete_flag'); 例 下記にマイグレーションファイルの例を記載する。下記のマイグレーションファイルはtasksテーブルに「delete_flag」カラムを追加するup処理と追加されている「delete_flag」カラムを削除するdown処理が記載されている。 2021_04_12_213724_add_delete_flag_columns_to_task_table.php <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class AddDeleteFlagColumnsToTaskTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('tasks', function (Blueprint $table) { $table->tinyInteger('delete_flag')->after('statut_id')->nullable()->comment('削除フラグ'); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('tasks', function (Blueprint $table) { $table->dropColumn('delete_flag'); }); } }

ちょちょいと書いていきます。 usersテーブルにカラムを追加。 これは今まで通りやればOK。 今回は下記のように既存のcreate_users_table.phpのマイグレーションファイルにuser_original_idというカラムを追加したとする。 database/migrations/2014_10_12_000000_create_users_table.php <?php ~省略~ class CreateUsersTable extends Migration { public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('user_original_id')->unique(); $table->string('name'); ~省略~ }); } public function down() { Schema::dropIfExists('users'); } } あとは実行すればOK。 php artisan migrate もちろん別にマイグレーションファイルを作成して、カラムを追加してもOK。 Userモデルの修正 続いては、Userモデルの$fillableの部分に今追加したカラム名を追加します。 User.php protected $fillable = [ 'user_original_id',//これ 'name', 'email', 'password', ]; バリデーションを追加 続いて、app\Actions\Fortify\CreateNewUser.phpにバリデーションなどを追加する記述をします。 app\Actions\Fortify\CreateNewUser.php class CreateNewUser implements CreatesNewUsers { use PasswordValidationRules; public function create(array $input) { Validator::make($input, [ ~省略~ 'user_original_id' => ['required', 'max:20', 'unique:users'], ~省略~ ])->validate(); return User::create([ 'user_original_id'=>$input['user_original_id'], ~省略~ ]); } } inputフィールドの追加 あとは、新規作成時のviewファイルにinputフィールドを追加すればOKです。 name属性を先ほど作成したカラム名と同じにする必要があるので注意してください。 またデフォルトのユーザー新規作成ページはresources\views\auth\register.blade.phpですので、そちらに追加しましょう。 resources\views\auth\register.blade.php <div class="mt-4"> <x-jet-label for="user_original_id" value="share ID （半角英数字）" /> <x-jet-input id="user_original_id" class="block mt-1 w-full" type="text" name="user_original_id" :value="old('user_original_id')" required autocomplete="user_original_name" /> <small class="text-gray-500">＊登録後の変更は出来ませんので、ご注意ください。</small> </div> （インデントバグってますが、面倒なのでこのままでm(_ _)m） プロフィール編集時にも反映させる。 app\Actions\Fortify\UpdateUserProfileInformation.php Validator::make($input, [ 'name' => ['required', 'string', 'max:255'], 'user_original_id' => ['required', 'max:20', 'unique:users'], //ここ 'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)], 'photo' => ['nullable', 'image', 'max:1024'], ])->validateWithBag('updateProfileInformation'); ~省略~ if ($input['email'] !== $user->email && $user instanceof MustVerifyEmail) { $this->updateVerifiedUser($user, $input); } else { $user->forceFill([ 'name' => $input['name'], 'user_original_id'=>$input['user_original_id'], //ここ 'email' => $input['email'], ])->save(); } 編集ページに下記も追加。 resources\views\profile\update-profile-information-form.blade.php <!-- 自己紹介 --> <div class="col-span-6 sm:col-span-4"> <x-jet-label for="introduction" value="introduction') }}" /> <x-jet-input id="introduction" type="text" class="mt-1 block w-full" wire:model.defer="state.introduction" autocomplete="introduction" /> <x-jet-input-error for="introduction" class="mt-2" /> </div> これでOK。

allで取得したモデルを並び替える方法 モデルをallで取得した時、基本的には主キーでソートされるようです。 別のキーでソートしたい場合でも、order byは使えません。 laravel $users = Users::all()->orderBy('department_id'); all()で取得した場合は、order byではなくsort byを使う必要があります。 laravel $users = Users::all()->sortBy('department_id'); 参考 Laravel Eloquent: Ordering results of all()

こちらは10本の記事で構成されています ①Vue.js & Laravel（環境構築） ②Vue.js & Laravel（CRUDシステムの準備） ③Vue.js & Laravel（データベースからデータを取得） ④Vue.js & Laravel（Create...データベースにデータを保存） ⑤Vue.js & Laravel（Update…データベースのデータを更新） ⑥Vue.js & Laravel（Delete…データベースのデータを削除） ⑦Vue.js & Laravel（リアルなダミーデータを大量に挿入） ⑧Vue.js & Laravel（検索機能の実装） ⑨Vue.js & Laravel（ページャーの実装） ⑩Vue.js & Laravel（認証機能の実装） 【目標】CRUDシステムの準備を完了させる 【手順】①テーブルの作成②モデルの作成③コントローラーの作成④ダミーデータの挿入 ①テーブルの作成 $ php artisan make:migration create_tasks_table これで/database/migrations/[現在日時]_create_tasks_table.phpが作成されました /database/migrations/[現在日時]_create_tasks_table.php <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateTasksTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('tasks', function (Blueprint $table) { $table->id(); + $table->string('content'); + $table->boolean('emergency'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('tasks'); } } 上記のようにファイルを編集し以下のコマンドを叩きます。 $ php artisan migrate:refresh --seed これで「①テーブルの作成」が達成されました。 ②モデルの作成 $ php artisan make:model Task /app/Task.phpが作成されました。 これで「②モデルの作成」が達成されました。 ③コントローラーの作成 $ php artisan make:controller TaskController /app/Http/Controllers/TaskController.phpが作成されました。 /app/Http/Controllers/TaskController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; + use App\Task; class TaskController extends Controller { // } 上記のようにファイルを編集します。 「use App\Task;」でモデルと接続します。 これで「③コントローラーの作成」が達成されました。 ④ダミーデータの挿入 $ php artisan make:seeder TaskSeeder これで/database/seeds/TaskSeeder.phpが作成されました /database/seeds/TaskSeeder.php <?php use Illuminate\Database\Seeder; + use App\Task; class TaskSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { + for ($i = 1; $i <= 10; $i++) { + Task::create([ + 'emergency' => $i%2, + 'content' => 'content' . $i, + ]); + } } } 「use App\Task;」でモデルと接続します。 /database/seeds/DatabaseSeeder.php <?php use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder { /** * Seed the application's database. * * @return void */ public function run() { - // $this->call(UserSeeder::class); + $this->call(TaskSeeder::class); } } 上記の部分を編集し、下記のコマンドを叩いてください。 $ php artisan migrate:refresh --seed これで「④ダミーデータの挿入」が達成されました。 【達成】今回の目標「CRUDシステムの準備を完了させる」が達成されました。 次回↓↓↓↓③Vue.js & Laravel（データベースからデータを取得）

やりたいこと "posts"テーブルに"part"というカラムを追加する。 使用環境 OS docker DB：postgres:12 デプロイ先：Heroku つまづいたところ php artisan migrateコマンド実行でエラー $ docker-compose exec app sh //dockerコンテナに入るコマンド /app# php artisan migrate SQLSTATE[23502]: Not null violation: 7 ERROR: column "part" contains null values (SQL: alter table "posts" add column "part" varchar(255) not null) エラーをよむ：新しく追加したカラム "part"はnull値を含んでいる。 (SQL: alter table "posts" add column "part" varchar(255) not null) テーブルは追加カラム(varchar(255)=string)をnot nullで追加した /app # php artisan migrate:status +------+------------------------------------------------+-------+ | Ran? | Migration | Batch | +------+------------------------------------------------+-------+ | Yes | 2014_10_12_000000_create_users_table | 1 | | Yes | 2014_10_12_100000_create_password_resets_table | 1 | | Yes | 2019_08_19_000000_create_failed_jobs_table | 1 | | Yes | 2021_04_02_083813_create_posts_table | 1 | | No | 2021_04_10_202701_add_user_id_to_posts_table | | +------+------------------------------------------------+-------+ migration状況確認。 Noになっています。 解決方法 app # php artisan migrate:refresh すべてのマイグレーションをロールバックしmigrateを実行。 反映されました！！ Docker Docker開発環境でpsqlにアクセスの仕方が分からなかったので;; 本番環境（Heroku）で確認 $ heroku pg:psql :DATABASE=> \d posts Table "public.posts" Column | Type | Collation | Nullable | Default ------------+--------------------------------+-----------+----------+----------------------------------- id | bigint | | not null | nextval('posts_id_seq'::regclass) title | character varying(255) | | not null | created_at | timestamp(0) without time zone | | | updated_at | timestamp(0) without time zone | | | user_id | integer | | | part | character varying(255) | | not null | Nullable欄にnot nullと表記されている。 migrationファイルにnullable();と指定しない場合は、勝手にnot null制約をつけてくれる模様。 因みに... $ heroku run php artisan migrate:fresh Dropped all tables successfully. Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table //省略 とmigrate:refreshではなく、freshで全てのテーブルを削除しmigrateを実行でも大丈夫だった。 違いはdownの処理を行ってからmigrationするか、テーブルを全削除してから1からmigrationするか、らしいがここの使い分けは今はピンときていない。 参考URL マイグレーション生成:LaravelドキュメントURL

やりたいこと "posts"テーブルに"part"というカラムを追加する。 使用環境 OS docker DB：postgres:12 デプロイ先：Heroku つまづいたところ php artisan migrateコマンド実行でエラー $ docker-compose exec app sh //dockerコンテナに入るコマンド /app# php artisan migrate SQLSTATE[23502]: Not null violation: 7 ERROR: column "part" contains null values (SQL: alter table "posts" add column "part" varchar(255) not null) エラーをよむ：新しく追加したカラム "part"はnull値を含んでいる。 (SQL: alter table "posts" add column "part" varchar(255) not null) テーブルは追加カラム(varchar(255)=string)をnot nullで追加した /app # php artisan migrate:status +------+------------------------------------------------+-------+ | Ran? | Migration | Batch | +------+------------------------------------------------+-------+ | Yes | 2014_10_12_000000_create_users_table | 1 | | Yes | 2014_10_12_100000_create_password_resets_table | 1 | | Yes | 2019_08_19_000000_create_failed_jobs_table | 1 | | Yes | 2021_04_02_083813_create_posts_table | 1 | | No | 2021_04_10_202701_add_user_id_to_posts_table | | +------+------------------------------------------------+-------+ migration状況確認。 Noになっています。 解決方法 app # php artisan migrate:refresh すべてのマイグレーションをロールバックしmigrateを実行。 反映されました！！ Docker Docker開発環境でpsqlにアクセスの仕方が分からなかったので;; 本番環境（Heroku）で確認 $ heroku pg:psql :DATABASE=> \d posts Table "public.posts" Column | Type | Collation | Nullable | Default ------------+--------------------------------+-----------+----------+----------------------------------- id | bigint | | not null | nextval('posts_id_seq'::regclass) title | character varying(255) | | not null | created_at | timestamp(0) without time zone | | | updated_at | timestamp(0) without time zone | | | user_id | integer | | | part | character varying(255) | | not null | Nullable欄にnot nullと表記されている。 migrationファイルにnullable();と指定しない場合は、勝手にnot null制約をつけてくれる模様。 因みに... $ heroku run php artisan migrate:fresh Dropped all tables successfully. Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table //省略 とmigrate:refreshではなく、freshで全てのテーブルを削除しmigrateを実行でも大丈夫だった。 違いはdownの処理を行ってからmigrationするか、テーブルを全削除してから1からmigrationするか、らしいがここの使い分けは今はピンときていない。 参考URL マイグレーション生成:LaravelドキュメントURL