ゼロセットアップ テストが適切なツールである場合
作業単位を小さなブラウザー ドキュメントとして表現できる場合は、プレイグラウンドを使用します。
- メインのコードベースの外でレイアウトまたはインタラクションのバグを再現する。
- CSS プロパティ、セレクター、アニメーション、グリッド、またはコンテナー クエリをテストします。
- フレームワークの抽象化を選択する前にコンポーネントのプロトタイプを作成します。
- DOM イベント、フォーム動作、ストレージ、タイマー、またはフェッチ ロジックを検証します。
- チームメイトまたはバグレポート用に最小限の再現可能なサンプルを作成します。
- ツールチェーンを導入せずに Web の基礎を教えたり学習したりできます。
- 静的データを使用して小さなインターフェイスをモックします。
- デモンストレーション用に自己完結型の HTML ファイルをエクスポートします。
必要な複雑さを隠すために使用しないでください。作業が認証、バックエンド、フレームワークのコンパイル、サーバー レンダリング、パッケージ グラフ、データベースの移行、または運用ビルドの動作に依存している場合は、代わりにその環境を再現します。
優れたプレイグラウンドでは、無関係なセットアップが削除され、実際の質問が観察できるようになります。不適切なプレイグラウンドでは、バグの一部である依存関係が削除され、誤った結果が生成されます。
ブラウザ プレイグラウンドの仕組み
マークアップは、要素、フォーム、セマンティクス、アクセシビリティ関係、およびソースの順序を定義します。
スタイルはプレビュー ドキュメントに挿入されるため、変更をすぐにレンダリングできます。
スクリプトはプレビュー コンテキスト内で実行され、DOM、ブラウザー API、およびテスト データと対話します。
iframe または同等のドキュメントは結合されたコードをレンダリングし、コンソール出力とランタイム エラーをキャプチャできます。
HTML iframe 要素は、インライン ドキュメントの srcdoc 属性と、ネストされたコンテキストに制限を追加する sandbox 属性をサポートします。 MDN は、サンドボックス トークンがスクリプト、フォーム、ポップアップ、同一オリジン動作などのアクセス許可を制御することに注意しています。構成はセキュリティ上の決定です。スクリプトと同一オリジン コンテンツの同一オリジンの両方を有効にすると、埋め込まれたドキュメントがサンドボックスを削除できる可能性があるため、分離が弱くなる可能性があります。
したがって、本格的な遊び場では、機能と封じ込めのバランスが取れています。ナビゲーション、ダウンロード、ポップアップ、または親ページへのアクセスを制限しながら、ユーザーが JavaScript をテストできるようにスクリプトを許可する場合があります。コンソール メッセージは、ログ メソッドをラップするか、プレビューとエディターの間で受け渡すメッセージを使用することによってキャプチャできます。
ネイティブ JavaScript モジュールにより、多くの実験におけるビルド ステップの必要性が軽減されます。ブラウザは、
高速なデバッグワークフロー
動作を再現するために必要な最小限のマークアップ、スタイル、スクリプト、およびデータのみをコピーします。
問題が分離されたプレビューで一貫して発生することを確認します。
障害が発生したパスの周囲にコンソール出力、表示状態、アサーション、またはタイミング マーカーを追加します。
複数のレイヤーを一度に編集するのではなく、特定の仮説をテストします。
検証された変更を実際のプロジェクトに移動し、運用依存関係を使用して再度テストします。
削減ステップが最も価値があります。バグが消えるとき、それは情報です。例から削除されたものが原因の一部でした。障害が再発するまで、依存関係を意図的に追加し直してください。これは、プロジェクト全体をすべての仮説に基づいて実行するよりも高速です。
状態ごとに別のテスト ケースを保持します。フォームは最初の送信では機能しても、2 回目の送信では失敗する可能性があります。コンポーネントは 1 つの項目では正しくレンダリングされ、長いラベルでは折りたたまれる場合があります。フェッチ パスは、ネットワークが応答すると機能し、タイムアウトすると失敗することがあります。良い例では、最初のスクリーンショットだけでなく、遷移をテストします。
Jivaro HTML、CSS、JavaScript プレイグラウンドを使用する
Jivaro HTML、CSS & JavaScript Playground は、個別のエディター、ライブ プレビュー、コンソール出力、応答性の高いビューポート コントロール、テンプレート、ローカル保存、書式設定、およびエクスポートを提供します。
関連する HTML を貼り付けて、問題またはアイデアを表示するために必要な CSS と JavaScript のみを追加します。
プレビューとコンソールを併用します。正しく見える画面でも、実行時エラーや失敗したリクエストが含まれる可能性があります。
狭い幅、中程度の幅、広い幅をテストします。オーバーフロー、クリップされたコントロール、使用できないフォーカス順序、および予期しないラッピングを探します。
テンプレートは開始点であり、隠れた依存関係ではありません。テストに必要のないものはすべて削除します。
失敗したケースを保存し、提案された修正のためにそれを複製します。これにより、回帰と説明が容易になります。
実験を共有するか、リポジトリに移動する必要がある場合は、完全な HTML ファイルをダウンロードします。
縮小されたテスト ケース、インターフェイス スケッチ、応答性の高い実験、ブラウザー API デモ、および自己完結型プロトタイプに使用します。出荷前に実際のアプリケーションで結果を再テストします。
デバイスラベルではなく、応答動作をテストします
「モバイル、タブレット、デスクトップ」は便利な略語ですが、コンテンツ主導型の幅ではレイアウトが失敗します。つまり、ナビゲーション ラベルが折り返されたり、テーブルがコンテナーよりも幅が広くなったり、グリッド アイテムが最小サイズを守れなくなったりする場合です。 3 つのプリセットだけをテストするのではなく、プレビューを幅全体にドラッグします。
繰り返し可能なチェックリストを使用します。
- キーボード フォーカスは表示されたままになり、論理的な順序に従います。
- タッチ ターゲットは十分な大きさを保ち、重なり合いません。
- 長い単語、URL、翻訳されたラベルは安全にラップされます。
- フォームはラベル、エラー、送信アクションを保持します。
- テーブルは縮小して読み取れない列になるのではなく、スクロールします。
- 画像は正しいアスペクト比と意味のある代替テキストを保持します。
- メニューは正しく開いたり閉じたり、フォーカスを戻したりできます。
- 必要に応じて、モーションの削減とハイコントラストの設定が尊重されます。
実際のコンテンツの極端なテストを行います。プレースホルダー テキストからレイアウトの脆弱性が明らかになることがほとんどありません。
モジュール、API、依存関係
ブラウザネイティブのモジュールは小規模な実験には最適ですが、モジュールの読み込みにはルールがあります。相対インポートには正しいパスとファイル拡張子が必要です。裸のパッケージ名にはインポート マップまたはビルド システムが必要です。一部の例では、モジュール、フェッチ、および CORS の動作が異なるため、ローカルの file:// ページではなく、HTTP オリジンが必要です。
外部 API には別のレイヤーが導入されます。
- エンドポイントがサーバー アプリケーションで動作している場合でも、CORS はリクエストをブロックする場合があります。
- API キーは、意図的に公開され制限されている場合を除き、クライアント コードに埋め込まないでください。
- Cookie と認証は、オリジン、SameSite 設定、資格情報モードによって異なります。
- サードパーティのライブラリは変更または消滅する可能性があります。再現可能な例のピンのバージョン。
- ブラウザー専用コードは、
windowまたは DOM API に依存する可能性があり、Node.js に直接移動することはできません。
パッケージを大量に使用する実験の場合は、完全なブラウザ内開発環境用に設計されたツールを使用するか、ローカル プロジェクトに移動してください。単純なプレイグラウンドを壊れやすいパッケージ リゾルバーに変えないでください。
サンドボックスとセキュリティの制限
任意の JavaScript を実行することは本質的に強力です。プレイグラウンドでは、プレビューをエディターと親ページから分離し、ナビゲーションとポップアップを制限し、不必要な同一オリジン アクセスの許可を避ける必要があります。プレビューは依然として CPU を消費し、メモリを割り当て、許可されたネットワーク リクエストを実行し、その権限内で迷惑な動作を試みる可能性があります。
シークレット、プライベート トークン、顧客データ、または独自の製品コードを信頼できないプレイグラウンドに貼り付けないでください。ローカルまたは会社のツールの場合は、データ パスとポリシーを検査します。ブラウザーのサンドボックスは技術的な境界であり、ログ記録やストレージに関する約束ではありません。
実際のサイトで実行されるコードをテストするときは、本番環境を再現した環境でコンテンツ セキュリティ ポリシー、クロスオリジン分離、アクセス許可、ヘッダーもテストします。 Chrome DevTools Local Overrides は応答ヘッダーとコンテンツ変更のプロトタイプを作成でき、Workspaces はブラウザーの編集をローカル ソース ファイルにマッピングできます。
実際のプロジェクトに移行する時期
これらの 1 つ以上が当てはまったら、実験を終了します。
- コードはパッケージ、コンパイル、環境変数、またはバックエンド サービスに依存します。
- 複数のファイルと寄稿者にはバージョン管理が必要です。
- テスト、lint、型チェック、または CI は動作を保護する必要があります。
- パフォーマンスは本番バンドルとキャッシュに依存します。
- セキュリティヘッダーとデプロイメント構成は結果に影響します。
- プロトタイプは使い捨てのテストではなく、維持される製品になりつつあります。
移動するときは、縮小された例を回帰フィクスチャまたはドキュメント サンプルとして保存します。これは、動作を大規模なアプリケーションから分離するため、依然として有用です。
Playground vs DevTools vs ローカル プロジェクト
| Environment | こんな方に最適 | Strength | Limit |
|---|---|---|---|
| ブラウザのプレイグラウンド | 縮小されたサンプル、学習、プロトタイプ、共有可能なデモ | 即時、分離、セットアップ不要 | 限られたプロジェクトとサーバーのコンテキスト |
| DevTools スニペットとオーバーライド | 既存のページに対する変更のテスト | 実際のランタイムとネットワークを使用します | 一時的またはブラウザ固有の可能性があります |
| ローカル静的ファイル | 単純なマルチファイル HTML、CSS、および JavaScript | 完全なファイル所有権とバージョン管理 | 一部の API にはローカル サーバーが必要です |
| フレームワークサンドボックス | コンポーネントまたはパッケージの実験 | フレームワークの動作に近づく | 隠れたツールと依存関係のリスクが増える |
| 完全なローカルプロジェクト | 本番環境の機能と統合のバグ | 最高の忠実度 | ほとんどのセットアップとノイズ |
よくある質問
プレビューを分離する信頼できるプレイグラウンドを使用し、秘密や機密の運用データを決して貼り付けないでください。サンドボックス化によりリスクは軽減されますが、任意のコードが無害になるわけではありません。
いいえ。プレーン HTML、CSS、JavaScript、ネイティブ モジュール、および多くのブラウザ API を直接テストできます。 npm は、実験がパッケージ、ビルド変換、または運用ツールチェーンに依存している場合に役立ちます。
モジュールとフェッチ リクエストには、オリジン ルールと CORS ルールが適用されます。ローカルの HTTP サーバーを通じてファイルを実行するか、適切なオリジンからプレビューを提供するプレイグラウンドを使用します。
同じフレームワークとバージョンをサポートしている場合もあります。ビルド、ハイドレーション、ルーティング、またはサーバー レンダリングのバグについては、通常、実際のプロジェクトを再現した方が信頼性が高くなります。
問題を一貫して発生させるために必要なコード、データ、環境に加えて、明確な手順、予想される動作、および実際の動作のみが必要です。
はい。このアプリは、自己完結型のフロントエンド実験を保存およびエクスポートするように設計されています。エクスポートされたファイルをプロトタイプとして扱い、運用環境で使用する前にレビューしてください。
関連するJivaroアプリ
CodeMirrorエディター、絞り込み可能なコンソール、レスポンシブプレビューを使って、HTML、CSS、JavaScriptの作成、確認、デバッグ、検索、保存、書き出しができます。
アプリを開く分離されたWorkerでJavaScript正規表現をテストし、キャプチャグループの確認、置換プレビュー、テストケース実行、各言語向けコード断片のコピーをローカルで行えます。
アプリを開く検索語の強調、ファビコン、日付、評価、サイトリンクを含むPC・モバイル検索スニペットを再現し、タイトル、説明、Open Graph、Twitterメタデータを確認できます。
アプリを開く出典と参考文献
- MDN: iframe 要素とサンドボックスMDN Web ドキュメント · リファレンス
- MDN: HTMLIFrameElement サンドボックス プロパティMDN Web ドキュメント · リファレンス
- MDN: JavaScript モジュールMDN Web ドキュメント · リファレンス
- Chrome DevTools: ローカル オーバーライドZZQPH0002QXZChrome DevTools · リファレンス
- Chrome DevTools: ワークスペースXXQPH0002QXZChrome DevTools · リファレンス