256times 第0期の振り返り【課題#03】
256times 0期卒業から約2ヶ月が経ちました。
卒業後は新たにPHPやMySQLに挑戦中で、データベースと繋ぐ難しさに唸っている日々です。
さて、256times 1期生の方々は、明々後日6/19（水）に成果発表会を控えているそうです。1期生が卒業するまでに0期の振り返りを終えるのが目標なので、急ピッチで書きたいと思います！
前回までの振り返りはこちら。
01. 【感想】256times第0期を卒業した今思うこと
02. 256timesの振り返り【課題選考】
03. 256timesの振り返り【課題#01】
04. 256timesの振り返り【課題#02】
※あくまでも私の個人的な感想です。
※第0期のカリキュラムを通しての感想です。必ずしも今後も同じカリキュラムとは限りませんので、ご了承下さい。
では、どんどんいきます。
■オフ会＆懇親会（2/13）
このオフ会では、事前に予告されていたとおり「その場で出された課題を満たすコードを解く」という課題が出されました。
内容は「input type="text"に入力したテキストを、button押したらリスト追加する」的な指示だったのですが…。
inputに入力したテキストって、どうやって取るの…？！
私まだやったことない…！！！（はず）
てな具合で、焦る焦る。
わからなければネットで調べてOKとも言われたのですが、それでも私は時間内にクリアできませんでした。（受講者10名中4名がクリア）
ユーザーとして普段使うwebサービスには、当たり前の機能であるにも関わらず、自分はまだそんなこともできないのか…先が長いな…。
と思いつつ、悔しかったので、懇親会から帰宅後に色々調べて再提出。
input.value、もう一生忘れません。（笑）
↓256timesの公式noteでも、この日の話が出ていました。
■課題#03 『自分のアプリ80%完成＆他の人のコードを解読』
課題#03（2/13-2/26）
・自分のアプリ80%完成。もちろん@taguchiさんのレビューを受けながら。（ここで進捗管理用に初めてGitHubが登場。）
・5人×2チームに分かれて、チーム内の他のメンバーの80%完成コードに1行ずつ処理内容説明のコメントをつける。
今回の課題でポイントだったのは、他のメンバーのためにも、自分の80%アプリを早めに完成させねばならぬところ。なんとなく受講者同士の連帯感が生まれたと思います。（私は当初の計画よりも完成が遅れてしまった側ですが。泣）
私のアプリ80％完成版に追加実装した主な機能
・ 手みやげのお気に入り登録ができる。
・タブメニューで検索/お気に入りページを切り替える。
・手みやげ毎に画像も表示できるようにする。
この２週間は、肝となる機能はできる限り自力で動かすぞ…！という強い思いで臨みました。（前の2週間では、検索機能の取っ掛かりのデモを早々に@taguchiさんにお願いしてしまったので…。）
■この2週間のメモ、学び＆気づき
・GitHubはギットハブと読む。
・paddingは継承されない。
・classNameは非推奨。
・不要なセレクタは削ること。
（文書内に1つしかないクラスなどは、ul.menuでなく.menuだけでOK）
・タブメニューの表示/非表示の切り替え実装に時間がかかった。
・セレクトボックスのスタイリングをドヤ顔でするも、「フォーム部品のスタイリングは割と難しい＆カスタマイズしすぎるとユーザーが何がなんだかわからなくなるので、なるべくデフォルトのスタイルのままのほうが良い。ブラウザ毎の独自のスタイルに全部対応していくのも大変。」と教わる。
・<button>にdisplay: block; とmargin: auto;を指定して中央寄せにできる。
・比較演算子は==ではなく===を使う。
・オブジェクトに画像情報を持たせたいなら、画像URLを指定すればOK。
・真偽値の反転は論理NOT(!)でスマートに書ける。
true/falseのfalseと見ることのできる式には、null、0、空文字列 ("")、undefined も含まれる。
・何度か書く処理は関数でまとめましょうとサンプルをいただいたら、自分のコードが260行→160行に減ったので衝撃を受ける。
・画像読み込み時に画面がカクカクするのを防ぐため、あらかじめ画像表示領域サイズをCSSで指定しておくと、領域をブラウザが確保してくれるのでカクカクしないと教わる。
・return li; が「liを返す」という意味を理解。
・早期リターン
return;とした時点で、関数の実行が即座に終了する。
・innerHTMLはセキュリティ上あまりよろしくない。
80%完成版はInnerHTMLで実装→100%で他の書き方に修正することに。
・人のレポジトリを誤ってcloseしてしまった…。
・ようやく学習メモを取り始める。（知識定着へ向けて）
・お気に入り機能を、自分なりに動かすことができた！！！！！
3〜4日くらい光が差しては消えて進まずで辛かったけど、動かせた時めっちゃ嬉しかった。手みやげの各オブジェクトにお気に入り真偽値を持たせて、ハートアイコンクリックで（1）classの付替(アイコンの色)と、（2）お気に入り状態の真偽値切替の2つが切り替えられるように。
・お気に入り情報がtrueのものだけを抽出して表示もできるようになる。
・1000ミリ秒という単位に、システムの正解すごーいってなる。
・hogeのことをようやく理解。
・人のコード解読＆処理内容のコメント書く作業は、本当に勉強になる。なぜなら勉強しないと全くコメントが書けないから…！MDNと睨めっこ。
・毎日必死でプログラミング勉強してたら、2ヶ月間給料日が気にならなかった。プログラミングはコスパ最強の趣味！
■課題＃03のビフォア・アフター
・ビフォア（20%完成版）
・アフター（80%完成版）
■まとめ
この2週間で特に大変だったことは、お気に入り機能の実装と他の人のコードを解読することです。
特に、お気に入り機能における、裏と表の情報をどう連動させるかを掴むまでに相当時間がかかりました。
・お気に入り真偽値＝裏で持っている情報。
・お気に入りアイコン＝表に見える情報。
当初は、表に見えているお気に入りアイコンに、手みやげ情報を詰め込まねば！でも、どうやって？と試行錯誤していました。（笑）
また、この頃から、一度習った知識の定着と応用が自分なりの課題になりました。
以上、まだまだ振り返りは続きます…！