sit in a circle and chat happily

JavaScript 13日目

投稿日:2021-12-20
更新日:2022-03-24
js

Dateオブジェクトの続き・・・

日付の差分

ブラウザに「来年まであと〇日」を出力させたい

今日からイベント当日(今回は来年)まで 「あと〇日」を表示するために
必要な値は何か??
◆必要な値:現在の日時(PG実行時の日時)
      イベント当日の日時(翌年1月1日)

◆ 処 理 :あと何日かの計算
       計算結果を表示

console.log('1回目の出力');
// ◆現在の日時
var today = new Date();
// var today = new Date('2018/12/20 12:00:00');
// ◆イベント当日(翌年1月1日)
var newYear = new Date(today.getFullYear() + 1, 0, 1);  // + 翌年,1月,1日
// 第1引数:年(PG実行時の年 + 1)で翌年
// 第2引数:経過月(0~11)で設定
// 第3引数:日
console.log(today.toLocaleDateString());
console.log(newYear.toLocaleDateString());

【必要な値を準備】
・現在の日時(PG実行時の日時)
・イベント当日の日時(翌年1月1日)

【処理:あと何日かの計算】
var diff = (newYear.getTime() - today.getTime());
 ◆変数diff・・・差分を管理する時によく使う変数名

※時間計算のポイント
  基準日からの経過ミリ秒であるタイムスタンプで計算する

var diff = (newYear.getTime() - today.getTime());
// イベント当日のタイムスタンプから
// 現在日時のタイムスタンプを引くことで
// 現在日時からイベンント当日までの「経過ミリ秒」を算出する

console.log('翌年元日' + newYear.getTime());
console.log('現在日時' + today.getTime());
// getTime() → Dateインスタンスが持つタイムスタンプを取得 
console.log('経過ミリ秒差分' + diff);
コンソール出力内容

【経過ミリ秒を日に変換する】

・ミリ秒から秒に変換するには「1000」で割る
  例)6000ミリ秒を1000で割ると6秒
・秒から分に変換するには「60」で割る
  例)180秒を60で割ると3分
・分から時に変換するには「60」で割る
  例)180分を60で割ると3時間
・時から日に変換するには「24」で割る
  例)48時間を24で割ると2日

console.log('1日分のミリ秒' + 1000 * 60 * 60 * 24);

diff = diff / (1000 * 60 * 60 * 24)
console.log('日付差分' + diff);

diff = Math.ceil(diff);
console.log('日付差分切り上げ' + diff);

document.getElementById('display1').innerHTML
   = '来年まであと' + diff + '日';

※「イベント当日」を変更すれば、他のイベントでも対応できる

【問題】
誕生日まであと何日か表示
今年の誕生日を過ぎている場合は翌年の誕生日まであと何日かを表示

var today = new Date();
var birthday = new Date(today.getFullYear() + 0, 1, 5);
var diff = (birthday.getTime() - today.getTime());

console.log('◆問2');
diff = diff / (1000 * 60 * 60 * 24)
diff = Math.ceil(diff);

if (diff < 0) {
  // 今年の誕生日を過ぎている場合は「翌年」に変更
  birthday.setFullYear(today.getFullYear() + 1);
  // birthの年を「setFullYear」を使ってPGを実行した年の翌年(+1)に設定する
  diff = (birthday.getTime() - today.getTime());
  console.log(birthday.toLocaleDateString() + '(来年)');
} else {
  console.log(birthday.toLocaleDateString() + '(今年)');
}
diff = diff / (1000 * 60 * 60 * 24)
diff = Math.ceil(diff);
console.log('誕生日まであと・・・' + diff + '日');
document.getElementById('display2').innerHTML
  = '誕生日まであと・・・' + diff + '日';
コンソール出力内容

【問題】
誕生日まであと何日か表示
今年の誕生日を過ぎている場合は翌年の誕生日まであと何日かを表示
誕生日当日の場合は「誕生日おめでとう」と表示する

console.log('◆問3');

if (diff === 0) {
  console.log('はぴば');
  document.getElementById('display3').innerHTML
    = 'はぴば';
} else if (diff < 0) {
  birthday.setFullYear(today.getFullYear() + 1);
  diff = (birthday.getTime() - today.getTime());
  diff = diff / (1000 * 60 * 60 * 24);
  diff = Math.ceil(diff);
  console.log('来年の誕生日まであと・・・' + diff + '日');
  document.getElementById('display3').innerHTML
    = '来年の誕生日まであと・・・' + diff + '日';
} else {
  console.log('誕生日まであと・・・' + diff + '日');
  document.getElementById('display3').innerHTML
    = '誕生日まであと・・・' + diff + '日';
}

Stringオブジェクト

【参考リンク】Stringオブジェクトのメソッド

文字列の値と処理をまとめたもの。
インスタンスごとに文字列情報をもつ。コンストラクタを使用したインスタンスの生成はあまり行わずオートボクシングによる自動生成を活用する。

console.log('1回目の出力');
var str1 = 'Hello';
console.log(str1);
// ↑ 文字列が変数内に直接入った基本型の状態
// ↓ オブジェクト内のプロパティやメソッドを利用するので
//   オートボクシングでオブジェクト化された参照型に変わる
//   内部で自動的に「new String()」が呼び出されている
console.log(str1.length);
// Stringインスタンス内のlengthプロパティ
// Stringインスタンスが管理する文字列の文字数を保管している
console.log(str1.charAt(1));
// 指定した位置の文字を返す
// 引数:位置を指定(0から指定)
// 戻り値:指定した位置の文字

console.log(str1.toLowerCase());
// 引数なしで呼び出しをして
// インスタンス内の文字列を小文字化して返す
console.log(str1.toUpperCase());
// 引数なしで呼び出しをして
// インスタンス内の文字列を大文字化して返す
// ↑ メソッドの呼び出し
コンソール出力内容
インスタンス.indexOf( search[,start])
console.log('2回目の出力');
var str2 = 'それちゃうちゃうちゃうで';
console.log(str2);
console.log(str2.length);
// ◆文字列の検索
console.log(str2.indexOf('ちゃう'));
// 前方から文字列を検索
// 第1引数(必須):検索する文字列
// 第2引数(任意):検索開始位置
// 戻り値:初めて検索文字が出現した位置をあらわす数値 → 2
// 存在しない場合は「-1」を返す
console.log(str2.indexOf('ちゃう', 4));

console.log(str2.lastIndexOf('ちゃう'));
console.log(str2.lastIndexOf('ちゃう', 9));
console.log(str2.lastIndexOf('ちゅう'));
// 後方から文字列を検索
// 第1引数(必須):検索する文字列
// 第2引数(任意):検索開始位置
// 戻り値:初めて検索文字が出現した位置をあらわす数値 
// 存在しない場合は「-1」を返す
str2
コンソール出力内容
これはちゃうちゃう
インスタンス.slice( start[,end])
インスタンス.substring( start[,end])
console.log('3回目の出力');
var str3 = 'テラハウス ICA';
console.log(str3);
console.log(str3.length);
// lengthプロパティ:文字数

// 以下3つのメソッドは
// すべて文字列の一部を抽出するメソッド
console.log(str3.slice(2, 4));
// 第1引数(必須):開始位置
// 第2引数(任意):終了位置(-1した文字まで)
//               省略時は最後まで抽出
// ※負の値は末尾からカウント
console.log(str3.substring(2, 4));
// 第1引数(必須):開始位置
// 第2引数(任意):終了位置(-1した文字まで)
//               省略時は最後まで抽出
// ※負の値は0として扱う

// ※上記2つのメソッドは基本的に同じ動きだが
//   負の値を指定した時に挙動が違う

console.log(str3.substr(2, 3));
// 【非推奨】★できれば使わない
// 第1引数(必須):開始位置
// 第2引数(任意):開始位置からの文字数
//               省略時は最後まで抽出
str3
インスタンス.split( separator[,end])
console.log('4回目の出力');
var str4 = '田中,佐藤,鈴木';
// カンマ区切りの文字列(CSV形式の文字列)
console.log(str4);
console.log(str4.length);
// ◆Stringオブジェクトのlengthプロパティを
//  参照しているので「8」を出力

var array = str4.split(',');
// 区切られた文字列を配列に変換するメソッド
// 第1引数(必須):区切り文字
// 第2引数(任意):最大分割数(配列の部屋数に制限を設ける)
//               省略時は部屋数に制限を設けない
// 戻り値である配列を、変数arrayに代入してこの後で利用
console.log(array); 
console.log(array.length);
// ◆配列オブジェクトのlengthプロパティを
//  参照しているので部屋数「3」を出力
コンソール出力内容
var str4 = ‘田中,佐藤,鈴木’;

【参考】

console.log('endが-1だと便利');
var count = 2; //抽出する文字数
var position = 0; //抽出する位置
while (position < str3.length) {
  console.log(str3.slice(position, position+=count));
}
カテゴリー