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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

もう、ほぼ固定で教えていただいている足谷先生。以前はPHPのレッスンをしていただいてしたが、もう最近はPHPよりも手強いJavaScriptも教えて頂いています。

PHPもJavaScriptの教材一通り終えたらまた再開しようと思っていますが、また難しくなってくるんだろうな…でも１つずつしっかりやれば、課題だってクリアできるはずだ、まずは愚直にやってみることを貫いて頑張ります

以前の記事でもお伝えしましたが、JavaScriptの教科書は、全部で１３章あるなか、事前にレッスンの前に８章まで自力で進めておき、途中でつまづいた課題を中心に、JavaScriptを着実に理解していこうと考え今回のレッスンを受講しました。

今回のレッスンは、前回のレッスンでたどり着かなかった残りの部分について聞いていきます。
ということで、以下本日のざっくりとした目次です。

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

DOM操作を理解する。
課題に沿ってDOM操作をしてみる。

１.DOM操作を理解する。

JavaScriptの醍醐味ともいうべき、DOM。DOMは、Document Object Modelの略称で、HTMLをオブジェクトとして扱うことによって、HTMLの中身を操作することができるものです。ブラウザにHTMLが読み込まれると、JavaScript内でDOMオブジェクトとして複数のオブジェクトが自動的に生成され、メソッドやプロパティを利用することができます。

DOMは、HTMLのhead、bodyなどの各要素に対してオブジェクトとプロパティ、メソッドを定義します。各要素はツリー構造になっており、「window」オブジェクトが最上位の親であるようです。

詳細は下の図のようになっています。どっかでみたことがあるようなないような…

実は今まで使ってきた、document.write()も、自動的に生成されたdocumentオブジェクトのwriteメソッドを利用している、ということでした。これは、window.write()でも同じような結果がウェブに反映されます。が、実際に使ってみないと全然わからないですよね…

では実際に、どのような流れでDOMからHTMLやCSSを操作するのか、課題でもつまづいていたのでちょっと先生と復習してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>DOMからHTMLやCSSを操作</title>
</head>
<body>
   <div>ボックス0</div>
   <div id="box1">ボックス1</div>
   <div id="box2">ボックス2</div>
   <div id="box3">ボックス3</div>
   <script>
       var box1 = document.getElementById('box1'); // id="box1"の要素を取得
       var box2 = document.getElementById('box2'); // id="box2"の要素を取得
       var box3 = document.getElementById('box3'); // id="box3"の要素を取得
       box1.innerHTML = '文字列を入れ替え'; // id="box1"の要素内容を変更
       box2.innerHTML = '<a href="http://codecamp.jp/">CodeCamp</a>'; // id="box2"の要素内容を変更
       box3.style.color = '#ff0000'; // id="box3"の要素CSSを変更
   </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>DOMからHTMLやCSSを操作</title>

</head>

<body>

var box1 = document.getElementById('box1'); // id="box1"の要素を取得

var box2 = document.getElementById('box2'); // id="box2"の要素を取得

var box3 = document.getElementById('box3'); // id="box3"の要素を取得

box1.innerHTML = '文字列を入れ替え'; // id="box1"の要素内容を変更

box2.innerHTML = '<a href="http://codecamp.jp/">CodeCamp</a>'; // id="box2"の要素内容を変更

box3.style.color = '#ff0000'; // id="box3"の要素CSSを変更

</script>

</body>

</html>

上の例コードを使って、ざっくり流れを説明すると、「①要素を取得して、②命令する」という流れです。

①要素を取得する

JavaScriptの中で、HTML要素の様々な値を取得します。そしていつものように、変数の中に入れます。

var box1 = document.getElementById('box1'); // id="box1"の要素を取得
var box2 = document.getElementById('box2'); // id="box2"の要素を取得
var box3 = document.getElementById('box3'); // id="box3"の要素を取得

var box1 = document.getElementById('box1'); // id="box1"の要素を取得

var box2 = document.getElementById('box2'); // id="box2"の要素を取得

var box3 = document.getElementById('box3'); // id="box3"の要素を取得

このような感じですね。HTMLの中で使用されているbox1, 2, 3の要素を取得し、JavaScriptのbox1という要素に入れます。

②命令する

Javascriptで用意してた変数には、DOM操作で取得したHTMLの要素が入っています。この要素に対し、プロパティを使って変更を加えていくのが命令操作です。

やり方は簡単で、変数名.プロパティで操作が可能です。

innerHTMLでは、文字列を入れ替えることができ、要素の内容も変更可能です。

またCSSの編集をしたいときは、.style(.color)とプロパティを指定する事で可能になります。()の中には、変更したい内容を指定します。

プロパティ操作後出力される値は以下の通りです。

ここからが難しくなります。

マウスクリックなどの処理を読み取り、このようなイベントが起きた時に特定の処理を命令することができることができるものがあります。

イベントの発生と同時に要素の作成をしたり、または一定の間隔で処理を繰り返したりする命令ができます。

これらを踏まえて、CodeCampの課題として出されていた以下の課題に取り組んでいましたが、いろんな処理を複数に渡っての文章を書いていると困惑しますね…

URL名とURLが入力されたら、入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成してください。
「背景黒」ボタンを押すと、ページ全体の背景色が黒で文字色が白、「背景白」ボタンを押すと、ページ全体の背景色が白で文字色が黒となるようプログラムを追記してください。

2.課題に沿ってDOM操作をしてみる。

レッスン中に取り組んだ課題は、主に①の「URL名とURLが入力されたら、入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成してください。」というものでした。

処理的にはそれほど難しくなく、構想もちゃんと練りながら課題に当たっていたのですが、URLが設定されたa要素をどうやって追加しようか悩んでおりました。

まずは、基礎通りにhtmlを無駄なく書く事、値を受け取るまでのプログラムを書く事、値を処理する命令をプログラムする事、を徹底して課題に当たることにしました。

<script>
       function add_element() {
           var link = document.getElementById('link');
           var url_text = document.getElementById('url_text');
           var box = document.getElementById('box');
           // a要素を作成
           var element_p = document.createElement('a');
           // 作成したa要素の内容を設定
           element_p.innerHTML = link.value;
           element_p.href = url_text.value;
           // div要素に作成したp要素を追加
           box.appendChild(element_p);
       }
       window.onload = function() {
           var add = document.getElementById('add');
           add.addEventListener('click', add_element, false);
       }
</script>



リンク名：<input id="link" type="text" value="">
URL：<input id="url_text" type='text' value="" >
<button id="add">リンクを追加</button>
<div id="box"></div>

function add_element() {

var link = document.getElementById('link');

var url_text = document.getElementById('url_text');

var box = document.getElementById('box');

// a要素を作成

var element_p = document.createElement('a');

// 作成したa要素の内容を設定

element_p.innerHTML = link.value;

element_p.href = url_text.value;

// div要素に作成したp要素を追加

box.appendChild(element_p);

}

window.onload = function() {

var add = document.getElementById('add');

add.addEventListener('click', add_element, false);

}

</script>

リンク名：<input id="link" type="text" value="">

URL：<input id="url_text" type='text' value="" >

<button id="add">リンクを追加</button>

完成したコードはこちらのようになっております。

HTMLでは、リンク名を入力するテキストボックス、URLを入力するテキストボックス、また、DOM操作で作成したa要素を表示するためのdivで作ったボックスを用意します。

add_element関数でそれぞれの要素を受け取り、a要素を作成、div要素に反映する関数を定義します。

ここでa要素の中身として、hrefの設定方法がわからず苦戦していました。おそらくググったらすぐに出てくるのですが、いくらググっても理解があまり理解できず、正解にたどり着きませんでした…

深く理解していなかったのですが、先生にHTML要素の具体的な設定方法を教えてもらい、なんとか反映に成功。

基礎から教えていただき、なんとか課題をクリアすることができました。。

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

７回目のレッスンが終わりました。

やはり自分で与えられた課題をプログラムすることは難しいですね。しかし、基本は同じというか、しっかりやり方に沿って、必要な機能を肉付けしていくことが大事だなと今回のレッスンで実感しました。まだまだできることは少ないですが、これからも課題を解いていったり、自分で作ってみたりしながら、学習したことを使える知識にするべく邁進していきたいと思います。

オンラインでプログラミングの学習をすることに対して、不安を感じてらっしゃる方などいらっしゃるかと思いますが、私は今の所不自由なく学習することができていいます。またオンラインの特徴としてとてもフレキシブルにレッスンを受けられ、難なく学習を進められることかと思います。

この記事や無料体験レッスンを通じて、より多くの方が勉強のイメージを膨らませ、エンジニアとしての大事な一歩を踏み出す一助となりましたら幸いです。

CodeCampの無料体験を申し込む

CodeCampの評価を見る

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

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

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

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

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