CodeCamp（コードキャンプ）のデザインマスターコースレビュー・感想｜7日目

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

初めまして。永尾圭と申します。

オンラインでプログラミングのレッスンが受けられるコードキャンプでは、現在７種類の講義を扱っています。おしゃれなWEBサイトを作ってみたいと思っていた私は、７種の講義の中でも、PhotoshopやIllutrator、HTML &CSS、さらにはJavaScriptまで学習できる「デザインマスターコース」を受講することにしました。

私が受けているコースは「デザインマスターコース」です。HTML/CSSなどWebデザインを行う上では欠かせないコーディングの知識に加えて、PhotoshopやIllustratorの使い方までマスターできる内容です。

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

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

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

さらに、CodeCamp（コードキャンプ）の「デザインマスターコース」には厚生労働省の「教育訓練給付制度」が適用されるため、最大6万円のキャッシュバックが受けられる可能性もあり、非常にお得です！！

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

それでは、2018年10月17日に受講した、Codecamp（コードキャンプ）「デザインマスターコース」第7回目の学習内容をレビューします。

デザインマスターコース7日目｜CodeCamp（コードキャンプ）

本日の講師は顔出しNGでした。

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

1.8-7 課題(中級)のチェック

先生よろしくお願いします。今日のレッスンでは課題をチェックしてもらって、その後教科書の内容の解説をしていただきたいと思ってます。

わかりました。それでは早速課題のチェックから始めましょうか。

8-7 課題(中級)

この課題は、テキストボックスに入力した文字を一文字ずつ表示されるようにするものですが、僕の書いたコードだと文字が改行されて表示されてしまいます。

8-7 課題(中級)　永尾作成　修正前

わかりました。このコードでは<div id=””box></div>の中にpタグを追加しようとしていますよね。今の状態だとdivの中に毎回新しくpタグを追加しているので、どんどん改行されて行っているんです

そうなんですね！ではこの場合だと、pタグを追加せずに直接<div id=””box>に書き込むようにすればいいということですか？

そうですね。それで動くはずです。

8-7 課題(中級)　永尾作成　修正後

ちゃんと改行せずに表示するようになりました！

よかったです。

ちなみにこのコードだと、処理を終わらせる命令がないのでテキストと表示された後もずっと動作が続いています。だからテキストを表示し終えたら処理を終わらせる命令が必要ですね。

その場合「if文」を使ってcountが文字の長さ以上になったら処理を終わらせるようにすればいいんですよね。

処理を終わらせる命令って何を書けばいいんですか？

ロジックはおっしゃる通りで大丈夫です。

処理を中断させるには「clearInterval」を使いましょう。

わかりました！

これは後ほど自分で追加しておきます。続いて「１０章　jQuery」について解説していただきたいです。

2.「jQuery」について解説

わかりました。それでは教科書に沿って順番に見ていきましょう。

jQueryはいわゆるフレームワークといって、JavaScriptをより簡潔に書けるようにしたものです。JavaScriptでコードを書いていて「コードが長い」と思ったことがあるかもしれませんが、jQueryを使うと同じ命令をもっと簡単に書けるようになります。

エンジニアの友人にも「JavaScriptよりjQueryを勉強した方がいいよ」と言われました。

そうですね、もちろん一概には言えませんがそれにはいろんな理由があって、今の日本ではとにかくjQueryで書かれているものが多いんです。

だからいち早く実践で使いたければjQueryから学び始めるのが一番手っ取り早いでしょう。

しかし、アメリカではすでに「Angular」など別のフレームワークが人気になっているなど、いづれjQueryが日本で使われなくなる可能性もあるのは知っておいた方がいいかもしれませんね。

しかし、日本ではまだまだjQueryは使われ続けているのでしっかり学んでいきましょう。

１０章　教科書の一部

jQueryを使用するには、ご自身のPCにjQueryをダウンロードするか、もしくは上記のコードを加えることでも使用できます。今回はコードを書いてみましょうか。

早速やってみます。

jQueryの読み込み

そうですね、こちらで大丈夫です。実際にコードを描くときはさらに<script></script>を追加します。

デザインマスターコース7日目の成果と課題｜CodeCamp（コードキャンプ）

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

今回は、課題を修正した後、jQueryについて解説いただきました。

９章が課題を飛ばして授業を進めたので、次回の講義までに９章の課題を終わらせます。

９章課題　「タイマー作成」

デザインマスターコース7日目の感想｜CodeCamp（コードキャンプ）

今回で８章「DOM操作」の課題を全て終了しました。８章を始めた当初は内容がいまいち理解できませんでしたが、課題をこなす度に徐々に理解できるようになりました。

また、睡眠を取るたびに頭の中が整理されコードがよくわかる感覚もあったので、内容が理解できない場合は一度睡眠を取るべきだともわかりました。

次回はタイマー作成です。ハードな内容が予想されるので時間をかけて取り組みたいと思います。

CodeCampの無料体験を申し込む

CodeCamp（コードキャンプ）の「デザインマスターコース」とは

CodeCamp（コードキャンプ）の「デザインマスターコース」は、Webデザイナーになるために必要な知識を基礎から実践まで学べるコースです。

＞＞無料体験レッスン受講で10,000円OFFクーポンプレゼントキャンペーン実施中

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

CodeCamp（コードキャンプ）「デザインマスターコース」の料金

CodeCampの無料体験を申し込む