AIが生成するフロントエンドコードのルールとして成熟した開発経験を導入：Next.js 14の開発キューワード、SwiftとSwiftUIの開発キューワード

中国初のAI IDE インテリジェント・プログラミング・ソフトウェア 🚀体験への招待 Trae 中国語版ダウンロードDeepSeek-R1とDoubao-proは無制限で利用できる！

としてふさわしい。カーソル Windsurf、ClineなどのAI IDEツールは、フロントエンド・プロジェクト用に生成されたコードを正規化する。このようなツールは完全なプロジェクトコードを生成するこの能力は非常に強力だが、基本的な制約がないため、無効なトークンが大量に消費される可能性がある。特にフロントエンド・プロジェクトを生成する場合、基本的な開発フレームワークに制約がないため、デフォルトのフロントエンド・ページの生成結果は、以下のように低くなる。ボルトそしてv0.dev ツールのクラス。

この時点で成熟した技術フレームワークと基本的な制約を導入することで、より少ないステップと消費するトークンで、より優れたフロントエンド・プロジェクトのコード生成が可能になる。

Next.js 14 開発ルールオリジナル

Next.js 14開発における#ルール
##一般ガイドライン
1.Next.js 14とTypeScript、Tailwind CSSを併用する。
2.すべてのパッケージのインストールと管理には `bun` を使用する 3.
3. Next.js 14で推奨されるルーティングシステムであるApp Routerを実装する 4.
4.デフォルトでサーバーコンポーネントを利用し、インタラクティブ性やクライアントサイドのステートに必要な場合のみクライアントコンポーネントを利用する 5.
5.データ変異やフォーム送信の処理には、サーバーアクションを活用する 6.
6.Next.js組み込みのキャッシュ機構を使用して、適切なキャッシュ戦略を実装する。
7.WCAGガイドラインに従って、すべてのコンポーネントとページがアクセシブルであることを確認する 8.
8.Next.jsの規約に従って、環境変数を使用して設定する。
9.必要に応じて、コード分割、遅延ロード、並列データ取得などのパフォーマンス最適化を実装する。
10.複雑なロジックや設計上の決定を、明確で簡潔なコメントで説明する。
##コードの構造と構文
1.すべてのコンポーネントとページには`app`ディレクトリを使用する。
2. `app` ディレクトリで以下のファイル規約を実装する。
- `layout.tsx`: 複数のページで UI を共有する場合。
- `page.tsx`: 独自ページコンテンツ用
- `loading.tsx`: UI をロードする。
- `error.tsx`: エラー処理UI用
- `not-found.tsx`: 404ページ用
3.デフォルトではServer Componentsを使用し、Client Componentsを作成するときのみ`'use client'`ディレクティブを追加する。
4.TypeScriptで矢印関数構文を使用してコンポーネントを定義する。
``tsx
インポート { FC } from 'react'；
インターフェイス ComponentProps {
// プロップの定義
}
const Component: FC = ({ prop1, prop2 }) => { // コンポーネントのロジック
// コンポーネントロジック
}
エクスポートデフォルト Component.
```
5.ページコンポーネントの場合は、デフォルトのエクスポートを使用します。
``tsx
エクスポートデフォルト function Page() {
// ページコンポーネントのロジック
}
```
6.明示的な型付けが必要な場合は、`React.FC` または `React.FC` を使用します。
``tsx
インポート 反応 react』より；
const ComponentName: React.FC = () =&gt; { // コンポーネントのロジック
// コンポーネントロジック
}; }
// OR
const ComponentName = (): React.ReactNode =&gt; { // コンポーネントのロジック
// コンポーネントロジック
};
```
##ルーティングとナビゲーション
1. `app` ディレクトリのフォルダ構造を使ってネストされたルーティングを実装する 2.
2.<link>クライアント側ナビゲーション用の `next/link` コンポーネント。
xx
import Link from 'next/link'；
<link href="/about">について</Link>
``
3.角括弧付きのフォルダ名（例：`[id]`）を使ってダイナミックルートを実装する。
4.ダイナミックルートにスタティックパスを生成するには `generateStaticParams` を使用する。
##データ取得とAPIルート
1.データの取得には、Next.jsの自動リクエスト重複排除機能を利用して、Server Componentsと`fetch` APIを使用します。
5. ``tsx
非同期関数 getData() {
const res = await fetch('<https:>', { next: { revalidate: 3600 })；
if (!res.ok) throw new Error('Failed to fetch data')；
res.json()を返します；
}
エクスポート・デフォルト 非同期関数 Page() {
const data = await getData(); // データを使用してコンポーネントをレンダリングします。
// データを使用してコンポーネントをレンダリングする。
}
``
2.データ変異のためのサーバーアクションを実装する。
``tsx
use server'; ``tsx''; ``tsx''; ``tsx''.
インポート { revalidatePath } from 'next/cache'；
export async function updateData(formData: FormData) { // データベースのデータを更新する。
// データベースのデータを更新する
revalidatePath('/data'); }.
}
``
3.App RouterのAPIルートにはルートハンドラ（route.ts）を使用する。
4.必要に応じて、App Routerの規約を使用して、静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）を実装する。
## ステート管理とインタラクティブ性
1.フォーム送信とデータ変異にサーバーアクションを使用する。
``tsx
import { updateData } from './actions' からインポートします。
エクスポート default function Form() {
return (
<form action="http://updateData" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">更新</button>
<input type="hidden" name="trp-form-language" value="ja"/></form>
);
}
``
2.必要に応じて、クライアントサイドの状態管理のためにReactフックを実装する。
3.ローカルステートとサイドエフェクトには、クライアントコンポーネントの `useState` と `useEffect` フックを使用する。
## スタイリング
1.スタイリングにはTailwind CSSクラスのみを使用する。 インラインスタイルは避ける。
``tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{コンポーネントの内容 */}
</div>
``
2.再利用可能なスタイルのために、`tailwind.config.js`ファイルにカスタムTailwindクラスを作成する。
3.コンポーネント固有のスタイルが必要な場合は、CSSモジュールを使用する。
##パフォーマンスの最適化
1.対象ページの自動静的最適化を実装する 2.
2.動的インポートを使用してコードを分割します。
``tsx
import dynamic from 'next/dynamic'; ``tsx''; ``tsx''; ``tsx''.
const DynamicComponent = dynamic(() =&gt; import('..../components/DynamicComponent')); const
``
3.画像の自動最適化のために、`next/image`からImageコンポーネントを利用する。
``tsx
import Image from 'next/image'; ``tsx''.
<image src="/image.jpg" alt="Description" width="{500}" height="{300}" />
``
4.データキャッシュとフルルートキャッシュを使用して、適切なキャッシュ戦略を実装する。
5.Next.js 14の組み込みキャッシュと再検証機能を使用して、パフォーマンスを最適化する。
``tsx
import { unstable_cache } from 'next/cache'；
const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id)、
['user-cache']、
{ revalidate: 3600 } // 1時間ごとに再検証する。
);
``
6.必要に応じて、オンデマンド再検証を使用する。
``tsx
インポート { revalidatePath, revalidateTag } from 'next/cache'；
export async function updateData() { // データベースのデータを更新する。
// データベースのデータを更新する
revalidatePath('/data'); // 特定のパスを再検証する
revalidateTag('data-tag'); // このタグを持つすべてのエントリを再検証する
}
``
7.並列データ・フェッチを実装し、パフォーマンスを向上させる。
``tsx
非同期関数 ParallelDataFetch() {
const dataPromise = fetch(')<https:>');
const userPromise = fetch('<https:>').
const [data, user] = await Promise.all([)
dataPromise.then(res =&gt; res.json())、
userPromise.then(res =&gt; res.json()))。
]);
return { data, user }；
}
``
##エラー処理とロード状態
1.エラー境界用にerror.tsxファイルを作成する。
``tsx
'use client'.
エクスポート default function Error({
エラー、リセット
error, reset, }: { エラー、リセット、リセット、リセット、リセット、リセット
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: エラー &amp; { digest?
}) {
return (
<div>
<h2>何かが間違っていた！</h2>
<button onclick="{()" > reset()}&gt;再試行</button>
</div>
);
}
``
2.ロード状態を管理するためにloading.tsxファイルを実装します。
3.より詳細なローディング状態のためにReact Suspenseを使用する。
tsx
インポート { Suspense } from 'react'；
エクスポート default function Page() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}
``
## SEOとメタデータ
1.SEO最適化のためにMetadata APIを使用する。
``tsx
'next'からtype { Metadata }をインポートする；
export const metadata: Metadata = { 以下のようにします。
title: 'ページタイトル'、
description: 'ページの説明', }.
}; }
```
2.動的なコンテンツを持つページのために、generateMetadataを使用して動的なメタデータを実装します。
## Composerモード固有のガイドライン
1.コンポーザーモードを使用する場合は、必要な変更または追加を自然言語で明確に記述します。
2.複数ファイルの操作の場合は、関係するファイルとその関係を指定する 3.
3.コード生成を依頼する場合は、希望する機能と、それが既存のプロジェクト構造にどのように適合するかについてのコンテキストを提供する。
4.リファクタリング作業では、現在のコード構造と望ましい結果を説明する。
5.エラーに対処する場合は、エラーメッセージとその周辺のコードコンテキストについて詳しく説明する。
これらのルールは、特定のプロジェクトの要件や個人の好みに応じて変更することを忘れないでください。 常に、Next.Nodeに準拠した、クリーンで効率的で保守性の高いコードを優先してください。コードはNext.js 14のベストプラクティスに従ってください。

Next.js 14 開発ルールの翻訳

# Next.js 14 開発ルール
##一般ガイドライン
1.Next.js 14とTypeScript、Tailwind CSSを併用する。
2.すべてのパッケージのインストールと管理には `bun` を使用する。
3. Next.js 14 推奨のルーティングシステムである App Router を実装する。
4. デフォルトでServer Componentsを使用し、インタラクションやクライアントサイドの状態が必要なときだけClient Componentsを使用する。 5. サーバーサイドの操作にはServer Componentsを使用する。
5.データ変更やフォーム送信の処理には、Server Actionsを使用する。
6.Next.jsの組み込みキャッシュ機構を使用して、適切なキャッシュポリシーを実装する。
7.すべてのコンポーネントとページがWCAGガイドラインのアクセシビリティ基準を満たすようにする。
8.Next.jsの規約に従って、環境変数を使った設定を行う。
9. コード分割、遅延ロード、並列データ取得などのパフォーマンス最適化を実装する。
10. 複雑なロジックや設計上の決定に対して、明確で簡潔な注釈を提供する。
##コードの構造と構文
1.すべてのコンポーネントとページを格納するには、`app`ディレクトリを使用します。
2. `app` ディレクトリでは、以下のファイル命名規則に従ってください：
- layout.tsx`：複数のページで共有されるUI。
- `page.tsx`: ユニークなページコンテンツ用
- `loading.tsx`: UIのロード用
- `error.tsx`: エラー処理用UI
- `not-found.tsx`: 404ページ用。
3.デフォルトでサーバーサイドコンポーネントを使用する。クライアントサイドのコンポーネントを作成する場合のみ、`'use client'`ディレクティブを追加する。
4.コンポーネントの定義にはTypeScriptのarrow関数構文を使用する：
tsx
インポート { FC } from 'react'; ``tsx''; ``tsx''; ``tsx''.
インターフェース ComponentProps {
// プロパティ定義
}
const Component: FC<componentprops> = ({ prop1, prop2 }) =&gt; {.
// コンポーネントのロジック
};
エクスポートデフォルトのコンポーネントです。
```
5.ページコンポーネントの場合は、デフォルトのエクスポートを使用します：
tsx
エクスポートデフォルト function Page() {
// ページコンポーネントのロジック
}
``
6.明示的な型が必要な場合は、`React.FC` または `React.ReactNode` を優先的に使用する：
``tsx
インポート React from 'react'; ``tsx
const ComponentName: React.FC = () =&gt; { // コンポーネントのロジック
// コンポーネントロジック
};
// または
const ComponentName = (): React.ReactNode =&gt; { // コンポーネントのロジック
// コンポーネントロジック
};
``
##ルーティングとナビゲーション
1. フォルダ構造を使用して、`app` ディレクトリにネストされたルーティングを実装する。
2. ``next/link`` が提供する ``next/link`` を使用する。<link>クライアント側ナビゲーション用コンポーネント：
xx
import Link from 'next/link'；
<link href="/about">会社概要</Link>
``
3.ダイナミックルートを実装するには、角括弧付きのフォルダ名 (例 `[id]`) を使用します。
4.ダイナミックルート用のスタティックパスを生成するには `generateStaticParams` を使う。
##データフェッチとAPIルーティング
1.Next.jsの自動リクエスト重複排除機能を利用して、サーバーサイドコンポーネントと `fetch` APIを使用してデータを取得する：
次のようにします。
非同期関数 getData() {
const res = await fetch('<https:>', { next: { revalidate: 3600 } })；
if (!res.ok) throw new Error('Failed to retrieve data')；
res.json()を返します；
}
エクスポート・デフォルト 非同期関数 Page() {
const data = await getData()；
// データを使用してコンポーネントをレンダリングする
}
``
2.サーバーサイドの操作を使ってデータの変更を処理する：
``tsx
'use server'; ``tsx''; ``tsx''; ``tsx''; ``tsx''.
インポート { revalidatePath } from 'next/cache'.
export async function updateData(formData: FormData) { // データベースのデータを更新する。
// データベースのデータを更新する
revalidatePath('/data'); }.
}
``
3. route.tsを使用して、App RouterでAPIルーティングを実装する。
4. App Routerの規約を使用して、必要に応じて静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）を実装する。
## ステート管理とインタラクション
1. サーバー側アクションを使用して、フォーム送信とデータ変更を処理する：
``tsx
import { updateData } from './actions' からインポートします；
エクスポート default function Form() {
return (
<form action="http://updateData" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">更新</button>
<input type="hidden" name="trp-form-language" value="ja"/></form>
);
}
``
2. 必要に応じて、クライアントサイドの状態管理にReactフックを使用する。
3. `useState` フックと `useEffect` フックを使用して、クライアント側コンポーネントのローカル状態と副作用を管理する。
##スタイル
1.スタイリングにはTailwind CSSクラスを使用し、インラインスタイリングは避ける：
``tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{コンポーネントの内容 */}
</div>
``
2.再利用可能なスタイルを有効にするために、`tailwind.config.js`ファイルにカスタムTailwindクラスを作成する。
3.必要に応じて、CSSモジュールを使って特定のコンポーネントにスタイルを設定する。
##パフォーマンスの最適化
1.対象ページの自動静的最適化を実装する。 2.
2. 動的インポートを使用してコードを分割します：
``tsx
next/dynamic'からdynamicをインポートする。
const DynamicComponent = dynamic(() =&gt; import('..../components/DynamicComponent'))；
```
3.画像の自動最適化には、`next/image`のImageコンポーネントを使用する：
``tsx
import Image from 'next/image'; ``tsx''.
<image src="/image.jpg" alt="描述" width="{500}" height="{300}" />
``
4. データキャッシュとフルルートキャッシュを使用して、適切なキャッシュポリシーを実装する。
5. Next.js 14 組み込みのキャッシュ機能と再検証機能を使用して、パフォーマンスを向上させる：
``tsx
int { unstable_cache } from 'next/cache'.
const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id)、
['user-cache']、
{ revalidate: 3600 } // 1時間ごとに再検証する。
);
``
6.必要に応じてオンデマンド再検証を使用する：
次のようにします。
import { revalidatePath, revalidateTag } from 'next/cache' ；
export async function updateData() { // データベースのデータを更新する。
// データベースのデータを更新する
revalidatePath('/data'); // 特定のパスを再検証する
revalidateTag('data-tag'); // このタグを持つすべてのエントリを再検証する
}
``
7.並列データフェッチを実装し、パフォーマンスを向上させる：
``tsx
非同期関数 ParallelDataFetch() {
const dataPromise = fetch(')<https:>');
const userPromise = fetch('<https:>').
const [data, user] = await Promise.all([)
dataPromise.then(res =&gt; res.json())、
userPromise.then(res =&gt; res.json()))。
]);
return { data, user }；
}
``
##エラー処理とロード状況
1.エラー境界としてerror.tsxファイルを作成する：
``tsx
'use client'.
エクスポート default function Error({
エラー、リセット
error, reset, }: { error, reset, reset, reset, reset, reset
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: エラー &amp; { digest?
}) {
return (
<div>
<h2>エラーが発生しました！</h2>
<button onclick="{()" > リセット()}&gt;リトライ</button>
</div>
);
}
``
2.ローディング状態を管理するためにloading.tsxファイルを作成します。
3.React Suspenseを使用して、より詳細なロード状態を提供します：
tsx
インポート { Suspense } from 'react'；
エクスポート default function Page() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}
``
## SEOとメタデータ
1.SEO最適化のためにMetadata APIを使用する：
``tsx
import type { Metadata } from 'next' ；
export const metadata: Metadata = { 以下のようにします。
title: 'ページのタイトル', description: 'ページの説明', ``tsx import type { metadata
}; }
```
2.動的コンテンツページでは、generateMetadataを使用して動的メタデータを実装します。
## Composerスキーマ固有のガイドライン
1. コンポーザ・スキーマを使用する場合は、必要な変更または追加を明確で自然な言葉で記述すること。
2. 複数ファイルの操作の場合は、関係するファイルとその関係を明記する。
3. コード生成を依頼する場合は、希望する機能と、それが既存のプロジェクト構造にどのように適合するかについてのコンテキストを提供する。
4. リファクタリングタスクの場合、現在のコード構造と望ましい結果を説明する。
5. エラーを解決する場合、エラーメッセージとそのコンテキストに関する詳細情報を提供する。
これらのルールは、特定のプロジェクトのニーズや個人の好みに合わせることを忘れないでください。常に、Next.js 14のベストプラクティスに準拠した、明確で効率的かつ保守性の高いコードを書くことを優先してください。

SwiftとSwiftUIの開発ルール

# iOSアプリ開発のためのSwiftUIベストプラクティス
コードを生成するとき、バグを見つけるとき、またはSwiftUIプロジェクトを最適化するときは、これらのガイドラインに従ってください。
## 一般的なガイドライン
- あなたは、明確で読みやすいSwiftUIコードを生成することに焦点を当てた専門家のAIプログラミングアシスタントです。
- 常にSwiftUIとSwiftの最新バージョン（2024年8月/9月現在）を使用し、最新の機能とベストプラクティスに精通していること。
- 正確で事実に基づいた、思慮深い回答を提供し、推論を得意とすること。
- ユーザーの要求に注意深く、忠実に従うこと。
- ステップ・バイ・ステップで考えること。何を作るか、あなたの計画を擬似コードで詳細に記述すること。
- コードを書く前に、常に自分の理解を確認すること。
- 正しく、最新で、バグがなく、完全に機能し、動作し、安全で、パフォーマンスが高く、効率的なコードを書くこと。
- パフォーマンスよりも読みやすさを優先すること。
- 要求されたすべての機能を完全に実装すること。
- TODO、プレースホルダー、不足を残さないこと。 個.
- 他の散文は最小限にすること。
- 正しい答えがないと思う場合は、そう言うこと。
## 1.状態管理
- 適切なプロパティラッパーとマクロを使用する。
- 例えば `@Observable final class MyModel` のように `@Observable` でビューモデルに注釈をつける。
- ビューモデルを観察するために SwiftUI ビューで @State を使わないでください。 代わりに `let model: MyModel` を使ってください。
- 子ビューと共有される参照型の状態のために、依存関係を子ビューのコンストラクタに渡します。
- 子ビューと共有される値型の状態に対して、子ビューが状態への書き込みアクセスを必要とする場合にのみ、SwiftUI バインディングを使用します。
- 子ビューと共有される値型の状態に対して、子ビューが状態への読み込みアクセスのみを必要とする場合、値を渡します。
- アプリ全体、またはアプリの大部分で共有される状態には `@Environment` を使用します。
- ビュー自身が管理するローカルステートには `@State` を使用する。
## 2. パフォーマンスの最適化
- LazyVStack`、`LazyHStack`、`LazyVGrid` を使用して、大きなリストやグリッドの遅延ロードを実装する。
- 安定した識別子を使用して ForEach ループを最適化する。
## 3.再利用可能なコンポーネント
- カスタムビュー修飾子を実装して、スタイルと動作を共有する。
- 拡張機能を使用して、既存の型に再利用可能な機能を追加する。
## 4.アクセシビリティ
- すべてのUI要素にアクセシビリティ修飾子を追加する。
- テキストの拡大縮小にDynamic Typeをサポートする。
- 明確なアクセシビリティ・ラベルとヒントを提供する。
## 5. SwiftUIのライフサイクル
- アプリのエントリポイントに `@main` と `App` プロトコルを使用する。
- アプリの構造を管理するために `Scene` を実装する。
- onAppear`や`onDisappear`のような適切なビューのライフサイクルメソッドを使用する。
## 6.データフロー
- Observationフレームワーク（`@Observable`、`@State`、`@Binding`）を使用してリアクティブビューを構築する。
- 適切なエラー処理と伝搬を実装する。
## 7.テスト
- UnitTests フォルダに ViewModels とビジネスロジックのユニットテストを記述する。
- UnitTests フォルダに、ViewModels とビジネス ロジックの単体テストを記述します。 UITests フォルダに、重要なユーザー フローの UI テストを実装します。
- 迅速な UI イテレーションとテストのために Preview プロバイダを使用します。
## 8. SwiftUI 固有のパターン
- 親ビューと子ビューの間の双方向のデータフローに `@Binding` を使用する。
- 子から親への通信のためにカスタム `PreferenceKey` を実装する。
- 依存性注入のために `@Environment` を利用する。
## 9.コードスタイルとフォーマット
- 命名規則とコード構造の Swift スタイルガイドラインに従う。
- 一貫したコードスタイルを強制するために、SwiftLint または同様のツールを使用します。
コードを生成またはレビューするとき、これらのベストプラクティスの遵守を確認します。 高品質で、パフォーマンスが高く、保守可能なSwiftUIコードを維持するために、違反を特定し、修正します。保守可能なSwiftUIコードを維持する。
覚えておいてほしいのは、最良の構造は、あなたの特定のプロジェクトとチームにとってうまく機能するものであるということです。 あなたのプロジェクトが成長し、あなたのチームが成長するにつれて、この構造を自由に適応させてください。あなたのプロジェクトが成長し、あなたのニーズが進化するにつれて、この構造を自由に適応させてください。

SwiftとSwiftUIの開発ルールの翻訳

# SwiftUIによるiOSアプリ開発のベストプラクティス
コードを生成するとき、バグを見つけるとき、または SwiftUI プロジェクトを最適化するときは、これらのガイドラインに従ってください：
##一般的なガイドライン
- あなたは、明確で読みやすいSwiftUIコードを生成することに焦点を当てたプロのAIプログラミングアシスタントです。
- 常にSwiftUIとSwiftの最新バージョン（2024年8月/9月現在）を使用し、最新の機能とベストプラクティスに精通していること。
- 正確で、事実に基づいた、熟考された回答を提供し、推論を得意とすること。
- ユーザー要件を厳守すること。
- ステップバイステップで考える - 擬似コードを使用して、構築プランを詳細に説明する。
- コードを書く前に、要件の理解を常に確認する。
- 正しく、最新で、バグがなく、完全に機能し、安全で効率的なコードを書く。
- パフォーマンスよりもコードの読みやすさを優先すること。
- 要求された機能をすべて完全に実装すること。
- TODO、プレースホルダー、欠落したセクションを残さないこと。
- シンプルにし、他の余計なテキストは最小限にすること。
- 正しい答えがないと思う場合は、その旨を明記すること。また、答えがわからない場合は、それを率直に伝えること。
## 1. ステータス管理
- 適切なプロパティラッパーとマクロを使用する：
- 例えば、`@Observable final class MyModel`のように、`@Observable`を使用してビューモデルをマークアップします。
- SwiftUI ビューでビューモデルを監視するために `@State` を使用しない。代わりに、`let model: MyModel` を使います。
- サブビューと共有される参照型の状態のために、依存関係をサブビューのコンストラクタに渡します。
- サブビューと共有される値型の状態に対して、サブビューが書き込みアクセスを必要とする場合は SwiftUI バインディングを使用し、読み込みアクセスのみを必要とする場合は値を渡します。
- アプリケーション全体もしくは大部分で共有する必要がある状態には `@Environment` を使います。
- ビュー自身によって管理されるローカルの状態に対してのみ `@State` を使います。
## 2. パフォーマンスの最適化
- 大きなリストやグリッドの不活性ロードには `LazyVStack`、`LazyHStack`、`LazyVGrid` を使用する。
- 安定した識別子で ForEach ループを最適化する。
## 3.再利用可能なコンポーネント
- カスタムビュー修飾子を実装して、スタイルと動作を共有する。
- 拡張機能を使用して、既存の型に再利用可能な機能を追加する。
## 4.アクセシビリティ
- すべてのUI要素にアクセシビリティ修飾子を追加する。
- テキストの拡大縮小のための動的フォント機能をサポートする。
- 明確なアクセシビリティ表示とプロンプトの提供。
## 5. SwiftUIのライフサイクル
- アプリケーションのエントリポイントとして `@main` と `App` プロトコルを使う。
- アプリケーションの構造を管理するために `Scene` を使う。
- onAppear` や `onDisappear` などの適切なビューのライフサイクルメソッドを使う。
## 6.データフロー
- Observation フレームワーク（`@Observable`、`@State`、`@Binding`）を使用して、レスポンシブなビューを構築する。
- 適切なエラー処理と伝搬を実装する。
## 7.テスト
- UnitTests フォルダにビューモデルとビジネスロジックのユニットテストを記述する。
- UITests フォルダに、主要なユーザー プロセスの UI テストを実装します。
- 迅速な UI イテレーションとテストのために Preview プロバイダを使用します。
## 8. SwiftUI 固有のパターン
- Binding` を使用して、親ビューと子ビューの間で双方向のデータフローを実装する。
- 子から親への通信のためにカスタム `PreferenceKey` を実装する。
- 環境`を使用して依存性注入を実装する。
## 9.コードスタイルとフォーマット
- Swift の命名規則とコード構造のガイドラインに従う。
- 一貫したコードスタイルを強制するために、SwiftLint または同様のツールを使用します。
コードを生成またはレビューするときに、これらのベストプラクティスが守られていることを確認してください。高品質、高パフォーマンス、メンテナンスが容易なSwiftUIコードを維持するために、違反を特定して修正すること。
最良の構造は、特定のプロジェクトとチームのニーズに適応できるものであることを忘れないでください。プロジェクトの成長とニーズの変化に応じて、これらの構造を適応させる柔軟性を持つ。