HTML内のスクリプトが悪い習慣と見なされないのはいつですか？

Question

私はWeb開発に不慣れです。 PlayフレームワークとJSPを研究しているときに、どちらもHTML内に（jspスクリプトレットで）スクリプトを配置するオプションを提供していることに気付きましたが、どちらの本でも読んでいますが、どちらも悪い習慣であり、説明をしていませんいつスクリプトを使用すればよいのか、書き込みをしないでください。

私の質問は、両方のフレームワークがそのようなオプションを提供する場合、いつHTML内でスクリプトを使用してもよいですか？

動的HTMLを作成するためのサーバー側スクリプト（つまり、JSPスクリプトレット）について話していることに注意してください。

Arseni Mourzenko · Accepted Answer

スクリプトをHTMLコードの外に置く理由は主に2つあります。

サーバーサイド、懸念事項の分離とコードのクリーン化。いくつかのPHPコードが同じコード内にあり、PHP、SQLクエリ、JavaScript、HTML、CSS、およびBase64エンコードされたコードが混在している場合に注意する必要がある理由をすぐに理解できます。 CSSに埋め込まれた画像。
クライアント側の外部スクリプトは簡単にキャッシュされます。 HTMLが動的ページの場合、頻繁に変更される可能性があります。スクリプトをHTMLの外部に配置することで、訪問者がこのコンテンツを一度ダウンロードして、二度と更新しないようにすることができます（まあ、決してではありませんが、まれです）。同様に、2つの静的または動的HTMLページが同じスクリプトを共有する場合、それを外部ファイルに配置すると、一度ダウンロードすることができます。

▪最初のポイントはすべての場合に有効です。 1つのファイルにすべてを混在させる方がクリーンであることを正当化することはできません。フレームワークがこれを許可する理由クリーンなコードを気にしない状況があるため：

私が確実に捨てる小さなページを書いて、すぐにそれを行わなければならない場合、すべてを1つのファイルに入れるのはそれほど悪くありません。
（ドキュメント管理システムのプラットフォームに単一のファイルを配置することによって）同僚に短い例を示したり、ブログに公開したりする場合、1つのファイルにすべてを含めることも受け入れ可能で便利です。
顧客向けのアプリケーションを開発する前に小さなプロトタイプを作成する必要がある場合、ベストプラクティスはまったく問題ではありませんが、すべての場合にスローされるソースコードではコストを削減することが重要です。

▪一方、2番目のポイントは、スクリプトをHTMLに配置する完全に有効なケースがある理由がある理由を説明します：

スクリプトは、動的ページが変更されるたびに変更されます。この場合、なぜクライアントにHTMLファイルをダウンロードさせ、次にスクリプトを含む別のファイルをダウンロードさせるのでしょうか（つまり、2つの要求を実行します。これは、時間とリソースの浪費であり、ある程度の規模のWebサイトでは無視できません）。 1つのリクエストで同じものを提供できますか？
staticHTMLページはスクリプトを使用しますが、これはWebサイトの他のページと共有されていません。 2つのリクエストを行わないようにする場合は、これも完璧な候補です²。

これで、最初の問題（クリーンなコード）に戻りますHTMLでスクリプトを提供できおよびサーバー側にクリーンなコードがあります（たとえば、実行時に個別に記述されたスクリプトを挿入するテンプレートを使用することにより）。もちろん、これにはある程度の専門知識が必要です。前に述べたように、スクリプトとHTMLを組み合わせる必要があるのは、大規模なWebサイトだけです。これは、個人的なWebサイトを作成するときに、経験の浅い開発者がスクリプトとHTMLを混合しているのを見ている場合、何かが間違っていることを示す良い兆候であることを意味します。

^{¹個人的には、私はこの慣習に反対しています。ベストプラクティスに従わないブログコードを通じて共有する情報が多ければ多いほど、経験の浅い開発者はそれをコピーして、これが正しいスタイルであると信じるようになります。}

^{²適切なキャッシング構成を使用すると、2つのリクエストはキャッシュが空のユーザーに対してのみ発生します。それ以外の場合は、有効期限を遠い将来に設定でき、ブラウザは304 Not Modified応答を返すリクエストを回避します。}

Zachary K · Answer

これを行う場所はいくつか考えられます

1）アイデアの単純なテスト。何かがどのように機能するかを確認し、コードを保持するつもりはありません。

2）データの初期化。実際のプログラムロジックは外部ファイルにありますが、何らかの理由で初期データをロードし、それを取得するためのajax呼び出しを行いたくありません。たとえば、使用する必要がある国のリストがある場合、それは完璧な候補になります。これはめったに変更されず、サーバー側で使用している言語（PHP、Ruby、Haskellなど）を介してHTMLページに挿入できます。この場合、次のようなコードが含まれる可能性があります。

Data.countries = <?php echo json_encode($countries); ?>;

Sterling Hamilton · Answer

ツールは、誤用される可能性のある方法で提供される場合があります。たとえば、「技術的に」それが可能であるとしても、靴を後ろに置くべきではありません。最初は涼しいかもしれませんし、怠惰であれば少し時間を節約できるかもしれませんが、道を行くとあなたを傷つけるでしょう...そして靴...靴について考えてください！

Webアプリケーション内でのスクリプト作成は非常に一般的な方法です。ただし、保守可能なコードや「将来性のある」コードには適していません。

いくつかのゴールデンルールは、ロジック、ビュー、データをすべて個別に保つことです。適切に考えたら、実際にスクリプトを書く必要はありません。

ユニットテストを実行したいときは...が、ビューにはロジックが含まれています...シンプルで常識的なアサーションを作成できないことに気付いた後、あなたは自分を蹴るでしょう。

また、誰かがコントローラの内部を調べてロジックを見つけることを期待していて、そこにない場合は、あなたがそれを貼り付けることにしたアプリケーションを探し回らなければならないときに、彼らはあなたの名前を呪います。

スクリプト方式は、難読化と複製に役立ちます。

->余暇に自分で遊んだり、プロジェクトを最初からやり直したりして、1か月後にそれらを再訪できます。

->他の人の発言に関係なく、難しい方法を学び、スクリプト手法を使用できます。

->貴重な時間を節約し、適切なアプリケーションアーキテクチャと設計に集中できます。

覚えておいてください、ウェブ開発業界は、塹壕を泥で覆い、時間と苦労を省かなければならなかった人々から学ぶことを拒否した開発者の死体でいっぱいです。