if文で繰り返し書いているコードを分かりやすくしたい

前提・実現したいこと

javascriptでtodolistを作っていて、html側のinputタグで入力したものを「登録ボタン」押してテーブルに追加する処理をしています。
inputのmoneyとdatetimeの部分がそれぞれ空欄だった場合にmoneyが空欄なら'0円'、datetimeが空欄なら''を表示させたいです。

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

if文で作ってみましたが、コードが無駄に長くなってしまいました。もっとコンパクトにわかりやすく書くコードを探しています。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css"></link>
    <title>Todolist</title>
  </head>
  <body>
    <header>
      <h1>Todolist</h1>
    </header>

    <div class="container">
      <div class="main">
        <!-- 登録内容入力 -->
        <div class="input-area">
          <input id="todo" type="text" placeholder="予定">
          <input id="money" type="text" placeholder="予算">
          <input id="datetime" type="datetime-local">
          <input id="place" type="text" placeholder="場所">
          <input id="obj" type="text" placeholder="持ち物">
          <input id="memo" type="text" placeholder="メモ">
        </div>

        <!-- 登録、削除、一括削除ボタン -->
        <div class="btn-area">
          <button id="addButton" class="btn-1">登録</button>
          <button class="btn-2">全削除</button>
          <button class="btn-3">選択削除</button>
        </div>

        <!-- 表 -->
        <div class="table-area">
          <table border="1">
            <thead>
                <th></th>
                <th>ID</th>
                <th>予定</th>
                <th>予算</th>
                <th>日時</th>
                <th>場所</th>
                <th>持ち物</th>
                <th>メモ</th>
                <th></th>
            </thead>
            <tbody id="tableBody">

            </tbody>
          </table>
        </div>
      </div class="main">
    </div class="container">

    <script src = "app.js"></script>

  </body>

</html>


'use strict';

let todolists = [];

const todo = document.getElementById('todo');
const money = document.getElementById('money');
const dt = document.getElementById('datetime');
const place = document.getElementById('place');
const obj = document.getElementById('obj');
const memo = document.getElementById('memo');
const addButton = document.getElementById('addButton');
const tableBody = document.getElementById('tableBody');

function formatDate(date){
  var y = date.getFullYear()
  var m = ("00" + (date.getMonth() + 1)).slice(-2)
  var d = ("00" + date.getDate()).slice(-2)
  var hh = ("00" + date.getHours()).slice(-2)
  var mm = ("00" + date.getMinutes()).slice(-2)
  var ss = ("00" + date.getSeconds()).slice(-2)
  var result = y + "/" + m + "/" + d + "  " + hh + ":" + mm + ":" + ss;
  return result
};


addButton.addEventListener('click', () =>{
  var datetime = document.getElementById('datetime');
  console.log(datetime.value, 'datetime .value');



  if(todo.value == ''){
    alert('予定を入力してください');
  }else if(money.value == '' && datetime.value == ''){
    const todoList = {
      todo: todo.value,
      money: '0円',
      datetime: '',
      place: place.value,
      obj: obj.value,
      memo: memo.value,
    };
    if (todoList) {
      todolists.push(todoList);
      todo.value = '';
      money.value = '';
      datetime.value = '';
      place.value = '';
      obj.value = '';
      memo.value = '';
      showTodos();
    };
  }else if(money.value == ''){
    const todoList = {
      todo: todo.value,
      money: '0円',
      datetime: formatDate(new Date(datetime.value)),
      place: place.value,
      obj: obj.value,
      memo: memo.value,
    };
    if (todoList) {
      todolists.push(todoList);
      todo.value = '';
      money.value = '';
      datetime.value = '';
      place.value = '';
      obj.value = '';
      memo.value = '';
      showTodos();
    };
  }else if(datetime.value == ''){
    const todoList = {
      todo: todo.value,
      money: money.value + '円',
      datetime: '',
      place: place.value,
      obj: obj.value,
      memo: memo.value,
    };
    if (todoList) {
      todolists.push(todoList);
      todo.value = '';
      money.value = '';
      datetime.value = '';
      place.value = '';
      obj.value = '';
      memo.value = '';
      showTodos();
    };
  }else{
    const todoList = {
      todo: todo.value,
      money: money.value + '円',
      datetime: formatDate(new Date(datetime.value)),
      place: place.value,
      obj: obj.value,
      memo: memo.value,
    };
    if (todoList) {
      todolists.push(todoList);
      todo.value = '';
      money.value = '';
      datetime.value = '';
      place.value = '';
      obj.value = '';
      memo.value = '';
      showTodos();
    };
  }
});

const showTodos = () => {
  tableBody.textContent = '';
  todolists.forEach((todolist, number) => {
    const tableRecord = document.createElement('tr');
    tableBody.appendChild(tableRecord);

    const tableCheck = document.createElement('td');
    const tableId = document.createElement('td');
    const tableTodo = document.createElement('td');
    const tableMoney = document.createElement('td');
    const tableDatetime = document.createElement('td');
    const tablePlace = document.createElement('td');
    const tableObj = document.createElement('td');
    const tableMemo = document.createElement('td');
    const tableAction = document.createElement('td');

    tableId.textContent = number + 1;
    tableTodo.textContent = todolist.todo;
    tableMoney.textContent = todolist.money;
    tableDatetime.textContent = todolist.datetime;
    tablePlace.textContent = todolist.place;
    tableObj.textContent = todolist.obj;
    tableMemo.textContent = todolist.memo;

    tableRecord.appendChild(tableCheck);
    tableRecord.appendChild(tableId);
    tableRecord.appendChild(tableTodo);
    tableRecord.appendChild(tableMoney);
    tableRecord.appendChild(tableDatetime);
    tableRecord.appendChild(tablePlace);
    tableRecord.appendChild(tableObj);
    tableRecord.appendChild(tableMemo);
    tableRecord.appendChild(tableAction);

    tableCheck.appendChild(createCheckbox(tableRecord));
    tableAction.appendChild(createDeleteButton(tableRecord));
  })
}

const createDeleteButton = (tableRecord) => {
  const index = tableRecord.rowIndex-1;
  const deleteButton = document.createElement('button');
  deleteButton.textContent = '削除';
  deleteButton.addEventListener('click', () => {
    todolists.splice(index, 1);
    showTodos()
  })
  return deleteButton;
}

const createCheckbox = (tableRecord) => {
  const checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  return checkbox;
}

試したこと

switchも試してみましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

VS codeで書いています。

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

回答1件

ベストアンサー

nputのmoneyとdatetimeの部分がそれぞれ空欄だった場合にmoneyが空欄なら'0円'、datetimeが空欄なら''を表示させたいです。

これを事前に処理してローカル変数に入れておけばよいのではないでしょうか。

js
1  if (todo.value == '') {
2    alert('予定を入力してください');
3    return;
4  }
5  let displayMoney = money.value == '' ? '0' : money.value;
6  let displayDatetime = datetime.value == '' ? '' : formatDate(new Date(datetime.value));
7  const todoItem = {
8    todo: todo.value,
9    money: displayMoney + '円',
10    datetime: displayDatetime,
11    place: place.value,
12    obj: obj.value,
13    memo: memo.value,
14  };
15  todolists.push(todoItem);
16  todo.value = '';
17  money.value = '';
18  datetime.value = '';
19  place.value = '';
20  obj.value = '';
21  memo.value = '';
22  showTodos();