“稼ぐ”ってオモロい
-38歳元教員がWeb系フリーランスに転身した物語-
プログラミング

【Front Hacks】−第14章オブジェクト指向編−レビュー。

さて、今日も学習が進んだのでレビューします。フロントハックス がどのような教材なのか気になる方は必見です。やっと後半に入りました。案の定、レベルは高くなってきていますが、踏ん張りどころです。

オブジェクト指向とは

新しい章に入ると、まず概念の説明が始まります。第14章は「オブジェクト指向」でした。簡単にいうと、プログラミングにおける「大量複製機能」でしょうか。

みなさんポケモンはご存知だと思いますが、キャラクターの種類は何百何千とありますよね。でも、総称していうと「モンスター」です。

「モンスター」というカテゴリーはどのキャラクターも同じですが、顔の形、体の色、体力、必殺技、etc…。それぞれ個性が違います。そして、キャラクターごとに違った必殺技を出します。

これらのキャラクターを全て個別に作っていたのでは、とても手間がかかる作業になります。だからまず、「モンスター」という雛形を作っておいて、これを大量にコピーして、顔の形や必殺技などの個性を加えていくのです。

いかがだったでしょうか?わかりましたか?・・・?

ですよね!難しいですよね!?なぜなら、「僕の説明だから」です。

今の説明は、学習したことを「僕の表現と例え」で書きました。講師のつよぽん先生はもっと分かりやすい言葉とスライドで教えてくれています。

オブジェクト指向についてあまり知識のなかった僕が、下手なりに例を挙げて説明できるくらい、ビデオ教材は分かりやすい教え方でした。最初の概念でつまづくと、後に何を聞いても呪文に見えてくるのがプログラミング なので、イメージをクリアにするのはとても大切なことです。

クラスとインスタンスの概念

オブジェクト指向のイメージがついたら、あとはその概念にプログラミング用語を紐つけていきます。

先ほどの「モンスター」は「クラス」,「雛形をコピーし、個性が違うモンスターたち」は「インスタンス」と呼びます。

つよぽん先生は、クラストインスタンスの関係を車で解説してくれています。これがかなり頭に入ります。ノートに記したので参考にどうぞ。説明がわかりやすいので、自分なりにまとめて書くことができました。

クラスとインスタンスの作り方

概念と用語が分かったので、実際の書き方の演習になりました。

class Monster {
constructor(name,color,skill){
this.name = name;
this.color = color;
this.skill = skill;
};
}
const monster1 = new Monster(“ピカチュウ”,”黄色”,”サンダー”)

習ったことを自分でアレンジするとこんな感じになります。初心者の方は、何ぞやと思いますが、しっかりと説明を聞いてオブジェクト指向の概念がわかっていればそんなに難しいものではありません。

Monsterが「クラス名」 monster1が「インスタンス名」になります。インスタンスはいくらでも増やせますね。

インスタンスメソッドの作り方

ここら辺からは、結構難しくなってきます。僕も混乱する「引数」です。ビデオの内容では、まずスライドで説明をしてから、実際に挙動を確かめる形で進んで行きますので、ビデオを止めるなり、いったん流して自分で書いてみるなどして、定着を図ります。僕の場合は、ビデオを途中で止めて、教えられたことをノートに記してまとめる勉強法です。

引数を理解できれば、プログラミングの“コツ”を掴めるような気がしています。

まだうまく説明できていないので、理解は浅いような気がします。

でも、つよぽん先生は、しっかりと言葉にして説明してくれますよ。

経験上、100%理解ができていなくても、前に進むことをお勧めします。

そうすれば、わかるものからどんどん吸収していき、いつか「あっ、そういことか」とわかってしまうことが度々あるからです。

明日になるのか、1週間後になるのかはわかりませんが、とにかく、時間が経ったらすんなりわかってしまうというのがプログラミング学習です!

エクササイズ

オブジェクト指向について1通り学んだので、アウトプット演習です。ステップ4は比較的易しかったのですが、ステップ6の課題が結構難しかったです。(つよぽん先生厳しー!!)

理由としては、新しい「関数」が出てきたからです。オブジェクト指向のクラスやインスタンスの書き方に集中してきたので、久しぶりの条件分岐や、あたらしい関数はとにかくパニックになって、自分ではコードを書き出すことができませんでした。

まあ、それで凹むのはやめて、つよぽん先生の解答を真似しながらコードを書きました。不思議とできている感が出るので、楽しいですよ。ちなみに、キッチンタイマーを作る演習でした。

まとめ

今回は「フロントハックス 第14章 ステップ1〜ステップ6」までの体験レビューでした。他の記事でもよく言っているのですが、プロゲートで1回以上は触れておいていたほうがいいですよ。

その方が、なんとなくわかっていたつもりの概念を、つよぽん先生が言語化してくれて、確かな概念として結びつきますので。

フロントハックス が気になった方はこちら以下からどうぞ

-FrontHacks- フロントエンドプログラミング

ABOUT ME
みやげん
アラフォーからプログラミングを学び独立。Webスキルを身につけて、個人で稼ぐ方法を発信します。
無料メール講座