JavaScriptでよく使う関数集

概要

• よくつかう関数の自分用メモです。随時追記します。
• jQueryに依存している個所があります。
• 基本、オレオレスクリプトが多数ですので生温かくご覧ください。

関数の一覧（随時更新）

• デバッグ用コンソール表示
• URL引数を取得
• 時刻表示
• ゼロサプライ２桁固定
• ディープコピー
• ランダム配列を作成
• ボタン処理
• リサイズ時処理

コード

//デバッグ用コンソール表示
var debug = true;
function _c_(str){
  if(debug && console){
    console.log(str);
  }
}

//URL引数を取得
//メモ：クロスサイトスクリプティング対策なし
var arg;
function getParams(){
  arg = new Object;
  pair = location.search.substring(1).split('&');
  for(var i=0;pair[i];i++) {
    var kv = pair[i].split('=');
    arg[kv[0]]=kv[1];
  }
}

//時刻表示　※zeroSupが必要です。
//73.234 → 01:13
function timeView(_num){
    var num = Math.floor(_num);
    var out = '';
    var min = Math.floor(num/60);
    var sec = Math.floor(num%60);
    return zeroSup(min)+':'+zeroSup(sec);
}

//ゼロサプライ（ゼロパディング）２桁固定
// 3 → 03　12 → 12
function zeroSup(_num){
    var out = '';
    if(_num < 10){
        out = '0' + String(_num);
    }else{
        out = String(_num);
    }
    return out;
}

//ディープコピー
//メモ：Date型は非対応。その他も問題あるらしいが想定外のデータが入らなければこれで十分
function clone(obj){
  return JSON.parse(JSON.stringify(obj));
}

//ランダム配列を作成
//0～(total-1)までの配列からnum個の数値をピックアップした配列を作成する
function randArr(num,total){
    var cnt,randnum;
    var base = [];
    var out = [];
    //base配列作成
    for(cnt=0;cnt<total;cnt++){
        base.push(cnt);
    }
    while(out.length!=num){
        //ランダムに１つピックアップしoutに追加、baseから削除
        randnum = Math.floor(Math.random()*base.length);
        out.push(base[randnum]);
        base.splice(randnum,1);
    }
    return out;
}

//ボタン処理
//DOM読み込み完了時に初期化する
function btn_click(){
  var btnid = $(this).attr('id');
  //ボタンのidで処理を分ける
  switch(btnid){
    case 'btn-A':
      //btn-Aの処理
    break;
    case 'btn-B':
      //btn-Bの処理
    break;
  }
}

//DOM読み込み完了時処理
$(document).ready(function(){
  //ボタンの設定初期化（.containerの中にある.btnすべてに適用する）
  //clickイベントでスマホのタッチイベントも動作する。
  //以前はclickイベントは遅延があるといわれていたが、最近ない気がする（未検証）
  $('.container').on('click','.btn', btn_click);

});

//リサイズ時処理
function resized(){
    // do something
}

//リサイズ時処理のセット
//モバイル端末で端末の回転時も処理をする場合は、orientationchange を追加する
$(window).on('resize', resized);

参考

JavaScriptでURLパラメーターを取得し配列に格納しておく
https://qiita.com/tonkatu_tanaka/items/99d167ded9330dbc4019
[JavaScript]色々なディープコピー
https://qiita.com/knhr__/items/d7de463bf9013d5d3dc0
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f

追加

• 2018.10.11　ランダム配列生成
• 2018.10.24　時刻表示、ゼロサプライ、リサイズ時処理

今後追加予定

• ゼロサプライ
• 数値の三桁カンマ
• csv読み込み（Papaparse）
• 時間差計算
• 文字数カウンタ
• リサイズ時処理