推奨拡張機能・ツール
開発生産性を向上させるための推奨拡張機能とツールをまとめています。
Chrome拡張機能
インストール手順
Chrome拡張機能のインストールは以下の手順で行います：
- Chrome Web Storeにアクセスします
- 該当の拡張機能を検索します
- 「Chromeに追加」をクリックします
拡張機能
| 用途 | 推奨拡張機能 | 活用方法 |
|---|---|---|
| フロントエンド開発 | React Developer Tools | Reactアプリケーションの開発・デバッグ時に使用します |
| パフォーマンス最適化 | Lighthouse | サイトの品質評価やパフォーマンス改善時に使用します |
| 技術調査 | Wappalyzer | 参考サイトの使用技術を調査する際に使用します |
VS Code 拡張機能
インストール手順
拡張機能のインストールは以下の手順で行います：
- VS Codeを開きます
Ctrl+Shift+X（Mac:Cmd+Shift+X）を押して拡張機能パネルを開きます- 上記の拡張機能IDを検索します
- 「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の履歴管理・可視化 |