プログラミング学習、独学の鬼門【模写コーディングで挫折】

2019年5月20日2019年6月1日

自分はプログラミング学習を、独学で初めて３ヶ月が経過。

３ヶ月経過しての感想はこちら。

https://tka328.com/post-1840

今までで何度か挫折しそうになった為、その部分について書いてみようと思います。

最大の鬼門となるのは、模写コーディングだと思う。

ここで圧倒的に出来なくて、絶望する人も多いと思う為、

どう対処したかを記録したいと思う。

Contents

1. 最初の壁
2. ２番目の壁は
3. どう対処したかと言うと、一旦逃げた。
4. 結局どうやって乗り越えたか？
5. まとめ
- 5.1. 共有:
- 5.2. 関連

最初の壁

多くの人もそうかもしれないけど、自分の場合もPrgateから初めたのだけど、

こちらはシステム構築も不要ですぐに初められて、

しかもＲＰＧの様にレベルも上がって行ったりと、

楽しみつつ、挫折しにくく作られていて、初心者には大変お勧めなのだけど、

自分もやはり楽しみつつやっていて、何なら楽勝だな位に思ってたのだけど、

ある時異変が起きる。

それは道場コースに進んだ時。

これは仕様書に基づき、今までのスライド等を見返しながら、

そのコースで学習しつつ制作したＬＰを　１からコードを書かいて作らないといけないコース。

今まではサクサク進んでいたのに打って変わって、

手が全く動かなくなる。

「え？　何にも書けないんだけど・・」ここが初めての壁だった。

仕方ないので、最初の一回目はコードを書き写す事に。

同じ様に、初級、中級と一度はクリアをして、次は何とか調べまくりながら、

何とか、どちらもクリアする事はできた。

２番目の壁は

その後は写経といって、ソースコードを見つつ、同じようにコードを書きながら、.

目標のサイトを作る練習を２サイト程行ってから、

いよいよ課題でもある、模写コーディングに挑戦する事に。

２番目の壁は、何度も当ブログでも書いてる通り、模写コーディングだった。

これはProgateの道場の壁より、遥かに高く険しいものだった。

道場はヒントなどもあるし、何週かしていたら多少覚えている部分もあった為、

何とかクリアはできたのだけど、

サイトの模写コーディングは何もなく。

基本ソースコードも見ないで行う為、本当に今までやってきた事の集大成といった感じ。

模写について、おすすめサイトはこちら

https://haniwaman.com/replication-coding/

ただこれが圧倒的に難しく。

初日はヘッダーの半分もできず、朝活の２時間が終了。

翌日も、ほぼ成果がないまま同じく終了。

仕方なくもう一度、Progateの初級、中級を復習してから挑戦。

またも詰まる・・

「ダメだ、全くもって出来る気がしない・・」

本当に絶望という感情がしっくりくる感じ。

プログラミング学習をはじめてから、初めての感情だった。

薄々気付いて確信したのだけど、
圧倒的に模写が出来ない。
一個ずつググりながらやって、分からない所は飛ばしてでやっても、どれだけ時間がかかるのか？
気が遠くなる。もう一度復習する方が早いのかな？
初めての絶望だなぁ⤵︎
通る道なんだろうけど‥。

— TKA@FX専業トレーダー、情報発信 (@tka67142080) April 22, 2019

１ヶ月前の状態はそんな感じだった。

その時の記事はこちら

https://tka328.com/post-1693

どう対処したかと言うと、一旦逃げた。

プログラミング学習を少なからずやっていて、本当に思う事は、

詰まってどうしょうも無い時は、取り敢えずそこは放置して先に進むか。

違う事をやる事がマジで重要だと思う。

理由は２つあって

視野が狭く、凝り固まった思考では回答にたどり着けないから。

３０分悩んで分らないものは、２時間かかっても分らない気がする。

その気になれば何時間も消費できてしまう。

他を進めてる内に、回答やヒントが見つかったりする。

以外にこれも多い。「あ、これここにも応用できるじゃん？」と気付いたり

検索の仕方を思いついたりと、たまたま解決したりする事もある。

それもあって取り敢えず、作ろうと思ってたポートフォリオ作成に着手。

Bootstrapを用いて何とか作成した後。

もう一度模写コーディングにトライ。

結局どうやって乗り越えたか？

これは自分が乗り越える為にやった施策で、やり方としては正しいか分からないけど。

一度全体像を紙に書いてみた。

セクション分けをして、ヘッダー、フッター、ボディも区分分けし、

どういうクラスを付けるかを記入。

クラスもどうつけて良いか悩むと思うけど、

取り敢えずヘッダー、フッター、メイン１～５とかでも良いと思う。

その通りに、一度型だけ作った。

上記で決めたDIVクラスを付けつつ、ＨＴＭＬを作って、

ＣＳＳでバックグラウンド　イメージ、カラー等も適用して、

適当にheightを決めて、width100％にして表示されない場合は、

適当に文字を入れたり<br>をいっぱい入れたりして。笑

とにかく表示させて、比率を見ながら型を作る。

分かるセクションから作っていく。

以前詰まってどうしょうもなかった、ヘッダーは後回し。

自分でも出来そうなセクションから作る。とにかく少しずつでも前進して形にしていく。

知識を総動員するのではない、取り敢えずググりまくる。

Progateを１、２週した程度では、知識等は覚えていない。

スライドを見たら「ああ、そうだった！」みたい感じだと思う。

色々思い出そうとしても無駄なので、とにかくググる。

「Ａタグ色を変える。」　「Ａタグの下線を消す」等色々キーワードを入れてとにかくググる。

１点ずつ解決していく感じ。

取り敢えずBootstrapは封印する。

最後の方に学習していたし、模写するサイトがBootstrapを使用してたという事もあって、

マスターもしてないのに無理に使おうとして、

時短のツールのはずが、尚更時間がかかってしまっていた。

逆にFlexboxを使った方が自分は楽だった。コンテンツを横並びにしたい時はclass containerをつけて

displayをflexに。レスポンシブの面でも凄く楽だった。シンプルにHTML、CSSで良いのかなと思った。