- 投稿日：2022-01-19T15:22:52+09:00
npm を使用していろんなものをインストールしてみる
準備 ↓のコマンドを実行してpackage.json を生成する npm init -y Admin LTE3 Admin LTE3のインストール npm install admin-lte@^3.0 --save ・結構時間かかる 参考：https://adminlte.io/docs/3.0/ JQuery JQueryのインストール npm install jquery --save 参考：https://launchcart.jp/blog/npm%E3%81%AB%E3%82%88%E3%82%8B%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E7%AD%89%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/ Font Awesome Font Awesomeのインストール npm install --save @fortawesome/fontawesome-free 参考：https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers webpack webpackのインストール npm install --save-dev webpack 参考：https://www.npmjs.com/package/webpack webpackのバージョンを確認 npx webpack -v ↓確認するとwebpack-cliというライブラリも必要になると言われたため CLI for webpack must be installed. webpack-cli (https://github.com/webpack/webpack-cli) We will use "npm" to install the CLI via "npm install -D webpack-cli". webpack-cliをインストール npm install --save-dev webpack-cli webpack.config.js webpack.config.js（webpackの設定ファイル）の作成 Laravel Mix自体やその他必要なパッケージが記述済み scriptsにはwebpackを実行するためのスクリプトも記述されている touch webpack.config.js エントリーポイント、ファイルの出力場所、プラグインなどを設定することができる webpack.config.jsを書き換える webpack.config.js const path = require('path'); module.exports = { // エントリーポイントの設定 entry: './src/my-main.js', // ビルド後、'./dist/my-bundle.js'というbundleファイルを生成する output: { path: path.resolve(__dirname, 'dist'), filename: 'my-bundle.js' } }; テストファイルの作成 $ touch my-index.html $ mkdir src $ mkdir dist my-index.html <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="dist/my-bundle.js" charset="utf-8"></script> </body> </html> $ cd src $ touch my-main.js $ touch my-func.js my-main.js var func = require('./my-func'); var res = document.createTextNode(func()); document.body.appendChild(res); my-func.js module.exports = function () { return 'my-test'; }; webpack.mix.js webpack設定ファイル（webpack.config.js）のラッパー。 ここにコンパイルしたいファイル・バンドルしたいファイルなどを記述していく。 webpack.mix.js その他（sass,CSSなど）のファイルの書き方はlaravel公式ドキュメントを参考にしながら書く。 package.json package.jsonのscriptのdev、watch、hot、productionの""の中身を以下のように書き換える。 package.json "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" Laravel Mixの実行 npm run <スクリプト名> でそのスクリプトを実行できるようになる npm run dev package.jsonに書いてあるスクリプトが実行され、設定ファイルに記述したコンパイルやバンドルが実行される 他にも・・・ 圧縮されたファイルの出力 npm run production 自動コンパイル npm run watch-poll
- 投稿日：2022-01-19T09:58:44+09:00
Laravel で主キー（プライマリキー）を ULID で登録する方法
環境 Laravel Framework 8.54.0 PHP 8.0.9 docker-compose version 1.29.2 rorecek/laravel-ulid:^2.0 手順 rorecek/laravel-ulid まずは、rorecek/laravel-ulidのインストールを行います。 ターミナルを開き、以下のコマンドを入力します。 ターミナル（sail） $ ./vendor/bin/sail composer require rorecek/laravel-ulid:^2.0 ターミナル（composer） $ composer require rorecek/laravel-ulid:^2.0 これで、インストールは完了しました。 マイグレーション 次に、マイグレーションから編集していきます。 今回はユーザに関しての変更を行おうと思うので、 デフォルトのdatabase/migrations/2014_10_12_000000_create_users_table.phpを編集します。 ULIDは、26 文字の文字列になります。 そのため、以下のように編集します。 database/migrations/2014_10_12_000000_create_users_table.php // ... class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { - $table->bigIncrements('id'); + $table->char('id', 26)->primary(); // ... }); } // ... } モデル 最後にモデルを編集します。 オートインクリメントを無効にして、 idを ULID で生成するように修正します。 traitを用意してくれているので、 以下のように、変更すれば大丈夫です。 app/User.php // ... use Rorecek\Ulid\HasUlid; class User extends Authenticatable { // ... use HasUlid; /** * IDが自動増分されるか * * @var bool */ public $incrementing = false; /** * 自動増分IDの「タイプ」 * * @var string */ protected $keyType = 'string'; // ... } これで、idが ULID で生成されます。 注意点 上記までの手順で大枠は解決なのですが、 主キー（プライマリキー）をid以外に設定しているときは上手く動作しません。 理由は、モデルの修正で使用したRorecek\Ulid\HasUlidが影響しています。 中身を見てみると原因がハッキリします。 vendor/rorecek/laravel-ulid/src/HasUlid.php <?php namespace Rorecek\Ulid; trait HasUlid { protected static function bootHasUlid() { static::creating(function ($model) { if (! $model->id) { $model->id = \Ulid::generate(); } }); static::saving(function ($model) { $originalUlid = $model->getOriginal('id'); if ($originalUlid !== $model->id) { $model->id = $originalUlid; } }); } public function getIncrementing() { return false; } public function getKeyType() { return 'string'; } } そうなんです。 idを直接指定してしまっているため、他のときは動かないようになってます。 解決方法 解決方法は、言葉にしてしまえば簡単ですが、 主キー（プライマリキー）が何のときでも動くようにしてあげればよいだけですね。 trait/HasUlid.php <?php use Rorecek\Ulid\Facades\Ulid; trait HasUlid { protected static function bootHasUlid() { static::creating(function (Model $model) { if (! $model->getKey()) { $model->setAttribute($model->getKeyName(), Ulid::generate()); } }); static::saving(function (Model $model) { $originalUlid = $model->getOriginal($model->getKeyName()); if ($originalUlid !== $model->getKey()) { $model->setAttribute($model->getKeyName(), $originalUlid); } }); } public function getIncrementing() { return false; } public function getKeyType() { return 'string'; } /** * IDが自動増分されるか * * @var bool */ public $incrementing = false; /** * 自動増分IDの「タイプ」 * * @var string */ protected $keyType = 'string'; } こんなtraitを作成してあげれば、汎用的に使えると思います。 さいごに ということで、rorecek/laravel-ulidは \Rorecek\Ulid\Facades\Ulid::generate()とするだけで簡単にULIDを生成できるだけでなく、 主キー（プライマリキー）をULIDに変更する最低限の下地を既に作成してくれている訳です。 主キー（プライマリキー）を特別なものへと変更するにあたって、 createdやsavingなどのhookに引っ掛けて特定の処理を行うことは常套手段でしたが、 毎回記述するのがとても煩わしかったのを覚えています。 なので、それも含めて準備してくれるのはとてもありがたい！！ あなたの実装ライフが少しでも楽になりますように～