ある日、Reactプロジェクトにおけるダッシュボードのフロントをデザインなしで実装する案件がありました。
デザイン指定がないとはいえ、それっぽいモダンなレイアウトは確保したい。
そこで今回「Flowbite React」を試してみます。
Flowbite React Components
「Flowbite」は「Tailwind CSS」のコンポーネントで、クラスを指定するだけでモダンな見た目を提供してくれます。
応用性がある反面、クラスの指定が多少細かいので冗長になりがちです。
「Flowbite React」では、簡単な引数を指定するだけで、Flowbiteを適用することができます。
今回試した環境は以下の通りです。Tailwind CSSなどはインストール済みを前提とします。
Laravelでデータベースをテストします。
今回は、新規プロジェクトではなく、既存プロジェクトをテストする前提で進めていきます。
データベースをテストする際、安全なDBが必要です。
つまり、テストで本番環境のDBを使うわけにはいきません。また、場合によっては開発環境のDBを汚すこともあると思います。
そこで、今回はテスト用のDBを用意してみます。
例えば、SQLiteで用意したテスト用DB「testing」を使用します。
まず、空のファイル「/database/database_test.sqlite」を用意します。Linux系であればtouchコマンド、Windowsであればテキストファイルを新規作成します。
次に「/config/database.php」を開きます。
「sqlite」ブロックをコピペして「testing」にリネームします。
いつものようにLaravelのFakerでダミーデータを作成しようとしたら、関数joinでエラーになってしまいました。
join(): Argument #2 ($array) must be of type ?array, string given
そういえば、最近、開発環境をPHP7.xからPHP8.xにアップグレードしたばかりでした。
調べてみると、ライブラリ「fzaninotto / Faker」は2020年に開発がストップしていて、PHP8には対応していないようです。
fzaninotto/Faker: Faker is a PHP library that generates fake data for you
代替のライブラリとしてはFakerPHPがあるようです。
FakerPHP / Faker
早速、ライブラリをインストールしてみます。composer.jsonから古いライブラリを削除します。
"fzaninotto/faker": "^1.4",
続けて新しいライブラリを追加して、Composerインストールを実行します。
"fakerphp/faker": "^1.9.1",
インストール後、再度Fakerを実行したところ、無事にエラーは解消されました。
Laravel HomesteadでWindowsに開発環境を作ります。
これまでxamppをメインにWindowsで開発をしてきました。
モダンな環境でということでwsl & Dockerに乗り換えたのですが、環境をアップグレードする度にCPUの負荷が上がったり、メモリを大量に消費したり。。
チューニングの繰り返しで作業にならないので、安定した環境を求めてLaravel Homesteadを試してみます。
ちなみにHomesteadに必要なVirtualBoxとVagrantはインストール済みを前提とします。
まず、BoxをVagrantに追加します。Windows PowerShellを起動して以下のコマンドを実行します。
> vagrant box add laravel/homestead
==> box: Loading metadata for box 'laravel/homestead'
box: URL: https://vagrantcloud.com/laravel/homestead
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.
1) libvirt
2) parallels
3) virtualbox
Enter your choice:
プロバイダの選択を求められるので、今回はVirtualBoxの「3」を選択します。
こちらの処理に5分ほどかかりました。
開発環境用に仮想マシンが必要になったので、WindowsにVirtualBoxとVagrantをインストールしてみます。
ここ最近ではWSLも話題です。実際に使用してみたのですが、CPUへの高負荷、メモリ大量消費、チューニングの繰り返しで、仕事にならないので、当面の開発環境としてVagrantを試してみたいと思いました。
まずはVirtualBoxをインストールします。
Oracle VM VirtualBox
公式サイトのメニュー「Downloads」から「Windows hosts」をクリックして、インストーラをダウンロードします。
ダウンロードしたファイル「VirtualBox-7.0.6-155176-Win.exe」を実行し、インストールを開始します。
![](/wp/wp-content/uploads/2023/03/virtualbox-1.png")
基本的にデフォルトでのインストールで問題ありません。「Next」をクリックしてインストールを進めます。
途中で、ネットワークが一時的に切断される注意書きが表示されます。問題なければ、インストールを続行します。
以下の画面が表示されたらインストールは完了です。
これまで、開発環境にはxamppやDockerを使用していました。
今回、Dockerを簡易的に操作できるという「Laravel Sail」での開発環境構築を試してみます。
今回、開発環境を構築したのは以下の環境です。
WindowsにUbuntuやDockerはインストール済みとします。
また、新規プロジェクトではなく、既存プロジェクトに適用してみました。プロジェクトソースはWindows上ではなく、Ubuntu上に展開されています。
最近、Laravelを新規インストールした場合、Sailはデフォルトで組み込まれているようですが、今回の古くから運用しているプロジェクトには含まれてなかったので、まずはパッケージをインストールします。
$ composer require laravel/sail --dev
次に、以下のコマンドでインストールします。
$ php artisan sail:install
すると対話型で、必要なサービスが問われます。今回はmariadbを選択します。
Which services would you like to install? [mysql]: [0] mysql [1] pgsql [2] mariadb [3] redis [4] memcached [5] meilisearch [6] minio [7] mailpit [8] selenium [9] soketi > 2 Sail scaffolding installed successfully. ... Sail images installed successfully. ... Sail build successful.
この処理には少々時間がかかります。
Laravel 6から9へアップグレードしたので、これまで利用していたLaravel Mixから、Laravel 9でデフォルトで採用されている「Vite」に移行してみます。
Vite | Next Generation Frontend Tooling
ちなみにViteの読み方は「ヴィート」のようです。
今回は、以下の移行ガイドを参考にして作業を進めてみます。
vite-plugin/UPGRADE.md at main · laravel/vite-plugin
初めに、viteとLaravelのviteプラグイン「laravel-vite-plugin」をインストールします。
> npm install --save-dev vite laravel-vite-plugin
VueやReactを使用する場合、それぞれのプラグインをインストールします。
> npm install --save-dev @vitejs/plugin-vue
> npm install --save-dev @vitejs/plugin-react
WordPressでエラーログを取得する方法です。
WordPressはデフォルトではエラーログを出力しない設定になっているので、テンプレート開発やプラグイン開発をする場合は有効にしたほうがよいでしょう。
まず、設定ファイル「wp-config.php」を編集します。
WP_DEBUGでデバッグモードを有効にすることで、エラーが出力されるようになります。
// define('WP_DEBUG', false);
define('WP_DEBUG', true);
但し、このままではエラーが画面に表示されてしまうので、以下の設定も追加します。
これにより、エラーは画面に表示されずにログファイルに出力されるようになります。
define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', true);
ログファイルは「…/wp-content/debug.log」に出力されます。
サーバ環境によりますが、ログファイルは外部からアクセスできないように、パーミッションを640などに変更しましょう。
個人のお遊びプロジェクトのVue.jsを、2から3にアップグレードしてみます。
手探りな感じですが、とりあえず、package.jsonを以下のように修正して、Vue.js 3をインストールしてみます。
- "vue": "^2.5.17", + "vue": "^3.0",
アップデートします。
> npm update （中略） 32 vulnerabilities (8 moderate, 24 high)
案の定、依存パッケージで脆弱性エラーが32件発生しました。
> npm audit fix --force （中略） found 0 vulnerabilities
上記コマンドを実行。すごい、一発で直った。
また、3ではパッケージ「vue-loader」が必要みたいなので、事前にインストールしておきます。
> npm install vue-loader
ある日突然、WSL2でドメイン名が解決できないためにアップグレードできない事象に陥りました。
$ sudo apt-get update Ign:1 http://archive.ubuntu.com/ubuntu jammy InRelease Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease Ign:3 https://ppa.launchpadcontent.net/ondrej/php/ubuntu jammy InRelease Ign:4 http://archive.ubuntu.com/ubuntu jammy-updates InRelease Ign:2 http://security.ubuntu.com/ubuntu jammy-security InRelease （中略） Err:5 http://archive.ubuntu.com/ubuntu jammy-backports InRelease Temporary failure resolving 'archive.ubuntu.com' Reading package lists... Done Building dependency tree... Done Reading state information... Done 34 packages can be upgraded. Run 'apt list --upgradable' to see them. W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy/InRelease Temporary failure resolving 'archive.ubuntu.com' W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-updates/InRelease Temporary failure resolving 'archive.ubuntu.com' W: Failed to fetch http://archive.ubuntu.com/ubuntu/dists/jammy-backports/InRelease Temporary failure resolving 'archive.ubuntu.com' W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/jammy-security/InRelease Temporary failure resolving 'security.ubuntu.com' W: Failed to fetch https://ppa.launchpadcontent.net/ondrej/php/ubuntu/dists/jammy/InRelease Temporary failure resolving 'ppa.launchpadcontent.net' W: Some index files failed to download. They have been ignored, or old ones used instead.