非常に悩んでいます。今後の学習方法でアドバイスが欲しいです

Question

Udemyの動画を見ながらHTML&CSS JSでサイト作りに励んでいました。
ある程度、繰り返したので、今度は一人で模写してみようと思いました。
まぁしかし案の定覚えられませんでした。(ここまでは想定内です。)

なので別の超簡単な模写サイトで挑戦したんですが全く出来ず撃沈してしまいました。
今までの知識が否定された様で本当にショックです…

これからどう学習していけば良いですかね？
何が何でも挫折だけは絶対にしません。

ざっくり言うと

・構造等は理解出来てるはずなのにいざ一人でやると全く出来ない
・もう一度基礎学習に回った方が良いのか？

です。

Comments

[Zuishin]

一つ大きな間違いがあります。動画学習は基礎ではありません。応用の見学です。見学が終わったなら次は入門して基礎を始めてください。

[yureighost]

Udemy自体は受講したことがないのではっきりは言えませんが、
一つ一つ課題があって、サイトの指示通り記述すると
途中経過で出来上がった画面が表示されてその通りなら
次のステップに進むとかそういうものだと推測しての発言です。

個人的な意見としてはその一つ一つの手順が大事です。
熟練してる人間でも大量のエラーが絡みあって同時に出ると解析も修正もとても困難です。

そのため一つ一つ手順を進めてその都度確認します。
それならエラーが出ても原因は進めた一手のところにあるとわかりますので。

模写サイトで挫折したのはエラーだらけで解析に行き詰ってしまったのではないでしょうか。
まずは基礎を学んで収集が付く範囲で開発を進める手順を覚えていくことをお勧めします。

[dodox86]

自分の作りたいサイトが既に頭にあるでしょうか。ただの模写を100回やったとしても、自分オリジナルのサイトを作ろうとしたときに手が停まることはほぼ確実です。作りたいものが無いから、です。目指すところを質問文中に明示すると、またアドバイスも変わってくるかと思います。

Answer 1

HTML&CSS JSでサイト作り

いきなり、３つを同時に学習しなければならない時代なんですね。
時代の流れが手伝ってくれたのもありますが、身につけた順序は段階的だったように思います。

1. HTMLだけでデザインが完結する時代：HTML4時代の古典である「テーブルデザイン」時代

（マークアップ構造のマスターは余裕でした）。
2. テーブルデザインよりCSSがカッコ良い：
（HTMLとCSSセレクタの関係、重要度を理解すると、ページレイアウトや各コンテンツ装飾が身についた：float, clear だけで整える必要はあった）
3. 「Ajax が登場」し、サーバーとデータ連携するページ表現ができるので、JavaScript の勉強を始めた。
（マークアップ構造＋CSS装飾は理解していたので、JavaScriptのDOM操作は余裕でマスター。イベントの仕組みを覚え、CSSでは実現できないことを JavaScriptで表現した）

---

すべての段階で、Web上にまとめられた個人運営のサイト(参考程度)を利用したり、JavaScriptはソースを読解していました（たとえば、jQueryのソースは、ver1時代は 必ず uncompressedに目を通してから使うようにしていました）。
昔は、公式ドキュメントなんて整備する開発者はいなかった。だからこそ、各ライブラリはソースを読む必要があったし、APIを熟知できたように思います。

今はMDNがありますが、カンニングできる環境は大事です。
MDN の内容は詳細なため、初心者にとっつきにくい、難しいと感じるかもしれません。
なので、個人運営されているページの残骸があれば、「運営者の解釈である」「記事が古くなっている」などに留意して活用してみるのも良いと思います。

---

追記

1. とにかく、アウトプットしながら考えます。
2. 考えながら、自分なりに作ってみる。
3. 「お、（ココを変えると）こんな風になった」という小さな発見、驚きが記憶への定着につながる

…のだと思います。

Answer 2

・構造等は理解出来てるはずなのにいざ一人でやると全く出来ない

これの原因の多くは下記二点だと思います。

• 圧倒的に反復回数が足りない。

人間、これから覚えようとしてることはなかなか入るものではありません。（学生みたいに若くない限り）
一人でやる = ある程度思考の自動化が必要
な側面がありますので、自動化できるまで、覚え込めるくらい反復する必要はあると想います。

• 反復・模写時に思考しながら行えてない

これは、上記とつながりますが、模写をするにしろ、反復するにしろ、自分で仕様などを理解しながら、考えながらやる必要があり、そうすることによって、思考の自動化が成されると思います。

・もう一度基礎学習に回った方が良いのか？

前述しかり、基礎が足りないと感じるならそうされるといいかと思いますよ。

Answer 3

プログラムは機能や塊で覚える方がいいので
模写するサートがだらだらと長ったらしい内容になっているなら
適当な機能単位で関数化してしまうことです。

Comments

[yambejp]

ロジックを追いかけるとしてもいいとこ15～20行くらいでしょ？
再利用しないものでも長くなったら適当なところでまとめちゃうこと。
それとまとめたものは仕様書に転記して常にどう機能しているか意識すること。
また最小限のコメントはソースに書き込んでおくことです

Answer 4

模写したサイトは企業や会社の様な広告目的のHPでしょうか？
でしたら一度Udemyの講座を行ったぐらいでできるほど簡単ではないかと思います。
多くのHPは案件として依頼して作るなど仕事として行っていますから。
HPはその団体の印象に直結する一つの顔の様なものでもありますので、そんな簡単に作れる質素なものではイメージが落ちてしまいますよね。

まぁしかし案の定覚えられませんでした。(ここまでは想定内です。)

私は覚えることが全てではないと思っています。実際問題私でもteratailにある質問で仕様の確認は行います。よく言われているのはコードを書く時間より、調べる時間やコードを読む時間の方が長かったりします。あとは量ですね。比較的コードを書いている時間が少ないかと思います。頭で覚えるよりも量をこなしていった方が自然と覚えてたりしますので、焦らず地道にやっていってもまだ大丈夫だと思います。

今までの知識が否定された様で

そうですか？今までの知識を用いて自分で一度自身の簡易的なポートフォリオでも良いので作成してみてはいかがでしょうか。

---

基礎が理解できていないのであれば、そこは基礎を学ぶのは当然ですが自分がどの程度できなくて今はどの程度の実力なのか本当に自分で把握できていますか？
全く出来ず撃沈とありましたがどのレベルの話をしているのでしょうか？
あとは自身の問題です。QAサイトで質問や相談する内容でもない気がしますので、Udemyなどの動画講座でできないのであれば、マンツーマンなどの講師と学習できるプログラミングスクールを検討するのも一つの方法かと思います。

Answer 5

なので別の超簡単な模写サイトで挑戦したんですが全く出来ず撃沈してしまいました。

「超簡単な模写」ということが勘違いなのではないでしょうか。自分で作るほうが技術とデザイン面の妥協も可能ですので、ピタリ同じ結果にしなければならない模写よりはるかに楽だと考えます、

Answer 6

がんばりましょう。。

Answer 7

下記インラインで回答します。

これからどう学習していけば良いですかね？
何が何でも挫折だけは絶対にしません。

意気込みが強いのはとてもいいことです。

・構造等は理解出来てるはずなのにいざ一人でやると全く出来ない

どうしても一人で解決することができない場合は「メンター」もしくは「プログラミングスクールに通うこと」をお勧めします。なぜかというと分からないことをそのまま放置するのは学習効率が非常に悪くなるからです。それすら難しい場合は作りながら覚えていくしかないと思います。

・もう一度基礎学習に回った方が良いのか？

基礎学習は１週だけすれば十分です。「基礎を全て分かってから始めたい」と考えるのは非常に危険です。いつまで経っても初学者から抜け出すことができません。なので、基礎学習は程々にしてあとは手を動かして考えながら作り込んでいくことをお勧めします。

Answer 8

その通りで、自分も頓挫しています。
HTMLを学ぶとCSSの情報が入ってきて、javascriptを学ぶと
フレームワークの情報がはいってきて

そうこうしているとサーバーサイド言語の話がはいってきて
情報収集しているとトレンドは、Pythonだとか、色々惑わされますよね。

何のために学ぶのかをいう目的が必要なのと、アウトプットを習慣化する
しかないのかもしませんね。

今は、Youtubeの情報とかもあって、書籍も充実していて
ないものねだりかもしれないと思うこともあります。

あとはやりたいことの内容のサンプルの収集を習慣化することしかないです。

おじさんも、毎日このことで悩んでいるところです。