フロントエンドガイドライン » 履歴 » バージョン 6
平 勇治, 2024/05/02 06:33
| 1 | 1 | AppTime 管理 | # フロントエンドガイドライン |
|---|---|---|---|
| 2 | 3 | AppTime 管理 | |
| 3 | ## 概要 |
||
| 4 | |||
| 5 | **Livewireはv3のため、v2のドキュメントと間違えないようにする** |
||
| 6 | - Livewireドキュメント |
||
| 7 | https://livewire.laravel.com/docs/quickstart |
||
| 8 | |||
| 9 | - Alpine.jsドキュメント |
||
| 10 | https://alpinejs.dev/start-here |
||
| 11 | |||
| 12 | ## 規約 |
||
| 13 | |||
| 14 | - スタイリングにtailwindcssを使う |
||
| 15 | - Laravel Breezeに既に使われているため、統一する |
||
| 16 | |||
| 17 | 6 | 平 勇治 | - カラーは定義されているカラーのみ利用する |
| 18 | - 例: `text-foreground` |
||
| 19 | - [tailwindカラーコード表](https://docs.google.com/spreadsheets/d/1TgnK7qJy3BVwpKQONeAf7GWFVWjz7r2OxAvUxNH2vfo/edit#gid=1087786554)をご確認いただき、こちらに定義されているカラーを利用してください |
||
| 20 | - `bg-定義されているカラー名`, `text-定義されているカラー名`などのように呼び出し可能です |
||
| 21 | - 単一の場所でしか利用しないその場限りのカラーに限り、カラーコード表に記載以外のカラーを利用しても問題ありません |
||
| 22 | |||
| 23 | 5 | AppTime 管理 | - 動的な操作が必要になった場合、**Alpine.js**、**Livewire**を利用する |
| 24 | 3 | AppTime 管理 | - **jQueryやDOM操作は使わないこと**、Alpine.js、またはLivewireで同等のことがより簡単な記述で実現ができます |
| 25 | - 技術スタックが混在するとバグを招くため、必ず守るようにしてください |
||
| 26 | |||
| 27 | 6 | 平 勇治 | - LivewireはVolt(Classベース)を利用する |
| 28 | |||
| 29 | 3 | AppTime 管理 | - 共通のパーツはコンポーネント化する |
| 30 | 1 | AppTime 管理 | - `resources/views/components`にbladeコンポーネントを作成してください |
| 31 | |||
| 32 | 6 | 平 勇治 | - 遅延ロード等、複雑なコンポーネントはLivewire Voltコンポーネントを作成する |
| 33 | - `sail artisan make:volt house-maker-ranking --class `などのようにコマンドで雛形生成できます |