こんにちは、みやげんです。今回も、プログラミング教材【FrontHacks】が気になっている方に向けて、どんな内容かイメージできるように、実際に受講している立場からお伝えします。
第１３章オブジェクト編 step1 ~ step9 の概要。
step1オブジェクトとは
オブジェクトの概念を説明してくれます。情報（データ）を保管しておく箱のようなイメージです。また、配列との違いもわかります。順番は持たない。key と value によって情報が格納されています。おそらく、この記事を読んでくれているいる方は初心者の方ですので、「なんじゃそりゃ？」と思われるのも仕方がないのですが、僕が伝えたいのは、その「？」がビデオを見ることによって理解できますよ。ということです。
人間の情報（名前・身長・国籍など）を配列と、オブジェクトでのデータ保管の仕方の違いについても理解できます。具体的に、配列には順番があるのですが、オブジェクトにはキーがあるので順番に関係なく情報を保管・
step 2 オブジェクトの作成方法
const humanInfo {
名前：“tozan”
性別：“男”
国籍：”日本”
}
上記の書き方がオブジェクトの一般的な書き方。を教えてくれるシンプルな内容でした。
step 3 オブジェクトの値を取得・追加・削除する
オブジェクト（＝情報の箱）の値を変更できる。というレクチャーです。
取得方法 → オブジェクト（＝変数名）．Key名
更新方法 → オブジェクト．Key ＝ “新value名”
削除方法 → delete オブジェクト．Key
↑上記の意味を動画で説明してくれます。（やっぱり書かれているものだけで理解するより、音声で説明がついている方が理解が速いですね。
step 4 オブジェクトで猫をつくる
これまでの知識のアウトプット課題でした。初心者の僕でも，比較的簡単に書けました↓
const cat = { name:”にゃ酢丸”, age: 2, sex:”オス”}
console.log(cat);cat.owner = ‘tozan-miyage’;
console.log(cat);cat.age = cat.age + 1;
console.log(cat);delete cat.owner;
console.log(cat);console.log(cat.name);}
猫をつくる・・・ではなくて、「猫の情報をつくる」ですかね。細かくてすんません。つよぽん先生。
step5 オブジェクトと配列を入れ子にする
ちょっと難しくなりましたが、挫折するほどではない内容です。要は、配列の中に、オブジェクトがあるよ。ということですね。
小学校の学級で例えると、学年には１年生から６年生までのオブジェクトがあって，各学年に「何組」という配列があるような感じです。またその中に男女の出席番号という配列もありますよね。イメージはそんな感じです。
step6 配列とオブジェクトでタイムラインを作る
ここが【FrontHacks】の良いところ。学びのアウトプットです。まずは自分で課題にチャレンジ。step4とはレベルが違いました。。。難しかったです。自分で悩んで、間違ってもいいから頑張った後は、つよぽん先生の答え合わせを見ましょう。ただ見るだけとは全然理解が違います。悩みに悩んだので、つよぽん先生のレクチャーが頭の中に入ってくる入ってくる！半分は当たってますが、それでは動かないのがプログラミング。残りの５０％は見様見真似で実装します。なんとかクリアできました。
step7 メソッドを作成する
わからないから受講しているのに、わからない言葉で説明されてもわかりませんよね。でもつよぽん先生はわかりやすい言葉を選んでくれています。「メソッド」とは、
オブジェクトに属する関数のことです。
オブジェクトって何？関数って何？
こうなると、また難しくなりますけど。関数とはいわば「自動計算・処理システム」というところでしょうか。先ほど学校の組織で例えたので同じように説明すると、、、
１年生から６年生まではオブジェクトでした。そこで、１年生は、「運動場の掃除」の担当、２年生は「体育館掃除の担当」というふうに分けます。その「担当」がプログラミングでいう処理であり、「関数」です。あとは、この処理を誰がやるかと人を当てはめていけば、処理が実行されますね。
オブジェクトに属していない関数を関数。オブジェクトに属している関数をメソッドというのです。
確認します。単独の「運動場の掃除」だとただの関数。「１年生が受け持っている運動場の掃除」だと、メソッドです。おわかり頂けましたか！？
step8 オブジェクトのthis【アロー関数に注意】
ここは・・・っっっ！僕の挫折ポイントでした。１回目の視聴では理解できなかった・・・。２回目にチャレンジ・・・っっっやっぱり難しいですね。。。レビューできない(￣▽￣)。thisのイメージが僕自身の中にないのです。。。んー、とりあえず、まだ慣れていないだけなので、先に進みましょう！また見るからね！ 目指せ！リライト。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
リライトします。（翌日）
３周目でやっと分かりました。５分程度の動画なので、そんなに時間はかかりません。thisの挙動の説明です。とは、言っても、かなり長くなる！ビデオ貼り付けたいけど有料商材だからだめですし！でも伝えたいので、同じく初心者に説明をしてくれているサイトを貼り付けます。↓
https://www.sejuku.net/blog/29389
step9 thisとメソッドを使ってイテレーションメソッドを自作する
時間がきてしまった。今日は時間切れ。目指せ！リライト。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
３日後です。リライトします。
正直、難しかったです。自分のアロー関数とコールバック関数の認識の甘さが浮き彫りになる課題。さらに加えてmap やfilter メソッドの知識も絞り出さないといけないため、かなり苦労します。わからないところは質問する前にぐぐる。これができなければ、エンジニアとしてはちょっと意識が低い。だからググってみると。あるんです。記事。こちら→https://www.sejuku.net/blog/21812
侍エンジニア塾のSamuraiBlogがオススメです。MDNは、専門用語が多すぎて、自分のような初心者にはまだ早い。「わからない言葉を説明する言葉がわからない」状態です。
その点、侍ブログは一般的に使われる言葉で、JavaScript map のように、言語と、メソッド名を入れるとピンポイントで解説がヒットします。
ですから、【フロントハックス 】でつまづきそうな時は、【侍ブログ】で補充。をオススメします。ビデオだと、どの章の何分何秒あたりだったかはまず覚えていませんし、自作のノートも、どのページだったのか当たりをつけるのも多少時間がかかります。（ただ、自作のノートは作った方がいいですよ。見るだけよりかなり頭にインプットされます。）
今回は、かなりカンニングクリアということになりました。しょうがない、まだ初心者を抜け切れていないことを受け止めます。でも、つよぽん先生の解説通りに手を動かせば、同じ結果が出るので、とにかく理解できるまで続けるのみですね。
僕の予想では、「何か作る」時に、基礎の学習がつながると思います。「こういう使い方をするのね！」と。アハ体験できますように！
まとめ
学んだことをアウトプットすることがテーマのこのブログ。フロントハックス を通してフロントエンド エンジニアを目指す僕が、この教材を気に入ってる点の１つを教えます。
・講師のつよぽん先生が現場で使うよ・使わないよと教えてくれる。
現役のエンジニアの方が膨大にある技術や知識の中から、実際に必要なものを選んでくれていることに感謝です。僕は、本を見ても「何も入ってこなかった」です。あせりました。でも、諦めずに自分にあった教材はないかなと探しまわってフロントハックス に巡り合えました。もちろん、難しくてスルーするところも今の僕にはありますが、本に比べたら全然比になりません。
まだまだ未熟者ですが、かならずや熟者となれるよう、日々勉強するのみです。
ありがとうございました。
