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

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

ただいまの
回答率

90.50%

  • JavaScript

    16914questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9234questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

JSは外部ファイル化はどのように行うのが、現場では多いでしょうか? グループで外部ファイル化して、その後gulpでひとつのHTMLに統合する形でしょうか?

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 552
退会済みユーザー

退会済みユーザー

JSは外部ファイル化はどのように行うのが、現場では多いでしょうか?
グループで外部ファイル化して、その後gulpでひとつのHTMLに統合する形でしょうか?

https://jsfiddle.net/80od313c/25/
の続き

・ファイル名を下記のようにして、下記のように外部ファイル化しようと思っていますが、問題ないでしょうか?

・ファイル名drawermenu

<!-- drawermenu-button-action-クルットまわる -->
            <script>
                $(function(){
                    // 下記をクリックすると実行される
                    $('.drawermenu-button-animation, .overlay-drawer, .modal-button-wrap').on('click', function() {
                        // 下記の要素のセレクタにactiveクラスが足される。.modal-button-wrapbutton.activeとなるので、.modal-button-wrapbuttonのみで良い。
                        $('.modal-button-wrap__button').toggleClass('active');
                    });                    
                });
            </script>

            <!-- drawermenu-メニューが出たり戻ったりする -->
            <script>
                $(function(){
                    // 下記をクリックすると実行される
                    $('.modal-button-wrap, .drawermenu').on('click', function() {
                        //メニューが出たり戻ったりする
                        $('.drawermenu').toggleClass('showmenue');
                    });                    
                });
            </script>

            <!-- drawermenu-buttonwrap-fadein-fadeout-スクロールした時ハンバーガーメニューが表記される -->
            <script>
                $('.modal-button-wrap').css('display','none');
                $(window).scroll(function(){
                    if($(window).scrollTop() > 800) {
                        $('.modal-button-wrap').fadeIn();
                    }else{
                        $('.modal-button-wrap').fadeOut();
                    }
                });
            </script>

            <!-- drawermenu-blackbackground -->
            <script>
                $('.modal-button-wrap').click(function(){
                  //透明の背景、オーバーレイのhtmlを作る
                  $('body').append('<div class="overlay-drawer drawermenu-button-animation"></div>');
                  //透明の背景、オーバーレイをフェードイン
                  $('.overlay-drawer').fadeIn('slow');
                  //ここをクリックすると黒い背景がフェードアウト
                  $('.overlay-drawer, .close, .drawermenu, .drawermenu-button-animation ,.showmenue, .modal-button-wrap__button').click(function(){
                      //透明の背景をフェードアウト
                      // 透明の背景オーバーレイはフェードアウトしてから削除
                      $('.overlay-drawer').fadeOut('slow', function(){
                        $('.overlay-drawer').remove();
                    });
                  });
                });
            </script>

・ファイル名drawermenu

            <!-- ページ内遷移 -->
            <script>
            $(function(){
               // #で始まるアンカーすべてをクリックした場合に処理
               $("a[href^='#']").click(function() {
                  // スクロールの速度
                  var speed = 1000; // ミリ秒
                  // アンカーの値取得
                  var href= $(this).attr("href");
                  // 移動先を取得
                  var target = $(href == "#" || href == "" ? 'html' : href);
                  // 移動先を数値で取得
                  var position = target.offset().top;
                  // スムーススクロール
                  $('body,html').animate({scrollTop:position}, speed, 'swing');
               });
            });
            </script>

・ファイル名lightbox
            <!-- lightbox-images -->
            <script>
                //5回目モーダルウィンドウ
                // #course figureをクリック 下記の要素をクリックすると、始まる
                $('.yu-pcimage,.yu-tabletimage,.yu-spimage').click(function(){
                  //オーバーレイのhtmlを作る
                  $('body').append('<div class="overlay"></div>');
                  //オーバーレイをフェードイン
                  $('.overlay').fadeIn('slow');

                  // モーダルコンテンツのIDを取得
                  var modal = '#' + $(this).attr('data-tutor');
                   // モーダルコンテンツフェードイン
                  $(modal).fadeIn('slow');
                  // 「.modal-overlay」あるいは「.modal-close」をクリック
                  $('.overlay, .close').off().click(function(){
                      // モーダルをフェードアウト
                      $(modal).fadeOut('slow');
                      // オーバーレイはフェードアウトしてから削除
                      $('.overlay').fadeOut('slow', function(){
                        $('.overlay').remove();
                    });
                  });
                });
            </script>

・ファイル名gmap
            <!--gmap-->
            <script type="text/javascript">google.load("jquery", "1.4.2");</script>  
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
            <script type="text/javascript" src="js/jquery.GoogleMaps.js"></script> 

            <script type="text/javascript">  
                $(function(){  
                    $('#gmap').GoogleMaps({  
                      lat: 37,      // 緯度  
                      lng: 155,     // 経度  
                      zoom: 18             // ズームレベル  
                    });  
                })  
            </script>

・ファイル名gototop
            <!--gototop-->
            <script>
                $('#gototop, .drawermenu__gototop').click(function(){
                    $('body,html').animate({scrollTop:0}, 1000);
                });
                </script>

            <!-- fadein-from-bottom-画面表記後すぐに実行 -->
            <script>
                    $(function(){
                        $(window).ready(function (){
                            $('.js-fadein-from-bottom').each(function(){
                                var elemPos = $(this).offset().top;
                                var scroll = $(window).scrollTop();
                                var windowHeight = $(window).height();
                                if (scroll > elemPos - windowHeight + 0){
                                    $(this).addClass('scrollin');
                        }
                    });
                });
            });
            </script>

・ファイル名fadein-from-bottom
            <!-- fadein-from-bottom-スクロール50後に実行 -->
            <script>
                    $(function(){
                        $(window).scroll(function (){
                            $('.top-gnavilink-fifth,.translate3d-to-upper-left,.inquiry-formprimary-btn').each(function(){
                                var elemPos = $(this).offset().top;
                                var scroll = $(window).scrollTop();
                                var windowHeight = $(window).height();
                                if (scroll > elemPos - windowHeight + 50){
                                    $(this).addClass('scrollin');
                        }
                    });
                });
            });
            </script>

            <!-- fadein-from-bottom-スクロール350後に実行 -->
            <script>
                    $(function(){
                        $(window).scroll(function (){
                            $('.translate3d-lower-right').each(function(){
                                var elemPos = $(this).offset().top;
                                var scroll = $(window).scrollTop();
                                var windowHeight = $(window).height();
                                if (scroll > elemPos - windowHeight + 350){
                                    $(this).addClass('scrollin');
                        }
                    });
                });
            });
            </script>        
            <!-- end script -->

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/04/05 14:52

    コードブロックはマークダウンで記述できます。

    キャンセル

  • 退会済みユーザー

    2016/04/11 18:50

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

0

基本的に、HTML内にインラインでスクリプトを記載するのと、

<script>
$(function(){ 
  //
  //処理、ほにゃらら・・・
  //
}); 
</script>


scriptタグで外部ファイル化するのとでは、大きな違いはありません。

<script type="text/javascript" src="./js/ほにゃらら.js"></script>


なので、現在記載されている、スクリプトを外部ファイル化して、
記載されているのと同じ順序で、
scriptタグで読み込ませれば、同じ動作をするはずです。

ただし、実際の現場では、
外部ファイル化することによって、グローバル領域が、分散してわかりずらくなったり(同一変数を触ってしまってうまく動作しないとか)、開発者が複数人にわたる場合には、命名規則がばらばらになったりと、外部ファイル分散する際には、あるていど互いにルールを決めておく必要があります(一人でコーデイングする場合でも、規則を決めておくと、あとでのデバッグが楽ですよ)。

そして、最終的には、記載されいる通り、読み込みの負荷などを考えて(&更新される頻度とか、CDNを使う、使わない、など)できるだけ、1つのJavaScriptファイルにまとめて(GulpでもGruntでも)配信するという事となります。
ただし、まとめてしまうと、デバッグ困難ですので、サービス安定するまでは、個別ファイルのままでの配信もアリかと思いますが。

ちなみに、私はHTML内には、できるだけスクリプトを残さない派ですので、HTMLはHTML、JSはJS、そしてCSSと分けていますので、HTML内にJSを統合しません。「構造(html)」と、「アクション(js)」と、「デザイン(css)」と「リソース(jpgとか)」というそのままのイメージがわかりやすいですので(古いブラウザ、ってIEだけど、でどうしてもCSS3とか、そんな場合は除きますが・・・)。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/06 11:44

    外部ファイル化する人と、HTML内に書く人と、外部ファイル化して、アップロード時にgulpでひとつにする人と現場でも別れているのですね。

    ただ一番合理的なのは、アップロード時にgulpでひとつにするでしょうね。


    外部化する場合、下記のようなわけ方で、問題ないでしょうか?
    ・ファイル名drawermenu

    <!-- drawermenu-button-action-クルットまわる -->
    <script>
    $(function(){
    // 下記をクリックすると実行される
    $('.drawermenu-button-animation, .overlay-drawer, .modal-button-wrap').on('click', function() {
    // 下記の要素のセレクタにactiveクラスが足される。.modal-button-wrapbutton.activeとなるので、.modal-button-wrapbuttonのみで良い。
    $('.modal-button-wrap__button').toggleClass('active');
    });
    });
    </script>

    <!-- drawermenu-メニューが出たり戻ったりする -->
    <script>
    $(function(){
    // 下記をクリックすると実行される
    $('.modal-button-wrap, .drawermenu').on('click', function() {
    //メニューが出たり戻ったりする
    $('.drawermenu').toggleClass('showmenue');
    });
    });
    </script>

    <!-- drawermenu-buttonwrap-fadein-fadeout-スクロールした時ハンバーガーメニューが表記される -->
    <script>
    $('.modal-button-wrap').css('display','none');
    $(window).scroll(function(){
    if($(window).scrollTop() > 800) {
    $('.modal-button-wrap').fadeIn();
    }else{
    $('.modal-button-wrap').fadeOut();
    }
    });
    </script>

    <!-- drawermenu-blackbackground -->
    <script>
    $('.modal-button-wrap').click(function(){
    //透明の背景、オーバーレイのhtmlを作る
    $('body').append('<div class="overlay-drawer drawermenu-button-animation"></div>');
    //透明の背景、オーバーレイをフェードイン
    $('.overlay-drawer').fadeIn('slow');
    //ここをクリックすると黒い背景がフェードアウト
    $('.overlay-drawer, .close, .drawermenu, .drawermenu-button-animation ,.showmenue, .modal-button-wrap__button').click(function(){
    //透明の背景をフェードアウト
    // 透明の背景オーバーレイはフェードアウトしてから削除
    $('.overlay-drawer').fadeOut('slow', function(){
    $('.overlay-drawer').remove();
    });
    });
    });
    </script>





    ・ファイル名internal-link

    <!-- ページ内遷移 -->
    <script>
    $(function(){
    // #で始まるアンカーすべてをクリックした場合に処理
    $("a[href^='#']").click(function() {
    // スクロールの速度
    var speed = 1000; // ミリ秒
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を数値で取得
    var position = target.offset().top;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    });
    });
    </script>





    ・ファイル名lightbox
    <!-- lightbox-images -->
    <script>
    //5回目モーダルウィンドウ
    // #course figureをクリック 下記の要素をクリックすると、始まる
    $('.yu-pcimage,.yu-tabletimage,.yu-spimage').click(function(){
    //オーバーレイのhtmlを作る
    $('body').append('<div class="overlay"></div>');
    //オーバーレイをフェードイン
    $('.overlay').fadeIn('slow');

    // モーダルコンテンツのIDを取得
    var modal = '#' + $(this).attr('data-tutor');
    // モーダルコンテンツフェードイン
    $(modal).fadeIn('slow');
    // 「.modal-overlay」あるいは「.modal-close」をクリック
    $('.overlay, .close').off().click(function(){
    // モーダルをフェードアウト
    $(modal).fadeOut('slow');
    // オーバーレイはフェードアウトしてから削除
    $('.overlay').fadeOut('slow', function(){
    $('.overlay').remove();
    });
    });
    });
    </script>





    ・ファイル名gmap
    <!--gmap-->
    <script type="text/javascript">google.load("jquery", "1.4.2");</script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/jquery.GoogleMaps.js"></script>

    <script type="text/javascript">
    $(function(){
    $('#gmap').GoogleMaps({
    lat: 37, // 緯度
    lng: 155, // 経度
    zoom: 18 // ズームレベル
    });
    })
    </script>




    ・ファイル名gototop
    <!--gototop-->
    <script>
    $('#gototop, .drawermenu__gototop').click(function(){
    $('body,html').animate({scrollTop:0}, 1000);
    });
    </script>

    <!-- fadein-from-bottom-画面表記後すぐに実行 -->
    <script>
    $(function(){
    $(window).ready(function (){
    $('.js-fadein-from-bottom').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 0){
    $(this).addClass('scrollin');
    }
    });
    });
    });
    </script>

    ・ファイル名fadein-from-bottom
    <!-- fadein-from-bottom-スクロール50後に実行 -->
    <script>
    $(function(){
    $(window).scroll(function (){
    $('.top-gnavilink-fifth,.translate3d-to-upper-left,.inquiry-formprimary-btn').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 50){
    $(this).addClass('scrollin');
    }
    });
    });
    });
    </script>

    <!-- fadein-from-bottom-スクロール350後に実行 -->
    <script>
    $(function(){
    $(window).scroll(function (){
    $('.translate3d-lower-right').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 350){
    $(this).addClass('scrollin');
    }
    });
    });
    });
    </script>
    <!-- end script -->

    キャンセル

  • 2016/04/06 12:11

    ファイルの分け方なども、規則はありませんので、基本自由です。機能単位で分けるとわかりやすいかも、という程度で、これもエンジニア次第といったところでしょうか。

    キャンセル

  • 2016/04/06 12:36

    ・ファイル名fadein-from-bottom.jsなど上記の分け方で問題ないかを聞きたかったのですが、直接的な回答をいただけるとありがたいです。

    キャンセル

  • 2016/04/06 13:00

    大丈夫かどうかという所であれば、大丈夫だと思います。
    注意点という所では、はじめに記載したとおり、元のスクリプトの配置と同じ順序にしておいてください。

    キャンセル

  • 2016/04/06 13:47

    ありがとうございます。

    上記のようなファイル名で、上記のようにグループ分けして、外部ファイル化すれば問題ないですね。
    やはりJSは、ドロワーメニューならドロワーメニューグループとして外部ファイル化するのですね。

    ドロワーメニューのJSも別々に分離はしないのですね。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16914questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9234questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • トップ
  • JavaScriptに関する質問
  • JSは外部ファイル化はどのように行うのが、現場では多いでしょうか? グループで外部ファイル化して、その後gulpでひとつのHTMLに統合する形でしょうか?