マルチページアプリケーションでのJavascript設計について

Question

現在マルチページアプリケーションを開発中で、javascriptを1つに集約するべきか否かでご相談させてください。

私は共通処理とは別にjavascriptの処理が必要なページ単位で用意すべきだと思うのですが、一般的にはどちらが普通でしょうか。

Laravelの場合デフォルトでapp.jsのみトランスパイルされますが、ページ特有のイベントハンドラなどの処理が発生した場合、ファイルを分割して必要なところでのみ処理を行うようにしたほうがいいと考えております。

皆さんのご意見お聞かせいただければと思います。

Comments

[m.ts10806]

好みやプロジェクトのルールに依存する内容かと思います。
現状でなにか具体的な問題が起きているのでしたらそちらを記載したほうが良いですし、設計の問題ではないように思います。
実装レベルでは

[miqro]

現状は開発前段階なので特段問題は無いのですが、ベストプラクティスや現在の主流といったものがあればお聞きしたく、質問させていただきました。　情報が少なく申し訳ありません。

[m.ts10806]

>ベストプラクティスや現在の主流

業務のものは外には出ませんし、結局好みになります。
要件どおり動いてれば「ベスト」というのはないですよ。

[miqro]

> 要件どおり動いてれば「ベスト」というのはないですよ。
かしこまりました、好み等いろいろ踏まえたうえで判断していきたいと思います。
ありがとうございました。

Answer 1

ページ特有のイベントハンドラなどの処理が発生した場合、ファイルを分割して必要なところでのみ処理を行うようにしたほうがいいと考えております。

それは、当該JavaScriptの側で、「今いるページはこのスクリプトを動かすのに適切なのか」チェックする、という形でも実装可能です。

全部を1ファイルで作る場合のメリットとしては、「全ページ共通なので、1度読み込めばあとはキャッシュにあるものの再利用で済んで、ページ遷移時のアセットロードを削減できる」ということがあります。もちろん逆に、「ファーストビューで全JavaScriptをロードする時間がかかる」点はデメリットとなります。

Comments

[miqro]

回答ありがとうございます。
> 「今いるページはこのスクリプトを動かすのに適切なのか」
こういった方法を用いて1ファイルにするのも1つの方法として覚えておきたいと思います。
メリットデメリットのご提示していただきありがとうございます。

Answer 2

同じサイト内であれば複数ページで別々のjsを書いたとしても
ページの設計思想が同じであればある程度は似たような
関数が必要になるはずです
汎用性、再利用を考慮すればライブラリはまとめるのが必然です

もちろん完全にそのページ特有で再利用が難しいjsも想定されるので
基本的には1ページに1個専用のjsは用意するのはよい妥当です

Comments

[miqro]

回答ありがとうございます。
汎用性のある関数に関してはライブラリとしてまとめ、ページ特有のjsでimport等利用して再利用性を高めたいと考えておりました。

> 基本的には1ページに1個専用のjsは用意するのはよい妥当です
ありがとうございます、メリットデメリットを踏まえプロジェクト全体で考えて必要か判断していきたいと思います。