変数letを同じスコープ内に同じ名前を使用したため、エラーが出てしまいました。

Question

前提・実現したいこと

参考にしたカレンダー
上記のリンクにあった予約システムライクなカレンダーに予約が入ったらカレンダーに◯からーに表示させたいと実装中に私が追記したコードを実行するとカレンダーが消えてしまいました。
原因としては戻り値のtable dに問題があるのではないかと仮説を立て、console.logでエラー原因を探してみたものも見つけることができませんでした。
そこで、上記のリンクの先の質問に回答していた@hai_haiさんという方にお聞きしたらところ、「let を使うときは同じスコープ内では、同じ名前の変数は使うことができません。」とご教授していただいたのですが、私の現在の理解力ではどのようにコーディングをすればいいか分からないです。

発生している問題・エラーメッセージ

エラー原因と考えられるコード
setHolidayをコードを参考にランチタイム休憩と予約が入った時の実装をしたのですが、実行してみたところ表示されていたカレンダーが消えてしまいました。
それで色々試してみたところ、let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c;が複数あると消えてしまうようです。

//_____________
let opt = { handleEvent: optCallBackFunction };
let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c;
let num = [1,3,5];
for(let i=0;i<num.length;i++){
  c.setHoliday (num[i]);
}
 
 //ランチタイム休憩
 let opt_second = { handleEvent: optCallBackFunction };
 let c_second = new Shedule (new Date,7,BUSY, opt), {table: d} = c_second;
 let week_lunchtime = [1,2,3,4,5,6,7];
 
  for(let i=0;i<week_lunchtime.length;i++){
    c_second.setLunchTime (week_lunchtime[i]);
  }
  
 //予約入った時 例) 2月25日 12時 3時間コースと予約が入った時、2/25 12~15時の間を予約不可にしたい。
let opt = { handleEvent: optCallBackFunction };
let c_third = new Shedule (new Date,7,BUSY, opt), {table: d} = c_third;

let num = [{
day: 1,
start: 9,
end: 10
},{
day: 2,
start: 9,
end: 11
}];
for(var i=0;i<num.length;i++){
  c_third.setBook (num[i].day, num[i].start, num[i].end);
}

該当のソースコード

全コード

{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'],
    doc = document,
    DEF_OPTION = { };

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    G = ary => ary.reduce ((a, b) => {
        let
          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
          d = D (c);
        if (! (d in a)) a[d] = [];
        a[d][F(c)] = true;
        return a;
      }, { })
    ,
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':');


  //_____________

  class Shedule {
    constructor (date = new Date, range = 7, plan = [], option = DEF_OPTION) {
      this.current = H (date);
      this.date    = H (date);
      this.range   = range;
      this.plan    = G (plan);
      this.table   = document.createElement ('table');
      this.option  = Object.assign ({}, option);

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d) {
        this.current = d;
        this.remake ();
      }
    }


    setHoliday (dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),
        current = new Date (start),

        b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      current.setDate (7 - current.getDate () + dayNo);

      for (; current < end; current.setDate (current.getDate () + 7)) {
        let idx = F (current);

        for (let c = b; c < e; c = new Date (+s + (+c))) {
          let key = I (c);
          if (! this.plan[key])
            this.plan[key] = [ ];
          this.plan[key][idx] = true;
        }
      }

      this.remake ();
    }
    
    
    
		setLunchTime (dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),
        current = new Date (start),

        b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      current.setDate (7 - current.getDate () + dayNo);

      for (; current < end; current.setDate (current.getDate () + 7)) {
        let idx = F (current);

        for (let c = b; c < e; c = new Date (+s + (+c))) {
          let key = I (c);
          if (! this.plan[key])
            this.plan[key] = [ ];
          this.plan[key][idx] = true;
        }
      }

      this.remake ();
    }
    
    
    //Booking
    /* setBook (dayNo, startHour, endHour) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),
        current = new Date (start),
    
        b = new Date (Date.UTC (1970,0,1, startHour, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1, endHour, 0)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間
    
      current.setDate (7 - current.getDate () + dayNo);
    
      for (; current < end; current.setDate (current.getDate () + 7)) {
        let idx = F (current);
    
        for (let c = b; c < e; c = new Date (+s + (+c))) {
          let key = I (c);
          if (! this.plan[key])
            this.plan[key] = [ ];
          this.plan[key][idx] = true;
        }
      }
    
      this.remake ();
    } */

    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });            
    }


    handleEvent (event) {
      let t = event.target;
      if (t === this.prev_btn) this.add (-this.range);
      if (t === this.next_btn) this.add (this.range);

      let cbfunc = this.option.handleEvent;
      if ('function' === typeof cbfunc)
        cbfunc.call (this, event);
    }

  }

  this.Shedule = Shedule;
}

//_____________

const BUSY = ['2019-02-12T10:00'];

function optCallBackFunction (event) {
  const
    getParent = (n, e) => {
      do {if (n === e.tagName) break;} while (e = e.parentNode);
      return e;
    };

  let
    td  = event.target;
    inp = document.querySelector("#acdn-target"),
    tr  = this.table.querySelector('thead tr:nth-of-type(2)'),
    d   = new Date (this.current);

  if ('click' === event.type) {
    if (tr.compareDocumentPosition (td) & 16) {
      td = getParent ('TD', td);
      d.setDate (d.getDate () + td.cellIndex);
      inp.value = [].join (''); //いらならい
    }
  }
}


//_____________
let opt = { handleEvent: optCallBackFunction };
let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c;
let num = [1,3,5];
for(let i=0;i<num.length;i++){
  c.setHoliday (num[i]);
}
 
 //ランチタイム休憩
 let opt_second = { handleEvent: optCallBackFunction };
 let c_second = new Shedule (new Date,7,BUSY, opt), {table: d} = c_second;
 let week_lunchtime = [1,2,3,4,5,6,7];
 
  for(let i=0;i<week_lunchtime.length;i++){
    c_second.setLunchTime (week_lunchtime[i]);
  }
  
 //予約入った時 例) 2月25日 12時 3時間コースと予約が入った時、2/25 12~15時の間を予約不可にしたい。
let opt = { handleEvent: optCallBackFunction };
let c_third = new Shedule (new Date,7,BUSY, opt), {table: d} = c_third;

let num = [{
day: 1,
start: 9,
end: 10
},{
day: 2,
start: 9,
end: 11
}];
for(var i=0;i<num.length;i++){
  c_third.setBook (num[i].day, num[i].start, num[i].end);
}

Answer 1

違う用途であれば別の変数名をつける。
「上書き・用途によって値が代入される」なのであればletを外す　だけかと思います。
そこは実際のコードのロジック・変数・関数のそれぞれにきちんと意味を考えることで解決できると思いますし、
ご自身で作られているプログラムの「仕様」にもなるので、決めてください。

コーディングのルールにもつながる部分なので、下記の記事など参考になるかと、。

• やめた方が良いコーディング・設計、アンチパターン

変数についても言及があります。

Answer 2

オブジェクト指向的なプログラムなので見慣れないのは致し方がないね。
前半の定義はどうであれ、最後のあたりのコードを見てください。

どちらにしろ、もともとが思い付きで書いたものなので、年をまたぐと
おかしくなります。

new Shedule を複数行うということは、異なる複数の予定表を画面に
表示することを意味します。

そんなにネストしてないとおもうけどな～。
関数名が雑なのはごめん。

休日とランチタイムは、一度に指定できるように変更。
予約もできるようにしたけれど、悪ふざけのようなものだから
期待しないでね

Shedule のメソッドの最後に this を返すように変更しました。なので、
shedule.add(7).setBook(date, 90).remake ();
みたいに繋げてかけます。

--
時間の計算などを行うとき、date オブジェクトを使わずに数値で計算する人が
多いけれど、私はそれに反対派。
イベントもルートで監視する派。
なるべくならオブジェクト指向で書きたい派。（うまくできてないけれど）

がんばってね～。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<style>
#calendar td { text-align: center; font-size: 80%; }
#calendar .sun { background: rgba(255,0,0,.1); color: rgba(255,0,0,1); }
#calendar .sat { background: rgba(0,0,255,.1); color: rgba(0,0,255,1); }
#calendar .button { color: blue; text-decoration: underline; }
#calendar .button:hover { color: red; }
#calendar table, #calendar td { border: 1px gray solid; padding: 4px;}
#calendar table { border-collapse: collapse; border-spacing: 0; }
#calendar tbody tr:nth-of-type(odd) { background: rgba(0,0,0,.05); }
</style>

<body>
<div id="calendar"></div>
<input type="text" class= "text" id="acdn-target" onselect="click_date" readonly>

<script>

{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'],
    doc = document,
    DEF_OPTION = { };

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':');

  //_____________


  class Shedule {

    constructor (date = new Date, range = 7, plan = [ ], option = DEF_OPTION) {
      this.current = H (date);//表の左端の日付、これを基準とする
      this.date    = H (date);
      this.range   = range;  //何日分を表示するか
      this.plan    = plan; //予定表が構成される
      this.table   = document.createElement ('table');
      this.option  = Object.assign ({ }, option);

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d)
        this.current = d;
      return this;
    }


    setHoliday (...dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),

        b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      dayNo.forEach (n => {
        let current = new Date (start);
        
        current.setDate (7 - current.getDate () + n);

        for (; current < end; current.setDate (current.getDate () + 7)) {
          let idx = F (current);

          for (let c = b; c < e; c = new Date (+s + (+c))) {
            let key = I (c);
            if (! this.plan[key])
              this.plan[key] = [ ];
            this.plan[key][idx] = true;
          }
        }
      });

      return this;
    }
    
    
    
		setLunchTime (...dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),

        b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      dayNo.forEach (n => {
        let current = new Date (start);
        current.setDate (7 - current.getDate () + n);

        for (; current < end; current.setDate (current.getDate () + 7)) {
          let idx = F (current);

          for (let c = b; c < e; c = new Date (+s + (+c))) {
            let key = I (c);
            if (! this.plan[key])
              this.plan[key] = [ ];
            this.plan[key][idx] = true;
          }
        }
      });

      return this;
    }
    
    
    //Booking
    setBook (date, occupancyTime) {// 予約日時,占有時間(分)
      let
        current = new Date (date),
        dayNo = F (current),
        sTime = 30,//30間隔
        step = new Date (Date.UTC (1970,0,1, 0, sTime)),
        cnt = Math.floor (occupancyTime / sTime);
    
      for (let i = 0; i < cnt; i++) {
        let time = D (current);
        if (! this.plan[time])
          this.plan[time] = [ ];
        this.plan[time][dayNo] = true;
        current.setTime (+current +(+step));
      }
      return this;
    }

    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });
     
     return this; 
    }


    handleEvent (event) {
      let t = event.target;
      if (t === this.prev_btn) this.add (-this.range).remake ();
      if (t === this.next_btn) this.add ( this.range).remake ();

      let cbfunc = this.option.handleEvent;
      if ('function' === typeof cbfunc)
        cbfunc.call (this, event);
    }
    
    
    static convert (ary) {
      let rst = { };
      ary.forEach (a => {
        let
          dt = new Date (a + ':00.000+09:00'),
          tm = D (dt),
          dn = F (dt);
        if (! rst[tm])
          rst[tm] = [];
        rst[tm][dn] = true;
      });
      return rst;
    }

  }

  this.Shedule = Shedule;
}

//_____________
function strDateJp (date) {
  let [y, m, d] = ['getFullYear', 'getMonth', 'getDate'].map (fc => date[fc]());
  return `${y}年${m+1}月${d}日`;
}


//___________________________

const
  BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
  plan = Shedule.convert (BUSY),
  shedule = new Shedule (new Date, 7, plan),
  table = shedule.table;

table.border = 1;
//月水金を休日　　　　　　昼休みがあるのが日火木土
shedule.setHoliday (1, 3, 5).setLunchTime (0, 2, 4, 6)//..remake ();

 //予約入った時 例) 2月24日 9時30 2時間コースと予約が入った時
shedule.setBook (new Date (2019, 1, 19, 9, 30), 30).remake ();
shedule.setBook (new Date (2019, 1, 24, 9, 30), 120).remake ();

//shedule.remake (); //単独で表を更新
document
  .querySelector ('#calendar')
  .appendChild (table)
  .addEventListener ('click', shedule, false);

document.getElementById ('acdn-target').value = strDateJp (shedule.current);

</script>

Comments

[nanase21]

ご回答していただきありがとうございます。
まだ、ご教示していただいたコードを理解するのは難しいですがconsole.logでデバッグをかけてどういう流れで処理がなされているか勉強させていただきたいと思います。
本当にありがとうございました。

[nanase21]

先日は、本質問にお答えいただきありがとう御座いました。
ご教示いただいたコードを少しだけ弄り、DBのデータをカレンダーに反映させる実装を今しています。
またrailsで開発しているため、jsから直接DBのデーターを取ることが出来ないので一旦htmlのvalueをjsで取得し、カレンダーにDBのデーターを反映させています。その際に、getElementByIdでvalueを取ってきているためDBのデーターを一つしか取れずにいます。
色々、調べてみるとgetElementByIdではvalueのデーターを配列で取得することは出来ないと分かったのですがgetElementByIdで以外valueのデーターを取得する方法が分からずに困っています。
もし差支えがなければ、どのようにしたらDBのデーター全てをカレンダーに反映させれるかについてご教示いただけないでしょうか？
下記のurlにて新規に質問を立てさせて頂いたので、ご教示いただけると幸いです。
https://teratail.com/questions/177310