javascriptでの"remainingDaysUntil()"の使い方について

学校の課題提出の通知をgoogleの拡張機能を使って表示させるというプログラムを作っているのですが、その中の追加要素で提出期限が残り一日未満なら”残り１日を切っている”と表示させたいと思っています。その中で調べたところ"remainingDaysUntil()"というものを使うとできると聞いたのですが他サイトで調べても外国語だらけのサイトしかなく使い方がわかりませんでした。もしこの関数を知っているまたはほかのやり方がお分かりの方は教えていただきたいです

”var gettitle=document.getElementsByClassName("fi-title");//タイトル設定のクラス取得
FiTitle = gettitle[0].innerHTML;//課題のタイトル取得

var getdate=document.getElementsByClassName("small-detail-info");//期限設定のクラス取得
var object=getdate[3].outerHTML;//提出期限設定のクラス取得

//開始日と終了日がそれぞれ二桁の時間だと仮定しそれぞれの文字列を取得する
//object1の中身の例：2018/10/05 13:00　
//object2の中身の例：2018/10/10 23:30
var object1=object.substr(399,16);//開始日
var object2=object.substr(488,16);//終了日

var date_start=object1.indexOf('<');//(この文字(<)がなければ―1が返ってくる)
var date_end=object2.indexOf('</');
var date_end2=object2.indexOf('<');

var deadline=object.indexOf('style="display: block;"');//提出期限がすぎている場合はこの文字列がある。
var task=object.indexOf('data-end="null"');//レポートタスク以外の場合期限設定がnullになっている

var getdate_end;

var flag=0;
ki
var getsubject=document.getElementsByClassName("course-name-text-header-mvc");//教科タイトル設定クラスの取得
var subject=getsubject[1].innerHTML;//教科タイトルの取得

var getdescription=document.getElementsByClassName("description-text");//説明設定クラスの取得
var description=getdescription[0].innerHTML //課題説明の取得”

この続きからif文など追加していきたいと思っています。

m.ts10806

2018/11/03 04:35

remainingDaysUntil()はどこから出てきたどのような機能なのでしょうか。ドキュメント原文は基本的に英語のものですし日本語訳が100％正しく訳されているとは限りません。Google翻訳を駆使してでも読み込んで理解していくのは大事だと思います。

m.ts10806

2018/11/03 04:36

コードはマークダウンのcode機能を利用してください

退会済みユーザー

2018/11/03 05:23

そのメソッドは一般に出回っているものではなく、質問者さんが利用されているシステム独自に実装しているものなのでは？であれば、そのコードを解読するしかないですね。

runner

2018/11/03 06:24

いろいろ調べてみたのですがやはりこの関数は関係のないもののようでした。追記で申し訳ないのですが他に課題提出が残り一日を過ぎれば”残り一日ですよ”とアラートで通知したいのですが方法はありますか？

m.ts10806

2018/11/03 06:35

質問は編集できるので適宜ご対応ください。ここのコメント欄は要件や追加で質問する場所ではありません。日付の四則演算であれば幾らでも調べがつきそうに思いますが、どう調べて何を試したのでしょうか

runner

2018/11/03 06:44

このサイトを使い始めたばかりでしたので仕組みを理解していませんでした。以後気をつけます。

jun68ykt

2018/11/03 12:38 編集

ひとつ前のご質問 https://teratail.com/questions/155503 の「質問への追記・修正、ベストアンサー選択の依頼」にて、私から　2018/11/01 11:32 に以下をコメントしました。「こんにちは。runnerさんの問題解決になる回答をするために、・・・・。このような関数 remainingDaysUntil()のコードを回答すれば、とりあえず当面の問題は解決して前に進みそうですか？」このコメントの意図は、「こういうことを回答すればよいですか？」という確認でした。再度の質問ですが、先のコメントに書いたような関数 remainingDaysUntil()の実装例を回答としてご希望でしょうか？

runner

2018/11/03 13:35

勘違いして理解してしまったようです。申し訳ありません！もしよろしければそのような回答でお願いします。

jun68ykt

2018/11/03 14:46

runner さん。ご返信ありがとうございます。remainingDaysUntil()の実装例を回答しました。回答にも書いたとおり、このような場合、moment というライブラリを使うと見通しのいいコードが書けるのでお勧めです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

質問への追記・修正の依頼のほうで、関数remainingDaysUntil(dateStr) の実装例をご希望されている旨、ご返答いただきましたので、以下にて回答します。

ひとつ提案ですが、日時の比較や差の算出をするとき、標準のDateではなく、Moment.js が便利です。これを使うと、remainingDaysUntil(dateStr) は以下のように数値計算を自分で書くことなく、実現できます。

javascript
1// dateStr: YYYY-MM-DD形式の文字列
2function remainingDaysUntil(dateStr) {
3    return moment(dateStr).diff(moment(), 'days', true);
4}

上記の remainingDaysUntil() は、引数として、"2019-01-01" のような文字列を受け取り、現在日時から、その指定日付までにあと何日あるかを算出して、小数含めた数値で返します。

以下は、上記の remainingDaysUntil(dateStr)を使ったサンプルです。丸ごとコピペして、何らかのHTMLファイルに保存してブラウザで表示してみてください。日付を選ぶ <input> で、明日の日付を選ぶと、あと1日を切っている旨のメッセージが表示されます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q155914</title>
6    <style>
7        #result { color: blue; }
8        #attention { color: red; }
9    </style>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
11    <script>
12         // dateStr: YYYY-MM-DD形式の文字列
13         function remainingDaysUntil(dateStr) {
14           return moment(dateStr).diff(moment(), 'days', true);
15         }
16
17         document.addEventListener('DOMContentLoaded', function(){
18
19          const datePicker = document.getElementById('date-picker');
20
21          datePicker.addEventListener('change', (e) => {
22            // 選択された日付まで、あと何日あるかを小数以下含めて算出
23            const numDays = remainingDaysUntil(e.target.value);
24
25            // 結果を表示
26            const result = document.getElementById('result');
27            result.innerText = numDays;
28
29            // 結果が 1.0 未満であれば、メッセージを表示
30            const attention = document.getElementById('attention');
31            attention.style.display = numDays < 1.0 ? 'inline' : 'none';
32          });
33        });
34    </script>
35</head>
36<body>
37    現在日時から
38    <input id="date-picker" type="date" /> まで、
39    <br/>
40    あと<span id="result">？</span>日<br />
41    <span id="attention" style="display: none;">(※1日を切っています。)</span>
42</body>
43</html>