https://github.com/laravel/breeze-next
プロジェクトのフロントエンド開発には、以下の技術を使用しています。これらは、高いパフォーマンスと使いやすさを提供し、効率的な開発フローを実現するために選択されました。
- Next.js: 静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）を簡単に組み合わせることができるReactのフレームワーク。パフォーマンスの最適化を目的として採用しています。公式サイト
- React: コンポーネントベースのUI構築を提供するJavaScriptライブラリ。再利用可能なUIコンポーネントを作成することで開発効率を向上させています。公式サイト
- TailwindCSS: ユーティリティファーストのCSSフレームワークで、カスタマイズが容易で、レスポンシブデザインを迅速に実装できます。公式サイト
- Headless UI: Tailwind CSSと組み合わせて使用するUIコンポーネントライブラリ。アクセシビリティに優れ、スタイルを自由に定義できます。GitHub
- Heroicons: 高品質なSVGアイコンを提供するライブラリ。TailwindCSSとの組み合わせで、UIデザインの一貫性を保ちながら利便性を高めています。GitHub
- Playwright: ブラウザー自動化のためのE2Eテストフレームワーク。複数のブラウザでのテストを効率的に実行し、品質保証のプロセスを強化しています。公式サイト
この技術スタックを通じて、使いやすく、パフォーマントで、メンテナンスが容易なフロントエンド環境の構築を目指しています。
このセクションでは、この Next.js プロジェクトをローカル環境でセットアップするための手順を説明します。以下のステップに従ってください。
このプロジェクトを実行する前に、以下のツールがシステムにインストールされていることを確認してください：
- Node.js: プロジェクトの実行環境。推奨されるバージョンは
.node-versionファイルに記載のものを使用してください。 - npm (Node.jsに付属) または Yarn: パッケージマネージャー。
プロジェクトのディレクトリに移動した後、次のコマンドを実行して必要な依存関係をインストールします：
$ npm install
# または
$ yarn installプロジェクトには、適切に機能するためにいくつかの環境変数が必要です。サンプルの環境設定ファイル .env.example を .env にコピーし、必要に応じて内容を編集してください：
$ cp .env.example .envすべてのセットアップが完了したら、開発サーバーを起動します：
$ npm run dev
# または
$ yarn devこれで、ブラウザで http://localhost:3000 にアクセスすると、開発中のアプリケーションを見ることができます。
# テスト実行コマンド
$ npx playwright test # ヘッドレスモード（ブラウザを起動しない）で実行
$ npx playwright test --headed # ヘッドモードで実行
$ npx playwright test --ui # 特別なUIを起動して実行
# テストレポート出力
$ npx playwright show-report # 直前のテスト結果をブラウザで表示以下の2つの方法があります。 詳細は公式ページを参照：https://playwright.dev/docs/debug
- VSCODEの拡張機能-Playwright Test for VSCodeを使う方法
- コマンド（デバッグモード（ステップバイステップでテストを実行可能）で実行）
$ npx playwright test --debug$ npx playwright codegen