超詳細解説 デジタル時計を作ってみよう(1)

みなさまどうもおはこんばんにちは。

初めましての方は初めまして、どこかの記事でお会いした方はまたお会い出来て大変光栄でございます。こちらはJavaScriptの実践編のコーナーでございます。ようこそおいで下さいました。

さて、こちらのコーナーではこれまで紹介してきたJavaScriptを使ったり使わなかったりして色々と実践向きな内容を紹介していきたいと思います。

簡単なものから難しいものまで幅広く紹介して行こうと思いますのでHTML、CSS、JavaScriptの基本は抑えておくようにしたほうが良いかもしれません。やはりちんぷんかんぷんになっては面白みがなくて続けられなかったりしがちですからね。

「当サイトで勉強したいぜぇ」っていう超絶イケメンな方は
『HTML入門編』、
『CSS入門編』、
『CSS中級編』、
『JavaScript入門編』、
『JavaScript中級編』、
『JavaScript応用編』
あたりを読み進めて頂ければOKかなと存じます。特に『JavaScript入門編』と『JavaScript中級編』は必ず抑えておくようにして下さい。

ではやっていきましょう。今回作成するものは『デジタル時計』でございます。

んでなーぜデジタル時計を作成するかといいますと、著者の独断と偏見で「入門として最適である(ｷﾘｯ」と考えているからでございます。他に理由はございません。

というのもここ最近のJavaScriptは『Node.js』などの登場でサーバー側でも実行させる事が増えてきているわけなんですが、JavaScriptは基本的にウェブブラウザで実行させる言語です。

ウェブブラウザっていうのはGUI、グラフィックありきのソフトウェアなのでやはり「見た目を変える」っていうのが処理として一番分かりやすかったりするんですよね。

そんでもって見た目を変える処理は沢山あるわけですが、その中でも『時計』というのは
「数値等を受け取ってそれを四則演算などを使って処理」、
「さらにその結果を見やすいように処理を加えて出力」、
「さらにそれに伴うHTML要素の特定と変更」、
「さらにそれらを一定時間ごとに処理を行わせるループ」、
「時間差で実行させるが故のデータ保持状況の変化」
という沢山の基礎的な練習要素が詰まった非常に素晴らしいものになるのでございます。

そして今回は初心者の方向けに超絶特化した解説をしていきたいと思いますのでデジタル時計を観察したりして動作を確認してさらにJavaScriptに用意されている処理を調べてそこから『アルゴリズム』を構築するって流れをちょーーー細かく一緒にやってみることにしましょう。

さらにプログラミングでやりがちなミスなどもあえてやっていこうと思いますので当サイトによせられる質問で一番多い「プログラムの基礎は分かったけどそこから先どうすれば良いのか分からないよぉ…(´･ω･`)」を解決するお力添えになれれば幸いでございます。

では早速ですが完成形をどどん！

完成サンプルを見る

今回皆様にはこれを作って頂こうと思います。まあ超絶シンプルなデジタル時計でございますね。デザインは著者が適当に組んだだけですので皆様のお好きなようにCSSとかをいじってもらったりして構築して頂ければ幸いです。

ではまず『デジタル時計』を作成するにあたって実物のデジタル時計、その中でも特に動作部分を色々と観察したり想像したりしてみましょう。

皆様のPCとかスマホとかの時計部分を観察するも良し、お手元の腕時計を観察するも良し、著者はG-SHOCK大好きマンでございますのでデジタルなG-SHOCKくんを観察して頂けると大変嬉しゅうございます。

さてデジタル時計の動作を観察すると

『何らかの形で現在の時刻(最初の時刻)を取得する』
↓
『それから一定周期で時刻を更新』
↓
『その内容を人間が目視できるよう文字等で可視化して出力』
↓
『最初に戻って繰り返す』

というような処理を行っているのが確認できたと思います。

ではこれからこの処理を参考にプログラミングをしていきましょう…と言いたいとこですが少しお待ち頂きたいと思います。

プログラミングを開始する前に「目的の処理を達成するために必要な機能があるかどうか」を前もって確認する必要があります。理由は後述しますのでとりあえずそれの確認をしていきましょう。

まず一番最初に確認が必要な事は「現在の時刻情報を何らかの方法で取得できるかどうか」という事です。

もしこれが不可能であるならば「使用しているユーザーさんに現在時刻を入力してもらってその時刻を元に一定周期で表示を切り替える」という方向に変更する必要があります。

これはちょうど電波やGPSを受信して自動で時刻修正を行う機能の無い昔ながらのデジタル時計に対して行う「時計合わせ」って作業に該当しますね。

なのでJavaScriptでそれが可能なのかネットで検索してみたり辞書や参考書を開いてみたりして少し調べてみましょう。

すると『Date』っていう処理が用意されているのを見つけられたと思います。これを使えば現在時刻を取得することができそうですね。

そんでもって次に確認が必要な情報は「一定時間ごとに処理を実行させる事ができるかどうか」ということになるのでそれも調べてみましょう。

というのも、皆様が普段使っているデジタル時計って1秒に1回ずつ表示が変わって現在時刻を教えてくれますよね。これはつまり「一定期間ごとになんらかの処理を行って表示を変えている」ってことになるので「一定時間ごとに処理を実行させる機能」は時計を作るにあたっての必須事項だったりします。

んで調べてみるとJavaScriptには一定時間ごとに処理を行ってくれる『setInterval()』って処理が見つかると思います。これを使えばイケそうですね。

んでさらに「なんらかの形で文字とか画像とかを表示できる機能」があるかどうかを確かめましょう。これは『デジタル時計の液晶画面』に該当します。現在時刻が分かってもそれをなんらかの形で表示して可視化することが出来なければ人が使うデジタル時計としては使えませんからね。

まあこれに関してはウェブブラウザで実行させるJavaScriptくんなので調べる必要のない情報ですね。文字だろうと画像だろうと余裕で出力可能です。

これで大体必要な情報が集まってきました。

このように「目的を達成するために必要になるであろう機能を前もって確認する」ということもアルゴリズムの構築に置いて非常に重要です。

もし機能が足りなかったりすると目的を達成出来ない事態におちいってしまう事請け合いなので「作業前にちゃんとこの辺確認しておく」って習慣を持っておくと良いかもしれません。

取引先から「こんな処理を作ってくれよん」って言われた時になにも調べずに「はい！分かりました！がんばりマス！」ってお返事しちゃって結局作れなかったりするととっても怒られちゃうので皆様も気をつけましょう。

まあ「機能が無いならその機能を作れば良いじゃない」って10代の著者が言ってましたので逆にその足りない機能を売りつけるっていう逆転の錬金術を行うことも可能ですのでここは皆様の手腕でお好きなようにして頂ければと思います。

というわけで基本的なアルゴリズムと下準備はこのような形で考えて構築していく感じになります。このアルゴリズムの作り方は人それぞれのやり方があり、今回はあくまでも『著者のやり方の1つ』に過ぎませんのでそこはご了承下さい。

さて、では次の記事で実際にJavaScriptとかHTMLとかCSSとかをガリガリを書いていきましょう。

ではこの辺で失礼致します。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

次の記事へ

Tweet

シェア