開始時刻と終了時刻から作業時間を自動計算するWebツール作成方法を解説するブログ用アイキャッチ画像

開発ガイド

【初心者向け】HTMLとJavaScriptで時間計算ツールを自作しよう！履歴保存＆時給対応の実用機能も解説

「今日の勤務時間、実働何時間だったっけ？」「この時給で、今日の稼ぎはいくらになるんだろう？」

そんな日々の疑問を解決する時間計算ツールを、自分の手で作ってみませんか？

今回ご紹介するのは、HTMLとJavaScriptだけで作れる「開始時刻・終了時刻・休憩時間・時給」から作業時間と報酬を自動計算するWebツールの作り方です。
しかも、計算履歴をブラウザに保存して、あとから呼び出す機能までついています。

「プログラミングは初心者だけど、自分の役に立つツールを作ってみたい」
「実用的なスキルを身につけながら、コードに触れてみたい」
そんな方にピッタリの内容です。

この記事では、ツールの仕組みからHTML・CSS・JavaScriptの具体的なコードまで、誰でも作れるように丁寧に解説していきます。

コピペから始めてもOK！
このツールを通して、「作れた！」という達成感とWeb開発の楽しさをぜひ体感してください。

【まずは時間計算ツールの完成版を試してみたい方はこちら】▼

なぜ今、Webツールを「自作」すべきなのか？その魅力とメリット

「プログラミング」と聞くと、なんだか難しそう…と思う方もいるかもしれません。でも、心配いりません！今回ご紹介するようなシンプルなWebツールなら、HTMLとJavaScriptだけで、特別なソフトも必要なく、誰でも手軽に作れてしまうんです。

Webツールを自分で作ることには、たくさんの魅力とメリットがあります。

  • 日々の「ちょっと不便」を自分で解決できるスキルが身につく:
    「こんな機能があったらいいのに…」という小さなアイデアを、自分で形にできるようになります。
  • プログラミング学習の最高のモチベーションになる「作れた！」という体験:
    書いたコードが実際に動いて、誰かの役に立つツールになる喜びは、何物にも代えがたい学習の原動力になります。
  • ブラウザだけで動くため、誰でも簡単に共有・利用できる汎用性:
    作ったツールはインターネット環境があればどこでも使え、友人や同僚と簡単に共有できます。
  • 初期費用ゼロで始められる手軽さ:
    必要最低限の準備で、すぐに開発をスタートできます。

この記事を読み進めれば、実際にツールを動かすための基本的なHTMLとJavaScriptの記述方法を学び、最終的にはあなただけの「作業時間・休憩時間計算ツール」を作成できるようになります。

ツールの全体像と開発環境の準備

まず、今回作成するツールの全体像と、開発を始めるために必要なものを見ていきましょう。

ツールの動作原理の概要

この作業時間計算ツールは、非常にシンプルな仕組みで動いています。

  1. あなたがWebブラウザの画面で、開始時刻や終了時刻などの情報を入力します。
  2. その入力された情報をJavaScriptというプログラミング言語が受け取ります。
  3. JavaScriptが時刻の計算や休憩時間の差し引き、時給換算といった複雑な処理を行います。
  4. 計算された結果（実働時間や純作業時間）を、再びHTMLというマークアップ言語で構成された画面上に表示します。
  5. さらに、計算履歴の保存には、ブラウザが標準で持っているローカルストレージという機能を使います。これにより、あなたがツールを閉じてもデータが失われることなく、次回アクセス時に以前の履歴を確認できます。

開発環境の準備

「何か特別なソフトが必要なの？」と思うかもしれませんが、ご安心ください。必要なものは、ほとんどのパソコンに最初から入っているものです。

  • テキストエディタ:
    コードを書くためのソフトです。Windowsなら「メモ帳」、macOSなら「テキストエディット」でも良いですが、プログラミング学習には「VS Code (Visual Studio Code)」が断然おすすめです！無料で高機能、そして多くのプログラマーが使っています。
  • Webブラウザ:
    作成したツールを実際に動かして確認するためのものです。Google Chrome、Mozilla Firefox、Microsoft Edgeなど、普段お使いのブラウザでOKです。

これだけです！今回は work_time_calculator.html のような単一のHTMLファイル内で、HTML、CSS、JavaScriptのすべてを記述していきます。そのため、特別なサーバーの準備なども一切不要です。

難しい環境構築は一切ナシ。ブラウザとメモ帳だけでOK！

ほーく
ほーく

HTMLで画面の骨格を作ろう（UIの構築）

それでは早速、ツールの「見た目」となる部分、ユーザーインターフェース（UI）をHTMLで構築していきましょう。
まずは以下の基本的なHTML構造から始めます。

このコードを work_time_calculator.html などの名前で保存し、ブラウザで開いてみてください。まだデザインは適用されていませんが、各入力欄やボタン、結果表示エリアの骨組みが確認できるはずです。

基本的なHTML構造

  • <!DOCTYPE html>
    これがHTML5で書かれたドキュメントであることを宣言します。
  • <html lang="ja">
    HTMLドキュメントの開始を宣言し、言語を日本語に設定しています。
  • <head>
    ブラウザには表示されない、ページに関するメタ情報（文字コード、レスポンシブ対応、タイトルなど）を記述します。
    • <meta charset="UTF-8">
      文字化けを防ぐために必須です。
    • <meta name="viewport" ...>
      スマートフォンなど、さまざまな画面サイズで適切に表示されるように設定します（レスポンシブデザインの基本）。
    • <title>
      ブラウザのタブに表示されるページタイトルです。
    • <style>
      後ほどCSSをここに記述します。
  • <body>
    実際にブラウザに表示されるすべてのコンテンツを記述します。

入力フォームの作成

  • <div class="input-group">
    入力欄とラベルをひとまとめにするためのグループです。CSSでデザインを整える際に便利です。
  • <label for="ID名">
    入力欄（input）と紐付けて、その入力欄が何のためのものかをユーザーに示します。
    for属性の値は、対応するinputタグのidと一致させる必要があります。
  • <input type="time" id="startTime" value="09:00">
    時刻を入力するための入力欄です。type="time"とすることで、ブラウザが時刻入力に適したインターフェースを提供してくれます。
    idはJavaScriptからこの要素を操作するために使います。valueは初期表示される値です。
  • <input type="checkbox" id="includeBreak">
    チェックボックスです。「休憩時間を差し引く」機能のオン/オフに使います。
  • <input type="number" id="hourlyWage" placeholder="例: 1000" min="0">
    数値を入力するための入力欄です。type="number"とすることで、数字以外の入力が制限されます。min="0"は最小値を0に設定しています。
  • <button id="calculateBtn">計算する</button>
    計算を実行するためのボタンです。

結果表示エリアの作成

  • <div class="results" id="results">
    計算結果を表示するエリア全体を囲むdiv要素です。
  • <p>
    各結果の項目（実働時間など）を表示するための段落です。
  • <span id="actualDuration">0時間0分</span>
    実際の計算結果（「0時間0分」の部分）がJavaScriptによって書き換えられる場所です。
    span要素は、テキストの一部を囲んでスタイルを適用したり、今回のようにJavaScriptで内容を操作したりする際に便利です。

履歴表示エリアの作成

  • <div class="history-container">
    履歴エリア全体を囲むdiv要素です。
  • <h2>計算履歴</h2>
    履歴エリアのタイトルです。
  • <ul id="history-list">
    履歴のリストを表示するための「順序なしリスト」です。JavaScriptでここに<li>要素を動的に追加していきます。
  • <p class="no-history">まだ履歴がありません。</p>
    履歴が一つもない場合に表示されるメッセージです。
  • <button id="clear-history-btn">履歴をすべて削除</button>
    履歴を全て消去するためのボタンです。

これで、ツールの見た目の骨格が完成しました！次にCSSで見た目を整えていきましょう。

まずは“見た目”から。仕組みはあとでじっくり！

ほーく
ほーく

CSSでデザインを整えよう（見た目の改善）

HTMLで骨格を作っただけでは、味気ない見た目です。次に、CSS（Cascading Style Sheets）を使って、ツールを見やすく、使いやすくするためのデザインを適用していきます。先ほどのHTMLの<head>タグ内にある<style>タグの中に、以下のCSSコードをコピー＆ペーストしてください。

基本的なCSSの適用方法

今回はHTMLファイル内の<head>タグの中に直接<style>タグを書いてCSSを記述しています。これは「埋め込みスタイルシート」と呼ばれる方法で、簡単なツールを作る際には手軽で便利です。

CSSは、HTML要素に「どんなスタイルを適用するか」を指示するものです。例えば、body { ... }はページの背景色や文字色を設定し、.container { ... }はメインの入力エリアの背景や影を設定しています。

主要な要素のスタイリング

  • bodyと.container
    ページ全体と、メインの入力フォーム部分のレイアウトや背景色、影などを設定しています。
    display: flex; flex-direction: column; align-items: center;を使うことで、コンテンツを中央に配置しています。
  • inputフィールド
    入力欄のサイズ、余白（padding）、角の丸み（border-radius）、枠線などを調整し、見やすくしています。transitionプロパティは、入力欄がフォーカスされたとき（クリックされたときなど）に枠線の色がスムーズに変化するアニメーション効果を設定しています。
  • button
    計算ボタンや履歴の削除ボタンの色、サイズ、角の丸みなどを設定し、クリックできる要素であることを明確にしています。
    cursor: pointer;で、マウスカーソルがボタンの上にきたときに指の形に変わるようにしています。
  • .resultsエリア
    計算結果が表示される部分です。背景を薄い緑色にして、重要な情報であることを視覚的に強調しています。
  • history-list
    履歴リストの見た目を整えています。overflow-y: auto;を設定することで、履歴が増えすぎた場合にスクロールして表示できるようにしています。
  • history-list li
    各履歴アイテムの背景色、パディング、下線、そしてFlexboxを使った内部の配置を設定しています。
  • hourly-wage-group
    時給入力欄と「円」の表示を横並びにするためにFlexboxを使っています。

レスポンシブデザインの基礎

CSSの最後にある@media (max-width: 600px) { ... }という記述は、レスポンシブデザインを実現するためのものです。これは「画面の幅が600px以下の場合に、この中に書かれたCSSを適用する」という意味です。

これにより、スマートフォンなどの小さい画面でアクセスした場合に、各要素のサイズや配置が自動的に調整され、見やすく表示されるようになります。

これで、ツールの見た目がぐっと良くなりましたね！いよいよ、ツールの頭脳となるJavaScriptのコーディングに入っていきましょう。

少しのCSSで、グッと使いやすく・見やすくなります！

ほーく
ほーく

JavaScriptで計算ロジックと機能を追加しよう（ツールの心臓部）

いよいよ、このツールのメインとなるJavaScript（JS）の記述です。HTMLで作成した入力値を取得し、計算を行い、結果をHTMLに表示し、さらには履歴を保存する、といったすべての「動き」をJavaScriptで実装します。

先ほどのHTMLファイルの</body>タグの直前にある<script>タグの中に、以下のJavaScriptコードをコピー＆ペーストしてください。

ここがツールの頭脳！動く仕組みをつくっていきましょう！

ほーく
ほーく

JavaScriptファイルの読み込み

<script>タグは、通常</body>タグの直前に配置するのがベストプラクティスとされています。これは、HTML要素がすべて読み込まれてからJavaScriptが実行されるようにするためです。JavaScriptがHTML要素を操作しようとしたときに、まだその要素が読み込まれていない、というエラーを防ぐことができます。

要素の取得

JavaScriptでHTML要素を操作するには、まずその要素を「取得」する必要があります。 document.getElementById('ID名')を使うと、指定したIDを持つHTML要素をJavaScriptの変数として取得できます。例えば、const startTimeInput = document.getElementById('startTime');は、開始時刻の入力欄を取得してstartTimeInputという変数に格納しています。

時刻の計算ロジック

JavaScriptでの時刻計算の肝となるのがDateオブジェクトです。

  • new Date('YYYY/MM/DD HH:MM')
    日付と時刻の文字列からDateオブジェクトを作成します。今回は日付部分が計算に影響しないため、2000/01/01のようなダミーの日付を使っています。
  • getTime()
    Dateオブジェクトが持つメソッドで、1970年1月1日00:00:00 UTCからの経過時間をミリ秒単位で返します。このミリ秒の差分を利用して時間を計算します。
  • 日を跨ぐ計算の対応
    if (endDate < startDate) { endDate.setDate(endDate.getDate() + 1); }の部分が、終了時刻が開始時刻よりも早い場合に、終了時刻を翌日に設定することで、日をまたいだ勤務時間も正しく計算できるようにしています。
  • 休憩時間・時給換算のロジック:
    • includeBreakCheckbox.addEventListener('change', ...)
      チェックボックスの状態が変更されたときに、休憩時間の入力欄の表示/非表示を切り替えるイベントリスナーを設定しています。
    • 休憩時間の文字列（例: "01:00"）を「時間」と「分」に分割し、それらをミリ秒に変換して実働時間から差し引いています。
    • 時給が入力されている場合、純作業時間を時間単位に変換し、時給を掛けることで報酬を算出しています。Math.round()で四捨五入しています。
  • performCalculationOnly()
    この関数は、入力値が変更されたときや、履歴からデータを読み込んだときに、リアルタイムで計算結果を表示するために使われます（履歴は保存しません）。

リアルタイム計算とボタンクリックの連携

  • input.addEventListener('input', performCalculationOnly);
    各入力欄に対してinputイベントリスナーを設定しています。これにより、ユーザーが入力するたびにperformCalculationOnly関数が呼び出され、リアルタイムで計算結果が更新されます。
  • calculateBtn.addEventListener('click', performCalculationAndSaveHistory);
    「計算する」ボタンがクリックされたときにperformCalculationAndSaveHistory関数が呼び出されます。この関数は、計算結果を表示するだけでなく、その計算内容を履歴として保存する役割も担っています。

【重要】ローカルストレージを使った履歴保存機能

ブラウザのlocalStorageは、Webサイトがユーザーのブラウザにデータを保存するための簡単な仕組みです。これにより、ブラウザを閉じたり、インターネット接続がなくてもデータを永続的に保存できます。

  • localStorage.setItem(キー, 値)
    データを保存します。値は文字列である必要があるため、JavaScriptのオブジェクト（今回の履歴データ）はJSON.stringify()を使ってJSON文字列に変換します。
  • localStorage.getItem(キー)
    保存されたデータを読み込みます。読み込んだデータは文字列なので、JSON.parse()を使って元のJavaScriptオブジェクトに戻します。
  • localStorage.removeItem(キー)
    指定したキーのデータを削除します。
  • history.unshift(entry)
    新しい履歴エントリを配列の先頭に追加しています。これにより、最新の履歴がリストの最も上に表示されます。
  • history.splice(index, 1)
    配列から指定したインデックスの要素を削除します。
  • loadHistory()
    ローカルストレージから履歴データを読み込み、HTMLのリスト（ul#history-list）に動的に<li>要素を追加して表示を更新する関数です。
  • addHistoryEventListeners()
    loadHistory()が呼ばれるたびに、新しく生成された履歴アイテム内の「読み込む」ボタンと「削除」ボタンにクリックイベントリスナーを再設定しています。これは、動的に追加された要素には自動的にイベントリスナーが付かないため、非常に重要な処理です。
    • e.target.dataset.index
      クリックされたボタンのdata-index属性の値を取得し、どの履歴アイテムが操作されたかを識別しています。
  • clearAllHistory()
    すべての履歴を削除する際に確認ダイアログ（confirm）を表示し、誤操作を防いでいます。

これで、ツールのすべての機能が完成しました！ブラウザでwork_time_calculator.htmlを開き、実際に使ってみてください。

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

「もっとWebツール開発を学びたい！」と感じたあなたのために、初心者でも安心して取り組めるおすすめの学習リソースを厳選してご紹介します。

書籍で学ぶならこちら！

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

JavaScriptの基礎を体系的に学びたい方におすすめ。
初心者にもわかりやすい丁寧な解説が特徴で、文法だけでなく実践的な使い方も学べます。

確かな力が身につくJavaScript「超」入門 第2版
ＳＢクリエイティブ/狩野祐東

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

Webページの構造（HTML）と見た目（CSS）を、基礎からやさしく学べる一冊。
ツール作りに欠かせない「画面の作り方」が理解できます。

スラスラわかるHTML&CSSのきほん 第3版
ＳＢクリエイティブ/狩野祐東

オンライン講座で効率的に学ぶ！

Udemy（ユーデミー）などのオンライン学習プラットフォーム
世界中の講師が教える動画講座が豊富にあります。自分のペースで学べ、より体系的に知識を深めたい場合におすすめです。
Web開発全般から、特定のJavaScriptフレームワークまで、幅広いコースが見つかります。

これらのリソースを活用して、あなたのWeb開発スキルをさらに向上させましょう！

まとめ

お疲れ様でした！
これであなただけの「シンプルな作業時間・休憩時間計算ツール」が完成しました！HTMLで骨格を作り、CSSで見た目を整え、そしてJavaScriptで計算ロジックと便利な履歴機能を実装しました。自分で書いたコードが実際に動くツールとして機能するのを見ると、大きな達成感がありますよね！

「自分のアイデアを形にする」ことほど、プログラミング学習のモチベーションになることはありません。
今回のツール作成を通して、「ちょっと不便」を「便利」に変えられる感動を、あなた自身で味わってもらえたなら嬉しいです。

【実際に作った時間計算ツールはこちらから使えます】▼

-開発ガイド
-, , , , ,