日付計算ツールの作り方｜JavaScriptで〇日後・〇日前・日数差・営業日も一括計算！

「〇日後っていつ？」「この日から何日経った？」
日常でも仕事でも、日付の計算って意外と面倒ですよね。

この記事では、JavaScriptで「〇日後／〇日前」「日数差」「営業日」まで自動で計算できるWebツールを、初心者の方でも作れるように丁寧に解説します。

• HTMLとJavaScriptで動くシンプルなツール
• 土日を除いた営業日にも対応
• 「初日を含む」計算や「月・年単位」の日付操作もできる！

コピーしてそのまま使えるコード付きで紹介するので、環境構築や難しい設定は不要です。

「自分でもWebツールが作れるかも！」と思っていただけるよう、サンプルも交えて、わかりやすくお届けします。
ぜひ最後まで読んで、あなたの便利な日付計算ツールを作ってみてください！

このツールで何ができるのか？主な機能を紹介

今回作る日付計算ツールは、次のような便利な機能を備えています。

①「〇日後」「〇日前」の日付をすぐに計算できる

指定した日付から「5日後はいつ？」「10日前は何日？」といった未来や過去の日付を瞬時に表示します。
また、月単位・年単位でも計算可能なので、「2ヶ月後」や「1年前」なども扱えます。

② 2つの日付の「差（日数）」を計算できる

開始日と終了日を入力することで、日数の差分を自動で計算します。
「イベントまであと何日？」「プロジェクト期間は何日間？」など、実務にも役立ちます。

③ 土日を除いた営業日での計算にも対応

ビジネス利用では欠かせない「営業日計算」にも対応。
土日をカウントしない営業日ベースの〇日後／〇日前計算ができます。

④ 「初日を含む／含まない」を選べる

日数差を求める際に、「初日を含めるかどうか」で結果が変わることがあります。
このツールでは初日を含む・含まないの切り替えが可能なので、シーンに応じた柔軟な使い方ができます。

【実際の日付計算ツールの動作を試してみたい方はこちらからどうぞ】▼

日付計算ツール｜〇日後・〇日前・日付差を自動計算！土日を除く営業日計算も対応

「この日から〇日後って、何日になるんだろう？」「締切まであと何営業日ある？」「過去のあの日から何日経ったのかな？」 日常生活でも仕事でも、日付にまつわる計算って意外と多いですよね。でも、毎回カレンダー ...

開発に必要な準備とファイル構成

JavaScriptで日付計算ツールを作るにあたって、準備すべきものは意外とシンプルです。初心者でもすぐに取りかかれるように、必要な環境やファイル構成を確認しておきましょう。

必要なものはたったこれだけ！

• テキストエディタ（例：メモ帳、Visual Studio Code）
  VS Code (Visual Studio Code) とは:
  Microsoftが開発している、プログラミングコードを書くための高機能な無料テキストエディタです。
  たくさんの便利な機能があり、世界中の開発者に愛用されています。
• Webブラウザ（例：Google Chrome、Microsoft Edge、Firefoxなど）

これだけあれば、今すぐ開発を始められます！
サーバー不要で、ローカル環境で完結するのがHTML×JavaScriptツールの魅力です。

ファイル構成（シンプルな構成）

作業ディレクトリの中身は以下のように整理しておきましょう。

date_calculator/
├── index.html … ツール本体（HTML構造）
├── style.css … 見た目を整えるCSS
└── script.js … 日付計算のロジックを記述するJavaScript

1つのHTMLファイルにまとめることもできますが、保守性と読みやすさを重視して、今回は3ファイル構成をおすすめします。

HTMLで日付計算ツールの骨組みを作ろう（UI設計）

まずは、ツールの見た目となる「画面の骨組み」をHTMLで作成していきましょう。
ここでは、2つの主要機能をタブで切り替えられるレイアウトを構築します。
index.htmlに以下のコードをコピー＆ペーストしてください。これはツールの基本的な構造を作ります。

補足ポイント

• input type="date" を使うことで、カレンダー形式の入力が可能に。
• チェックボックス や ラジオボタン を使って、柔軟に条件指定が可能。
• タブ切り替え には、後ほどJavaScriptを使って表示制御を行います。

CSSで日付計算ツールのデザインを整えよう

ツールのHTML構造ができたら、次はCSSで見た目を整えます。
シンプルで見やすく、ユーザーが迷わず使えるようなレイアウトを意識しましょう。
作成したHTMLを美しく見せるためのCSSをstyle.cssに記述します。

コードの確認方法

1. index.htmlファイルをブラウザで開いてみましょう。
2. 見た目は整っているでしょうか？
3. まだボタンを押しても何も変化がないはずです。次はJavaScriptで動きをつけます。

JavaScriptで日付計算機能を実装しよう

ここからは、このツールの心臓部である「日付の計算処理」をJavaScriptで実装していきます。
日付操作には Date オブジェクトを活用し、加算・減算・差分計算を行います。
script.jsファイルに以下のコードを記述してください。

コードのポイント解説

この長いコードも、一つずつ分解すれば理解できます。重要な部分をピックアップして見ていきましょう。

1. document.addEventListener('DOMContentLoaded', () => { ... });
   • これは「ウェブページの中身（HTML）が全部読み込まれたら、この中のコードを実行してね」というお約束の記述です。JavaScriptはHTML要素が存在しないと操作できないので、この書き方がよく使われます。
2. 要素の取得（例: document.getElementById('calcDayBaseDate')）
   • HTMLファイルで付けたid（例: calcDayBaseDate）を使って、JavaScriptからHTMLの部品（入力欄やボタンなど）を「これは、この部品のことだよ！」と指定し、操作できるようにしています。
   • 部品は変数（constやletで宣言するもの）に入れておくと、後で使いやすくなります。
3. イベントリスナーの設定（例: calculateDayButton.addEventListener('click', () => { ... });）
   • イベントリスナーとは？
     特定の「イベント」（例：ボタンのクリック、キーボードの入力、ページの読み込み完了など）が発生したときに、指定したJavaScriptのコードを実行するための仕組みです。
   • ここでは、「calculateDayButton（計算ボタン）がclick（クリック）されたら、その後の{ ... }の中の処理を実行してください」という指示をしています。
4. 日付の取得と数値への変換
   • 入力された日付（例: '2025-07-20'）は、new Date(入力値)のようにすることで、JavaScriptのDateオブジェクトに変換されます。
   • 数値（日数など）は、parseInt(入力値, 10)を使って、文字列から正確な整数（10進数）に変換しています。
5. 【機能1】〇日後・〇日前の計算ロジック
   • 日付の加減算:
     • JavaScriptのDateオブジェクトには、日付を操作する便利なメソッドがあります。
     • resultDate.setDate(resultDate.getDate() + 10);
       • これは「resultDateの日を現在の日の値に10を足した値に設定する」という意味です。
         例えば、7月20日に10を足せば7月30日になります。
       • JavaScriptは賢いので、7月32日になった場合は自動的に8月1日などに調整してくれます。
     • 月や年も同様に、setMonth()やsetFullYear()を使います。
   • 「前」の場合の処理: if (offsetType === 'before') { amount *= -1; }
     • 「〇日前」を選んだ場合は、入力された数値に-1を掛けて負の数にすることで、日付を「進める」のではなく「戻す」計算に対応させています。
6. 【機能2】2つの日付差の計算ロジック
   • 日付の引き算は「ミリ秒」:
     • JavaScriptでDateオブジェクト同士を直接引き算すると、ミリ秒（1000分の1秒）単位での差が計算されます。
     • 例: endDate.getTime() - startDate.getTime()
       • getTime()メソッドは、Dateオブジェクトが「1970年1月1日 00:00:00 UTC」からどれだけミリ秒が経過したか、という数値を返します。この数値同士を引き算することで、正確な時間差が得られます。
   • ミリ秒から日数へ:
     • 1日 = 24時間 × 60分 × 60秒 × 1000ミリ秒 = 86,400,000ミリ秒です。
     • 計算されたミリ秒の差をこの数値で割ることで、日数を算出します。
7. 【機能3】土日を除く営業日計算ロジック
   • この機能は少し複雑です。
   • isWeekend(date)関数:
     • DateオブジェクトのgetDay()メソッドは、曜日を数値（日曜日が0、土曜日が6）で返します。
     • この関数は、受け取った日付が土曜日（6）か日曜日（0）ならtrue（土日である）、それ以外ならfalseを返します。
   • ループ処理とスキップ:
     • while文という「条件が真である限り繰り返す」処理を使って、日付を1日ずつ進めたり戻したりします。
     • if (isWeekend(currentDate)) { ... } else { ... }のように条件分岐を使い、土日であれば日数をスキップし、営業日であればカウントを進めます。
     • これにより、指定された営業日数に到達するまで、土日を避けて日付を計算することができます。
8. 「初日を含む/含まない」の調整
   • 「〇日後/前」計算では、if (includeStartDate && amount !== 0)の条件で、初日を含める場合に日数を1日調整しています。
   • 「日付差計算」では、ループで全期間を数えた後、if (!includeStartDate)の条件で初日を含まない場合に最終的な日数から1日引いています。
9. 結果の表示とフォーマット
   • 計算された結果のDateオブジェクトを、formatToJapaneseDateWithWeekday関数を使って「YYYY年M月D日（曜日）」という見やすい形式に変換しています。
   • textContentを使って、HTMLの<span>タグの中に結果を書き込んでいます。
10. コピー機能
    • navigator.clipboard.writeText(テキスト)というAPIを使うと、指定したテキストをクリップボードにコピーできます。ユーザーが結果を簡単に利用できるようにするための便利な機能です。

さらにツールを使いやすくする応用テクニック

ここまでで基本的な日付計算ツールは完成ですが、さらに使いやすくするための応用テクニックをいくつかご紹介します。

コピー機能の実装

今回のコードにはすでに含まれていますが、計算結果をワンクリックでコピーできる機能は非常に便利です。
navigator.clipboard.writeText()というJavaScriptのAPI（アプリケーション・プログラミング・インターフェース）を使うことで、簡単に実装できます。

入力値のバリデーション

ユーザーが日付を正しく入力しなかった場合や、無効な数値を入力した場合に、適切なメッセージを表示する「バリデーション（入力値検証）」機能を追加すると、より親切なツールになります。

• 例えば、日付が空の場合は「日付を入力してください」とアラートを出す
• 入力された数値が数字ではない場合は「半角数字を入力してください」と促す

UI/UX改善のヒント

ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）を向上させることで、ツールの使いやすさが格段に上がります。

• エラーメッセージの表示:
  アラートではなく、入力フィールドの近くに赤い文字でエラーメッセージを表示する
• 入力リセットボタン:
  全ての入力内容をクリアするボタンを追加する
• 計算中のローディング表示:
  計算に時間がかかる場合に「計算中…」などのメッセージを表示する（今回のツールでは不要かもしれませんが、大規模な計算では有効です）

これらの機能を追加することで、よりプロフェッショナルなツールへと進化させることができますよ。

ツール作りに役立つおすすめの学習リソース

「日付計算ツールを自分で作れた！」という達成感を得たあなた。
さらにスキルを伸ばして、もっと便利なWebツールを作ってみませんか？

ここでは、HTML・CSS・JavaScriptの基礎から応用まで学べるリソースを厳選してご紹介します。

書籍でじっくり学びたい人に

『確かな力が身につくJavaScript超入門』

JavaScriptの基本文法から実践的な活用まで、図解で丁寧に解説。初心者にとって理想的な一冊です。

『スラスラわかるHTML&CSSのきほん』

Webページの基礎を体系的に学びたい方へ。見やすいレイアウトと丁寧な説明で「初めてでも迷わない」構成です。

動画で学びたい人におすすめの講座

Udemy講座：【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発

【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発
→ HTMLとJavaScriptの基本操作を体系的に学べる人気講座。
ツール作成のためのHTML構造の作り方やJavaScriptの使い方がしっかり学べます。
「これからWEBツール作りにも挑戦したい」初心者の方にピッタリ。

他にも講座を探したい方はこちら → UdemyのWeb開発カテゴリー講座

まとめ｜自分だけの便利ツールを作ろう！

今回は、JavaScriptで作る「日付計算ツール」の作り方をご紹介しました。

この記事では、Webブラウザで動く多機能な日付計算ツールをJavaScriptで自作する方法を解説しました。

• HTMLでウェブページの骨組みを作り
• CSSで見た目を整え
• JavaScriptで「〇日後・〇日前」「日付差」「土日を除く営業日計算」「初日含む/含まない」「月・年単位計算」といった複雑な計算ロジックを実装しました。

今回学んだJavaScriptのDateオブジェクトの操作や、イベントリスナーの使い方、条件分岐やループ処理といった基本的なプログラミングの概念は、他のWeb開発にも応用できる非常に重要なスキルです。

ぜひ、この知識を活かして、あなた自身のアイデアで新たなWebツール開発に挑戦してみてください。

【実際の日付計算ツールの動作を試してみたい方はこちらからどうぞ】▼

日付計算ツール｜〇日後・〇日前・日付差を自動計算！土日を除く営業日計算も対応

「この日から〇日後って、何日になるんだろう？」「締切まであと何営業日ある？」「過去のあの日から何日経ったのかな？」 日常生活でも仕事でも、日付にまつわる計算って意外と多いですよね。でも、毎回カレンダー ...