質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 9,320

cancat

score 249

こんにちは。 
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")

みたいに。

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

発生している問題

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

</body>
</html>
<script type="text/javascript">
ここ100行
</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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

さてそこで直面したのが、このcshtmlの最下部に、見るからにJavaScriptのファイルがあることです。 
  </body> 
</html> 
<script type="text/javascript"> 
ここ100行 
</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 16:08

    おお。早速ありがとうございます。
    当方、ASP.NETほぼ初心者で、こういうソースを渡されて、改良すべく鋭意取り組んでいるところであります。
    なので、
    Q)それは一体何なのですか?
    謎。なので聞きました!

    Q)Visual Studio 2017 のテンプレートが自動生成したスクリプト? それとも自作したスクリプトですか?
    だれかが作ったものです。
    どうしてそうなっているのかはわかりません。

    「分ける」でよかった。自分の信じていることと同じでした。
    分けられない事情は、いまのところわたしのごく技術的なものです。
    すなわち、わけるとして、
    Q1)ファイル名は、
    Share/_LeftMenuJavascript.js
    でOK?
    Q2)拡張子は.jsでよいのか?
    Q3)_main.cshtmlからの呼び出しは、同じフォルダ(Share)に入れておくだけでOK?
    を解決すればよい、ということになります。

    キャンセル

  • 2017/04/20 16:10

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

    キャンセル

+1

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

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


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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/20 16:12

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る