ライブラリは汎用的に利用できるプログラムを切り出して、共用できるようにしたものなので、異なるプログラミング言語では利用できません。例えば、Day.js を JavaScript 以外の言語で利用することはできません（実は一部のプログラミング言語は他のプログラミング言語と互換性を持つので、その場合は利用することができるのですが、ややこしくなるので説明はしません）。

JavaScript における日時操作のライブラリとして、以前は Moment.js というライブラリが主流だったようですが・・・

Moment.js | Home

現在は開発が停止しており、メンテナンスのみ対応するようです。

Moment.js | Docs

以下で Moment.js の代わりとなるライブラリがいくつか紹介されていたので、その中から Day.js を選択しました。

Moment.js | Docs

複数の候補から Day.js を選定した理由ですが・・・実は特にありません。パッと目に入ったのが Day.js だったからです。

今回のライブラリの利用用途は日付のフォーマット整形だけでした。この程度の機能であれば、どんなライブラリであってもサポートしていますし、メモ帳アプリは学習用に作っているだけなので、仮にライブラリがなくなってもさほど困りません。そういった前提であれば、どれを選んでもよいと判断しました。強いて言えば、Day.js のサイトを見たときに "2kB（サイズが小さい）" という特徴があった点くらいでしょうか。

2021-11-06

プログラマーへの道 #48 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード
動画内の不具合について

今回の動画で実装したソースコード

ソースコードはGitHubで管理しています。今回のソースコードは以下のリンクから確認することができます。

https://github.com/tio-iis/memo-app/blob/53cb9a2d73e0873afd0da80eefad1c850461eed6/index.html

動画内の不具合について

動画では "タイトルと本文を入力せずにメモが登録できる" という不具合がありました。原因はタイトルと本文に対するバリデーションである validateMemo() の戻り値でした。以下の return false, return true が存在しない場合、"モーダルにエラーを表示するが、処理が止まらずにメモを登録する" という挙動になってしまいます。

  function validateMemo(title, body, errorHTMLElement, memoId) {
    //省略

    if (errorHTMLElement.innerHTML.length > 0) {
      errorHTMLElement.style.display = ""
      return false
    }

    return true
  }

そこで、エラーの有無を true/false で戻り値として返してあげて、 validateMemo() を利用する部分で戻り値をチェックしています。エラーが存在する場合（return false の場合）はそこで処理を止めています（return しています）。

    if (validateMemo(title, body, validationErrorInAddModal, "0") == false) {
      return
    }

2021-11-04

プログラマーへの道 #47 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード
UnixTime について
重複を関数に切り出す

今回の動画で実装したソースコード

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const editModal = new bootstrap.Modal(document.getElementById('editModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))
  const titleInAddModal = document.getElementById("id-add-modal-title")
  const bodyInAddModal = document.getElementById("id-add-modal-body")
  const memoList = document.getElementById("id-memo-list")
  const validationErrorInAddModal = document.getElementById("id-validation-error-in-add-modal")
  const validationErrorInEditModal = document.getElementById("id-validation-error-in-edit-modal")
  const memoIdInEditModal = document.getElementById("id-memo-id")
  const titleInEditModal = document.getElementById("id-modal-title")
  const bodyInEditModal = document.getElementById("id-modal-body")
  const checkboxes = document.getElementsByClassName(getCheckboxClass())

  function getIdTitleInMemoList(memoId) {
    return document.getElementById(createTitleInMemoListId(memoId))
  }

  function createTitleInMemoListId(memoId) {
    return "id-title-in-list-" + memoId
  }

  function createUpdatedAtId(memoId) {
    return "id-updated-at-" + memoId
  }

  function getIdBodyInlist(memoId) {
    return document.getElementById(createBodyInListId(memoId))
  }

  function createBodyInListId(memoId) {
    return "id-body-in-list-" + memoId
  }

  function getCheckboxClass() {
    return "class-checkbox"
  }

  function validateMemo(title, body, errorHTMLElement, memoId) {
    errorHTMLElement.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorHTMLElement.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorHTMLElement.innerHTML = errorHTMLElement.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          errorHTMLElement.innerHTML = errorHTMLElement.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (errorHTMLElement.innerHTML.length > 0) {
      errorHTMLElement.style.display = ""
    }

    return
  }

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = titleInAddModal.value
    const body = bodyInAddModal.value

    validateMemo(title, body, validationErrorInAddModal, "0")

    /*
    validationErrorInAddModal.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      validationErrorInAddModal.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      validationErrorInAddModal.innerHTML = validationErrorInAddModal.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          validationErrorInAddModal.innerHTML = validationErrorInAddModal.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (validationErrorInAddModal.innerHTML.length > 0) {
      validationErrorInAddModal.style.display = ""
      return
    }
*/

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = createTitleInMemoListId(memoId)
    const updatedAtId = createUpdatedAtId(memoId)

    tr.innerHTML = '<td><input class="' + getCheckboxClass() + '" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", createBodyInListId(memoId))
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      validationErrorInEditModal.style.display = "none"
      validationErrorInEditModal.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      memoIdInEditModal.value = memoId

      const title = getIdTitleInMemoList(memoId).innerText
      titleInEditModal.value = title

      const body = getIdBodyInlist(memoId).value
      bodyInEditModal.value = body

      editModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    titleInAddModal.value = ""
    bodyInAddModal.value = ""
    addModal.show()

    validationErrorInAddModal.style.display = "none"
    validationErrorInAddModal.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = memoIdInEditModal.value
    const title = titleInEditModal.value
    const body = bodyInEditModal.value

    validateMemo(title, body, validationErrorInEditModal, memoId)

    /*
    validationErrorInEditModal.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      validationErrorInEditModal.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      validationErrorInEditModal.innerHTML = validationErrorInEditModal.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          validationErrorInEditModal.innerHTML = validationErrorInEditModal.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (validationErrorInEditModal.innerHTML.length > 0) {
      validationErrorInEditModal.style.display = ""
      return
    }
    */


    //メモリストのタイトル
    getIdTitleInMemoList(memoId).innerText = title

    //本文
    getIdBodyInlist(memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById(createUpdatedAtId(memoId)).innerText = updatedAt

    editModal.hide()
  })

</script>

</html>

UnixTime について

UnixTime についての説明は以下です。

UNIX時間 - Wikipedia

UnixTimeが 0 になることはないので、以下の validateMemo() の引数である memoId に 0 を指定するということは、

 function validateMemo(title, body, errorHTMLElement, memoId) {
    errorHTMLElement.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorHTMLElement.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

以下の "if (tr.id == memoId)" の分岐を絶対に通らないことになります。メモを登録する際のバリデーションではこの比較は不要なので、常に実行されないように（return に入らないように）0 を指定しています。

if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

重複を関数に切り出す

動画ではメモのバリデーションを関数に切り出すことでプログラミング上の重複を排除しました。バリデーションを切り出した関数は以下です。切り出したプログラムに必要な値を引数として用意しました。こうすることでプログラムを柔軟に切り出すことができます。

  function validateMemo(title, body, errorHTMLElement, memoId) {
    errorHTMLElement.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorHTMLElement.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorHTMLElement.innerHTML = errorHTMLElement.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          errorHTMLElement.innerHTML = errorHTMLElement.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (errorHTMLElement.innerHTML.length > 0) {
      errorHTMLElement.style.display = ""
    }

    return
  }

2021-11-02

プログラマーへの道 #46 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード
Visual Studio Code の文字列置換機能について
Vim と Visual Studio Code の Plugin

今回の動画で実装したソースコード

すみません、残すのを忘れてしまいました・・・。

Visual Studio Code の文字列置換機能について

こちらにありました。左のメニューにある虫眼鏡アイコンから検索 & 置換ができるようです。

Basic Editing in Visual Studio Code

私が動画中で利用したのはこの機能ではなく、Vim Plugin の文字列置換機能です。これについては次で説明しています。

Vim と Visual Studio Code の Plugin

Vim はプログラミング開発で利用されるテキストエディタの1つです。高機能なメモ帳だと思ってください。

Vim - Wikipedia

Vim の特徴の1つとして "モード" という概念があります。これは "カーソル移動と文字入力を異なるモードで実行する" という、よく分からない表現になってしまいますが、少しクセがあるエディタだと思ってください。そして、私は業務で Vim を利用しているので、Vim じゃないとプログラミングが書きづらいと感じるようになってしまいました。 Vim に限らず、特定のエディタの使い勝手に慣れたエンジニアは大抵同じような状況に陥ります。そこで私は Visual Studio Code のプラグイン機能で Vim のプラグインをインストールしています。

Vim - Visual Studio Marketplace

Visual Studio Code にはプラグインという機能があり、標準で搭載されてない機能を追加でインストールすることができます。

Managing Extensions in Visual Studio Code

このプラグインは自由に開発して公開することができるので、現在多くのプラグインが存在します。

Extensions for Visual Studio family of products | Visual Studio Marketplace

私が動画で利用した文字列置換の機能は、この Vim Plugin の置換機能です。

2021-10-31

作ったもの解説 #1 プログラミング未経験者でも13時間で作れる? JavaScriptで動くメモ帳アプリ

作ったもの解説

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は "プログラミング未経験者でも13時間で作れるJavaScriptで動くメモ帳アプリ" の解説をします。
メモ帳アプリの動作については以下のツイートに載せています。

メモ帳アプリの動画を撮ってみました。ただ、画質が悪くて何をしているのかがいまいち分かりづらいですね・・・。 #新人Vtuber #プログラミング学習 pic.twitter.com/WLlyUl6kHx
— 💻 衣亥栖ティオ/プログラミング VTuber (@TioIis) October 23, 2021

動画でも取り上げています。

衣亥栖ティオについて
プログラミング学習動画 "プログラマーへの道" のコンセプト
プログラミング未経験者でも13時間の動画を見るだけでメモ帳アプリを作ることができる
メモ帳アプリを作るまでのざっくりとした工程
学べること
学べないこと
今後について

衣亥栖ティオについて

都内でサーバサイドエンジニアとして働いています。普段利用しているプログラミング言語はGoなので、JavaScriptはほとんど書いたことがありません。

プログラミング学習動画 "プログラマーへの道" のコンセプト

"プログラマーへの道" のコンセプトは "必要最低限の学習でアプリケーションを作る" というものですが、これは "学習する" -> "アプリを作る" -> "学習する" -> "アプリを作る" というサイクルを回していくためです。

プログラミングには多くの知識が必要となります。今回作成したメモ帳アプリもこだわろうと思えばいくらでもこだわることができますが、こだわればこだわるほど必要となる知識は多くなってしまいます。プログラミングを学習するために書籍を購入した結果、プログラミングを始める前の環境構築に挫折した人も多いのではないでしょうか? 私が最初のアプリケーション作成としてブラウザベースのもの（JavaScript）を選択したのはブラウザとメモ帳があれば開発可能だからです。そして、実はメモ帳アプリを開発することも最初から決めていたので、メモ帳アプリの開発まではそこで必要となる知識のみを動画にしていました。

プログラミングはアプリケーションを作ってみないと楽しさが分からないと思うので、私の動画を見て少しでもプログラミングに興味を持ってもらえるといいなと思っています。今後も "必要最低限の学習でアプリケーションを作る" というコンセプトで動画を作成する予定です。

プログラミング未経験者でも13時間の動画を見るだけでメモ帳アプリを作ることができる

今回のメモ帳アプリはプログラミング未経験者の方を対象にしているので、HTML, JavaScript, CSS の基礎から動画で説明しています。それにも関わらず合計13時間程度の動画でメモ帳アプリを作れるのは "必要最低限の学習でアプリケーションを作る" というコンセプトに振り切っているからです。ただ、私の説明だと分かりづらい部分もあると思うので、視聴者自身が自分で不明点を調べる必要はあると思っています。

メモ帳アプリを作るまでのざっくりとした工程

メモ帳アプリを作るまでの工程ですが、以下のような流れになっています。

JavaScriptでプログラミングの基礎を学習する
メモ帳アプリ（プロトタイプ）を作る
JavaScriptを本格的に学習する
CSSの学習をする
メモ帳アプリを作る

プロトタイプになってしまいますが、最初のメモ帳アプリは動画の第8回目で作っています。これも "必要最低限の学習でアプリケーションを作る" というコンセプトを意識したものです。一番挫折しやすいのは3番目の "JavaScriptを本格的に学習する" だと思います。これでも必要最低限の知識に限定したつもりなのですが、他の工程に比べると理解するのが難しいかもしれません。各動画の時間も長めです。 5番目の "メモ帳アプリを作る" は私のJavaScriptスキルが低いこともあって、実装に時間がかかってしまいました。動画の数も多めです。

学べること

13時間分の動画でWebFrontend開発の基礎は学ぶことができるのではないかなと思っています。少なくともメモ帳アプリ程度のものであれば、自分で調べながら作ることができるようになっているはずです。

学べないこと

現在のWebFrontendでは React などのフレームワークを利用するのが主流であり、プログラミング言語も TypeScript を利用します。チーム開発だと Git & GitHub は必須ですし、ローカル環境も WebPack などで構築することになります。動画ではこれらを扱っていません（ライブラリすら扱っていません）。そのため、あくまで "作れるだけのスキルを身につけられる" だけであって、とても業務レベルでやっていけるスキルを身につけられるわけではないです。

今後について

今後は今回開発したメモ帳アプリを利用しつつプログラミングに必要な知識を紹介する動画を作っていこうと思います。

2021-10-29

プログラマーへの道 #45 の補足説明

プログラマーへの道

こんにちは、プログラマー VTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード
リファクタリングはいつやるべきか

今回の動画で実装したソースコード

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))
  const titleInAddModal = document.getElementById("id-add-modal-title")
  const bodyInAddModal = document.getElementById("id-add-modal-body")
  const memoList = document.getElementById("id-memo-list")
  const validationErrorInAddModal = document.getElementById("id-validation-error-in-add-modal")

  function getIdTitleInMemoList(memoId) {
    return document.getElementById(createTitleInMemoListId(memoId))
  }

  function createTitleInMemoListId(memoId) {
    return "id-title-in-list-" + memoId
  }

  function createUpdatedAtId(memoId) {
    return "id-updated-at-" + memoId
  }

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = titleInAddModal.value
    const body = bodyInAddModal.value

    validationErrorInAddModal.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      validationErrorInAddModal.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      validationErrorInAddModal.innerHTML = validationErrorInAddModal.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          validationErrorInAddModal.innerHTML = validationErrorInAddModal.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (validationErrorInAddModal.innerHTML.length > 0) {
      validationErrorInAddModal.style.display = ""
      return
    }

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = createTitleInMemoListId(memoId)
    const updatedAtId = createUpdatedAtId(memoId)

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", createBodyInListId(memoId))
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = getIdTitleInMemoList(memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = getIdBodyInlist(memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    titleInAddModal.value = ""
    bodyInAddModal.value = ""
    addModal.show()

    validationErrorInAddModal.style.display = "none"
    validationErrorInAddModal.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

    if (errorMessage.innerHTML.length > 0) {
      errorMessage.style.display = ""
      return
    }


    //メモリストのタイトル
    getIdTitleInMemoList(memoId).innerText = title

    //本文
    getIdBodyInlist(memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById(createUpdatedAtId).innerText = updatedAt

    myModal.hide()
  })

  function getIdBodyInlist(memoId) {
    return document.getElementById(createBodyInListId(memoId))
  }

  function createBodyInListId(memoId) {
    return "id-body-in-list-" + memoId
  }

</script>

</html>

リファクタリングはいつやるべきか

動画でも分かるようにリファクタリングは意外と大変な作業です。先延ばしにすればするほど、コードは散らかっていき、リファクタリングはより大変になってしまいます。そう考えると実装しつつ都度リファクタリングするのが良いように思えます。しかし、最終的にどのようなプログラムになるのか分からない時点でリファクタリングをしても、そのリファクタリングが有効かどうかが分からないケースもあるので、すぐにリファクタリングするのが最善とは言えません。ここらへんは実際に経験を積んで勘所を身につけるしかないかなと思っています。

プログラマー VTuber 衣亥栖ティオのちょっとした話

Youtubeに投稿したプログラミング学習動画の補足説明をするためのブログです。

プログラマーへの道 #50 の補足説明

今回の動画で実装したソースコード

ライブラリのデメリットについて

プログラマーへの道 #49 の補足説明

今回の動画で実装したソースコード

Day.js について

プログラマーへの道 #48 の補足説明

今回の動画で実装したソースコード

動画内の不具合について

プログラマーへの道 #47 の補足説明

今回の動画で実装したソースコード

UnixTime について

重複を関数に切り出す

プログラマーへの道 #46 の補足説明

今回の動画で実装したソースコード

Visual Studio Code の文字列置換機能について

Vim と Visual Studio Code の Plugin

作ったもの解説 #1 プログラミング未経験者でも13時間で作れる? JavaScriptで動くメモ帳アプリ

衣亥栖ティオについて

プログラミング学習動画 "プログラマーへの道" のコンセプト

プログラミング未経験者でも13時間の動画を見るだけでメモ帳アプリを作ることができる

メモ帳アプリを作るまでのざっくりとした工程

学べること

学べないこと

今後について

プログラマーへの道 #45 の補足説明

今回の動画で実装したソースコード

リファクタリングはいつやるべきか