React js 日付から１日引いた日付にしたい

Question

index.js
    return (
          <Day
            disabledDays={Calendar.getDisabledDays()}
          />

　calender.js

class Calendar {
  private readonly from: string;
  private readonly to: string;
  constructor(from: string, to: string) {
    this.from = from;
    this.to = to;
  }

  #カレンダーの日付を連想配列で取得する
  public static getDisabledDays(): DisabledDays {
    const now = moment.utc();
    const expiration = moment.utc().add(TERM_MONTH, 'months');
    return {
      after: new Date(now.year(), now.month(), now.date()),
      before: new Date(expiration.year(), expiration.month(), expiration.date()),
    };
  }

{Calender.getDisabledays()}から１日引いた日を出したいのですがどうしたらいいでしょうか？
{Calender.getDisabledays().getDate() - 1}などやりましたがdefault.getDisabledDays(...).getDate is not a functionなどのエラーが出てうまくいきません

<追記質問>
index.jsのdisabledDaysな中身を確認したくconsole.log(disableadDays)と<Day></>の外でやったのですがエラーになりました。
なぜなんでしょうか？
console.logは場所によってはできないんでしょうか？

Comments

[thyda.eiqau]

Calendarって何ですか？なんらかのライブラリからimportしているのだと思いますが、どのライブラリを使っているのかご提示ください。

[2KOH]

Calendar とか DisabledDays とか moment って何ですか？
（moment は moment.js だと思うけれども）
使っているライブラリのうち、コードに登場するライブラリをすべて提示してください。

[cuku]

moment.jsです

[cuku]

追記しました

[thyda.eiqau]

- 自分で定義したclass Calendarの中にpublic static getDisabledDays(): DisabledDaysがいるんですか？
- DisabledDaysの定義部分も記載してください
- staticメソッドなのにstaticではないプロパティを参照するのは無理だと思うのですが、どういう設計になっているのですか？
- public static getDisabledDays()のコメントにあるとおり、それが本当に連想配列 (Object) を返すのだとしたら、Objectに対してgetDateするのは無理だと思うのですが、どういう設計になっているのですか？

[cuku]

すいません。修正しました

[thyda.eiqau]

失礼、もう1点

Calendar.getDisableDays() で呼び出していますが、（ディスエイブル・デイズ）
ご提示の宣言部分では getDisabledDays() となっています（ディスエイブルド・デイズ）
この差がコードに影響していないか確認してください。

[cuku]

自分のtypoミスでした

[cuku]

直しました

Answer 1

概ね方向性はthyda.eiqauさんと同じなのですが、
せっかくmoment.jsを使ってるのでsubtractを使った方が楽ですね。

同様にDateへの変換もtoDate()を使った方が良いかと思います。

---

momentを使わずに日付を変更するのであれば、

1. 現在の日をDate#getDateで取得
2. 取得した日から増減させたものをDate#setDateで設定

とすれば可能です。

Comments

[cuku]

substractはindex.js内でやればいいということでしょうか？

[dice142]

１日引いた値を何処で使うのかによります。
そもそもafterとbeforeがありますが、どちらのことを言っているのでしょう？

[cuku]

beforeです
index.jsで使いたいです

[cuku]

index.js側で日付を計算してあげたいです

[dice142]

であればindex.js側でreturnの前にgetDisabledDaysを取得しておき、
beforeの日付を調整しておけばよいかと思います。

Dateインスタンスになってるのでmomentより手間がかかるかと思いますが、それでできるかとおもいます。

[cuku]

returnの前に
const disabledDays = Calendar.getDisabledDays().before.getDate() - 1
こんなふうに書いたらいいということでしょうか？

[dice142]

いえ、beforeのDateインスタンスを書き換える必要があるので、
その書き方では書き換えになりません。

beforeの中身を変えるにはどう書けば良いのかは調べながらやってみてください。

[cuku]

わかりました。ありがとうございます
Dateインスタンス　書き換え　みたいな検索をすればいいのでしょうか？

[dice142]

えっと、やってみてわかることはまずやってみましょう。
失敗したらやり直したり方法を変えればいいので、都度聞いていては進みませんよ。

[cuku]

どこが失敗しているのかがあんまり理解できてい理解できていなくて。
disabledDays={Calendar.getDisabledDays()}の中身が見たくてconsole.log(disabledDays)とやっているのですがなぜかエラーになるんです。console.logは位置によってはできなかったりするのでしょうか？

[dice142]

エラーが出たり理想の出力になっていなければ失敗ですよね。
更にエラーを読んだり、なぜ理想の出力にならないのか原因を辿れると成長に繋がります。

> console.logは位置によってはできなかったりするのでしょう
文法上ダメな位置ではもちろんできません。

[cuku]

読んでもよくわからなかったです。
console.log(disabledDays)をやったらシンタックスエラーになりJSX value should be either an expression or a quoted JSX text となったのですがjsxでconsole.logは使えないということでしょうか？

[dice142]

エラー文を検索してみると同じ問題で詰まった人がいるかもしれません。
が、このままではもとの質問から脱線しすぎて収拾がつかなくなりそうです。
１質問であっちこっちいくのはあまり良くないので、一度このへんでstopしておきます。

元の「日付を１日引きたい」という質問にはお答えしてますので参考にしてください。

[cuku]

わかりました。すいません。

[cuku]

まずDateインスタンスの書き換え方を調べてみます

[cuku]

調べてreturn の上でdisabledDays=　Calendar.getDisabledDays().setDays() -1 としましたができませんでした。

[dice142]

momentの使い方しか書いてなかったので追記しました。

Answer 2

こんにちは、cukuさん。

1. 1日引いた日の出し方
2. console.logのエラー

について順に説明します。

0. ベースの定義

まずはベースのコードを定義してから回答します。

index.js（正しくは index.tsx でしょうか？）

クラスで書くなら

export default class Index extends React.Component {
  render() {
    return (
      <Day
        disabledDays={Calendar.getDisabledDays()}
      />  
    );
  }
}

関数で書くなら

const Index = () => {
  return (
    <Day
      disabledDays={Calendar.getDisabledDays()}
    />  
  );
};

export default Index;

となると思います。

1. 1日引いた日の出し方

エラーについて

{Calender.getDisabledays().getDate() - 1}などやりましたがdefault.getDisabledDays(...).getDate is not a functionなどのエラーが出てうまくいきません

thyda.eiqau さんが仰っているように、この Calender.getDisableDays() という関数実行は、

DisabledDays {
  after: Date
  before: Date
}

という DisabledDays 型のobjectとして、値が返っているので、 Calender.getDisableDays() の返した値から直接 getDate() を呼び出すことはできません。

const disabledDays: DisabledDays = Calender.getDisableDays();

disabledDays.after => OK
disabledDays.before => OK
disabledDays.toDate() => NG

本題

{Calender.getDisabledays()}から１日引いた日を出したいのですがどうしたらいいでしょうか？

上記のように、 before と after の２つの Date 型が取れている状況なので、 before か after のどちらかを指定して1日引く必要があります。

なので、

const disabledDays: DisabledDays = Calender.getDisableDays();

const disabledDaysFromAfter: Date = moment(disabledDays.after).subtract(1, 'days').toDate();
const disabledDaysFromBefore: Date = moment(disabledDays.before).subtract(1, 'days').toDate();

とすれば、 before または after の1日前の Date の値が取れると思います。

2. console.logのエラー

こちらに関しては、クラス記法でも関数記法でも同じなのですが、以下のように書くとエラーになります。

クラス

export default class Index extends React.Component {
  render() {
    return (
      console.log('this is console.log wrong position.');
      <Day
        disabledDays={Calendar.getDisabledDays()}
      />  
    );
  }
}

関数

const Index = () => {
  return (
    console.log('this is console.log wrong position.');
    <Day
      disabledDays={Calendar.getDisabledDays()}
    />  
  );
};

export default Index;

ここで return で解釈できるコードは JSX と言われる記法のことで、基本的には HTML のようなタグを利用したものを入力することになります。そのため return 内に JSX を解釈する以外のコードがあったため、エラーが発生したのだと思います。

正しくは、

クラス

export default class Index extends React.Component {
  render() {
    console.log('this is console.log right position.');

    return (
      <Day
        disabledDays={Calendar.getDisabledDays()}
      />  
    );
  }
}

関数

const Index = () => {
  console.log('this is console.log right position.');

  return (
    <Day
      disabledDays={Calendar.getDisabledDays()}
    />  
  );
};

export default Index;

のように記載すれば、確認することができると思います。

以上、長くなりましたが、参考になれば幸いです。

---

2019/12/23 16:30追記

コメントで頂いていた内容を追記します。

index.jsはmoment.jsを使うことができないのですがどうしたらいいでしょうか？

(1)で、momentを読み込んでいます。TypeScriptであれば(1)、(1)でうまく読み込めなければ、(1)' で読み込めるのではと思います。

上記の処理はindex.jsに書くということでいいでしょうか？

(2)の部分で展開してもらえると良いと思います。

クラス

import * as moment from 'moment'; // ... (1)
const moment = require('moment'); // ... (1)'

export default class Index extends React.Component {
  render() {
    // ... (2)
    const disabledDays: DisabledDays = Calender.getDisableDays();
    const disabledDaysFromAfter: Date = moment(disabledDays.after).subtract(1, 'days').toDate();
    const disabledDaysFromBefore: Date = moment(disabledDays.before).subtract(1, 'days').toDate();

    return (
      <Day
        disabledDays={/* 必要な値を渡す */}
      />  
    );
  }
}

関数

import * as moment from 'moment'; // ... (1)
const moment = require('moment'); // ... (1)'

const Index = () => {
  // ... (2)
  const disabledDays: DisabledDays = Calender.getDisableDays();
  const disabledDaysFromAfter: Date = moment(disabledDays.after).subtract(1, 'days').toDate();
  const disabledDaysFromBefore: Date = moment(disabledDays.before).subtract(1, 'days').toDate();

  return (
    <Day
      disabledDays={/* 必要な値を渡す */}
    />  
  );
};

export default Index;

Comments

[cuku]

返信遅くなりました。すいません。
const disabledDays: = Calender.getDisableDays();

const disabledDaysFromAfter: Date = moment(disabledDays.after).subtract(1, 'days').toDate();
const disabledDaysFromBefore: Date = moment(disabledDays.before).subtract(1, 'days').toDate();

上記の処理はindex.jsに書くということでいいでしょうか？
index.jsはmoment.jsを使うことができないのですがどうしたらいいでしょうか？

[gentamura]

コメントを受けて、回答欄を更新しましたので、ご参照ください。

Answer 3

TypeScriptを書いたことがないので、変な指摘もあるかもしれませんが、気になったところを列挙します。

1. Calendar.getDisabledDays() は DisabledDays を返すことになっていますが、オブジェクトを返しています。これってTypeScriptの仕様としては許されるのですか？（詳しい方に補足していただけると助かります)
2. Calender.getDisabledays() が Object {after: Date, before: Date} を返すとして、であれば Calender.getDisabledays().after.getDate() になるはずではないでしょうか。 Calender.getDisabledays() が実際に何を返してきているのか、console.tableなどで確認したほうがよいです。
3. 「1日引いた日付にしたい」ということですが、たしかにgetDateを使って次のようにすることもできますが、moment.jsが入っているならmoment側で-1 Dayしたほうが楽だしコードも見やすいと思います。

  let today = new Date();
  let yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
  // yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)

Comments

[cuku]

1,許されると思います
2,console.tableはconsole.logってことですか？
3,このコードは他の場所でも使われているのでmoment.js内では変えたくないです

[thyda.eiqau]

「moment.js内では」ってどういう意味ですか？console.tableが何かは調べたらわかるしやってみてもわかります