VB.NET-TIPS などプログラミングについて

コロナ禍の中、会社に通勤せずに自宅でテレワークを行っている方も多いと思います。 1日中家での作業がだんだん苦痛になってきている時期かもしれません。

この様に言っている私自身もテレワークを行っています。 まあ、テレワークと言えば聞こえがいいのですが、実は自営業者で自宅でソフトの仕事を10年来営んでいます。 テレワークの先輩としては経歴が長いので、何かしらのテレワークを行う上でのヒントとなることがあればと思い、 以下にまとめてみました。

• 雑音の入らない仕事部屋を作る
• 1日のタイムスケジュールを作る（仕事と休憩の時間）
• なるべく残業はしない
• 仕事が乗らない場合はスケジュールに無い休憩を取る
• 気分を上げる場合は好きな音楽を聴きながら作業する
• 服装は普段着でもピシッとした感じで
• 家人に仕事部屋への出入りには「行ってきます」「ただいま」を言う

■雑音の入らない仕事部屋を作る

とにかく自宅での仕事は集中するのが難しいので、できることなら仕事専用の部屋を作ることです。 なるべく子供たちや、家事の音が聞こえない様な部屋が良いのですが、できなければ部屋の一角を仕事が出来る様にします。
私自身は、子供が独立しましたので子供部屋をそのまま仕事部屋として使っています。

後、部屋に窓があって少し太陽の日差しがまぶしい場合は、遮光カーテンを吊るすことを推奨します。

■1日のタイムスケジュールを作る（仕事と休憩の時間）

1日の時間割を作ってなるべくそれに合わせることです。 以下は、私のタイムスケジュールです。
時間割を決めてはいるのですが、この時間は目安で学校みたいにしっかり行動しているわけではありません。

• 08:30 ～ 09:00　朝来ていたメール等の処理
• 09:00 ～ 12:00　午前の仕事時間
• 12:00 ～ 13:00　昼食時間（ほとんど自宅）
• 13:00 ～ 15:00　午後の仕事時間その１
• 15:00 ～ 15:30　おやつ時間（昼寝）
• 15:30 ～ 19:00　午後の仕事時間その２
• 19:00 ～ 20:00　夕食時間（ほとんど自宅）
• 20:00 ～ 22:00　残業時間（急ぎがあれば）

テレワークを行っていると時間がルーズになりがちですが、食事の時間は必ず守っています。 食事の時間で気分を変えて次の仕事に向かえる様になると思います。 （食事は私の妻が作ってくれますので非常にありがたいです。）
とにかく食事は大事だと思います。私たちの体は食べた物で出来るのですから。
人間の体は聞いたところによれば、２，３か月で全ての細胞が入れ替わっているとか、はっきりはしませんが。

あと、おやつも大事です。この時間に実は昼寝も行います。 最近では昼寝は学校などでも取り入れられている様ですが、15分ぐらいで頭がすっきりします。 これ以上寝ると本当の睡眠になってしまいますので、注意して下さい。

お昼寝用には「ネックピロー」と言われるものを使用しています。
Muji Well-Fited（マイクロビーズ）ネッククッション（ネイビーグレー）

これは小型の抱き枕の様な形状で、内部にマイクロビーズを使っているので昔のそば殻の枕の感じがして心地いいです。
机の上でうつ伏せ寝をする時にも、また首の周りの着けてそのまま椅子で寝てもいいです。

■なるべく残業はしない

自宅で仕事を行うと兎角ずるずるしがちで、夜まで引きずりたくなります。 なかなか難しいのですが、とにかく残業にならない様に考えて仕事を進めることです。
私の場合は、やむなく残業になりそうな場合は、なるべくその日は行わず、土曜日をそれに充てています。 やはり昼に行った方が能率が良いですし、土曜の方が周りがうるさくありませんので。

■仕事が乗らない場合はスケジュールに無い休憩を取る

仕事を行っていると考えに行き詰って進まないことがあります。皆さんもどうでしょうか。
そんな時は、机から立ち上がって別の部屋に行って休憩をしてはどうでしょうか。 普段の会社なら他の人の目もありますが、ここは自宅です、もっと自由に行動してみてはどうでしょうか。

■気分を上げる場合は好きな音楽を聴きながら作業する

ちょっと今日は気分が乗らないなあと言う場合には、昔好きだった音楽を聴いたりします。
私は80年代のトト、ドゥービー・ブラザーズ、マイケルジャクソン、ボビー・コールドウェルなど懐かしのロックを聴いています。 （ちょっと昔過ぎてついてこれない？）



とにかく気分を前向きにして仕事をしないと良いものができないと思います。

■服装は普段着でもピシッとした感じで

家にいるとどうしても普段着で仕事をしがちですが、気分を切り替える意味でも少しピシッとした服装の方が宜しいかと思います。
何も普段会社に行く服装にするというのではなく、 テレワークでの会議もあると思いますので、あまりに失礼にならない様にすべきと思います。

■家人に仕事部屋への出入りには「行ってきます」「ただいま」を言う

何を「行ってきます」？ですかと思われるかもしれませんが、私は毎日これを行っています。 また、リビングに戻った時には「ただいま」といいます。

くだらないことと思われるかもしれませんが、案外これが自分で気分を切り替えるスイッチになっていると思います。

最後に

最後まで読んでいただいて有難うございます。 このコロナの件ですが、数か月では解消できない様ですね。 専門家によれば１～２年ぐらいは掛かるかもしれないとのこと。 確かに「新しい生活様式」では無いですが、それに近い感じで考えていく必要はありそうです。

コロナの件が解消された時には社会はガラッと変化しているかもしれません。 テレワークに始まって、さらに会社の形態もどんどん変化していくと思いますので、 怖いようで楽しみな感じもします。

とにかく「手洗い・うがい」は継続していこうと思います。

JavaScript には文字列を取り扱う Stringオブジェクト が存在します。
この Stringオブジェクト は文字列リテラル（直値）を生成する場合は、単一引用符または二重引用符で囲みます。 Stringオブジェクト を直接利用することでも生成できます。 （普通使う場合には最初の方法が多いと思います。）

文字列を扱う場合にとくに多いのは文字列の連結ではないかと思います。 文字列の連結を行う演算子は「＋」を使い、これを文字列連結演算子と言うそうです。

数値の計算で使う加算用の演算子と同じものなので、変数の中身が文字列なのかそうで無いのかを注意が必要です。

• Stringオブジェクトの文字列連結について
• Stringオブジェクトの文字列比較について

■Stringオブジェクトの文字列連結について

数値データと文字列を「＋」で連結すると数値データは文字列に変換されて、連結文字列と連結されます。
以下の例では数値データの後ろから文字列を連結する場合と、前から文字列を連結する場合を示します。
結果を見れば当然、全く異なる文字列として表示されます。

さらに数値データに対して代入演算子で連結をしていますが、この場合も文字列との加算なので、 最初に数値データが文字列に変換されてから連結処理が行われます。

Stringオブジェクトの文字列連結の例

    // 数値データ
    var num1 = 100;
    // 数値データと文字列の連結
    var str1 = num1 + "123";
    // 文字列と数値データの連結
    var str2 = "123" + num1;
    console.log("str1 = " + str1);
    console.log("str2 = " + str2);

    // 数値データに文字列を代入加算（連結）
    num1 += str2;
    console.log("num1 = " + num1);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

str1 = 100123
str2 = 123100
num1 = 100123100

このことは、他の言語とは処理が異なるのでハマりやすい点です。 以下によく似たことを PHP で行ってみました。

PHPの文字列連結の例

<?php
// 数値データ
$num1 = 100;
// 数値データと文字列の連結
$str1 = $num1 + "123";
// 文字列と数値データの連結
$str2 = "123" + $num1;
echo("\$str1 = " . $str1 . "<br />\n");
echo("\$str2 = " . $str2 . "<br />\n");

// 数値データに文字列を代入加算（連結）
$num1 += $str2;
echo("\$num1 = " . $num1 . "<br />\n");

// 数値として変換できないものを加算
$str1 = 1000 + "a123a";
echo("\$str1 = " . $str1 . "<br />\n");
$str1 = (int)"a123a";
echo("\$str1 = " . $str1 . "<br />\n");
?>

結果をブラウザで見ると以下の様になります。 PHP では算術演算を行う時は文字列を数値に変換して処理します。数値に変換ができなかった場合は「0」が対象の値となります。

$str1 = 223
$str2 = 223
$num1 = 323
$str1 = 1000
$str1 = 0

更に VB.NET で行ってみました。

VB.NETの文字列連結の例

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    '// 数値データ
    Dim num1 = 100
    '// 数値データと文字列の連結
    Dim str1 = num1 + "123"
    '// 文字列と数値データの連結
    Dim str2 = "123" + num1
    Console.WriteLine("str1 = " & str1)
    Console.WriteLine("str2 = " & str2)

    '// 数値データに文字列を代入加算（連結）
    num1 += str2
    Console.WriteLine("num1 = " & num1)

    '// 数値として変換できないものを加算
    str1 = 1000 + "a123a"               'ここでエラー発生!!
    Console.WriteLine("$str1 = " & str1)

    str1 = CInt("a123a")
    Console.WriteLine("$str1 = " & str1)
End Sub

VisualStudio の「出力」ウインドウに以下の様な表示がされ、16行目でエラーで中断します。

str1 = 223
str2 = 223
num1 = 323
型 'System.InvalidCastException' の初回例外が Microsoft.VisualBasic.dll で発生しました

※いろんな言語によって仕様が異なるのでそれぞれに合わせなければなりませんが、 JavaScript は言語としてはシバリが緩いので注意が必要です。
また、最初の変数の型宣言とは異なるものを上書きしてもOKなため、 同じ変数を別のデータ型で使うことは控えた方がいいと思います。

■Stringオブジェクトの文字列比較について

文字列同士の比較はそれぞれの文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。
注意するのは文字列と数値を比較する場合で、特に以下の様に「等しい（==）」「等しくない（!=）」かの比較の場合です。 （「==」「!=」の書き方はC言語の場合と似た感じです。）

厳密では無い（ゆるい感じ）比較

    // 等価比較
    if (123 == '123') {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 等価比較
    if ('123' == 123) {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 不等価比較
    if (123 != '123') {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 等価比較
    if ('123' != 123) {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
この比較演算子は厳密な比較では無く、数値と文字列を比較する場合は文字列を数値に変換してから比較する様です。

等しい
等しい
等しくない
等しくない

比較式の前後のデータ型を厳密に比較する演算子を用いてみます。これはPHPと同じように「===」「!==」を使います。

厳密な比較

    // 等価比較
    if (123 === '123') {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 等価比較
    if ('123' === 123) {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 不等価比較
    if (123 !== '123') {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }
    // 等価比較
    if ('123' !== 123) {
        console.log("等しい");
    } else {
        console.log("等しくない");
    }

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです） 比較演算子の左右のデータのデータ型を含めて比較する為、全ての比較は一致しない結果になります。

等しくない
等しくない
等しい
等しい

Dateオブジェクト のメソッドの文字列化関数では使い勝手が悪いので、書式を使って文字列を返す関数を作成してみました。 この関数ですが VB.NET の Date型 の ToString("yyyy/MM/dd") の様な感じを再現しました。
また VB.NET と同様に日付の年数、月数、日数を加算する関数 addYears() , addMonths() , addDays() を作成しました。

• Dateオブジェクトから書式を使って文字列を返す関数
• Dateオブジェクトの年数を加算する関数 addYears()
• Dateオブジェクトの月数を加算する関数 addMonths()
• Dateオブジェクトの日数を加算する関数 addDays()

■Dateオブジェクトから書式を使って文字列を返す関数

/*
　Dateオブジェクトの書式指定による文字列変換

  関数名：cnvDateToString(dateObj, strFormat)
  引き数：dateObj   Dateオブジェクト
        ：strFormat 書式指定(年:YYYY,月:MM,日:DD,時:HH,分:MI,秒:SS)
                    ex:"YYYY/MM/DD HH:MI:SS"
  戻り値：変換された文字列
*/
function cnvDateToString(objDate, strFormat) {
    // 年月日時分秒を文字列化
    var strYear   = "" + objDate.getFullYear();                      // 年
    var strMonth  = ('0' + (objDate.getMonth() + 1)).substr(-2);     // 月
    var strDate   = ('0' + objDate.getDate()).substr(-2);            // 日
    var strHour   = ('0' + objDate.getHours()).substr(-2);           // 時
    var strMinute = ('0' + objDate.getMinutes()).substr(-2);         // 分
    var strSecond = ('0' + objDate.getSeconds()).substr(-2);         // 秒

    var strRet = "" + strFormat;
    // 各書式文字列の置換
    strRet = strRet.replace("YYYY", strYear);
    strRet = strRet.replace("MM", strMonth);
    strRet = strRet.replace("DD", strDate);
    strRet = strRet.replace("HH", strHour);
    strRet = strRet.replace("MI", strMinute);
    strRet = strRet.replace("SS", strSecond);
    // 変換文字列
    return strRet;
}

この関数の実行例を以下に示します。

    var objDate = new Date("2020/05/08 13:59:58");
    console.log("YYYY/MM/DD HH:MI:SS ==> " + cnvDateToString(objDate, "YYYY/MM/DD HH:MI:SS"));
    console.log("YYYY/MM/DD          ==> " + cnvDateToString(objDate, "YYYY/MM/DD"));
    console.log("HH:MI:SS            ==> " + cnvDateToString(objDate, "HH:MI:SS"));
    console.log("MM/DD               ==> " + cnvDateToString(objDate, "MM/DD"));

ブラウザの開発環境のコンソールを見ると以下の様になります。
この関数は各データの先頭「0」を強制的に付加していますので、 「0」無しの書式を追加するには別の書式文字列と、それに設定するデータ変数を作成する必要があります。

YYYY/MM/DD HH:MI:SS ==> 2020/05/08 13:59:58
YYYY/MM/DD          ==> 2020/05/08
HH:MI:SS            ==> 13:59:58
MM/DD               ==> 05/08

■Dateオブジェクトの年数を加算する関数 addYears()

/*
　Dateオブジェクトの年数加算

  関数名：addYears(dateSrc, nYears)
  引き数：dateSrc   Dateオブジェクト
        ：nYears    年数加算値
  戻り値：年数を加算されたDateオブジェクト
*/
function addYears(dateSrc, nYears) {
    // 新規Dateオブジェクトの生成
    var dateDes = new Date(dateSrc.getTime());
    // 元の年に加算
    var nYear = dateSrc.getFullYear() + nYears;
    // 年再設定
    dateDes.setFullYear(nYear);
    // 新規Dateオブジェクトを戻す
    return dateDes;
}

この関数の実行例を以下に示します。

    var dateOrg;
    var dateDes;
    // 翌年
    dateOrg = new Date("2020/05/01");
    dateDes = addYears(dateOrg, 1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
    // 前年(うるう年では無い)
    dateOrg = new Date("2020/02/29");
    dateDes = addYears(dateOrg, -1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

2020/05/01 ==> 2021/05/01
2020/02/29 ==> 2019/03/01

■Dateオブジェクトの月数を加算する関数 addMonths()

/*
　Dateオブジェクトの月数加算

  関数名：addMonths(dateSrc, nMonths)
  引き数：dateSrc   Dateオブジェクト
        ：nMonths   月数加算値
  戻り値：月数を加算されたDateオブジェクト
*/
function addMonths(dateSrc, nMonths) {
    // 新規Dateオブジェクトの生成
    var dateDes = new Date(dateSrc.getTime());
    // 元の月に加算
    var nMonth = dateSrc.getMonth() + nMonths;
    // 月再設定
    dateDes.setMonth(nMonth);
    // 新規Dateオブジェクトを戻す
    return dateDes;
}

この関数の実行例を以下に示します。

    var dateOrg;
    var dateDes;
    // 翌月
    dateOrg = new Date("2020/05/01");
    dateDes = addMonths(dateOrg, 1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
    // 前月(4/30)
    dateOrg = new Date("2020/05/01");
    dateDes = addMonths(dateOrg, -1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
    // 前月(前年)
    dateOrg = new Date("2020/01/01");
    dateDes = addMonths(dateOrg, -1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

2020/05/01 ==> 2020/06/01
2020/05/01 ==> 2020/04/01
2020/01/01 ==> 2019/12/01

■Dateオブジェクトの日数を加算する関数 addDays()

/*
　Dateオブジェクトの日付加算

  関数名：addDays(dateSrc, nDays)
  引き数：dateSrc   Dateオブジェクト
        ：nDays     日付加算値
  戻り値：日付を加算されたDateオブジェクト
*/
function addDays(dateSrc, nDays) {
    // 新規Dateオブジェクトの生成
    var dateDes = new Date(dateSrc.getTime());
    // 元の日付に加算
    var nDate = dateSrc.getDate() + nDays;
    // 日付再設定
    dateDes.setDate(nDate);
    // 新規Dateオブジェクトを戻す
    return dateDes;
}

この関数の実行例を以下に示します。

    var dateOrg;
    var dateDes;
    // 翌日
    dateOrg = new Date("2020/05/01");
    dateDes = addDays(dateOrg, 1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
    // 前日(4/30)
    dateOrg = new Date("2020/05/01");
    dateDes = addDays(dateOrg, -1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
    // 前日(前年12/31)
    dateOrg = new Date("2020/01/01");
    dateDes = addDays(dateOrg, -1);
    console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

2020/05/01 ==> 2020/05/02
2020/05/01 ==> 2020/04/30
2020/01/01 ==> 2019/12/31

JavaScript には日付用のデータ型がありませんが、その代わりとして Dateオブジェクト が存在します。
この Dateオブジェクト は日付の設定、取得、操作を行うためのメソッドを持っていますのでそれをプログラムから利用できます。 尚 Dateオブジェクト にはプロパティがありません。

Dateオブジェクト はUnixタイムスタンプが 1970年1月1日 00:00:00 からの秒の数値であるのと同様に、ミリ秒の数値で日付を格納しています。

• Dateオブジェクトのコンストラクタについて
• Dateオブジェクトのメソッドについて
• Dateオブジェクトの使用上の注意点

■Dateオブジェクトのコンストラクタについて

// 年,月,日,時,分,秒,ミリ秒 を個別に指定
objDate = new Date(yead, month [, day [, hour [, min [, sec [, milisec] ] ] ] ]);
// Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定
objDate = new Date(unixtime);
// 文字列で時刻を指定
objDate = new Date(string);
// 引数無しは現在時刻
objDate = new Date();

上記の4種類の Dateオブジェクト の生成方法があります。それぞれの例を順次以下に示します。

■年,月,日,時,分,秒,ミリ秒 を個別に指定

    objDate = new Date(2020, 4);
    console.log(objDate);
    objDate = new Date(2020, 4, 10);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59, 59);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59, 59, 150);
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、月の指定は 1月～12月が 0 ～ 11 で設定しますので注意が必要です。

Date Fri May 01 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)

■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定

    // 1日のミリ秒
    var dateMilisec = 24 * 60 * 60 * 1000;
    // 2020年1月1日までのミリ秒
    var allMilisec = 50 * 365 * dateMilisec + 12 * dateMilisec;
    // Dateオブジェクト
    var objDate = new Date(allMilisec);
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

Date Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時)

■文字列で時刻を指定

    var objDate;

    objDate = new Date("2020-05-08T13:59:59");
    console.log(objDate);
    objDate = new Date("2020/05/08 13:59:59");
    console.log(objDate);
    objDate = new Date("05/08/2020 23:59:59");
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 23:59:59 GMT+0900 (日本標準時)

■引数無しは現在時刻

    // 引数無し
    var objDate = new Date();
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、この実行は 2020年5月11日 に行いました。

Date Mon May 11 2020 16:41:40 GMT+0900 (日本標準時)

■Dateオブジェクトのメソッドについて

Dateオブジェクト のメソッドは下記の接頭語の付いたものが在りそれぞれに分類されます。

• 「get」メソッド:Dateオブジェクトの日時等の取得メソッド
• 「set」メソッド:Dateオブジェクトへ日時等の設定メソッド
• 「to」メソッド:Dateオブジェクトから文字列変換メソッド
• 「parse」「UTC」メソッド:Date文字列を解析

■「get」メソッド:Dateオブジェクトの日時等の取得メソッド

    // Dateオブジェクト
    var objDate = new Date(2020, 5, 10, 13, 59, 50, 150);
    var str = "";
    str += objDate.getFullYear();           // 年(1900 年以降の年)
    str += "/" + (objDate.getMonth() + 1);  // 月(0 〜 11 )
    str += "/" + objDate.getDate();         // 日(1 〜 31 )
    str += " " + objDate.getHours();        // 時(0 〜 23)
    str += ":" + objDate.getMinutes();      // 分(0 〜 59)
    str += ":" + objDate.getSeconds();      // 秒(0 〜 59)
    str += "." + objDate.getMilliseconds(); // ミリ秒(0 〜 999)
    console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

2020/5/10 13:59:50.150

尚、月日時分秒に先頭ゼロを付加する場合は以下の様にします。

    // 2020/05/08 09:05:06.050 の設定
    objDate = new Date(2020, 4, 8, 9, 5, 6, 50);
    str = "";
    str += objDate.getFullYear();                               // 年(1900 年以降の年)
    str += "/" ('0' + (objDate.getMonth() + 1)).substr(-2);     // 月(0 〜 11 )
    str += "/" ('0' + objDate.getDate()).substr(-2);            // 日(1 〜 31 )
    str += " " ('0' + objDate.getHours()).substr(-2);           // 時(0 〜 23)
    str += ":" ('0' + objDate.getMinutes()).substr(-2);         // 分(0 〜 59)
    str += ":" ('0' + objDate.getSeconds()).substr(-2);         // 秒(0 〜 59)
    str += "." ('00' + objDate.getMilliseconds()).substr(-3);   // ミリ秒(0 〜 999)
    console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

2020/05/08 09:05:06.050

■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド

    var objDate = new Date();       // オブジェクト生成(現在時)
    objDate.setFullYear(2020);      // 年
    objDate.setMonth(3);            // 月
    objDate.setDate(30);            // 日
    objDate.setHours(13);           // 時
    objDate.setMinutes(59);         // 分
    objDate.setSeconds(49);         // 秒
    objDate.setMilliseconds(123);   // ミリ秒
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

Date Thu Apr 30 2020 13:59:49 GMT+0900 (日本標準時)

この例では 4月30日 の設定ですが setDate で 31日を設定すると結果は 5月1日 になります。 該当する月の日付の範囲を超えた場合は翌月、前月への調整が行われます。

    var objDate = new Date();       // オブジェクト生成(現在時)
    objDate.setFullYear(2020);      // 年
    objDate.setMonth(3);            // 月
    objDate.setDate(31);            // 日(あり得ない 4月31日 設定)
    console.log(objDate);           // オブジェクト内の月は、5月に調整される

    objDate.setDate(0);             // 日(あり得ない 5月0日 設定)
    console.log(objDate);           // オブジェクト内の月は、4月に調整される

    objDate.setFullYear(2020);      // 年
    objDate.setDate(-1);            // 日(あり得ない 4月-1日 設定)
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

Date Fri May 01 2020 18:08:01 GMT+0900 (日本標準時)
Date Thu Apr 30 2020 18:08:01 GMT+0900 (日本標準時)
Date Mon Mar 30 2020 18:08:01 GMT+0900 (日本標準時)

setDate() の値が「0」の場合はオブジェクト内の月の1日から見て「-1」した日付になります。 （これを使うと月の最終日を求めることが出来ます。）
また、setDate() の値が「-1」の場合はオブジェクト内の月の1日から見て「-2」した日付になります。
尚、このことはsetHours() , setMinutes() , setSeconds() においても指定値の範囲を超えた場合は 日付のオブジェクト内を調整されます。

■「to」メソッド:Dateオブジェクトから文字列変換メソッド

    var objDate = new Date("2020/05/08 13:59:59");
    console.log( objDate.toString() );
    console.log( objDate.toDateString() );
    console.log( objDate.toTimeString() );

ブラウザの開発環境のコンソールを見ると以下の様になります。

Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Fri May 08 2020
13:59:59 GMT+0900 (日本標準時)

■Dateオブジェクトの使用上の注意点

Dateオブジェクト を使用する時に注意する点があります。それはオブジェクトのコピーを作る時です。 以下の例を見て下さい。

    // Dateオブジェクトの生成
    var date1 = new Date("2020/05/08");
    // Dateオブジェクトのコピー
    var date2 = date1;
    // コピー先での月を「2月」に設定
    date2.setMonth(1);
    console.log("date1 : " + date1);
    console.log("date2 : " + date2);

ブラウザの開発環境のコンソールを見ると以下の様になります。
1行目は「date1」の表示なので「5月(May)」と表示されそうなものですが「date2」と同じものが表示されます。

date1 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)

この原因はソースの4行目にあります。
「date1」を「date2」にコピーしている様に見えますが、実際 Dateオブジェクト はクラスのため参照がコピーされているからです。 このコピーで「date1」「date2」ともに Dateオブジェクト の実体(インスタンス)は同じところを指しています。
それで「date2」で「setMonth」を行って「date1」からデータを見ても同じものになります。

結果、クラスデータを別の変数にコピーしたい場合は（コピーの様なもの）、 既に存在しているオブジェクトの値で、別の変数に対して生成します。 上記のソースを変更します。

    // Dateオブジェクトの生成
    var date1 = new Date("2020/05/08");
    // 最初のオブジェクト値で、別のDateオブジェクトの生成
    var date2 = new Date(date1.getTime());
    // コピー先での月を「2月」に設定
    date2.setMonth(1);
    console.log("date1 : " + date1);
    console.log("date2 : " + date2);

結果は正しく異なる日付になっています。

date1 : Fri May 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)

※クラスのオブジェクトを扱う場合はコピーをする場合は注意が必要です。

今回は w2ui.grid のカラム名のグループ化を指示するプロパティである columnGroups ついて説明をします。
この columnGroups を宣言することでカラム名タイトルの上に1行追加してグループ化したタイトルが表示出来たり、タイトル2行を1行にして表示できます。
columnGroups プロパティのオブジェクトの構造は以下の通りです。

columnGroups = {
    span    : 1,     // カラム結合数
    caption : '',    // グループの caption
    master  : false  // true :カラムで宣言された caption を優先 
                     // false:columnGroups の caption を優先(デフォルト)
}

以下に紹介したページのHTMLに columnGroups プロパティを追加します。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-6 columnGroups</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui-1.5.rc1.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columnGroups: [
      { span: 1, caption: ''     , master: true },
      { span: 2, caption: 'Name'  },
      { span: 1, caption: 'Email' },
      { span: 1, caption: ''     , master: true }
    ],
    columns: [
      { field: 'recid', caption: 'ID'        , size: '40px' },
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '30%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ], 
    records: [
      { recid: 1, fname: 'John'   , lname: 'Doe'    , email: 'jdoe@gmail.com', sdate: '2020/03/01' },
      { recid: 2, fname: 'Stuart' , lname: 'Motzart', email: 'smot@gmail.com', sdate: '2020/03/12' },
      { recid: 3, fname: 'Jin'    , lname: 'Franson', email: 'jgra@gmail.com', sdate: '2020/03/13' },
      { recid: 4, fname: 'Susan'  , lname: 'Ottie'  , email: 'sott@gmail.com', sdate: '2020/03/24' },
      { recid: 5, fname: 'Kelly'  , lname: 'Silver' , email: 'ksil@gmail.com', sdate: '2020/03/25' },
      { recid: 6, fname: 'Francis', lname: 'Gatos'  , email: 'fgat@gmail.com', sdate: '2020/03/26' },
      { recid: 7, fname: 'Mark'   , lname: 'Welldo' , email: 'mwel@gmail.com', sdate: '2020/03/27' },
      { recid: 8, fname: 'Thomas' , lname: 'Bahh'   , email: 'tbah@gmail.com', sdate: '2020/03/28' }
    ]
  });
});
</script>
</body>
</html>

これを実行させると以下の様な表示になります。

master:true のカラムは columns の caption がヘッダに表示され span: 2 の部分は2カラムが結合されます。
尚、今回読込んでいる w2ui の JavaScript ソースですが最新バージョンの w2ui-1.5.rc1.js に変更しました。

この w2ui-1.5.rc1 バージョンでないとブラウザのコンソールに以下の警告メッセージが表示される様です。 （皆さんもご注意ください。）

NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "recid", caption: "ID", size: "40px", sizeCalculated: "40px", sizeType: "px", min: 20, text: "ID" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "fname", caption: "First Name", size: "30%", sizeType: "%", sizeCalculated: "114px", min: 20, text: "First Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "lname", caption: "Last Name", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Last Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "email", caption: "Email", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Email", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "sdate", caption: "Start Date", size: "100px", sizeCalculated: "100px", sizeType: "px", min: 20, text: "Start Date" }
w2grid.js:6751:32
NOTICE: grid columnGroup.caption property is deprecated, please use columnGroup.text. Group ->  
Object { span: 1, caption: "", master: true, text: "" }
w2grid.js:6624:28