CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|9日目

こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp(コードキャンプ)」でプログラミングを学習している井旗です。

井旗丈
関東の大学に通っています。

これから就職した際など、webデザインやエンジニアとしての知識を身に付けたいと思いCodeCamp(コードキャンプ)で必死に勉強中。

オンラインプログラミングスクールでどれだけ力がつき、どのような成果物を作れるようになるのか、日々ワクワクしながらプログラミングの勉強をしています。

私が受けているコースは「プレミアムコース」。HTML/CSSからJavascript、PHP/MySQL、Photoshop、Illustratorまで、Codecamp(コードキャンプ)で用意されているすべての言語やスキルを自由に組み合わせて自分だけのカリキュラムを組める贅沢なコースです。

受講回数は2ヶ月(20回)、4ヶ月(40回)、6ヶ月(60回)の3つから選べます(今回は2ヶ月間受講します)。

それでは、2018年12月19日に受講した、Codecamp(コードキャンプ)「プレミアムコース」第9回目の学習内容をレビューします

プレミアムコース9日目|CodeCamp(コードキャンプ)

本日の講師:足谷保典先生

2012年よりフリーランスとして活躍。独立から、お客様よりウェブに関するさまざまな相談を受けシステムの提案から設計・開発を担当。最近では縁あって講演や執筆活動などにも取り組む。担当言語はPHPとJavaScript。以前学校で授業を教えていた経験もあり、教えることはとても好き。

引用:CodeCamp(コードキャンプ)

第9回目のレッスンで学んだことは以下の内容です。

CodeCamp(コードキャンプ)プレミアムコース第9回目のレッスン内容

  1. 第9章課題(カウントダウンタイマー作成)の予習について

  2. 課題クリアに向けたアドバイス

  3. 第9回目のレッスンの成果と課題

1.第9章課題(カウントダウンタイマー作成)の予習について

課題を解いていくにあたり、具体的な要件は以下となります。

ファイル名: timer.html

  1. カウントは03:00からスタートする
  2. スタートボタンを押すと1秒ずつカウントが進む
  3. カウントが00:00になったら「Time UP!」と表示する
  4. ストップボタンを押すとカウントが止まる
  5. リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

自分1人で解けたのは、ほんの一部。ググって他の人のタイマー製作の奮闘記を見ても、ほとんどがカウントアップタイマーであり、完全に困ってしまいました。

とりあえず、動かないけど

第9章の課題に取り組んだ様子

要件定義されていたHTMLの雛形と、それらを取得するJavaScriptだけ書きました。さてここからどうやってタイマー作るか…。

とりあえず、ググって動きそうなプログラムを真似て色々書いてみるか…

100均で売っているタイマーってこれよりももっと高度なプログラムの元あれほど格安で手に入る世の中でよかったと思います。感謝します。先生助けてください…

井旗丈
いつもお世話になっております。

本日はJavaScriptの9章をやっていたのですが、全く歯が立たず、ここまで自分でやり、具体的な機能面に関しては検索して持ってきました。しかし全く動かずどこがどうなっているのかわからなくなってきてしまいました。この後具体的にどうしたらいいかヒントをください。

足谷保典先生
お疲れ様です!本日もよろしくお願いします。ではちょっとコードを一通り見てもいいですか?

足谷先生がじっとコードをみる…
※ぐじゃぐじゃなコードの原本を消してしまい載せられず申し訳ありません><

足谷保典先生
なるほど、だいたいわかりました。まずこのご自分で書かれたコードに関してはまずこれで良いと思います。あとは機能面のコードですが、こちらどうなっているか自分で具体的に説明できますか?
井旗丈
一から説明はできません…しかしなんとなくこれでも動くかと思い…これを元に改造していくことで動くプログラムにしていきたいと考えています。
足谷保典先生
わかりました。これからは、コピペは全く禁止とはいいませんし、自分で動きを確認するためなどにはよいですが、意味の分からないものは極力利用を避けた方がよいと思います。
自分で理解をしていくようにしてみてくださいね。 ではここでどのようなことをしたいと思いますか?
井旗丈
すみませんでした。機能としては、まず3分から1秒ずつ引いていく関数を作ることと、その値をしっかり分と秒で返していくことがまず1個め。それからスタートボタンの動きを感知して、3分から1秒ずつ引いていく関数を作動させる機能、ストップボタンの動きでカウントダウンをやめる機能、リセットボタンの動きでまた3分に戻す機能の4つあればタイマー作れそうです。
足谷保典先生
だいたい合っています。では細かいところを補足しながら、一個ずつ一緒に作ってみますか。

まず3分から1秒ずつ引いていく関数ですが、自分で定義した、time = 180から1秒ずつ引く式、その1秒ずつ引いた値をsecとminに分けてそれぞれ表示するプログラムを書きます。

井旗丈
(試行錯誤しつつアドバイスもらいながら書いてみる)
足谷保典先生
次に、要件にあるように、timeが0になった時にTime UP!と表示させるプログラムと、その時の文字の色を赤にするプログラム、カウントダウンを止めるプログラムを書きます。
井旗丈
if文使ってちょっと書いてみます

第9章の課題で指示通り書いてみたコード

 

2.課題クリアに向けたアドバイス

足谷保典先生
時間が来てしまったので、ちょっとアドバイスだけで失礼します。

次に各ボタンでの操作ですね、まず各ボタンがおされた「イベント」を感知するプログラムを書きますが、習ったと思うので説明は省きます。

イベントリスナーがかけたら、次にそれぞれのイベントが起きた時に実行する機能を関数として書きます。「スタート」であれば、1秒ごとに上のfunction count()をintervalで繰り返し動かすようにします。「ストップ」の場合は、上の関数の実行を停止する関数を定義します。「リセット」であれば、timeの値を初期値に戻し、sec、minそれぞれに分けて表示、スタートのintervalを止めるような関数にします。

井旗丈
スッキリかけました。書き終えてみると結構単純なプログラムだなと思います。まずイベントが何個あるか洗い出して、それぞれに対して機能をつけていく、といった作業でしょうか…一から作れって言われたらこんなに難しいのに。ありがとうございました!

3.第9回目のレッスンの成果と課題

第9回を受講して学んだことと、次回に向けた課題について整理します。

  • intervalの使い方
  • イベントハンドラの使い方
  • 課題:操作を受け取って関数を実行するロジックの理解

今回は、イベントハンドラについて、実際にカウントダウンタイマーを作りながら機能を実装していきました。全くできませんでしたが、もう一回タイマー作れと言われたら今度は作れる気がします。

授業では9章の課題を終えることができました。次回、第10回に向けて、jQuery(第10章)の勉強と課題に取り組みます。

第10章 課題

第10章 中級課題

プレミアムコース9日目の感想|CodeCamp(コードキャンプ)

今回の講義では、まず足谷先生から勉強の際の注意として他人のコードはあまり利用しないようにという注意を頂きました。特に理解していないけど動くコードはインターネット上に多数ありますが、理解しないまま使って動いても勉強にはなりませんし、上達もしません。その事を肝に命じて勉強したいと思います。利用するなら、わかる人にどういう構造になっているか聞きながら勉強したいと思います。

JavaScriptの勉強が一通りおわり、いよいよフレームワークを使った開発に次から入っていきます。しかし使わないとネイティブJavaScriptも忘れてしまうので、自分でも何か作ってみながら復習とさらなる技術を身につけていきます。

CodeCamp(コードキャンプ)の「プレミアムコース」とは

CodeCamp(コードキャンプ)の「プレミアムコース」は、CodeCamp(コードキャンプ)で学習できるすべての言語を選べるコースです。学習の方法(どの言語をどれだけ学ぶのか)についても自分で決められることもあり、複数コースを受講するよりも断然お得な価格設定となっています。

CodeCamp(コードキャンプ)「プレミアムコース」の料金

2ヶ月
  • 料金:248,000円(税抜)
  • レッスン回数:20回
  • 受講期間:60日間
  • 週の学習時間目安:20〜25時間
4ヶ月
  • 料金:348,000円(税抜)
  • レッスン回数:40回
  • 受講期間:120日間
  • 週の学習時間目安:10〜15時間
6ヶ月
  • 料金:398,000円(税抜)
  • レッスン回数:60回
  • 受講期間:180日間
  • 週の学習時間目安:5〜10時間

スクール選びにお困りですか?

編集部
30社以上のプログラミングスクールを取材してきた編集部が、プログラミングスクール選びのアドバイスをさせて頂きます。「スクールがたくさんあり過ぎてどれを選べば良いのか分からない」「どの言語を勉強すれば良い?」「転職に有利なスクールはどこ?」など、どんな質問でもOKです!気軽にご連絡ください★

相談無料

DMM WEBCAMP