推奨拡張機能・ツール

開発生産性を向上させるための推奨拡張機能とツールをまとめています。

Chrome拡張機能

インストール手順

Chrome拡張機能のインストールは以下の手順で行います：

1. Chrome Web Storeにアクセスします
2. 該当の拡張機能を検索します
3. 「Chromeに追加」をクリックします

拡張機能

用途	推奨拡張機能	活用方法
フロントエンド開発	React Developer Tools	Reactアプリケーションの開発・デバッグ時に使用します
パフォーマンス最適化	Lighthouse	サイトの品質評価やパフォーマンス改善時に使用します
技術調査	Wappalyzer	参考サイトの使用技術を調査する際に使用します

VS Code 拡張機能

インストール手順

拡張機能のインストールは以下の手順で行います：

1. VS Codeを開きます
2. Ctrl+Shift+X（Mac: Cmd+Shift+X）を押して拡張機能パネルを開きます
3. 上記の拡張機能IDを検索します
4. 「Install」をクリックしてインストールします

拡張機能一覧

カテゴリ	拡張機能	主な用途
API開発	OpenAPI (Swagger) Editor	APIの設計・開発をサポート
	Swagger Viewer	APIドキュメントのプレビュー
	Swagger Tools	Swaggerファイルの管理
コード品質管理	Prettier	コードフォーマットの自動化
	EditorConfig	コーディングスタイルの統一
	Trailing Spaces	不要な空白の検出・削除
	Better Comments	コメントの視認性向上
	indent-rainbow	インデントの可視化
図表作成	Draw.io Integration	汎用的な図表作成
	PlantUML	UML図の作成
	Markdown Mermaid	Markdownでの図表表現
開発環境	Docker	コンテナ環境の管理
	Remote Containers	コンテナでの開発環境
	Live Server	開発用ローカルサーバー
	Path Intellisense	ファイルパスの入力補完
AI支援	GitHub Copilot	AIによるコード補完
	GitHub Copilot Chat	AIとの対話型開発支援
バージョン管理	Git History	Gitの履歴管理・可視化

GoogleChrome 拡張機能

インストール手順

拡張機能のインストールは以下の手順で行います：

1. VS Codeを開きます
2. Ctrl+Shift+X（Mac: Cmd+Shift+X）を押して拡張機能パネルを開きます
3. 上記の拡張機能IDを検索します
4. 「Install」をクリックしてインストールします

拡張機能一覧

カテゴリ	拡張機能	主な用途
API開発	OpenAPI (Swagger) Editor	APIの設計・開発をサポート
	Swagger Viewer	APIドキュメントのプレビュー
	Swagger Tools	Swaggerファイルの管理
コード品質管理	Prettier	コードフォーマットの自動化
	EditorConfig	コーディングスタイルの統一
	Trailing Spaces	不要な空白の検出・削除
	Better Comments	コメントの視認性向上
	indent-rainbow	インデントの可視化
図表作成	Draw.io Integration	汎用的な図表作成
	PlantUML	UML図の作成
	Markdown Mermaid	Markdownでの図表表現
開発環境	Docker	コンテナ環境の管理
	Remote Containers	コンテナでの開発環境
	Live Server	開発用ローカルサーバー
	Path Intellisense	ファイルパスの入力補完
AI支援	GitHub Copilot	AIによるコード補完
	GitHub Copilot Chat	AIとの対話型開発支援
バージョン管理	Git History	Gitの履歴管理・可視化