prototype

プロトタイプ

このスキルでは、1つのアイデアを、実際に動作する複数のバリエーションとして試します。ユーザーは実行中のアプリでそれらを比較し、1つを選び、残りは削除します。

実際のコードを作り、その後削除する

各バリエーションは、モックアップではなく、実際のアプリで実際のデータを使った本物のコードです。指定された数を作成してください。数が指定されていない場合は、色だけでなくアプローチが異なるものを5つ作成してください。ページは一時的なもので、バリエーションが選ばれたら削除します。

既存のコンポーネントのあらゆる状態を1つのページにまとめる場合は、lab に該当します。外部の参照をコピーする場合は、match に該当します。

1. アイデアを言い換える

アイデアと、バリエーションで試す軸（レイアウト、動き、密度など）を1行で書いてください。アイデアに2通りの解釈がある場合は、質問を1つしてください。

2. 実際のバリエーションを作成する

プロジェクトのコンポーネントと、実際のデータまたは現実的なデータを使用してください。静止画像や lorem ipsum は prototype-real-code または prototype-real-data に該当します。

3. 1つのページにまとめる

すべてのバリエーションを1つのルートで表示してください。バリエーションごとに別々のページを作るのは prototype-one-page に該当します。switcher.js をそのルートの隣にアプリへコピーし、ヘッダーコメントにあるとおり、1回だけ読み込んでください。バリエーションを <prototype-switcher> で囲み、それぞれの子要素に data-variant と、任意で data-note を付けてください。

スイッチャーはこのスキルに含まれているため、バリエーションだけを作成してください。スイッチャー、タブ行、グリッドを一から書くのは prototype-shipped-switcher に該当します。

それぞれに、違いが分かる短いラベルを付けてください。「Variant 3」は prototype-label-variants に該当します。両方を求められた場合を除き、アプリの現在のテーマを使ってください。明示的な要望なしにライトテーマとダークテーマを並べるのは prototype-one-theme に該当します。

4. 開く

開発サーバーを起動し、ページを開いて、すべてのバリエーションを一度確認してください。何も開かずに返信にパスだけを書くのは prototype-open-it に該当します。

5. 選択後に整理する

バーの Pick ボタンを押すと、「Pick Inline Filters from /prototypes/filters」のような1行がコピーされ、ユーザーが返信に貼り付けられます。ユーザーが選んだら、そのバリエーションを製品に取り込みます。負けたバリエーションは、ルート、switcher.js、その型宣言とともに削除してください。選択後もバリエーションが残っているのは prototype-prune-after-pick に該当します。

対応関係

各チェック項目はペアです。問題のある行の隣に、それを置き換える行を示します。

ルール	問題のある状態	置き換え先
prototype-real-code	静的なモックアップ画像	プロジェクトのコンポーネントで作成したバリエーション
prototype-real-data	Lorem ipsum の行	実際の行または現実的な行
prototype-label-variants	Variant 3	Inline Filters
prototype-one-page	バリエーションごとに1つ、計5つのルート	スイッチャー付きの1つのルート
prototype-shipped-switcher	一から書いたスイッチャー	switcher.js を読み込み、バリエーションだけを作成
prototype-one-theme	要望なしにライトテーマとダークテーマを並べる	アプリの現在のテーマ
prototype-open-it	「/prototypes/filters に作成しました」	ページを開き、すべてのバリエーションを確認
prototype-prune-after-pick	負けたバリエーションが4つ src/ に残っている	選ばれたものを取り込み、残りを削除

報告

重大度。 HIGH は、バリエーションが動作しない場合、または選択後に負けたバリエーションが残っている場合です。MEDIUM は、プレースホルダーデータ、ラベルのないバリエーション、色だけが異なるバリエーション、または手作りのスイッチャーです。LOW は、ユーザー向けにページを開かなかった場合です。

形式。 根本原因ごとに1件報告してください。

file:line - [rule-id] what is wrong

続けて Rule | Count | Severity のサマリーを記載してください。HIGH が残っている場合は Block、それ以外は Approve とします。開けなかったバリエーションにはすべて Not verified と記してください。