こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp(コードキャンプ)」でプログラミングを学習している井旗です。
私が受けているコースは「プレミアムコース」。HTML/CSSからJavascript、PHP/MySQL、Photoshop、Illustratorまで、Codecamp(コードキャンプ)で用意されているすべての言語やスキルを自由に組み合わせて自分だけのカリキュラムを組める贅沢なコースです。
受講回数は2ヶ月(20回)、4ヶ月(40回)、6ヶ月(60回)の3つから選べます(今回は2ヶ月間受講します)。
それでは、2018年12月12日に受講した、Codecamp(コードキャンプ)「プレミアムコース」第6回目の学習内容をレビューします。
目次
プレミアムコース6日目|CodeCamp(コードキャンプ)
本日の講師:足谷保典先生
2012年よりフリーランスとして活躍。独立から、お客様よりウェブに関するさまざまな相談を受けシステムの提案から設計・開発を担当。最近では縁あって講演や執筆活動などにも取り組む。担当言語はPHPとJavaScript。以前学校で授業を教えていた経験もあり、教えることはとても好き。
もう、ほぼ固定で教えていただいている足谷先生。以前はPHPのレッスンをしていただいてしたが、もう最近はPHPよりも手強いJavaScriptも教えて頂いています。
PHPもJavaScriptの教材一通り終えたらまた再開しようと思っていますが、また難しくなってくるんだろうな…でも1つずつしっかりやれば、課題だってクリアできるはずだ、まずは愚直にやってみることを貫いて頑張ります。
前回のレッスンからちょっと日数がたってしまいました。
1つ1つのレッスンをしっかり充実させたい思いで、JavaScriptの教材をみながら自分で課題をといて、わからなかったらググったり、本屋行ったり、周りのエンジニアの知り合いに聞いたり…を繰り返して何とか勉強を進めていて、わからないことが溜まってきたらレッスンを受講しようと考えていたからです。
JavaScriptの教科書は、全部で13章あるなか、事前にレッスンの前に8章まで自力で進めておき、途中でつまづいた課題を中心に、JavaScriptを着実に理解していこうと考え今回のレッスンを受講しました。
また、以前PHPで実習課題をやったのですが、そのレビューが帰ってきたので、合わせて実習課題についてもお伝えできればと思います。ということで、以下本日のざっくりとした目次です。
CodeCamp(コードキャンプ)プレミアムコース第6回目のレッスン内容
-
JavaScriptの重要知識「ユーザー定義関数」が理解できなかった…
-
CodeCamp実習課題添削とレビュー!
1.JavaScriptの重要知識「ユーザー定義関数」が理解できなかった…
関数っていろんな言語勉強すると出てきますよね。関数とは何かというと、CodeCampでは「ミキサー」と教えられます。ジュースを作るのが目的だとすると、オレンジ、バナナ、キウイをミキサーに入れてスイッチを押しますよね。このように、素材を受け取り、処理を行い、結果として返す、という処理をするのが関数です。
このとき、素材となるものを「引数」といい、結果を「返り値」と言います。
このような関数は自分で作成することができるのです。これをユーザー定義関数と言います。実際の開発現場では、ユーザー定義関数だけを格納しておくファイルも存在するほど、とても頻繁にかつ大量に使われるものです。つまり、とても重要です。
例として、CodeCampでは以下のようなプログラムを紹介しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> function output_hello(){ document.write('<p>output_hello関数: hello</p>'); } function output_hello_name(name){ document.write('<p>output_hello_name関数: hello ' + name + '</p>'); } function make_hello_name(name){ var str = '<p>make_hello_name関数: hello ' + name + '</p>'; return str; } // output_hello関数実行 output_hello(); // output_hello_name関数実行 output_hello_name('山田'); // make_hello_name関数実行 var hello_name = make_hello_name('鈴木'); document.write(hello_name); </script> |
実行した結果は、
1 2 3 4 5 |
output_hello関数: hello output_hello_name関数: hello 山田 output_hello_name関数: hello 鈴木 |
です。
ユーザー定義関数を実行したいときは、「関数名(); 」で実行することができます。
ユーザー定義関数を使用すると、同じような処理をまとめ、短いスッキリしたプログラムがかけることができます。
例えばこちらもCodeCampのサンプルなのですが、
1 2 3 4 5 6 7 8 9 10 |
function throw_dice(num){ var sum = 0; for (var i = 0; i < num; i++) { // 1〜6の数字を変数sumへ合算 sum += Math.ceil(Math.random() * 6); } return sum; } |
サイコロの個数を引数に、指定数振った場合の合計値を計算するプログラムなのですが、非常にスッキリしていますよね。
非常にスッキリするのはいいのですが、for文と組み合わせたり、何か色々な技術を組み合わせて複雑な関数を作らなければならない時があり、とても困惑しました… 理解の度合いが低すぎて、応用できてないのかも…
とりあえず、どのような使い方があるのかの使用例を出来るだけ多く集めて、実際どのように使われているのかをみながら理解していくほうが良さそうということで、先生にも聞きながらGoogleで使用例を調べました。
また、この関数の章は、課題が複雑で上記の通りfor文を使ったり、複数の変数を定義しながらプログラムを書いたりするので、良いトレーニングになりそうということで、一緒に取り組みました。もちろん事前に挑戦してみてはいたものの、うまく実行できず…
問題自体は、「配列の値から平均値を計算する関数calc_aveを作成してください。作成した関数は以下に示すサンプルに追記し、配列dataの平均値を表示するプログラムを作成してください。」というもの。
平均値を計算しろというものですね。
平均値を計算するユーザー定義関数を作らなければなりません。
1 2 3 4 5 6 7 |
function calc_ave() { for (var i = 0; i < data.length; i++) { sum += data[i]; } var ave = sum / data.length; return ave; } |
このような感じでしょうか。前の配列の章でも課題として出ていたのですが、いまいちよくわからず…だったのですが、結構こういう計算式使うので、今回でちゃんと書けるようになろうと、先生にどういう筋道でプログラムしていくのかを聞きました。
- まず、配列の中にある要素を全部抽出する文をfor文で作ります。
- 合計値を入れる変数を定義し、それに代入演算式で要素を入れます。
- 平均値を入れる変数を定義し、合計値を配列の要素数で割ります。
- 平均値のみ返り値として返します。
このような流れで、一旦ユーザー定義関数は完了です。いちいち変数定義して、入れる、という作業すごく地道です。普段計算する時ってなんとなく頭では理解して計算してしまうんですが、プログラムはそういうわけには行かず、こちらから綿密に指示してやる事が大事ですね。
ここまでできたらあとは、関数を実行して、ウェブに表示させるだけです。
ん〜終わってみれば簡単だけど、一からやってみるとゴールまでのコードが描けなくなる。精進します。
チップスですが、実はJavaScriptも検証ツールを使うことができます。
上記の画像では何も表示されていないのですが、うまくJavaScriptが実行されていなくて、何かしらのエラーが出ていると思われるときは、検証ツールのConsoleというタブをみるといいそうです。
こちらでエラーを確認することができます。検証ツール便利だなぁ!Google Chromeに感謝。
2.CodeCamp実習課題添削とレビュー!
先日提出した、実習課題の添削結果が返ってきました!
結果は… 合格でした!よかった…
CodeCampでは各言語、ある程度知識を習得すると、実習課題というものに取り組むようになります。PHPでは一通りの構文を学習したので、「ひとこと掲示板」を作る実習課題が課されていました。
自分でプログラムを書いて、それがまず正しく動いているのか、また、無駄なコードはないかなどを元に添削をしてくださいます。
一応、コード全体は事前にレッスンで講師の方に確認したりしておりますが、
より厳密に精査した形で返却されます。
課題を提出して、要件をしっかり満たし、エラーなくコードが動けば合格。次のステップへいくことになります。
驚いたのですが、レビューが付いていて、私のコードのどこがよくてどこを改善したほうがいいのかが、とても細かくフィードバック頂けるんです。
実際にいただいたレビューがこちらです。(一部抜粋)
自分では気づかない良さだったり、直したほうがいいよということに関しては、確かにそうだな、というものが多かったです。
ちゃんと評価もしてくださり、ここがだめ、だけではなくこうしたほうが良い、と言ってくれるのでとてもモチベーション維持に繋がりますよね!
きめ細やかなサポートと、教育体制に感謝です。これからも頑張ります!
プレミアムコース6日目の感想|CodeCamp(コードキャンプ)
6回目のレッスンが終わりました。
一回少し挫折したJavaScriptだけあって、今回は気合の入れようが違います。何がなんでも克服して習得してやりたい一心で今学習しているのですが、わからない部分に関してはレッスンの中で講師の先生があらゆる手段で説明してくださるので、とても心強く、また頑張ろうという気持ちになります。まだまだわからないことだらけだけど、これからも頑張ります。
オンラインでプログラミングの学習をすることに対して、不安を感じてらっしゃる方などいらっしゃるかと思いますが、私は今の所不自由なく学習することができていいます。またオンラインの特徴としてとてもフレキシブルにレッスンを受けられ、難なく学習を進められることかと思います。
この記事や無料体験レッスンを通じて、より多くの方が勉強のイメージを膨らませ、エンジニアとしての大事な一歩を踏み出す一助となりましたら幸いです。
CodeCamp(コードキャンプ)の「プレミアムコース」とは
CodeCamp(コードキャンプ)の「プレミアムコース」は、CodeCamp(コードキャンプ)で学習できるすべての言語を選べるコースです。学習の方法(どの言語をどれだけ学ぶのか)についても自分で決められることもあり、複数コースを受講するよりも断然お得な価格設定となっています。
CodeCamp(コードキャンプ)「プレミアムコース」の料金
2ヶ月 |
|
4ヶ月 |
|
6ヶ月 |
|
CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|記事一覧
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|1日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|2日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|3日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|4日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|5日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|6日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|7日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|8日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|9日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|10日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|11日目
- CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|12日目
これから就職した際など、webデザインやエンジニアとしての知識を身に付けたいと思いCodeCamp(コードキャンプ)で必死に勉強中。
オンラインプログラミングスクールでどれだけ力がつき、どのような成果物を作れるようになるのか、日々ワクワクしながらプログラミングの勉強をしています。