dependenciesとdevDependenciesの違い

はじめに

パッケージをインストールする際に
ふとこれは dependencies と devDependencies
どっちだ！と初学者の僕にとって悩ましい問題に
なる時があります。
ということで初学者でもわかりやすく、
かつ、これはこっちでインストールしたほうが
いいよってのをざっくりまとめました。
間違っていたらごめんなさい。ご指摘お願いします。

そもそも dependencies と devDependencies ってなに？

それぞれの違いと、どうして分けるべきなのかを解説します。

dependencies

本番環境で実行される場合に必要なパッケージや依存関係を保管します。
例でいうと Web アプリケーションでフレームワークやライブラリを
使用する際は dependencies にインストールします。
react,react-dom,nextjs 等です。

devDependencies

devDependencies の頭にある dev は development(開発)という意味があり
その名の通り開発環境でのみ利用し、
本番環境にデプロイする際には不要なパッケージや依存関係を保存します。
eslint,prettier,tailwindcss などです。

どうして分けるのか

一番大きな理由としては本番環境に不必要な
パッケージをインストールすることにより
本番環境のパフォーマンスが低下するからです。

僕がよく使うパッケージ

dependencies:
next
react

devDependencie:
eslint
prettier
tailwindcss
typescript

さいごに

個人開発で実験的に作ったアプリケーションなどの場合は
全て dependencies でいいと思います。
規模が大きいプロジェクトの場合は少しでも
パフォーマンスを上げるために分けるのは必須だと思います。
このパッケージは devDependencies だなとか
パッと見でわかるようになりたいです。
勉強します。