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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

2回答

16354閲覧

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

cancat

総合スコア313

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2017/04/20 06:09

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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は調べてみます。 ありがとうございました。
guest

0

ベストアンサー

さてそこで直面したのが、この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 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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問