2015年9月10日コラムCodeCampのJavaScript編も残りわずか。今回は、これまでの知識の習熟度合いを見るための課題「カウントダウンタイマー」を作ってみたのでご紹介します。UP!」と表示するストップボタンを押すとカウントが止まるリセットボタンを押すとカウントが03:00に戻り、カウントが止まるどこにでもある、ごく普通のカウントダウンタイマーですね。意外にも、カウントの処理は簡単だったのですが、スタートボタンを2度クリックすると、秒数早く進んでしまったり、2度クリックしたらストップボタンが効かなくなったり、予想外?のアクションが起こったときの処理の仕方が少し難しかったです。UP!」を表示する数字の表示はdocument.writeではなく、HTMLのp要素に入れて表示する。ストップボタンは、「setInterval」を停止する「clearInterval」メソッドで処理を停止する。リセットボタンクリック時には、count、min、sec変数を使って初期値を計算し、p要素に入れて表示する。ボタンの制御は、イベントハンドラを登録して1つの関数にまとめる。細かい説明は省いていますが、だいたいこんな感じでしょうか。コードを書いているときに、よく起こったのは、変数名が予約語とかぶって正しく書けているのに動かないということ。頭ではわかっていても、意外とやってしまう間違い。変数、関数の命名はなかなか難しい...。あと、少しややこしいのは、数字の頭に表示する「0」の文字。数字の「3」を、「03」と表示させるためには、「3」の前に「0」を埋める処理が必要です。これは「0埋め」とか「ゼロパディング」と呼びます。こちらのページに詳しく解説されていたので、参考までにリンクを貼っておきます。JavaScriptでゼロ埋めする方法あともう一点。わかりづらいグローバル変数iの役割ですが、ボタンが何度も押されると、予期しない動作が起こることがあります。スタートボタンを2回クリックすると、1000ミリ秒間隔でcount_down関数が実行されるという処理が、何度も繰り返されてしまい、カウントダウンの速度がはやくなりました。その他にも、特定の動作を行ったときにおかしな動作が発生しました。上記のようなおかしな動作が起こらないように、変数iを使って制御しています。変数iがないバージョンのサンプルコードを以下に記載したので、興味がある方は、ソースをコピーして動かしてみてください。</div></body></html>カウントダウンタイマーの作り方は以上です。これで、CodeCampのJavaScript編の大きな課題のうちの1つが終了しました。ここは結構苦戦したので、10時間くらいはコードと睨めっこしていましたw1人ではどうしても解決できなかったので、レッスン2回分を消費して無事解決。講師の人に話を聞いて良かったのは、独学では気付きにくい実践で使える知恵を吸収できたことでした。コードが動かないときに、間違っている部分を特定する方法。関数にalert()を入れることで、正しく処理が行われている部分、行われていない部分をチェックし、間違いを特定する、あるいは、GoogleChromeの要素の検証を行って、コードのエラーを検証する、などなど。コードの書き方や知識については、ググればわかりますが、上記のような、作業を進める上での知恵を書いてくれているサイトってあんまりないんですよね。コードを書いていると、「一見正しいように見えるけど、実はどこかが間違っている」という場面に直面し、おかしなコードを探すという作業が頻繁に発生していたので、講師の方に教えて貰った知恵はとても役に立ちました。独学でやるのもアリですが、効率的に学ぶには、その道のプロに聞くことも必要だと実感した次第です。この課題が完成してから、自分の中で少し変化があって、プログラムに対する変な抵抗感がなくなりました。これまでは、コードを書くときに、自信がなかったというか、難しく考えすぎてしまって、手が止まってしまうことがよくあったのですが、徐々にそれがなくなってきたように思います。理解が進んできた感触があるので、引き続き、いろんなものを実際に作ってみて、引き出しを増やしていこうと思います。サイトRareS.(レアズ)様に協賛いただいております。この記事を書いている人gorian91白井祥剛(しらいしょうご)1988年生まれ大阪府在住。難病でも仕事をして収入を得ながら社会にも貢献し、やりたいこともしっかりやる。スタートラインでしかない。必要なのは「新しい文化」を育てる意識を持ち行動し続けること。普通自動車免許を無駄にしてるの?ペーパードライバーを1年続けたら一生ペーパードライバーのままになっちゃいますよ気づいたら100記事。難病や障害は舵の取りづらい船のようなもの。先を予測して丁寧に運転するしか安全な道はない。承認欲求を満たすために、お店を紹介する人は信用できないと思ったサイト内検索プロフィールこんにちは、ショウゴと申します。1988年生まれ大阪府在住の31歳。在宅で仕事をしながらブログを書いたりしています。ベッカー型筋ジストロフィーの当事者ですが、まだ歩けます。他にもええ歳した大人がゲームを楽しむブログ「ショウゴのゲーム部屋」も日々更新中。プロフィールはこちらYouTubeやってますYouTubeでは、私が日常で体験したこと、興味のあること、商品レビューなどの動画をアップしています。難病カフェやってます難病の当事者たちが、病名を問わずに交流できる場「難病カフェ」を大阪で開催しています。筋ジスですが何か?シェアお問合わせTOPへ。