先生と生徒の会話形式で理解しよう

生徒

「イベントの残り時間を表示するカウントダウンタイマーって、自分で作れますか？」

先生

「もちろん作れますよ！PHPとJavaScriptを使って、簡単なカウントダウンタイマーを作る方法を見てみましょう。」

生徒

「PHPって聞いたことはあるけど、何ができるんですか？」

先生

「PHP（ピーエイチピー）は、Webページを動かすためのプログラミング言語です。今回はそのPHPで、タイマーに必要な『未来の時間』を計算してみましょう！」

-

1. PHPとJavaScriptの役割を知ろう

PHPは、サーバーと呼ばれる場所で動くプログラムで、主にWebページの中身（内容）を作るために使います。一方で、JavaScript（ジャバスクリプト）は、パソコンやスマートフォンの画面上で動く言語です。今回のカウントダウンタイマーでは、PHPで終了時間を計算してHTMLに埋め込み、JavaScriptでリアルタイムに数字を動かすという役割分担をします。

2. カウントダウンの終了時間をPHPで作る

まずはPHPを使って、「いつまでカウントダウンするか」という終了時間を作りましょう。たとえば、今から1時間後に終了するタイマーを作るには次のようにします。


<?php
$endTime = time() + 3600; // 現在の時刻に3600秒（1時間）を加える
?>

time()というのは「今の時間」を「1970年からの秒数」で表すPHPの関数です。このようにして、終了時間を作成できます。

3. JavaScriptでカウントダウンを表示する

PHPで作った終了時間をJavaScriptに渡して、画面に数字が減っていくようにします。以下のコードは、HTMLの一部として記述し、カウントダウンの残り時間をリアルタイムで表示します。


<?php $endTime = time() + 3600; ?>
<div id="countdown"></div>
<script>
    const endTime = <?php echo $endTime; ?> * 1000; // JavaScript用にミリ秒へ変換
    function updateCountdown() {
        const now = new Date().getTime();
        const distance = endTime - now;

        if (distance < 0) {
            document.getElementById("countdown").innerHTML = "タイムアップ！";
            return;
        }

        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById("countdown").innerHTML = minutes + "分 " + seconds + "秒";
    }

    setInterval(updateCountdown, 1000); // 1秒ごとに更新
</script>

4. なぜPHPだけではできないの？

PHPはサーバーで動くため、画面上の動きをリアルタイムに変えることができません。カウントダウンタイマーのように、時間が秒単位で動く処理はJavaScriptが得意なんです。PHPはその下準備、つまり「終了時間を作ってHTMLに出す役目」を担っています。

-

5. 初心者がつまづきやすいポイント

time()関数って何？ → これは「今の時間」を秒数で取得する関数です。
ミリ秒ってなに？ → JavaScriptでは、時間をミリ秒（1秒＝1000ミリ秒）で扱います。
表示が更新されない → JavaScriptが正しく読み込まれていない可能性があります。

6. もう少し応用してみよう！終了日を設定する方法

たとえば「2025年12月31日23時59分59秒まで」カウントダウンしたい場合は、PHPで次のように書けます。


<?php
$endTime = strtotime("2025-12-31 23:59:59"); // 特定の日付を指定
?>

strtotime()というPHPの関数は、人が読める日付を機械用の数字に変換する便利なものです。

7. カウントダウンタイマーはどんな場面で使える？

PHPとJavaScriptで作るカウントダウンタイマーは、以下のような場面でよく使われています。

期間限定セールの残り時間表示
イベント開催までのカウントダウン
申込み締切までの残り時間
試験やアンケートの制限時間

プログラミング初心者でも、こうした仕組みを使えば、自分のWebページに「動き」を加えることができるようになります。

まとめ

PHPとJavaScriptを組み合わせて作成するカウントダウンタイマーの仕組みについて、初心者にもわかりやすく丁寧に学ぶことができました。PHPは現在の時間を取得し、終了時刻を計算する役割を担い、一方JavaScriptは実際に画面上で残り時間をリアルタイムに更新する役割を果たします。このようにサーバーサイドとクライアントサイドの役割分担を理解することは、Webプログラミングの基礎を学ぶ上で非常に重要です。

実際にPHPではtime()関数やstrtotime()関数を使って終了時間を秒単位で計算し、JavaScriptではそれを元にして現在時刻との差を計算してカウントダウンを画面に表示します。また、JavaScriptではミリ秒単位で時間を扱うため、PHPから渡すタイムスタンプは* 1000で変換してから利用する必要がある点もポイントです。

さらに、リアルタイムで表示を更新するためにsetIntervalを使って1秒ごとにカウントを進める処理を行うことで、「残り○分○秒」のような見た目を実現できます。この処理を通して、時間の扱い方やブラウザでの描画の仕組みを自然と学べるのもこのカウントダウンタイマーの魅力です。

応用編として紹介されたstrtotime()による日付指定では、「特定の日付と時刻を指定してカウントダウンを始める」といった実用的な場面にも対応可能で、誕生日カウントや年末カウントダウンなどにも応用できます。日付の形式に慣れることで、より複雑な時間管理ができるようになります。

このカウントダウンタイマーの技術は、期間限定セールやイベント告知、応募締切表示などさまざまな実用例があります。初心者のうちからこのような実用的なスクリプトを体験しておくことは、後々のWeb制作の大きな糧となるでしょう。

PHPとJavaScriptの連携を体験しよう

以下は、任意の日時までのカウントダウンを表示する応用例です。


<?php
$endTime = strtotime("2026-01-01 00:00:00");
?>
<div id="countdown"></div>
<script>
    const endTime = <?php echo $endTime; ?> * 1000;
    function updateCountdown() {
        const now = new Date().getTime();
        const distance = endTime - now;
        if (distance < 0) {
            document.getElementById("countdown").innerHTML = "新年おめでとうございます！";
            return;
        }
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        document.getElementById("countdown").innerHTML = days + "日 " + hours + "時間 " + minutes + "分 " + seconds + "秒";
    }
    setInterval(updateCountdown, 1000);
</script>

先生と生徒の振り返り会話

生徒

「今回のカウントダウンタイマー、最初は難しそうに見えたけど、PHPとJavaScriptの役割が分かったらすごく納得できました！」

先生

「その調子です。プログラムは一つ一つの役割を理解すると、全体が見えてきます。今回も時間の管理と画面の表示を分けて考えたのがポイントでしたね。」

生徒

「次は、もっとオシャレなデザインとか、終了時に画像を表示するとかもやってみたいです！」

先生

「いいですね。HTMLやCSSと組み合わせれば、デザインも自由自在になります。どんどんチャレンジしていきましょう！」