marko-best-practices について
Marko コンポーネントを開発・編集する人向けの Marko 6 ガイドです。公式ドキュメントを基準とし、構文や型チェック、クライアント側 JavaScript を抑える実践方法を扱います。
主な機能
- 01Marko 6 構文の指針
- 02公式ドキュメントを基準にする方針
- 03コンポーネントと状態の推奨事項
- 04イベントハンドラーの規約
- 05mtc による型チェック
活用シーン
- 01新しい .marko ファイルの構文確認
- 02状態管理とイベント処理のレビュー
- 03コンポーネントの簡潔さの維持
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/marko-best-practicesを入力して読み込まれたか確認します。
詳細
Marko のベストプラクティス
Marko は、Web アプリケーションを構築するための最新の UI フレームワークです。宣言的なコンポーネントベースの構文、きめ細かなリアクティビティ、高度に最適化されたコンパイラーを備えています。Marko は、ストリーミング、部分的なハイドレーション、各ページに送信する JavaScript を可能な限り最小限に抑えることを重視し、サーバーレンダリングとインタラクティブなクライアント側エクスペリエンスの両方に対応するよう設計されています。
Marko のドキュメント
Marko に関するすべての情報は、Marko のドキュメントを一次情報として参照してください。構文や動作については、必ず公式ドキュメントを参照してください。Marko は時間とともに変更されるため、学習データに頼るのではなく、最新のドキュメントを取得してください。
ドキュメントのインデックスには、利用可能なすべてのページとその URL、簡単な説明が記載されています。
Marko のドキュメントページはすべて、URL の末尾に .md を追加すると Markdown として取得できます（https://markojs.com/docs/introduction/getting-started.md）。
Marko 6 の構文
このドキュメントとこのスキルはMarko 6を対象としています。Marko 5 の構文は使用しないでください。
新規または編集した .marko ファイルのチェックリスト
- Marko 6 の構文のみを使用している（スクリプトレット、古いイベント構文、Marko 5 のブロックを使用していない）。
- state（
<let>または<const>）で同じ動作を実現できる場合、<script>を使用していない。 - イベントハンドラーには関数形式（
onClick() { ... }）または参照を使用している。文字列名は使用していない。 - 表示・非表示を切り替えるコンテンツで状態を維持する必要がある場合は
<show=cond>を使用している。<if>はコンテンツを破棄して再構築する。 - コンポーネントは小さく読みやすい状態を保っている。大きなテンプレートは分割を検討する。
- 不要なクライアント側 JavaScript を使用していない。スクリプトより、組み込みのブラウザー API や HTML/CSS の機能を優先する。
- Props はエクスポートされた
Inputインターフェースで宣言し、テンプレートはmtc（@marko/type-check）で型チェックしている —tscは.markoファイルをスキップし、何も報告しない。