CodeCamp（コードキャンプ）のプレミアムコースレビュー・感想

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

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

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

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

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

引用：CodeCamp（コードキャンプ）

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

引用：CodeCamp（コードキャンプ）

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

1 プレミアムコース9日目｜CodeCamp（コードキャンプ）
2 プレミアムコース9日目の感想｜CodeCamp（コードキャンプ）
3 CodeCamp（コードキャンプ）の「プレミアムコース」とは
4 CodeCamp（コードキャンプ）のプレミアムコースレビュー・感想｜記事一覧

プレミアムコース9日目｜CodeCamp（コードキャンプ）

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

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

引用：CodeCamp（コードキャンプ）

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

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

第９章課題（カウントダウンタイマー作成）の予習について
課題クリアに向けたアドバイス
第9回目のレッスンの成果と課題

１.第９章課題（カウントダウンタイマー作成）の予習について

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

ファイル名: timer.html

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

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

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

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

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

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

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

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

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

お疲れ様です！本日もよろしくお願いします。ではちょっとコードを一通り見てもいいですか？

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

なるほど、だいたいわかりました。まずこのご自分で書かれたコードに関してはまずこれで良いと思います。あとは機能面のコードですが、こちらどうなっているか自分で具体的に説明できますか？

一から説明はできません…しかしなんとなくこれでも動くかと思い…これを元に改造していくことで動くプログラムにしていきたいと考えています。

わかりました。これからは、コピペは全く禁止とはいいませんし、自分で動きを確認するためなどにはよいですが、意味の分からないものは極力利用を避けた方がよいと思います。
自分で理解をしていくようにしてみてくださいね。ではここでどのようなことをしたいと思いますか？

すみませんでした。機能としては、まず3分から1秒ずつ引いていく関数を作ることと、その値をしっかり分と秒で返していくことがまず1個め。それからスタートボタンの動きを感知して、3分から1秒ずつ引いていく関数を作動させる機能、ストップボタンの動きでカウントダウンをやめる機能、リセットボタンの動きでまた3分に戻す機能の4つあればタイマー作れそうです。

だいたい合っています。では細かいところを補足しながら、一個ずつ一緒に作ってみますか。

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

（試行錯誤しつつアドバイスもらいながら書いてみる）

次に、要件にあるように、timeが0になった時にTime UP!と表示させるプログラムと、その時の文字の色を赤にするプログラム、カウントダウンを止めるプログラムを書きます。

if文使ってちょっと書いてみます

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

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

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

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

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

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

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

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

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

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

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

第１０章　課題

第１０章　中級課題

プレミアムコース9日目の感想｜CodeCamp（コードキャンプ）

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

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

CodeCampの無料体験を申し込む

CodeCampの評価を見る

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

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

引用：CodeCamp（コードキャンプ）

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

２ヶ月	料金：248,000円（税抜）レッスン回数：２０回受講期間：６０日間週の学習時間目安：２０〜２５時間
４ヶ月	料金：348,000円（税抜）レッスン回数：４０回受講期間：１２０日間週の学習時間目安：１０〜１５時間
６ヶ月	料金：398,000円（税抜）レッスン回数：６０回受講期間：１８０日間週の学習時間目安：５〜１０時間