Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
実践編

トップページ
JavaScript実践編 - 超詳細解説デジタル時計を作ってみよう(2)

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

みなさまどうも。続きまして前回作ったアルゴリズムを元に実際にソースを記述していきましょう。

というわけで皆様のPCのどこでも構わないのですが適当にフォルダ(ディレクトリ)を作って下さい。

その中に『index.html』、『style.css』、『common.js』を作成しましょう。これら全ての実体はただのテキストファイルですのでテキストファイルを作って『index.html』、『style.css』、『common.js』って名前をつければOKです。

ちなみに『index.html』、『style.css』、『common.js』っていう名前にする必要も特に無いのでお好みがあるのでしたらお好きなファイル名で生成してしまって構いません。要するにHTMLファイルが1つ、CSSファイルが1つ、JSファイルが1つあればなんでもOKでございます。

以下はMacOSの画像ですがこんな感じになりますね。

そしたら最初にHTMLソースを記述していきましょう。

HTMLは基本的なやーつをとりあえず書いておいて、それから他の処理を書いていく事をおすすめします。基本的なやーつは以下のような感じのやーつですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<script src="./common.js"></script>
</body>
</html>

空のHTMLソースなんぞ何も考えずコピペしてしまってOKですのでもし手元にメモして無いのであれば上記のHTMLソースをメモするなりファイルとして保存しておくことをおすすめします。

そしたらタイトル要素をいじって適当にタイトルを付けてしまいましょう。これもお好きなタイトルを付けてしまってOKです。とりあえず『JS de デジタル時計』にしておきますね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS de デジタル時計</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<script src="./common.js"></script>
</body>
</html>

続いてCSSファイルとJSがちゃんと読み込まれているか先に確認しておくと色々楽ちんなのでそれを先にやってしまいましょう。

CSSの読み込み確認はこんな感じにすると楽です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS de デジタル時計</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
CSSテスト！

<script src="./common.js"></script>
</body>
</html>

上記のようにbody要素内に適当に文字を書いておきます。そんでCSSはこうします。

body { color: red;}

そして『index.html』を適当にブラウザで開いて「CSSテスト！」っていう文字が赤字になってればCSSの読み込みはOKです。

続いてJSが読み込まれているかどうかの確認ですがJSはこんな感じにします。

alert("初音ミク");

開発者の味方、安定のalert関数ですね。言うまでもないですが『()』の中は「初音ミク」じゃなくてもなんでもOKでございます。

そしたらさっきの『index.html』を開いたブラウザを適当に更新してみて「初音ミク」ってアラートが出てくればJSの読み込みもOKです。

ちなみにブラウザの開発ツールを開いてコンソール画面とかを見てみればファイルが見つからなかったやつをエラーとして教えてくれるのでそれを使ってしまうのもありですね。上記の方法は昔ながらの方法ってやつになります。最近の著者は大体開発ツールごしに確認していますのでこの辺はお好みでどうぞ。

んで読み込みがOKだったらもういっちょCSSとJSを調整しましょう。

まずCSSですが、昨今は文字コードを『UTF-8』にするのが主流となっていますので以下のように冒頭で宣言をする必要があります。

@charset "utf-8";

これ忘れがちなので気をつけて下さい。まあ最近のブラウザくんはとっても優秀なので忘れても特に問題は無かったりするのは内緒です。

続いてJSには以下のように記述します。

なにやら冒頭に『;』がちょこんと置いてありますね。

「これはなんなんだぜー？」ってお話なんですがJavaScriptは文末の『;』が省略できるので「ファイル容量の節約」とかの目的で全ての処理に『;』を書かずに構築されたフレームワークやライブラリなどがちょいちょい存在していたりします。

んで『;』が無いせいで別の人が書いた処理と自身が書いた処理がくっついちゃったりして極稀にエラーになってしまう場合があるんですね。なのでそれを予防するための『;』になります。

今回は普通のデジタル時計をプログラミングするだけなので他の人が作ったライブラリとかを読み込みすることはしませんが今回は初心者の方向けの解説記事、というわけですので『;』を冒頭に書くサンプルを載せたいと思います。

そしてもし今後、取引先にJSファイルを納品する機会などがありましたら念のため『;』を書いておく事を勧めます。

まあエラーになるケースは極稀、といったレベルですので正直書かなくてもほぼ問題ないって感じなんですが余計なトラブルを『;』1つ、たった1バイトで予防できるので著者は書くようにしていますね。良ければ参考にしてやって下さい。

さてCSSとJSの調整はOKですので続いてHTMLソースを編集していきましょう。

JSからHTML要素を特定する場合で主に使われるのが『id属性』または『class属性』の2つです。

最近はほぼ全てのブラウザに『document.querySelector()』等が実装された影響で様々な条件からHTML要素を特定することができたりするのですが、そんな現在でも安定しててかつ無難なのはやはりid属性またはclass属性の2つになります。なので特に理由がない限りは何も考えずid属性またはclass属性を使ってしまってOKです。

そしてid属性とclass属性で大きく違う点が1つありましたね。そうです、同じid属性は1ページに1つしか置けない、class属性は1ページにいくらでも同じものを記述する事が出来るってやつです。

もしデジタル時計部分を1ページに必ず1つしか置かない、ってことであるならばid属性で定義してしまってOKです。

id属性からHTML要素を取得できる『document.getElementById()』はHTML特定系の処理の中だと一番高速なのでこれが使えるっていうのもメリットですね。

(´-`).｡oO（まあ昨今はPCとかスマホの処理速度が昔とは比べ物にならないくらい高速なのでそこまで大きな差はでません...そこはご注意を...）

しかし今回は練習のため「同じページに複数のデジタル時計を置く可能性がある」という事に設定しておきたいのでclass属性を使ってHTML要素を特定してみましょう。

というわけでどん！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS de デジタル時計</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="js-digital_clock"></div>

<script src="./common.js"></script>
</body>
</html>

適当にdiv要素を作ってそこのclass属性に『js-digital_clock』を値として設定しました。この名前は適当でOKなので皆様のお好きなように設定してしまって下さい。

あとdiv要素じゃなくても良いのですが、div要素は特に意味を持たないなんでもOKな子なのでこういう場合はdiv要素としてしまうのが無難かもです。まあデジタル時計なのでp要素なんかでもOKかもですがdiv要素が桁違いに無難でしょう。

ここでちょっと注目なんですが『js-digital_clock』の頭に『js-』って入ってますよね。

このように「JavaScriptで使ってるクラス名だよー」って伝える目的で頭に『js-』とかを付けるコーディングルールを設けてる企業さんは凄く多いのでこのパターンも覚えておきましょう。今回もそれを蹂躙したいと思います。

さて今回のデジタル時計は『年』、『月』、『日』、『曜日』、『時』、『分』、『秒』を出力するG-SHOCK仕様な時計にしたいのでそれぞれを出力するためのHTML要素を何かしらの方法で用意する必要があります。

まず思いつくのが以下の形だと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS de デジタル時計</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="js-digital_clock">
<span class="year"></span><span class="month"></span><span class="date"></span><span class="hour"></span><span class="minute"></span><span class="second"></span>
</div>

<script src="./common.js"></script>
</body>
</html>

『年』、『月』、『日』、『曜日』、『時』、『分』、『秒』を出力する為のHTML要素を初めからHTMLソースに記述しておくパターンですね。

これでも全然OKというかほとんどの人が上記のパターンで作るのではないかという予感でございますが今回は練習のためHTMLソースは以下でやりたいと思います。ででん！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS de デジタル時計</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="js-digital_clock"></div>

<script src="./common.js"></script>
</body>
</html>

はい、一番最初の状態ですね。『<div class="js-digital_clock"></div>』がポツンと居るだけとなっています。つまり『年』、『月』、『日』、『曜日』、『時』、『分』、『秒』を出力する為のHTML要素が存在していないって事ですね。

「じゃあどうやって出力するねーん！」って思った方が多いと思いますがご安心下さい。JavaScriptには『document.createElement()』っていうHTML要素を生成できる関数(メソッド)が用意されているのでございます。これを使って実装していきましょう。

んでなーぜわざわざ『document.createElement()』を使って実装するのか、というと先程の

<div class="js-digital_clock">
<span class="year"></span><span class="month"></span><span class="date"></span><span class="hour"></span><span class="minute"></span><span class="second"></span>
</div>

は少々HTMLが複雑だったりしますよね。こうHTMLは『<>』と『</>』で入れ子状態にしてくわけなので個数が増えるとかなりカオスになりがちなんです。なので取引先とか現場の好みや考え方によっては「使いづらい」って言われてしまう事があったりします。

まあ複雑になるのがHTML側なのかJS側なのかって違いなのですが納品する相手に合わせて構築方法を変更する事もビジネスマンとして大切な要素なのでございます。

というわけで一旦この辺で記事を切りますね。次の記事ではJavaScriptの注意事項の確認とか著者が良く書くパターンについてご紹介していきたいと思います。ではではこの辺で失礼致します。

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