開発環境・ツールとは｜このカテゴリで分かること
Web制作やフロントエンド開発で、コードそのものとは別に必要になる道具の基本を扱うカテゴリです。履歴管理の Git、パッケージ管理の npm と package.json、整形と静的解析を担う Prettier と ESLint、HTML と CSS を素早く書く Emmet を取り上げます。
「Git 使い方」「npm とは」「Prettier ESLint 違い」と検索する人は、コマンドを丸暗記するより、各ツールが何を解決するのかを知りたいことが多いです。ここでは役割を整理し、どの順に導入すれば作業が止まりにくいかを案内します。JavaScript の書き方そのものは別カテゴリで扱います。
読む順番（おすすめの順路）
- Emmetの使い方｜HTML・CSSを短縮記法で素早く書く … 導入の手間がほとんどなく、すぐに効果が出るため最初に体験しやすい。
- Gitの基本｜commit・branch・mergeの流れと使い方 … 変更履歴を残して戻れるという安心感が、以降の作業の前提になるため。
- npmとpackage.jsonの基本｜init・install・scriptsの使い方 … ライブラリの導入や実行コマンドの管理を知ると、多くのツールが使えるようになるため。
- PrettierとESLintの基本｜役割の違いと導入手順 … npm で導入する代表的なツールで、チーム開発の品質を保つ仕組みを知るため。
押さえておきたいポイント（リサーチ）
各ツールの公式ドキュメントで確認できた内容です。バージョンで挙動や推奨が変わるため、最新は公式で確認してください。
| ツール | 公式ドキュメントで確認できる内容 |
|---|---|
| Git | Pro Git は日本語でも読める公式の解説書で、基本の操作、ブランチ、内部構造までを扱う。無料でオンライン閲覧できる。 |
| npm | package.json では、パッケージを公開する場合は name と version が必須で、公開しないなら省略できる。scripts にはライフサイクルのイベントごとに実行するコマンドを定義でき、npm run-script（npm run）で実行できる。 |
| Prettier と ESLint | Prettier は整形に使い、バグの検出は linter に任せるのがよいと説明されている。linter にはフォーマット系とコード品質系のルールがあり、Prettier は前者に対応する。 |
| Emmet | > で入れ子、+ で兄弟、* で繰り返し、. でクラス、# で ID を表す。空白は省略記法の解析を止める記号になる。 |
よくある疑問
Q. Git は何から覚えればよいですか。
A. commit、branch、merge の3つです。流れと使い方は Gitの基本｜commit・branch・mergeの流れと使い方 で説明しています。
Q. package.json は手で書くものですか。
A. init で生成するのが一般的です。主な項目の意味は npmとpackage.jsonの基本｜init・install・scriptsの使い方 を参照してください。
Q. Prettier と ESLint はどちらも必要ですか。
A. 役割が違うため併用されることが多いです。違いは PrettierとESLintの基本｜役割の違いと導入手順 にまとめています。
Q. Emmet はどのエディタで使えますか。
A. 多くのエディタに対応しています。書き方は Emmetの使い方｜HTML・CSSを短縮記法で素早く書く を見てください。
編集部の見解
開発ツールは、全部を一度に導入しようとすると設定で疲れてしまうため、効果の大きいものから段階的に取り入れるのが良いと考えます。まず Git で戻れる状態を作り、次に npm でツールを使える状態にし、そのうえで整形や静的解析を足す流れが無理がないと感じます。また、設定ファイルをプロジェクトに含めてチームで共有すると、環境差による「自分の環境では動く」を減らせます。ツールの目的を理解してから導入すれば、不要な設定を増やさずに済むと考えます。