Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

third-party

アナリティクス・広告・ウィジェットなどのサードパーティスクリプトがページ読み込み速度やCore Web Vitalsに悪影響を与えている場合に活用するスキルです。サードパーティスクリプトによるパフォーマンス低下を軽減するための戦略を提供します。

description の原文を見る

Teaches strategies for mitigating third-party script performance impact. Use when third-party scripts like analytics, ads, or widgets are degrading your page load times or Core Web Vitals.

SKILL.md 本文

サードパーティスクリプトの読み込みを最適化する

目次

いつ使うのか

  • サードパーティスクリプト（アナリティクス、広告、チャットウィジェット、ソーシャルメディア埋め込み）がサイトを遅くしている場合に使用してください
  • 必須のサードパーティ機能を維持しながら Core Web Vitals を最適化するのに役立ちます

手順

  • 重要でないサードパーティスクリプトに async または defer 属性を使用してください
  • preconnect と dns-prefetch リソースヒントを使用して早期の接続を確立してください
  • IntersectionObserver またはファサードを使用してビューポート下部の埋め込み（YouTube、マップ、ソーシャルメディア）を遅延読み込みしてください
  • より優れたキャッシング制御のために、重要なサードパーティスクリプトの自己ホスティングを検討してください
  • フレームワークレベルの最適化のために、適切な strategy 値を持つ Next.js Script コンポーネントを使用してください

詳細

サイロで動作する最新のサイトを見つけるのは難しいでしょう。ほとんどのサイトは、データ、機能、コンテンツなど、ウェブ上の他の複数のソースと共存し、それらに依存しています。別のドメインにあり、あなたのサイトで使用されるリソースは、あなたのサイトのサードパーティ（3P）リソースです。サイトに含まれる典型的なサードパーティリソースには、以下が含まれます：

  • マップ、ビデオ、ソーシャルメディア、チャットサービスの埋め込み
  • 広告
  • アナリティクスコンポーネントとタグマネージャ
  • A/B テストとパーソナライゼーションスクリプト
  • データビジュアライゼーションやアニメーションに使用されるものなど、すぐに使用できるヘルパー関数を提供するユーティリティライブラリ
  • reCAPTCHA またはボット検出用の CAPTCHA

サードパーティを使用して、コンテンツに価値を追加する他の機能を統合したり、ゼロからサイトを構築する際の煩雑な処理を軽減したりできます。2021年の Web Almanac レポートによると、ウェブ上のページの 94% 以上がサードパーティを使用しており、画像と JavaScript がサードパーティコンテンツの最も重要な貢献者となっています。

サードパーティリソースはサイトに価値のある機能を追加できますが、以下の場合、サイトを遅くする可能性があります：

  • 必要なリソースごとにサードパーティドメインへの追加のラウンドトリップが発生する
  • JavaScript の大量使用（ダウンロードと実行時間に影響）により、または最適化されていない画像/ビデオのため、サイズが大きい
  • 個別のサイト所有者が実装に影響を与えることができず、その動作は予測不可能である可能性がある
  • ページ上の他の重要なリソースのレンダリングをブロックし、Core Web Vitals（CWV）に影響を与える可能性がある

これらの問題があるにもかかわらず、サードパーティはビジネスに不可欠である可能性があります。3P を廃止できない場合、次の最良の方法はパフォーマンスへの影響を減らすために最適化することです。

3P リソースのパフォーマンスへの影響を評価する

サードパーティコードがサイトにどのように影響しているかを調べるために、複数のテクニックを組み合わせて使用できます。

最適化戦略

サードパーティコードはあなたの管理下にないため、ライブラリを直接最適化することはできません。これにより、2 つのオプションが残ります。

  1. 置き換えまたは削除：サードパーティスクリプトが提供する価値がそのパフォーマンスコストに見合わない場合は、削除を検討してください。また、同様の機能を提供する軽量の代替案を評価することもできます。

  2. 読み込みシーケンスを最適化する：読み込みプロセスには、ブラウザで複数のファーストパーティとサードパーティリソースを読み込むことが含まれます。最適な読み込み戦略を設計するには、異なるリソースに対してブラウザが割り当てた優先度、ページ上の位置、および各リソースのウェブページに対する価値を考慮する必要があります。

3P スクリプトを効率的に読み込む

以下は、正しく使用された場合、サードパーティリソースのパフォーマンスへの影響を減らすことができる時間が実証されたベストプラクティスです。

async または defer を使用してスクリプトが他のコンテンツをブロックするのを防ぐ

対象：重要でないスクリプト（タグマネージャー、アナリティクス）

JavaScript のダウンロードと実行はデフォルトで同期的であり、HTML パーサーと DOM 構築をメインスレッドでブロックする可能性があります。<script> 要素で async または defer 属性を使用することで、ブラウザがスクリプトを非同期的にダウンロードするよう指示します。これらは、重要なレンダリングパスに必要ないスクリプト（メイン UI コンポーネントなど）をダウンロードするために使用できます。

  • defer：スクリプトはパーサーが実行される間に並行してフェッチされ、スクリプト実行は解析が完了するまで遅延されます。Defer は DOM 構築後まで実行を遅延させるためのデフォルトの選択肢である必要があります。
  • async：スクリプトは解析中に並行してフェッチされますが、パーサーをブロックするときに利用可能になるとすぐに実行されます。依存関係のあるモジュールスクリプトの場合、スクリプトとそのすべての依存関係は defer キューで実行されます。読み込みプロセスの早期に実行する必要があるスクリプトに async を使用してください。たとえば、早期ページロードデータを見落とさずに、特定の分析スクリプトを早期に実行したい場合があります。
<script src="https://example.com/deferthis.js" defer></script>
<script src="https://example.com/asyncthis.js" async></script>

ここで言及する価値のある注意点は、async と defer がブラウザで割り当てられたリソースの優先度を低下させ、かなり後で読み込まれることになるということです。優先度ヒントという新機能は、この問題を回避するのに役立つことができます。

リソースヒントを使用して必要な原点への早期接続を確立する

対象：重要なスクリプト、フォント、CSS、サードパーティ CDN からの画像

サードパーティの起点への接続は、DNS ルックアップ、リダイレクト、およびサードパーティサーバーごとに必要になる可能性のある複数のラウンドトリップのため、遅くなる可能性があります。リソースヒント dns-prefetch と preconnect は、ライフサイクルの早期に接続を開始することにより、このセットアップに必要な時間を削減するのに役立ちます。

ドメインに対応する dns-prefetch リソースヒントを含めると、DNS ルックアップが早期に実行され、DNS ルックアップに関連するレイテンシが低下します。これを preconnect と組み合わせて、最も重要なリソースに使用できます。preconnect は、DNS ルックアップに加えて TCP ラウンドトリップを実行し、TLS ネゴシエーションを処理することにより、サードパーティドメインとの接続を開始します。

<head>
  <link rel="preconnect" href="http://example.com" />
  <link rel="dns-prefetch" href="http://example.com" />
</head>

リソースヒントの利点は、Andy Davies がサードパーティイメージ CDN への早期接続を開始することにより、preconnect がメイン製品画像の読み込み時間を短縮するのにどのように役立ったかを議論しているこのケーススタディで明らかです。

同様に、ボット検出（reCaptcha）やコンセント管理などの重要なサードパーティの読み込み時間を最適化するためにリソースヒントを使用できます。

ビューポート下部の 3P リソースを遅延読み込みする

対象：YouTube、マップ、広告、ソーシャルメディアなどの埋め込み

ソーシャルメディアフィード、広告、YouTube ビデオ、マップに使用されるサードパーティ埋め込みはウェブページを遅くする可能性があります。ただし、すべてのそのような埋め込みがページロード時にユーザーに表示される必要があり、ユーザーがスクロールダウンするときに遅延読み込みできます。目的のブラウザサポートに応じて、異なる遅延読み込み方法を使用できます。

  1. loading 属性は、YouTube や Google マップなどのサードパーティ埋め込みを読み込むために一般的に使用される画像と iframe で使用できます。
  2. IntersectionObserver API を使用するカスタム実装により、観察要素がブラウザのビューポートに出入りするときを検出できます。
  3. Lazy-sizes - 遅延読み込みを実装する一般的な JavaScript ライブラリ。

遅延読み込み埋め込みのバリエーションは、ページロードでユーザーに表示される静的または動的ファサードを使用します。実際の埋め込みの代わりに、マップ埋め込みの静止画を使用できます。ソリューションには、マップの Map Static API、Twitter 埋め込みの Tweetpik、YouTube の lite-youtube-embed、チャットウィジェットの React-live-chat-loader が含まれます。これらのテクニックに関する包括的な説明はここで利用できます。

遅延読み込みとファサードに関するいくつかの注意点：

  • YouTube ファサードの動作は iOS および macOS 11 以降の Safari では若干異なります。初回のタップ/クリックで実際のビデオ埋め込みが読み込まれます。ユーザーはビデオを再生するためにもう一度タップする必要があります。
  • 遅延読み込みはレイアウトシフトを引き起こし、埋め込みのサイズが指定されていない場合、ユーザーエクスペリエンスに影響を与える可能性があります。レイアウトシフトを防ぐため、すべての遅延読み込み埋め込みまたはそれらのコンテナー要素のサイズを指定する必要があります。

3P スクリプトを自己ホストしてラウンドトリップを防ぐ

対象：JavaScript ファイル、フォント

preconnect または dns-prefetch により、サードパーティの起点への接続を早期に開始できますが、接続は依然として必要です。また、サードパーティの起点では、最適ではない可能性があるそれらのキャッシング戦略に依存する必要があります。

スクリプトの同じ起点にコピーを自己ホストすることで、スクリプトに使用される読み込みとキャッシング処理をより細かく制御できます。自己ホストは DNS ルックアップに必要な時間を短縮し、HTTP キャッシングを使用してスクリプトのキャッシング戦略を改善できます。HTTP/2 サーバープッシュを使用して、ユーザーが必要とするスクリプトをプッシュすることもできます。自己ホストサードパーティスクリプトがいかに優れているかの良い例は Casper.com で、Optimizely によって提供されるサードパーティスクリプトを自己ホストすることにより、ホームページのスタートレンダリング時間を 1.7 秒短縮しました。

自己ホストされたサードパーティスクリプトのコピーでは、元のコピーへの変更に基づいてコピーを定期的に更新する必要があります。更新がなければ、スクリプトは古くなり、依存関係に対応する重要な修正や変更が失われる可能性があります。CDN ではなくサーバーで自己ホストすることは、CDN が採用している エッジキャッシングメカニズムの利点を活用することを妨げます。

サービスワーカーを使用してスクリプトをキャッシュする

対象：JavaScript ファイル、フォント

頻繁に変更されるスクリプトの場合、自己ホストはオプションではない可能性があります。サービスワーカーを使用して、CDN エッジキャッシングを活用しながら、そのようなサードパーティスクリプトのキャッシングを改善できます。この技術により、ネットワークからの再フェッチの頻度をより細かく制御できます。この技術を preconnects と組み合わせてさらに、フェッチ操作のネットワークコストを削減できます。重要でないサードパーティスクリプトのリクエストが、ページが重要なユーザー時点に達するまで遅延されるようにリソースを読み込むこともできます。

理想的な読み込みシーケンスに従う

異なるタイプのサードパーティとページに対する価値について、上記のガイダンスを考慮してください。各リソースの目的の用途に基づいて、理想的なリソース読み込みシーケンスに従い、ファーストパーティとサードパーティリソースを最適にインターレースして、より高速なページ読み込みを実現できます。

スクリプトタイプ別のベストプラクティス

一部のスクリプトは他のスクリプトよりも最適化しやすいです。一般的なコンセンサスは、ほとんどのユーザーがコンテンツの特定のしきい値が表示されるまでサイトと対話しないということでした。

重要でない JavaScript

チャットウィジェットや分析スクリプトなど、ほとんどのサードパーティはユーザーエクスペリエンスに重要でなく、遅延させることができます。これらのスクリプトの読み込みと実行を遅延させるための最も一般的な方法は、defer スクリプト属性を使用することです。

広告または分析チームは、スクリプトの延期がアプリの可視性と広告収入に影響を与えることを懸念する可能性があります。Telegraph ケーススタディは、すべてのスクリプトを延期してもアナリティクスや広告メトリクスが歪まないケースで、この文脈でよく引用されています。代わりに、First Ad Loaded メトリクスは平均 4 秒向上しました。

ボット検出/reCaptcha

ボットがウェブフォームにアクセスするのを防ぎたいため、開発者は通常これらのスクリプトをできるだけ早く読み込みます。ただし、reCaptcha には相当なサイズの JS ペイロードとメインスレッドのフットプリントがあるため、必要になるまで読み込みを遅延させる動機があります。このスクリプトを最適化するためのいくつかの方法は：

  1. ボットによってスパムされる可能性があるユーザー入力フォームを持つ少数のページでのみ読み込んでください。
  2. スクリプトを遅延読み込みしてください（例えば、フォーム入力でのユーザー操作時にフォームフォーカス時）。
  3. スクリプトをページロードで実行する必要がある場合は、リソースヒントを使用して早期接続を確立してください。

Google Tag Manager (GTM)

大規模なサイトは、マーケティングチームまたは代理店にGoogle Tag Managerへのアクセスを提供することがよくあります。これにより、より優れたトラッキングのためにサイト上のすべてのページに新しいマーケティングタグを追加できます。パフォーマンスはマーケティングチームの主な関心事ではなく、タグを無分別に追加するとサイトが遅くなる可能性があることをすべてのチームが知っているわけではありません。GTM スクリプトの最適化は、GTM にアクセスできるユーザーを制御し、行われる変更を監視することについてです。

サイト所有者がアカウントを外部の代理店ではなく所有していることを確認することから始めることができます。これにより、タグを追加、編集、および公開できるユーザーに対して細かいアクセス権限を定義できます。開発チームとマーケティング部門の間により良い協力を設定して、新しいタグを監査し、未使用のタグを削除できます。

サイトはすべてのページで GTM を必要としない可能性があります。ページは個別に監査される必要があるため、不要な GTM 包含を削除できます。クッキーバナーを使用するサイトは、ユーザーがクッキーを拒否した場合、ページで GTM を読み込まないことを選択することもできます。最後に、ページで GTM を読み込む必要がある場合は、メインコンテンツの読み込み後にスクリプトを延期して起動できます。

A/B テストとパーソナライゼーション

サイトは A/B テストを実施して、ウェブページのどのバージョンがより優れたパフォーマンスを発揮するかを確認します。A/B テストはテストが実行されるページのパフォーマンスに大きく影響を与える可能性があり、各テストは読み込み時間に最大 1 秒を追加します。現在、多くの A/B テストはサードパーティを通じて外部から調達されており、開発者はこれらのテストの UI を変更するために実行される JavaScript コードを管理することはできません。

サイトパーソナライゼーションは、既知のデータに基づいて異なるユーザーに合わせた体験を提供するためにスクリプトを実行することを含む関連する概念です。これらのスクリプトは再び重く、最適化が困難です。A/B テストスクリプトと同様に、パーソナライゼーションスクリプトは、レンダリングされた UI がスクリプトの出力に依存するため、早期に実行する必要があります。A/B テストとパーソナライゼーション用のカスタムサーバーベースソリューションを開発することが、A/B テストを最適化する理想的な方法です。ただし、常に可能であるとは限りません。

サードパーティの A/B テストスクリプトを最適化するために、スクリプトを受け取るユーザー数を制限できます。Google の Optimize は、ユーザーをターゲットするルールの構成を許可します。

YouTube とマップ埋め込み

これらの埋め込みは重く、開発者は遅延読み込みまたはクリックして読み込むパターンを検討して埋め込みを読み込み、それらを最適化する必要があります。lite-youtube-embed などのソリューションの使用をお勧めしますが、このファサードを使用して iOS/macOS-Safari でビデオを再生するには、ダブルタップ/クリックが必要であることに注意してください。

ソーシャルメディア埋め込み

一部のソーシャルメディア埋め込みは、スクリプトを遅延読み込みするオプションを提供します（例えば、Facebook 埋め込みの data-lazy）。パフォーマンスを向上させるためにこれを検討できます。別の選択肢は、tweetpik などのツールを使用して手動で作成または作成する画像ファサードを使用することです。

すぐに使える最適化

サードパーティを最適化するために、開発チームはリソースヒント、遅延読み込み、HTTP キャッシング、およびサービスワーカーのニュアンスを理解し、その後、それらをソリューションに実装する必要があります。一部のフレームワークとライブラリはこれらのベストプラクティスを、開発者が簡単に使用できるように封入しています。

Builder.io によって作成された Partytown は、リソース集約的なスクリプトをウェブワーカーではなくメインスレッドで実行できるようにする実験的なライブラリです。その哲学は、メインスレッドはあなたのコード専用であり、重要なパスに必要でないスクリプトはウェブワーカーに制限される必要があります。Partytown は、クッキー、localStorage、userAgent など、メインスレッド API へのアクセスを構成できます。API 呼び出しは、スクリプトが行うことについてより良い洞察を得るために、引数をログに記録することもできます。

JavaScript プロキシとサービスワーカーはウェブワーカーとメインスレッド間の通信を処理します。Partytown スクリプトは HTML ドキュメントと同じサーバーで自己ホストされる必要があります。React または Next.js アプリで使用することも、フレームワークなしでも使用できます。ウェブサーバーで実行できる各サードパーティスクリプトは、開始スクリプトタグの type 属性を以下のように text/partytown に設定する必要があります。

<script type="text/partytown">// Third-party analytics scripts</script>

ライブラリは、React または Next.js プロジェクトに直接含めることができる React Partytown コンポーネントも提供しています：

import { Partytown } from '@builder.io/partytown/react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
 render() {
   return (
     <Html>
       <Head>
         <Partytown />
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }

Partytown には、Google Tag Manager などの一般的なアナリティクスライブラリの React コンポーネントも含まれています：

import { Partytown, GoogleTagManager, GoogleTagManagerNoScript } from '@builder.io/partytown/react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
 render() {
   return (
     <Html>
       <Head>
         <GoogleTagManager containerId={'GTM-XXXXX'} />
         <Partytown />
       </Head>
       <body>
         <GoogleTagManagerNoScript containerId={'GTM-XXXXX'} />
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }

Next.js Script コンポーネント

Next.js 11 は 2021 年中盤にリリースされ、Google の Aurora チームが導入したConformance方法論に基づくコンポーネントが含まれていました。Next.js Script コンポーネントは Conformance を使用して、読み込みパフォーマンスを改善するカスタマイズ可能なテンプレートを提供します。Script コンポーネントは <script> タグをカプセル化し、strategy 属性を使用してサードパーティスクリプトの読み込み優先度を設定できます。strategy 属性は 3 つの値をとることができます：

  1. beforeInteractive：ページが対話的になる前にブラウザが実行する必要のある重要なスクリプトに使用してください。（例：ボット検出）
  2. afterInteractive：ページが対話的になった後、ブラウザが実行できるスクリプトに使用してください。（例：タグマネージャー）これはデフォルトで適用された戦略で、defer を使用してスクリプトを読み込むことと同等です
  3. lazyOnload：ブラウザがアイドル状態のときに遅延読み込みできるスクリプトに使用してください。

strategy を設定すると、Next.js は最適な読み込みシーケンスを保証しながら、最適化とベストプラクティスをスクリプトに自動的に適用します。

前：

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <script async src="https://example.com/samplescript.js" />
      </Head>
    </>
  );
}

後：

import Script from 'next/script'

export default function Home() {
 return (
   <>
     <Script src="https://example.com/samplescript.js" />
   </>
 )
}

ポリフィルを早期に読み込む

コアコンテンツに適用される特定のポリフィルを早期に読み込む必要がある場合は、beforeInteractive 戦略を使用できます：

import Script from "next/script";

export default function Home() {
  return (
    <>
      <Script
        src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
        strategy="beforeInteractive"
      />
    </>
  );
}

ソーシャルメディア埋め込みを遅延読み込みする

ソーシャルメディア埋め込み、特にページロード時に表示されていないもの、を遅延または遅延読み込みできます。lazyOnload 戦略を使用できます：

import Script from "next/script";

export default function Home() {
  return (
    <>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
      />
    </>
  );
}

読み込み時にコードを条件付きで実行する

特定のサードパーティが読み込まれた後に実行する必要があるコードがある場合があります。これはスクリプトコンポーネントの onLoad 属性で指定できます：

<Script
  src={url} // consent management
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

スクリプトタグ内でインラインスクリプトを使用する

サードパーティコンポーネントの読み込みに基づいて実行する必要があるインラインスクリプトも Script コンポーネントに含めることができます：

import Script from 'next/script'

<Script id="show-banner" strategy="lazyOnload">
 {`document.getElementById('banner').removeClass('hidden')`}
</Script>

// or

<Script
 id="show-banner"
 dangerouslySetInnerHTML={{
   __html: `document.getElementById('banner').removeClass('hidden')`
 }}
/>

ここでは、インラインスクリプトを使用して、遅延読み込み後のサードパーティバナー広告の可視性を変更します。インラインスクリプトは dangerouslySetInnerHTML 属性を使用して含めることもできることに注意してください。

サードパーティスクリプトに属性を転送する

Script コンポーネントでサードパーティスクリプトが使用できる特定の属性値を設定できます：

import Script from "next/script";

export default function Home() {
  return (
    <>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        id="analytics"
        nonce="XUENAJFW"
        data-test="analytics"
      />
    </>
  );
}

アナリティクススクリプトを読み込む

Google Analytics（GA）と Google Tag Manager（GTM）を使用して、サイトにアナリティクスを含める方法は異なります。Script コンポーネントを使用して、Next.js サイトで gtag.js または analytics.js スクリプトを最適に読み込むことができます。

GTM はサイト上のすべてのページに対して _app.js 内にスクリプトコンポーネントを含めることで有効にできます：

import Script from "next/script";

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* Google Tag Manager - Global base code */}
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
           (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
           })(window,document,'script','dataLayer', '${GTM_ID}');
         `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

上記の両方の例では、アナリティクススクリプトは strategy = afterInteractive で読み込まれることに注意してください。

結論

あなたのサーバーからのリソースをウェブの他の隅からのリソースと組み合わせてウェブページを構成する際には、これらのリソース間の相互作用を頻繁に監視する必要があります。リソースを正しくシーケンスして、ベストプラクティスに従うことから始めることができます。また、これらのベストプラクティスを設計に組み込んだフレームワークまたはソリューションに頼ることもできます。

サイトが成長するにつれて、パフォーマンスレポートと定期的な監査は冗長性を排除し、パフォーマンスに影響するスクリプトを最適化するのに役立つことができます。最後に、一般的に知られているパフォーマンスの問題を持つサードパーティが、コード側で最適化するか、これらの問題に対処するための回避策を有効にする API を公開することを常に期待することができます。

出典

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
patternsdev
リポジトリ
patternsdev/skills
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/patternsdev/skills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: patternsdev · patternsdev/skills · ライセンス: MIT