【第１・２週】プログラミング学習 振り返り（2022/04/10 ~ 23）
プログラミング学習第１、２週目（2022/04/10 ~ 23）を振り返る
学習記録
2週間（14日）で53.8h(約53時間50分)
1日の平均学習時間は大体で3時間50分くらい。
第2週に入っていきなりサボったり体調不良に見舞われ、学習時間がかなり短くなってしまった。
目に見える形で残しておくと戒めにもなるので、私は全てをオープンにしていくことにする。
使用した教材
第１週(2022/04/10 - 16)
第２週(2022/04/17 - 23)
- マーベルドラマ『ムーンナイト』- Disney+で配信中のドラマシリーズ公式サイト の模写コーディング
Progate(HTML&CSSコース)
HTMLで要素を作って、CSSで大きさを指定したり、色を付けたりする。楽しく、かつ分かりやすく学習できる。
以下のリンクは、Progate HTML & CSS 学習レッスン初級編へ飛びます
HTML&CSSとWebデザインが 1冊できちんと身につく本(教本)
実際に閲覧されることをを想定した架空のWebサイトを作る教本。
以下のリンクは、私が実際にこの教本に着手し、一周した感想を記事にしたものです。
マーベルドラマ『ムーンナイト』模写
こちらのページの模写コーディングを行おうとした
全く進んでいないが、私のリポジトリを掲載しておく。 GitHub - Garbage-soft/moonknight_copy: HTML&CSS practice copy_coding
学習内容としての優先順位が下がったために中断しているが、そのうち完成させたい。
模写コーディングに取り組んだ感想「見通しが甘かった」
ここでは自発的に行った学習として、模写コーディングに取り組んだ感想を述べていく
簡単そうに思ったがかなり難しかった。 今回題材に選んだ、『Disney+』というサービスはとても複雑な構造をしている。
これまでにやった作業を箇条書きにすると、
- 要素のサイズや余白が不明だったのでPSやXDにスクショを貼り付け、直線ツールで長さを測った
- 検証ツールで一つ一つの要素に適用されているCSSを確認した
- HTMLが凄まじい入れ子構成になっており、クラスの命名規則も不明であり、複数のCSSファイルからスタイルを適用している
- どのファイルがどういった役割をしているのか確かめるべく、WEBサービスのディレクトリ構造を全てDL、模倣した
コードを書くことよりも、そのほかの作業時間の方が長くなってしまっていた。
バックエンドを志望していて、既存の静的なページを時間をかけてでも形にすることができるの（調べたらわかる程度に理解がある）なら新しい知見を手に入れるべく、次のステップにいくべきでは？という指摘もTwitter上で頂いた。
以下のリンクは学習の継続・習慣化に向けて参考にどうぞと、紹介いただいた記事である。
ご指摘を素直に受け止め、作りたいものを作る大胆な方向転換
昨日まで模写をやっていましたが、大胆に方針変更して
— がべーじ＠WEBエンジニア志望 (@garbage_salbage) 2022年4月25日
アプリ作ります
覚悟の準備としてgithub公開しておきますhttps://t.co/tiDL9O9FcV
ルーレットアプリです。
各セグメントにテキストの反映を、
ルーレットには回転させるJSを
まずはそれぞれ実装していきます#駆け出しエンジニアと繋がりたい pic.twitter.com/a6pgm18s1t
前述したブログ記事(#次のステップ)にも似たようなことを書いたのだが、 例えば、ギターやピアノが弾けるようになりたいと考えたとする。 まず何をするか？ それはおそらく、好きな曲を弾くことから始めるだろう。 極めるには基礎練が大切だったりもするが、ギターキッズはやはり好きなバンドの好きな曲を弾く。 好きなロックバンドの曲を弾きたくてギターを買ったとしたなら、いきなりジャズやカントリーを弾こうとは思わない。 オリジナル曲を作曲するならどこかで音楽理論を勉強する必要はあるし、他ジャンルの要素も欲しくなるかもしれない。 さらにはベースやドラムなどとのバンドアンサンブルも考えなくてはならないが、そう。必要な知識は必要になってからなのだ。
31歳のおじさんの私もそんなギターキッズと同じ感じで作りたいと思うものを作ってみることとします。
方向性が明確になったのでDisney+の模写は一旦お休みします。*1
