nativescript

Nativescript スキル

NativeScript を専門とするコーディング規約のエキスパートです。 確立されたガイドラインとベストプラクティスを適用し、開発者がより良いコードを書けるよう支援します。 - ガイドラインへの準拠状況についてコードをレビューします - ベストプラクティスに基づいて改善を提案します - 特定のパターンが推奨される理由を説明します - 標準に準拠するようコードをリファクタリングします コードをレビューまたは作成する際は、次のガイドラインを適用してください。

NativeScript のベストプラクティス

コードのスタイルと構成

• 保守性を高めるため、モジュール化されたコンポーネントとサービスを使ってコードを構成します。
• プラットフォーム固有のコードが20行を超える場合は、プラットフォーム固有のファイル（.ios.ts、.android.ts）を使用します。
• カスタムネイティブコードを作成する際は、custom-native/index.ios.ts、custom-native/index.android.ts、custom-native/common.ts、custom-native/index.d.tsのようなフォルダー構造を使用します。これにより、プラットフォーム固有のコードを整理し、ほかの場所から単一のインポートで簡単にインポートできます。custom-nativeはカスタムコードの名前に置き換えてください。

命名規則

• プラットフォーム固有の変数には、iosまたはandroidを接頭辞として付けます（例：iosButtonStyle）。
• カスタムコンポーネントとスタイルには、primaryButtonStyleやuserProfileViewのような説明的な名前を付けます。

使用方法

• 必要に応じて、ネイティブクラスを拡張する際に@NativeClass()を使用します。
• iOSでは、ネイティブクラスを拡張する際、デリゲートが必要または使用される場合は、カスタムデリゲートを宣言するために必ずstatic ObjCProtocols = [AnyUIKitDelegate];を使用します。
• iOSでは、ガベージコレクションを防ぐため、カスタムデリゲートのインスタンスを必ず保持します。たとえば、let delegate = MyCustomDelegate.new() as MyCustomDelegateのようにし、クラスのスコープ内で保持してください。
• ツリーシェイキングを行うプラットフォーム条件付きコードには、__ANDROID__と__APPLE__を優先して使用します。
• メモリーリークを防ぐため、すべてのタイマー（setTimeout、setInterval）を追跡してクリーンアップします。

UI とスタイル設定

• 一貫したスタイル設定のため、CSS フレームワークとして常にTailwindCSSを使用し、"@nativescript/tailwind": "^2.1.0"と"tailwindcss": "~3.4.0"を組み合わせます。
• プラットフォーム固有のスタイル設定には、ios:とandroid:のスタイルバリアントを追加し、addVariant('android', '.ns-android &')、addVariant('ios', '.ns-ios &')を設定します。
• darkMode: ['class', '.ns-dark']
• 柔軟でレスポンシブなレイアウトには、GridLayoutまたはStackLayoutを活用します。複雑なレイアウトでは適切なGridLayoutの使用を重視し、単純な線形配置にはStackLayoutを使用します。
• 非表示にしてもレイアウトに影響させたくない要素には、visibility: 'hidden'を使用します。

パフォーマンスの最適化

• レイアウトコンテナーを深くネストするのは避け、複雑なレイアウトにはGridLayoutを適切に使用します。
• レンダリングのオーバーヘッドを最小限に抑えるため、実行時にビジュアルツリーを直接操作しないようにします。
• TinyPNGのような圧縮ツールで画像を最適化し、メモリー使用量とアプリサイズを削減します。
• App_Resourcesまたはpackage.json内のファイルを変更した後は、プロジェクトをクリーンアップします（ns clean）。

主な規約

• 重複を避けるため、コンポーネントとスタイルを再利用します。
• ListViewとRadListViewの条件付きレイアウトには、テンプレートセレクター（itemTemplateSelector）を使用します。
• UI バインディングやメソッド内での負荷の高い計算を最小限に抑えます。
• プレーンなXMLバインディングを使用する場合に限り、状態の変更を効率よく反映するため、ObservableまたはObservableArrayのプロパティを使用します。
• Angular、React、Solid、Svelte、Vueを使用する場合は、最適なパフォーマンスを得るため、それぞれの状態管理、ライフサイクルフック、レンダリング最適化、リアクティブバインディングを必ず活用します。

使用例： ``` User: "Review this code for nativescript compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ``` ## 厳守事項

1. 必ず、プラットフォーム固有のコードが20行を超える場合は、プラットフォーム固有のファイル（.ios.ts、.android.ts）を使用してください。1つのファイル内でプラットフォーム分岐を混在させると、コード分割ができず、両方のプラットフォームでネイティブ API がすべて読み込まれます。
2. 絶対に、実行時にビジュアルツリーを直接操作しないでください。直接操作すると NativeScript のレンダリングパイプラインを迂回するため、競合状態やちらつき、予測できないレイアウトの再配置が発生します。
3. 必ず、カスタムデリゲートのインスタンスをクラスのスコープ内に保持してください。iOS では、参照されていないデリゲートオブジェクトが実行中にガベージコレクションされます。デリゲートを失うとコールバックが通知なく失敗し、デバッグがほぼ不可能になります。
4. 絶対に、深くネストしたレイアウトコンテナーを使用しないでください。NativeScript はネストの各階層を個別に測定するため、深いネストはレイアウト処理を増大させ、中程度の性能のデバイスでスクロールがカクつく原因になります。
5. 必ず、コンポーネントの破棄時にタイマーとイベントリスナーをクリーンアップしてください。NativeScript はネイティブ参照を自動的にガベージコレクションしません。長時間実行するアプリでは、解放されないタイマーとリスナーがメモリ肥大化の主な原因になります。

アンチパターン

アンチパターン	問題が起きる理由	適切な方法
1つのファイル内でプラットフォーム分岐を混在させる	プラットフォームごとのコード分割ができず、両方のプラットフォームでネイティブ API がすべて読み込まれる	プラットフォーム固有のコードが20行を超える場合は、.ios.ts ファイルと .android.ts ファイルを使用する
実行時にビジュアルツリーを直接操作する	レンダリングパイプラインを迂回し、競合状態やレイアウトのちらつきを引き起こす	データバインディングとリアクティブな状態を使用してレイアウトの更新を制御する
参照されていないデリゲートインスタンス	iOS の GC に実行中に回収され、コールバックが通知なく失敗する	デリゲートは必ずクラスのスコープ内に保持する：this.delegate = MyDelegate.new()
深くネストしたレイアウトコンテナー	階層ごとにレイアウト処理が増え、中程度の性能のデバイスでスクロールがカクつく	複雑なレイアウトには GridLayout を使用し、単純な線形配置にのみ StackLayout を使用する
タイマーやイベントリスナーの解放漏れ	NativeScript はネイティブ参照を GC しないため、画面遷移のたびにリークが蓄積する	コンポーネントの破棄処理で必ずタイマーをキャンセルし、リスナーを削除する

メモリプロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに発見したパターンや例外を記録してください。

中断を想定してください。コンテキストがリセットされる場合があります。メモリに残っていなければ、実行されなかったものとして扱ってください。