book icon indicating copy to clipboard operation
book copied to clipboard

Published 20 hours ago • verified publisher icon yytypescript

「バンドラー」を説明・紹介するページを作る

Open izumi1981 opened this issue 1 year ago • 8 comments

  • 何をどうしたいか？ 複数の .tsファイルの tsc コンパイルを１つの .jsファイルにしたい。（require.jsを読み込んでindex.htmlから実行する）

  • そうしたい理由は何か？ (誤植の修正など理由が自明な場合は不要)
    複数ファイルでチーム開発しやすい状態にしたいから。

  • やるとなったら自分が担当したいか？ (自分がその変更のプルリクエストを作りたい場合)
    自分が担当したいです。

izumi1981 avatar Jun 20 '23 06:06 izumi1981

izumi1981 avatar Jun 20 '23 07:06 izumi1981

読者の想定質問

  • バンドルとは？
  • なぜフロントエンド開発にはバンドルはなぜ必要なの？
  • バンドラーって何？
  • バンドラーにはどんなツールがあるの？

suin avatar Jun 23 '23 10:06 suin

着手可になるまでに必要なこと

  • アウトラインを決める
  • どの章に書くか決める

suin avatar Jun 23 '23 10:06 suin

  • どの章に書くか？ → 作って学ぶ

suin avatar Jun 23 '23 11:06 suin

どのバンドラーを体験してもらうか？

CleanShot 2023-06-23 at 20 08 30 png CleanShot 2023-06-23 at 20 08 39 png

  • webpack → もうメンテしないと言われているので微妙
  • vite → 伸びがよくてTypeScriptのことを考えれていて、チュートリアルとしてちょうどいいかも

suin avatar Jun 23 '23 11:06 suin

決める必要があること

  • アウトラインを決める必要があります。

アウトラインの参考例:

  • https://github.com/yytypescript/book/issues/559#issuecomment-1519893586
  • https://github.com/yytypescript/book/issues/137#issuecomment-1007350129
  • https://github.com/yytypescript/book/issues/139#issuecomment-1013058006

suin avatar Jun 23 '23 11:06 suin

アウトライン

バンドラーとは

複数ファイルにまたがっているプロジェクトをまとめるモノ

フロントエンド開発にバンドラーが必要なのは何故

  • バンドラーがないと1つのファイルでプロジェクトを管理しないといけなくなるから
  • チーム開発がしやすくなる

バンドラーってなに？

「束ねる」という意味
TypeScriptでの意味は、複数のファイルを束ねて１つのプロジェクトにしてくれるモノ

バンドラーにはどんなツールがあるの？

  • webpack
  • vite
  • require.js

viteについて

  • viteとは
  • viteの特徴
  • viteの使い方

minmin0530 avatar Jun 24 '23 10:06 minmin0530

アウトラインを拝見しました。反応が遅くなり申し訳ございません！

全体としてよくまとまっており、バンドラーについての一般的な知識を伝えるための良い出発点になっていると思います。

ただし、いくつかフィードバックを提供させていただきますね。主に内容を詳しくすることと、一部の節に具体性を付けることを提案します。

  1. バンドラーとは： バンドラーが「複数ファイルを束ねて１つのプロジェクトにしてくれるもの」と説明するのは適切ですが、依存関係を解決し、最小限のフットプリントでブラウザが読み込みできる形式への変換という、バンドラーの役割について説明したほうが良いでしょう。

  2. フロントエンド開発にバンドラーが必要な理由： このセクションはもう少し詳しく解説することが望ましいです。例えば

  • ESモジュールのサポートが未だに完全には普及していない現代のウェブブラウジング環境。
  • 開発時と本番では異なるコードを提供しなければならない現実（開発モードでは読みやすくデバッグしやすいコードが必要、一方本番ではパフォーマンスを最適化するためにすべてを最小化する必要がある）。
  • HTTPでは複数の小さなファイルをロードするよりも、一つの大きなファイルをロードする方がユーザーエクスペリエンスが良い

これらの理由から「フロントエンド開発にバンドラーが必要」といった具体的な課題とその解決策も提案してはいかがでしょうか。

また、その逆にサーバーサイドJavaScriptではバンドラーが不要であるという事実に明確に触れ、それがなぜそうなのか理由を述べてみてはいかがでしょうか。

バンドラーがないと1つのファイルでプロジェクトを管理しないといけなくなる

これは具体的にどういう問題をイメージされてますでしょうか？

  1. バンドラーってなに？： これは前述の「バンドラーとは」と説明が重複しているように見えます。もう少し具体的な話題、例えばバンドラーの仕組み、またはどのように動作するかについて述べるなどして、読者に新たな情報を提供するほうが良いでしょう。

複数のファイルを束ねて１つのプロジェクトにしてくれるモノ

プロジェクトというと案件のようなものを連想してしまうせいか、「1つのプロジェクト」という表現はあまり見かけないように思いますが、「1つのJavaScriptファイル」または「1つのバンドル」と表現するのはいかがでしょうか？

  1. バンドラーにはどんなツールがあるの？： ここに「Parcel」や「Rollup」等、他の一般的なバンドラーも含めるとより完全なリストになります。Webpackは現在広く使われていますが、それの正統後継者となる新しいバンドラーTurbopackの開発も進行中です。こうした現状についても言及するといいかもしれません。また、CommonJSからESモジュールへ移行が進む現在では、実務ではあまり使用されることがなくなったRequire.jsはリストから外すことをお勧めします。

  2. viteについて： 流れはとてもいいと思います。チュートリアルの内容をより具体化して「viteで2つのTypeScriptファイルを1つのJavaScriptファイルにしてみよう」という演習にすると、より読者の理解が進むものになると思います。

ご提出いただいたアウトラインは全体的によくまとまっていますが、上記の点について考慮していただくことで、さらに洗練された記事になると思います。次のステップに進む前に、これらのフィードバックを検討してみてください。どんな質問でもお気軽にどうぞ。

suin avatar Jul 07 '23 10:07 suin