そもそもhtmlとjavascriptファイルをわけるのかわけないのか

こんにちは。
Windows10でASP.NET MVCのアプリケーションを開発しています。
Visual Studio 2017 Communityを使っています。

###前提・実現したいこと
そもそもhtmlとjavascriptファイルをわけるのかわけないのか、知りたいです。

ASP.NET MVCのcshtmlは、クライアントで表示するhtmlのもとになるファイルです。
これは、
Share/_Main.cshtml
Share/_LeftMenuTop.cshtml
Share/_LeftMenuDashboard.cshtml
のようにファイルを分け、_Main.cshtmlでトップやダッシュボードを呼ぶところに、@Html.Partial(filename)と書けば、表示時に結合して表示できます。

@トップ@ @Html.Partial("_LeftMenuTop")
@ダッシュボード@ @Html.Partial("_LeftMenuDashboard")

みたいに。

だらだらと（ネストもいいかげんな）３００行とかのhtml(cshtml)ファイルを見るより、
ファイルの命名規則がシンプルで行数も少ない、パーツとして再利用もしやすいファイルに分けるほうが扱いやすいと、わたしは個人的に思います。

###発生している問題
さてそこで直面したのが、このcshtmlの最下部に、見るからにJavaScriptのファイルがあることです。

</body> </html> <script type="text/javascript"> ここ１００行 </script> という感じ。

これはどうしたものか。

Share/_LeftMenuJavascript.cshtml
というファイルを作り、移動して、
@javascript@ @Html.Partial("_LeftMenuJavascript")
とすれば読めることはわかります。
でもこれって、Javascriptファイルですよね？

ってことは、

Q1)ファイル名は、
Share/_LeftMenuJavascript.js
とすべきではないのか？

Q2)拡張子は.jsでよいのか？

Q3)そもそもなぜファイルを分けないの？

Q4)ファイルを
Share/_LeftMenuJavascript.js
としてわけると不都合があるのでしょうか？

などと疑問がわいて出てきます。
ご示唆いただければ幸いです。

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2017
Version 15.0.26228.9 D15RTWSVC
Microsoft .NET Framework
Version 4.6.01586

です。
よろしくお願いします。

行動規範の内容に同意します

回答2件

Application_Start 時にBundleConfig クラスの RegisterBundles メソッドを呼んで、

C#
1AddScriptBundle(bundles, "~/bootstrap/script", "~/Scripts/bootstrap.min.js");

でスクリプトをバンドルした後に、_Layout.chtml などのレイアウトファイルで

@Scripts.Render("~/bootstrap/script")

としてレンダリングするのが ASP.NET MVC として普通だと思っていました。

投稿2017/04/20 06:55

workaholist

総合スコア559

cancat

2017/04/20 07:12

ご回答ありがとうございます。当方、ASP .NET初心者なもので、なにが普通かという感覚はまだ構築できていないのですが、これ(csにjavascriptを混在)が普通だったらいやだなーとは感じて質問しました。 Application_Startや、@Script.Rentderは調べてみます。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

さてそこで直面したのが、このcshtmlの最下部に、見るからにJavaScriptのファイルがあることです。
</body> </html> <script type="text/javascript"> ここ１００行 </script>

それは一体何なのですか？ Visual Studio 2017 のテンプレートが自動生成したスクリプト？それとも自作したスクリプトですか？

2017 は知りませんが、2015 のインターネット用テンプレートで自動生成された _Layout.cshtml は以下のようになっているのですが・・・（html タグの外にスクリプトは一行もありません）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    ・・・Script、CSS 関係以外は省略・・・

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

何にせよ、質問：

そもそもhtmlとjavascriptファイルをわけるのかわけないのか、知りたいです。

に対する答えは「分ける」です。（分けられない事情がなければですが）分ければスクリプトファイルはブラウザにキャッシュされますので。

さらに、MVC4 以降は JavaScript/CSS ファイルの縮小化と結合処置の自動化機能が利用できますので、それを使うべきです。

【追伸】

具体例を書いた MSDN フォーラムのスレッドを紹介しておきます。回答を見てください。

Jqueryプラグインを使用する方法について
https://social.msdn.microsoft.com/Forums/ja-JP/2796fcb2-fdd6-4085-81f1-6bd72515b197/jquery?forum=aspnetja

上の記事は web.config で debug="true" 状態なのでレンダリングされる JavaScript/CSS の外部ファイルは生の状態ですが、debug="false" にするとファイルの縮小化と結合処置の自動化機能が働きます。

投稿2017/04/20 06:52

編集2017/04/20 07:06

退会済みユーザー

総合スコア0

cancat

2017/04/20 07:08

おお。早速ありがとうございます。当方、ASP.NETほぼ初心者で、こういうソースを渡されて、改良すべく鋭意取り組んでいるところであります。なので、 Q)それは一体何なのですか？謎。なので聞きました！ Q)Visual Studio 2017 のテンプレートが自動生成したスクリプト？それとも自作したスクリプトですか？だれかが作ったものです。どうしてそうなっているのかはわかりません。「分ける」でよかった。自分の信じていることと同じでした。分けられない事情は、いまのところわたしのごく技術的なものです。すなわち、わけるとして、 Q1)ファイル名は、 Share/_LeftMenuJavascript.js でOK? Q2)拡張子は.jsでよいのか？ Q3)_main.cshtmlからの呼び出しは、同じフォルダ(Share)に入れておくだけでOK? を解決すればよい、ということになります。

退会済みユーザー

2017/04/20 07:10

前後してしまったようですが追伸も読んでください。

行動規範の内容に同意します

あなたの回答