node_modulesの概要と仕組みを説明しませんか？

[shota-nukumizu]

本書がTypeScriptの初心者を対象にしているなら、Node.jsの開発に必要なnode_modulesの概要と仕組みを説明したほうがいいのではないかと思います。 あくまで一個人の見解にすぎないのですが、Node.jsをインストールする際に入ってくるnode_modulesについて、「なぜ.gitignoreに入っているのか」を的確に説明できる人は少なくないと思うからです。

[suin]

いい観点だと思います😌

[suin]

node_modulesはサーバーサイドJavaScript由来の技術とはいえ、フロントエンド開発でも必須知識だと思うので、読者にとって有益そうです。

話し合いトピック

次をブレインストーミング(発散)したいと思います。

• どんなトピックを扱うか？
• 入門者にとってどんな疑問がありそうか？

[suin]

入門者にとっての疑問

• TypeScriptまたはJavaScriptプロジェクトにおけるnode_modulesフォルダーの目的は何ですか？
• node_modulesフォルダー内でのパッケージと依存関係の管理方法はどのようになっていますか？
• バージョン管理やデプロイメントにおいて、特にnode_modulesフォルダーの扱いに関するベストプラクティスはありますか？
• 同じ依存関係に対して複数のパッケージが異なるバージョンを依存する場合、npmやyarnにおける依存関係の解決プロセスはどのように機能しますか？
• package.jsonにおけるdevDependenciesとdependenciesの違いと、それぞれの使用方法について説明していただけますか？
• package-lock.jsonファイル（npmの場合）またはyarn.lockファイル（yarnの場合）の重要性と、これらのロックファイルが依存関係管理の一貫性を維持するのにどのように役立つのか説明していただけますか？

[suin]

アウトライン

https://hackmd.io/SIm79qrZQ-Glk24pFeh2Wg

• 「node_modules」の概要
  • プロジェクトの依存関係の保存場所: ライブラリ、フレームワーク、およびその他のコードなどサードパティーパッケージの置き場です。
  • 整理: プロジェクトの「node_modules」は、依存関係の整理に役立ち、パッケージと更新の管理を容易にします。
  • パッケージ間の互換性の管理: 「node_modules」内の各パッケージはバージョン情報を持ち、パッケージ間の互換性が確保されます。
  • バージョンロック: npm や yarn にはバージョンロック機能 ( package-lock.json、yarn.lock) があるため、依存関係解決は信頼できます。
• 「node_modules」内のパッケージと依存関係の管理
  • パッケージのインストール: npm install, yarn addでインストールでき、dependeces,devDependeciesに登録されます。
  • フォルダ構造の内部
    1. 「node_modules」内にはパッケージごとにフォルダーがあります。
    2. 各パッケージフォルダーには、ソースコード、およびメタデータを含む「package.json」ファイルが含まれます。
    3. インストールされたパッケージの依存関係も、パッケージのフォルダー内に配置されます。
    4. ネストされた依存関係は、パッケージのフォルダー内の「node_modules」ディレクトリにあります。
  • モジュール解決のための適切な構造
    1. 「node_modules」はよく構造化されています。これにより、モジュール リゾルバー (TypeScript コンパイラ、webpack、Node.js など) が必要な/インポートされたパッケージを検索できるようになります。
    2. 検索は、最上位からネストされたフォルダーまでのフォルダー階層に従います。
    3. これにより、正しいパッケージ バージョンがロードされます。
• 「node_modules」フォルダーを処理するためのベストプラクティス
  • ロックファイルを使用し、.gitignore を使用してバージョン管理から「node_modules」を除外します
    1. サイズとオーバーヘッドのため、Git から「node_modules」を除外します。
    2. 「package.json」を追跡し、ファイルをロックします。
    3. 「node_modules/」を「.gitignore」に追加して追跡を防止します。
  • ロックファイルを使用する
    1. ロック ファイル (たとえば、npm の場合は「package-lock.json」、yarn の場合は「yarn.lock」) は、環境全体で依存関係のインストールに一貫性と再現性を提供します。
    2. ロック ファイルをバージョン管理にコミットすると、まったく同じ依存バージョンがインストールされます。
  • 正確なバージョンまたはバージョン範囲を指定する
    1. 「package.json」で SemVer 表記を使用して、依存関係の正確なバージョンまたはバージョン範囲を指定します。
    2. SemVer は、新しいパッケージ バージョンの予期しない重大な変更による潜在的な問題を回避するのに役立ちます。
  • 依存関係を定期的に更新する
    1. セキュリティと最新の機能とバグ修正へのアクセスのために依存関係を定期的に更新します。
    2. 「npm update」または「yarn upgrade」を使用して、パッケージを安全かつ自動的に更新します。
  • 展開時にパッケージをインストールする
    1. デプロイ中に「npm install」または「yarn install」を実行して、指定したパッケージをインストールします。
    2. これにより、本番環境で正しい依存関係のバージョンが保証されます。
• dependences と devDependencies の違い
  • dependences
    • ランタイムに必要なパッケージ。
    • 本番環境にインストールするパッケージ。
  • devDependencies
    • 開発、ビルド、およびテスト専用のパッケージ。
    • 本番環境では必要ないもの
      • 例、テスト フレームワーク、リンター、ビルド ツール、およびタスク ランナー
• 複数のバージョンによる依存関係の解決
  • パッケージマネージャーによる競合の解決
    • 依存関係の競合を処理するのは npm/yarn のしごと
    • 複数の依存バージョンのインストールしたらどうなるか？
      • 次のような依存関係を持つ A,B をインストールした場合
        • A:1.0 → X:1.0
        • B:1.0 → X:2.0
      • ネストされたフォルダー構造になる
• ロックファイルの重要性
  • ロックファイルとは
    • 「package-lock.json」（npm）と「yarn.lock」（yarn）はロックファイルです。
    • 環境全体で一貫した依存関係管理を確保します。
    • 環境間で依存関係のバージョンが同じであることを確認します。
    • ロック ファイルには、バージョンや依存関係など、依存関係ツリーに関する詳細情報が格納されます。
    • 「npm install」または「yarn install」はロックファイルを指します。
    • ロック ファイルで指定された正確なバージョンをインストールします。
  • ロックファイルをコミットする
    • バージョン管理でファイルをロックすると、一貫した依存関係のバージョンが保証されます。
    • 矛盾やバグを減らします。
    • 異なる環境での異なるパッケージ バージョンを回避します。

[suin]

stage2までに決めること

• このページはどの章のどのへんに置くか？