弊社 JavaScript 構成（旧）

概要

弊社では、標準モジュールver.19で、下記を使っています。

• /lib/jquery.min.js（3.6.0）
• /lib/jquery.validate.min.js
• /lib/ajaxzip3.js
• /lib/jquery-sotable.min.js（※ UIに必要な場合のみ）
• /lib/aos.js（※ エフェクトが必要な場合のみ）
• /lib/desvg.js（※ SVGへのCSS適用などが必要な場合のみ）
• /lib/axios.min.js
• /common/oo_lib.js
• /common/base.js（サイト毎の設定）

これらを圧縮・バンドルし、base.minjs として読み込んでしています。

jquery.validate.js、ajaxzip3.js

フォームのバリデートと郵便番号から住所の入力補完。

jquery-sotable.min.js

ドラッグによる並べ替えプラグイン。UIに必要な場合のみ組み込みます。

軽量化のためにも、jQuery-UIを全て使用するのではなく、公式ページよりカスタムダウンロードで選定利用します。

https://jqueryui.com/download/

axios.js

jQuery.ajaxは、axios に移行しました。※ Laravel（sanctum）との相性の良さも考慮しています。

desvg.js

svgにCSSを適用する場合やその他埋め込みでは対応できない場合にのみ使用します。

標準で読み込んでも問題ないほど軽量です。

oo_lib.js

弊社開発の jQuery 標準プラグインです。下記をプリセットしています。

別ページで詳しく紹介しています。

oo_lib.js（jQuery 標準プラグイン）

base.js

ここに各サイト共通の設定値を記述し、プラグインを実行します。

ready と load をあわせて記述しています。

jQuery(function ($) {
	const breakpoint = [600, 960],
		$body = $('body'),
		$gnav = $('.gnav'),
		$pagetop = $('.pagetop'),
		frameSetting = {
			hws: {
				type: {
					sp: 'b',
					spyoko: 'c',
					tb: 'b',
					pc: 'b'
				},
				opt: {
					sp: { adjust: 200 },
					spyoko: { adjust: 200 },
					tb: { adjust: 200 },
					pc: { adjust: 500 }
				}
			},
			gnoTop0: true
		};

	function changed(mode) {
		if (mode === 'sp') {
		} else if (mode === 'sp_tb') {
		} else if (mode === 'tb') {
		} else if (mode === 'tb_pc') {
		} else if (mode === 'pc') {
		} else if (mode === 'every') {
			$('img[data-switchimg]').switchImg({ breakPoint: breakpoint });
			$('.submenu_wrap', $gnav).navSubmenu();
			$('.sscroll').sScroll();
		}
	}

	function setup() {
		$gnav.navCurrent();
		$('.sidenav').navCurrent({ gnav: false });
		$('a', $pagetop).sScroll({ top: true });
		$pagetop.pagetopDisplayAnimation();

		/* utility ( oo_lib ) */
		$body.hashLinkInPage();
		$('a[href$=".pdf"]').gaDownloadTrack();
		$('a[href$=".pdf"]').addTargetBlank();
		$('.tab_handle_set a').switchTab();
		$('.openclose_handle').openclose();
		$('.modal_handle').modal();
		$('.gallery_handle_set').imgGallery();
		$('.snap_sp').snapDots();
		$('.tooltip').tooltip();
		$('.sidenav_openclose_handle').openclose({
			target: '.sidenav_openclose_target',
			wrap: '.sidenav_openclose_wrap'
		});
		$.oo.inheritTeston();
		$.oo.frame(frameSetting);

		/* form */
		$('input[name="password"] +.icon_eye').inputPasswordChange();
		$.oo.inputFile();
	}

	$(function () {
		$.oo.changed_run(changed, breakpoint);
		setup();
	});
});

setTimeout(function () {
	$('#loading_wrap').fadeOut();
	$('body').css({ opacity: 100 });
}, 2000);
$(window).on('load', function () {
	/* load page */
	$('#loading_wrap').fadeOut();
	$('body').css({ opacity: 100 });
	deSVG('.svg', true);
	$('.contaiiner').css({ paddingTop: $('.header_wrap').outerHeight() });
});

圧縮とバンドル

Webの半ば常識となってきていますが、JavaScriptは1ファイルに圧縮し、リクエスト数を減らすことでサイトを軽量化しています。

弊社では、全サイト共通のスクリプト、頻出スクリプトは1ファイルに「base.min.js」として、読み込み。ページ固有のスクリプトは「各ページ.js」として、読み込んでいます。

各ページのスクリプトは、「軽量化」よりも「メンテナンスに強いサイト」を優先するため、インラインに記述せず別ファイルで管理しています。

※ webpack に一時移行しましたが、gulp を継続して使用しています。