JS読み込み場所について

前へ 次へ
このQ&Aのポイント
  • <script>要素を記述する場所は、大きく以下のように分類できます。...
  • 同じJSファイル内であれば関数の定義と呼び出しは順番はどちらでも良いが、別ファイルとして<script>タグで読み込む場合は定義が入ったファイルが呼び出しのファイルより先に記載されていないといけないということでしょうか？
  • たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 これは具体的にどんなケースだと思いますか？sectionなどのbody内の要素の高さをjqueryで取得設定するときなどで消化？ ・最後に良くCSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがあるのですが、このような場合はどこに書くべきなのでしょうか？
回答を見る
  • ベストアンサー

JS読み込み場所について

JS読み込み場所について 下記のように聞いたのですが、 ＞＞＞ <script>要素を記述する場所は、大きく以下のように分類できます。 （1）<body>要素の配下（任意の位置） <script>要素での処理結果を、ページに直接出力するために利用します。昔はよく見かけた書き方ですが、コンテンツとコードとが混在するのは、ページの可読性／保守性の観点からも望ましくありません。現在ではほとんど使われることはありませんし、また、一部の例外を除いては使うべきではありません。 （2）<body>要素の配下（</body>閉じタグの直前） 一般的なブラウザーでは、スクリプトの読み込みや実行が完了するまで、以降の描画を行いません。このため、読み込みや実行に時間がかかるスクリプトは、そのままページ描画の遅れに直結します。巨大なスクリプトがある場合にはなおさらです。 そこで、ページ高速化の手法としてページの末尾（</body>の直前）に、<script>要素を配置することがよく行われます。これによって、ページの描画を終えたあと、おもむろにスクリプトを読み込み／実行できるので、見た目の描画速度が改善します。 一般的に、JavaScriptによる処理は、ページがすべて準備できてから行うべきものであるはずなので、これによる弊害もほぼありません。 （3）<head>要素の配下 ただし、（2）でまかなえないケースがあります。JavaScriptでは、「関数（Chapter 4）を呼び出すための<script>要素よりも、関数定義の<script>要素を先に記述していなければならない」というルールがあるためです（関数の定義、呼び出しがひとつの<script>要素にまとまっていても構いません）。たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 また、スクリプトからスタイルシートを出力するような状況でも、本文の出力に先立って<head>要素の配下で<script>要素を記述すべきです。 まずは（2）を基本とし、それでまかなえない場合にだけ（3）を利用する、と理解しておけばよいでしょう（本書でもそのルールに沿っています）。くり返しですが、（1）を利用する状況は、外部のウィジェットを埋め込むなどの状況を除けば、ほとんどありません。（1）を使いたくなったら、まずはほかの方法でまかなえないかを検討すべきです。 改訂版JS本格入門より ・同じJSファイル内であれば関数の定義と呼び出しは順番はどちらでも良いが、 別ファイルとして<script>タグで読み込む場合は定義が入ったファイルが呼び出しのファイルより先に記載されていないといけないということでしょうか？ ・ ＞＞＞ たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 これは具体的にどんなケースだと思いますか？ sectionなどのbody内の要素の高さをjqueryで取得設定するときなどで消化？ ・最後に良くCSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがあるのですが、このような場合はどこに書くべきなのでしょうか？

noname#226032
noname#226032

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

どこに書いても良いと思う。問題はどのタイミングで実行するかでしょう。 1,jsを読み込んですぐに実行 2,htmlの構造をブラウザが把握してから実行 3,画像もぜ～んぶ読み込んで実行 jqeury 使うなら 　2→　$(document).ready(function(){　//ここにやりたい処理　}); 3 →　$(window).load(function(){　//ここにやりたい処理　}); と書けばどこに書いてもそのタイミングで実行されるでしょう。 >>CSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがある 画像を読み込んでその幅、高さを計算してってパターンであるなら、そのタイミングでしか書けないでしょう。ちょっと変更して、最初はopacityを0にしておいて見えないようにして、そのJS計算後にopacityを１にして表示すればガッタンとなったあとにしか表示されないのでガッタンとなった感じには見えないと思います。

noname#226032
質問者

お礼

＞＞ そのJS計算後にopacityを１にして表示すればガッタンとなったあとにしか表示されないのでガッタンとなった感じには見えないと思います。 やはり画像を読み込んでからサイズを変更するのでどうして高さが変更している状況が一瞬見えてしまいますよね。 これは実務でも仕方がないことと堂々とクライアントに行っても問題ないのですね。 せいぜいできることといえば小さい画像が大きくなる様子を透過して隠すことだけですね。

その他の回答 (1)

回答No.2

>>これは実務でも仕方がないことと堂々とクライアントに行っても問題ないのですね。 解決策の１つを書きました。 「ガタンとなる前を見えなくして、ガタンとなった後に表示。」と 解決策はありますのでクライアントに「解決策は無い！」と突き放すのはダメだと思います。 他にも工夫するなら表示前は読み込み中的な表示をして、jsで事前に画像を読み込んで等々方法は在ると思います。

noname#226032
質問者

お礼

親要素もすべてhiddenにしておくということですか？大変ですね。全体がずれるのでそれだとbody事態にhiddenをつけないといけません。 nowloadingとつけておけばその裏でがったんとなっても許されるのですかね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • scrollsmoothly.jsが動かない

    質問させていただきます。 下記のscrollsmoothly.jsを設定したいのですが、どうしても うまく動作しません。 http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly ソースコードをDLして jsフォルダに入れました。 そして <head>～</head> の間に <script type="text/javascript" src="js/scrollsmoothly.js"></script> と記述しました。 そして <body> <div id="head"> ～ <a href="#head">topへ戻る</a> </body> と記述しました。 何か間違っていますでしょうか？ よろしくお願いします。

  • jQuery.jsを使ったhtml外部読み込み方法

    JavaScript超初心者です。 何卒ご協力の程よろしくお願い致します！！ タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。 以下のページを参考にやってみましたが上手くいきません。 http://blog.sugulab.com/?p=14 やってみたのは下記のような作業です。 まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。 http://jquery.com/download/ 次に参照ページにならってhead要素内に下記のように記述しました。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!– $(function(){ $("#leftcontent").load("shopmenu.html"); }); // –> </script> body要素内には<div id="leftcontent"></div>と記述しています。 このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。 PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・ ド素人の為、見当違いのご質問でしたらご容赦ください。 どなたかご教示、アドバイスの程よろしくお願い申し上げます！！m(*u_u*)m

  • インクルードしているheadの中に記述するには？

    htmlのヘッダーを関数化して全画面でインクルードしています。 ある画面でだけ、ちょっとしたjavascriptの記述をヘッダー内に記述したいのですが、どうしたらいいでしょうか？ 現状ではヘッダー関数の中でJSを外部ファイルで読み込んでいますが、JSのスクリプトでwindow.onloadなどを使う場合、すべてのページに該当してしまいよろしくありません。 うまい方法がありましたらご教授宜しくお願いします。 またheadの終わりからbodyの始まる間にscriptを書いても問題はないのでしょうか？ 動作的にはエラーは通知されませんでしたが。 原則的にはheadの中だと思うので。 <html> <head> </head> ●ここにjavascriptを記述 <body> ・・・ 【環境】 php5

    • 締切済み
    • PHP
  • Dreamweaver で 外部JSを読み込む際の設定について

    初めまして。 Dreamweaver の使い方に関する質問です。 DWでテンプレート（dwt）に外部JSファイルを埋め込む際の方法についてですが、 <head>～</head>間に手打ちで<script type="text/javascript" src="./js/abc.js"></script>のように記述しています。 しかし、この方法だとJSファイルへのリンクが切れるページが出てきます。 というのは、テンプレートで作ったページがすべて同じ階層のフォルダにあるわけではないので、 テンプレートで手打ちした部分が、深い階層のページにまで反映されない状態です。 ちょっと説明がヘタですが、わかりますでしょうか？ 今はとりあえず、<head>～</head>間には記述せず、編集可能領域にJSファイルを読み込む記述をして対応していますが、 何か、正攻法というか、正式な操作方法などはあるのでしょうか？

  • JavaScriptのエラー　（ 関数の未定義）

    htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、 という不具合が出ていたのですが、 JavaScript（<script>）の記述場所を変更する事により、対処することができました。 でもまだ、理解ができずにいます。 たとえば <head> <script ・・・・外部jsファイル> </head> <body> <input type="text" name="hizuke"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ 　・ 　・ </body> 　・ 　・ ※外部jsファイルでhyouji()関数記述 のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、 エラーの詳細を見ると　 　　hyouji()が未定義です となり、 JavaScriptの関数がまだ読み込まれていないから 記述を後に移動したほうがいいというアドバイスを受け、 このhtmlを <head> </head> <body> <input type="text" name="HIZUKE"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ <script ・・・・外部jsファイル> </body> 　・ 　・ のように変更して、エラーをなくすことができました。 外部jsファイルのhyouji()関数の処理は 「syori」のhiddenに「hyouji」というような処理識別をセットし、 submitしています。 hyouji()関数の前にもたくさんの関数が定義されていて その中には 　　　var aaa = document.form1.xxxx.value; などの記述もたくさんあります。 <script>の記述場所を移動したことで 　　　htmlを読み込んで、 　　　「表示」ボタンを表示し、 　　　jsファイルを読み込む・・・ という処理順序になると思うのですが 表示ボタンをクリックしたときには、 jsファイルの読込みは終了しているのでしょうか？？？ ボタンをクリックした時にはjsの読込みを終了していないといけないと 思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、 未定義関数が解決されるのかがわかりません。 エラーの内容が 　　オブジェクトが見つかりません などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。 うまく伝わるか不安ですが、 ボタンクリックの前にはJavaScriptの関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。

  • js ファイルの読み込み

    ●質問の主旨 jsファイルを読みこむためHTMLファイルを記述しましたが 読み込めません。記述が間違っているのでしょうか？ それともjsファイルの格納場所がおかしいのでしょうか？ JavaScriptは3日前にはじめたばかりの超初心者です。 ごぞんじのかたご教示願います。 ●ファイルの配置 jsファイル、HTMLファイルともに GoogleDrive→JavaScript(任意のフォルダ名）に格納 ●jsファイルの内容 var now = now Date(); var greeting; if(now.getHours() < 12 ) greeting = 'おはよう'; else if(now.getHours() < 18 ) greeting = 'こんにちは'; else greeting = 'こんばんは'; ●HTMLファイルの内容 <HTML> <HEAD> <TITLE>JavaScriptサンプル</TITLE> <SCRIPT language = "JavaScript" src = "file.js"></SCRIPT> </HEAD> </BODY> <SCRIPT language = "JavaScript"> <!-- alert(greeting); // --> </SCRIPT> </BODY> </HTML>

  • JavascriptとJqueryを混在し記述

    JavascriptとJqueryが混在したスクリプトファイル（.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を１つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後（要素を特定できるようにするため）に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね？ つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね？ ===== script.js ====== //(1)Javaスクリプト　←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery　←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。

  • PHP内でjsファイルの関数は使えないのでしょうか

    こんばんは、Webページ制作の勉強で問題にぶつかり、少々お知恵をお借りしたく質問させて頂きました。 あるPHPファイルの中の <!doctype html> <html> //ここにHTMLの記述があるとします。 </html> のHTMLの記述の中に <script src="example_A.js"></script> <script src="example_B.js"></script> のような形で他のページでも使っているJavascriptのファイルを読み込んで使用しようとしたのですが、一部の処理だけが行われないようのです。 そこでjsファイルの中で使えない記述に共通点が無いか確認してみたところ、 $(function() { 　　//ここに処理 }); のように、関数のみが動作して居ない事が解りました。 そこで質問なのですが、PHPファイルの中では、<html>の中で記述されたスクリプトだとしても関数の中で記述された処理は使えないという事なのでしょうか？ また、もしPHPの中でも関数を動作させる方法があれば、教えて頂けないでしょうか。 宜しくお願い致します。

    • 締切済み
    • PHP
  • jsファイルで配列を定義し、ｊｓファイルを切りかえて使う

    お世話になります。 jsファイルで配列を定義し、その配列の内容を表示しています。 いくつかのjsファイルで配列を定義し、そのjsファイを切りかえることにより、表示する配列の内容を切りかえることはできないでしょうか。 例えば data_a.js DataAry = new Array( new WNData('2006/11/10','ああ','・・.html'), new WNData('2006/11/10','いい','・・.html'), ・・・・・ ); data_b.js DataAry = new Array( new WNData('2006/11/10','aa','・・.html'), new WNData('2006/11/10','bb','・・.html'), ・・・・・ ); dspDataAry.jsで function WNData(Date,Cmnt,Href,Target){ this.Date=Date; this.Cmnt=Cmnt; this.Href=Href; } function DspData(){ strhtml="・・・・ （DataAryを表示するhtmlを作成） return strhtml; } dspDataAry.htmlで <script type='text/javascript' src='dspDataAry.js'></script> <script type='text/javascript' src='data_a.js'></script> <body> <script type='text/javascript'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br> </body> とすれば、data_a.jsの配列の内容が表示されます。 ボタン「ｂを表示」を押すことにより、 data_b.jsを読み込んで、その内容を表示するようにできないものでしょうか。 onClick="ｂを表示する関数"この「ｂを表示する関数」をいう関数をどのように書いたらよいのかわかりません。 data_a.js、data_b.jsで定義する配列名は同じとします。 data_c.js、data_d.js・・・といくつかに分けたく思っています。 前もってdata_b.jsを読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。

  • 外部 .js で

    index.html 内の head タグ間に <script type="text/javascript" src="./js/test2.js"></script> また、index.html と同階層にある js ディレクトリの内の test2.js の内容は document.write("test") だけです。 この条件で（というのは、最終的に別にテキストを出したいだけというわけではないので）、body の任意の場所に test を表示 [記述] させる方法を教えてください。 body の適当な場所に <script type="text/javascript"></script> と書いても、何も現れません（ソースで確かめています）。根本的におかしいのかもしれませんが、わかりません。 必ず、これら条件でお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する