フロントエンドガイドライン¶

概要¶

Livewireはv3のため、v2のドキュメントと間違えないようにする

• Livewireドキュメント
  https://livewire.laravel.com/docs/quickstart

• Alpine.jsドキュメント
  https://alpinejs.dev/start-here

規約¶

• スタイリングにtailwindcssを使う

  • Laravel Breezeに既に使われているため、統一する

• カラーは定義されているカラーのみ利用する

  • 例: text-foreground
  • tailwindカラーコード表をご確認いただき、こちらに定義されているカラーを利用してください
  • bg-定義されているカラー名, text-定義されているカラー名などのように呼び出し可能です
  • 単一の場所でしか利用しないその場限りのカラーに限り、カラーコード表に記載以外のカラーを利用しても問題ありません

• 動的な操作が必要になった場合、Alpine.js、Livewireを利用する

  • jQueryやDOM操作は使わないこと、Alpine.js、またはLivewireで同等のことがより簡単な記述で実現ができます
  • 技術スタックが混在するとバグを招くため、必ず守るようにしてください

• LivewireはVolt(Classベース)を利用する

• 共通のパーツはコンポーネント化する

  • resources/views/componentsにbladeコンポーネントを作成してください

• 遅延ロード等、複雑なコンポーネントはLivewire Voltコンポーネントを作成する

  • sail artisan make:volt house-maker-ranking --class などのようにコマンドで雛形生成できます