READMEバッジ:Shields.ioの完全ガイド

shields.ioでREADMEバッジをマスターします。npmバージョン、ライセンス、ビルドステータス、カバレッジ、ダウンロード数、カスタムバッジの追加方法を学びます。

Best Practices

詳細な説明

READMEバッジの完全ガイド

バッジ(シールドとも呼ばれる)は、READMEの上部にある小さな画像で、プロジェクトの主要なメタデータを一目で伝えます。潜在的なユーザーと貢献者に対する信頼のシグナルとして機能します。

必須バッジ

npmバージョン

[![npm version](https://img.shields.io/npm/v/my-package.svg)](https://npmjs.com/package/my-package)

npmに公開された最新バージョンを表示します。

ライセンス

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

ライセンス条件を即座に伝えます。

ビルドステータス

[![CI](https://github.com/user/repo/actions/workflows/ci.yml/badge.svg)](https://github.com/user/repo/actions)

CIパイプラインが通過しているかどうかを示します。

カバレッジ

[![codecov](https://codecov.io/gh/user/repo/branch/main/graph/badge.svg)](https://codecov.io/gh/user/repo)

テスト品質を実証します。

その他の有用なバッジ

ダウンロード数TypeScriptバンドルサイズのバッジも利用可能です。

カスタムバッジ

shields.ioでカスタムバッジを作成:

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

ユースケース

オープンソースプロジェクトのREADMEにプロフェッショナルなステータスバッジを追加して、バージョン、ビルドステータス、テストカバレッジ、ライセンスを一目で伝える場合。

試してみる — README Generator

フルツールを開く