【JavaScript入門】ページ全体の共通処理（common.jsとdateFormat.js）

node-js/
 ├─ app/
 │   ├─ index.html
 │   ├─ style.css
 │   └─ js/               ← JS モジュール群
 │        ├─ common.js       ← ここで作成
 │        ├─ storage.js
 │        ├─ imageArea.js
 │        ├─ imageEffects.js
 │        ├─ controlArea.js
 │        ├─ commentArea.js
 │        ├─ sendArea.js
 │        ├─ dateFormat.js   ← ここで作成
 │        └─ postListArea.js
 ├─ index.js               ← API／サーバ側
 ├─ upload_images/         ← 画像保存場所
 └─ post-dat.txt           ← 投稿データ（JSON など）

/* ---------------------------------------------------
   common.js
   ページ全体で共通して使う “小ネタ” をまとめたファイル
   - ここでは「ボタンクリック直後にフォーカスを外す」だけ
     しかし今後、共通関数を追加するハブとしても利用可
--------------------------------------------------- */

// DOM が完全に構築されたら一度だけ実行
window.addEventListener('DOMContentLoaded', () => {

  // ページ内すべての <button> 要素を取得
  document.querySelectorAll('button').forEach(btn => {

    // クリック直後にフォーカス枠を残さない
    btn.addEventListener('click', () => {

      // 80 ms 遅らせて blur() すると
      // 直前のクリック描画が終わった “次のフレーム” で
      // フォーカスが外れるため、UI がチラつかない
      setTimeout(() => btn.blur(), 80);
    });
  });

});

/* ---------------------------------------------------
   dateFormat.js
   - 軽量な日時フォーマッタ
   - 依存ライブラリ不要。Date オブジェクトをそのまま整形
--------------------------------------------------- */
function dateFormat(fmt, d = new Date()){

  // 1桁の数値をゼロ埋めするヘルパ
  const pad = (n) => String(n).padStart(2,'0');

  // フォーマット文字列を逐次置換
  return fmt
    .replace('YYYY', d.getFullYear())        // 年(4桁)
    .replace('MM'  , pad(d.getMonth()+1))    // 月(1 → 01)
    .replace('DD'  , pad(d.getDate()))       // 日
    .replace('hh'  , pad(d.getHours()))      // 時
    .replace('mm'  , pad(d.getMinutes()))    // 分
    .replace('ss'  , pad(d.getSeconds()));   // 秒
}

// 例 1) 投稿日時表示
const createdAt = dateFormat('YYYY年MM月DD日 hh:mm', new Date());
// => "2025年04月24日 23:15"

// 例 2) ファイル名タイムスタンプ
const stamp = dateFormat('YYYYMMDD_hhmmss');
// => "20250424_231507"

// 例 1) 投稿日時表示
const createdAt = dateFormat('YYYY年MM月DD日 hh:mm', new Date());
// => "2025年04月24日 23:15"

// 例 2) ファイル名タイムスタンプ
const stamp = dateFormat('YYYYMMDD_hhmmss');
// => "20250424_231507"