JavaScriptとjQueryでよく使う独自関数リストを紹介
2020年8月11日
システム開発でよく使うJavaScript,jQueryの独自共通関数!
どうも、テック備忘LOGのYuki（@tech_bibo_log）です！！
今回は当ブログや独自システムの開発の際によく使うJavaScript,jQueryの独自関数を公開したいと思います。
JavaScript,jQueryはWebサイトの構築に必ずと言っていいほどよく使います。
HTMLだと手動で書き換えたりしなければいけないところをJavaScriptやjQueryを使って独自関数を使えば自動で更新することが出来るようになります。
便利な関数は随時追記していければと思います！！（2020/08/11現在）
ではみていきましょう！！
[ 目次 (開く) ]
日付に関連する便利な関数
今日の日付や曜日、現在の時間などを簡単に取得できるようになる関数を紹介します。
1.getSeverTime()
サーバー時間を取得します。
ajax通信でサーバーと通信を行い、サーバー時間を取得します。
function getSeverTime(){
var date;
$.ajax({
type: 'GET',
async: false
}).done(function(data, status, xhr) {
date = new Date(xhr.getResponseHeader('Date'));
});
return date;
}
2.getDate_fmt(arg)
取得したい日付のフォーマットを指定することで、今日の日付を取得出来ます。
例えばgetDate_fmt("yyyy-mm-dd");とすると『2020-08-11』が返されます。
また、注意点として、今日の日付の取得にはgetSeverTime()と、後述するtoDoubleDigits(arg)を使用しています。
選択可能なフォーマット一覧（独自で追加可能）
- yyyy/mm/dd
- yyyy-mm-dd
- yyyymmdd
- yyyy/mm/
- yyyymm
const getDate_fmt = (mode) => {
var date = getSeverTime();
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
if("yyyy/mm/dd"==mode){
return yyyy + '/' + mm + '/' + dd;
}else if("yyyy-mm-dd"==mode){
return yyyy + '-' + mm + '-' + dd;
}else if("yyyymmdd"==mode){
return yyyy + mm + dd;
}else if("yyyy/mm"==mode){
return yyyy + '/' + mm;
}else if("yyyymm"==mode){
return yyyy + mm;
}
}
3.getDayOfWeek()
今日の曜日を取得します。
デフォルトでは"(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)"が返されますが、好きなように修正してください。
また、注意点として、今日の曜日の取得にはgetSeverTime()を使用しています。
function getDayOfWeek() {
var date = getSeverTime();
var dayOfWeek = date.getDay();
var dayOfWeekStr = [ "(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)" ][dayOfWeek];
return dayOfWeekStr;
}
4.getDateAfter_nDays_yyyymmdd(arg)
今日からn日後の日付を取得します。
引数に加算する日数を渡すことで、日付が返されます。
例えば、2020年08月11日にgetDateAfter_nDays_yyyymmdd(5)とすると『20200816』となります。
また、注意点として、今日の日付の取得にはgetSeverTime()と、後述するtoDoubleDigits(arg)を使用しています。
const getDateAfter_nDays_yyyymmdd = (days) => {
var date = getSeverTime();
date.setDate(date.getDate() + days);
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
return yyyy + mm + dd;
}
5.getDateAfter_nDays_yyyy-mm-dd(arg)
今日のからn日後の日付を取得します。
引数に加算する日数を渡すことで、日付が返されます。
例えば、2020年08月11日にgetDateAfter_nDays_yyyy-mm-dd(5)とすると『2020-08-16』となります。
また、注意点として、今日の日付の取得にはgetSeverTime()と、後述するtoDoubleDigits(arg)を使用しています。
const getDateAfter_nDays_yyyy-mm-dd = (days) => {
var date = getSeverTime();
date.setDate(date.getDate() + days);
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
return yyyy + '-' + mm + '-' + dd;
}
文字列操作に関連する便利な関数
文字列を操作する便利な独自関数を紹介します。
1.toDoubleDigits(arg)
ここまでに紹介してきた関数でも使用しているtoDoubleDigits(arg)の紹介です。
引数として渡した数値を2桁の0埋めして返します。
例えばtoDoubleDigits(2);とすると『02』が返されます。
const toDoubleDigits = (num) => {
num += "";
if (num.length === 1) {
num = "0" + num;
}
return num;
};
2.getZeroPadding()
引数として渡した数値を指定の桁数まで0埋めして返します。
例えばgetZeroPadding(2, 5);とすると『00002』が返されます。
この関数では10桁まで対応しています。
const getZeroPadding = (num,length) => {
return ('0000000000' + num).slice(-length);
}
3.小数点〇以下を四捨五入
第一引数として渡した数値を、第二引数の数値(小数点以下の範囲)を基に四捨五入した数値を返します。
例えばround(1.005, 2);とすると『1.01』が返されます。
function round(number, precision) {
var shift = function (number, precision, reverseShift) {
if (reverseShift) {
precision = -precision;
}
var numArray = ("" + number).split("e");
return +(numArray[0] + "e" + (numArray[1] ? (+numArray[1] + precision) : precision));
};
return shift(Math.round(shift(number, precision, false)), precision, true);
}
まとめ
ここまで紹介してきた関数を一つのjsファイルにまとめたものを以下に置いておきますので、ご自由にダウンロードして使用してください。
function getSeverTime(){
var date;
$.ajax({
type: 'GET',
async: false
}).done(function(data, status, xhr) {
date = new Date(xhr.getResponseHeader('Date'));
});
return date;
}
const getDate_fmt = (mode) => {
var date = getSeverTime();
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
if("yyyy/mm/dd"==mode){
return yyyy + '/' + mm + '/' + dd;
}else if("yyyy-mm-dd"==mode){
return yyyy + '-' + mm + '-' + dd;
}else if("yyyymmdd"==mode){
return yyyy + mm + dd;
}else if("yyyy/mm"==mode){
return yyyy + '/' + mm;
}else if("yyyymm"==mode){
return yyyy + mm;
}
}
function getDayOfWeek() {
var date = getSeverTime();
var dayOfWeek = date.getDay();
var dayOfWeekStr = [ "(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)" ][dayOfWeek] ;
return dayOfWeekStr;
}
const getDateAfter_nDays_yyyymmdd = (days) => {
var date = getSeverTime();
date.setDate(date.getDate() + days);
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
return yyyy + mm + dd;
}
const getDateAfter_nDays_yyyy-mm-dd = (days) => {
var date = getSeverTime();
date.setDate(date.getDate() + days);
var yyyy = date.getFullYear();
var mm = toDoubleDigits(date.getMonth() + 1);
var dd = toDoubleDigits(date.getDate());
return yyyy + '-' + mm + '-' + dd;
}
const toDoubleDigits = (num) => {
num += "";
if (num.length === 1) {
num = "0" + num;
}
return num;
};
const getZeroPadding = (num,length) => {
return ('0000000000' + num).slice(-length);
}
