Q&A
コードブロックはマークダウンで記述できます。
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-wrap__button.activeとなるので、.modal-button-wrap__buttonのみで良い。 $('.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-gnavi__link-fifth,.translate3d-to-upper-left,.inquiry-form__primary-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 -->
回答1件
0
基本的に、HTML内にインラインでスクリプトを記載するのと、
html
1 <script> 2$(function(){ 3 // 4 //処理、ほにゃらら・・・ 5 // 6}); 7</script>
scriptタグで外部ファイル化するのとでは、大きな違いはありません。
html
1<script type="text/javascript" src="./js/ほにゃらら.js"></script>
なので、現在記載されている、スクリプトを外部ファイル化して、
記載されているのと同じ順序で、
scriptタグで読み込ませれば、同じ動作をするはずです。
ただし、実際の現場では、
外部ファイル化することによって、グローバル領域が、分散してわかりずらくなったり（同一変数を触ってしまってうまく動作しないとか）、開発者が複数人にわたる場合には、命名規則がばらばらになったりと、外部ファイル分散する際には、あるていど互いにルールを決めておく必要があります（一人でコーデイングする場合でも、規則を決めておくと、あとでのデバッグが楽ですよ）。
そして、最終的には、記載されいる通り、読み込みの負荷などを考えて（＆更新される頻度とか、CDNを使う、使わない、など）できるだけ、１つのJavaScriptファイルにまとめて(GulpでもGruntでも)配信するという事となります。
ただし、まとめてしまうと、デバッグ困難ですので、サービス安定するまでは、個別ファイルのままでの配信もアリかと思いますが。
ちなみに、私はHTML内には、できるだけスクリプトを残さない派ですので、HTMLはHTML、JSはJS、そしてCSSと分けていますので、HTML内にJSを統合しません。「構造(html)」と、「アクション(js)」と、「デザイン(css)」と「リソース(jpgとか)」というそのままのイメージがわかりやすいですので（古いブラウザ、ってIEだけど、でどうしてもCSS3とか、そんな場合は除きますが・・・）。
投稿2016/04/05 20:39
総合スコア1283
外部ファイル化する人と、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 -->
ファイルの分け方なども、規則はありませんので、基本自由です。機能単位で分けるとわかりやすいかも、という程度で、これもエンジニア次第といったところでしょうか。
・ファイル名fadein-from-bottom.jsなど上記の分け方で問題ないかを聞きたかったのですが、直接的な回答をいただけるとありがたいです。
大丈夫かどうかという所であれば、大丈夫だと思います。
注意点という所では、はじめに記載したとおり、元のスクリプトの配置と同じ順序にしておいてください。
ありがとうございます。
上記のようなファイル名で、上記のようにグループ分けして、外部ファイル化すれば問題ないですね。
やはりJSは、ドロワーメニューならドロワーメニューグループとして外部ファイル化するのですね。
ドロワーメニューのJSも別々に分離はしないのですね。
あなたの回答
tips
プレビュー
