初心者は真似するだけで身につくのか? HTML/CSS学習のロードマップ

氷爆を見上げるあるく プログラミング学習

「HTML&CSSとWebデザイン入門講座」(書籍)の勉強を始めて、約3ヶ月が経ちました。現在はP.264のタイル型のWebサイト構築を模写している状況です。

そこでふと思ったのですが、「今やってることって、Progateと同じように真似しているだけで、自分の実力として身についているんだろうか?」という疑問でした。

今回はそのあたりをAI先生に聞きながら、初心者がどういう風にステップアップしていけばいいのか、改めて考えてみようと思います。

初心者が最初にやるべきは「真似して書く」こと

写経をしているあるく一行
あるく
あるく

本の勉強も進んできたけど、基本的に書いてあることをそのまま模写して書くだけだよね。

どれくらい身についているのか、実感としてわからないんだけど、プログラミングの勉強ってこういうものなんだろうか?

ミナ
ミナ

本の通り書いていると、お手本と同じものができるから、すごい上達しているような気分になるよね。でもどれくらい上達しているのかは、確かにわからないなぁ。

ライ太
ライ太

フン……最初はそれでいいんだよ。型を真似せずに、いきなり自分流なんて無理に決まってるだろ。写経は「サボり」じゃなくて、「土台作り」だぜ😤(・・・知らんけど😅)

AI先生
AI先生

ええ、その通りです。真似して書くことで、「正しい形」と「よくある流れ」が体に染み込みます。理解はあとから必ず追いついてきますよ。まずは迷わず、たくさん写してみましょう。

なぜ真似するのがいいのか?

プログラミング学習の最初のステップは、とにかく真似して書くことという意見があります。ここで言う「真似」とは、

  • 書籍のサンプルコードをそのまま写す
  • Progateの指示通りにコードを書く

といった、いわゆる【写経】に近い学習方法です。初心者の段階では、「基本的な正しい書き方がわからない&慣れていない」「何を基準にコードを組み立てるのか」が、正直自分ではまだ判断できません。この状態でオリジナルを作ろうとすると、

  • 書き方が合っているのか不安
  • 途中で動かなくなって原因がわからない
  • 結果として手が止まる

という状況になりやすくなります。だから最初は、正解が用意されている環境で手を動かすことが大切、とのことでした。

最初で詰まってしまうと、面倒になって挫折してしまいがちですが、まずは基本を忠実に再現することが、結果的に継続への近道になるようです。自分も実際に試してみて、やはり真似から入るのがやりやすいと思いました。

ミナ
ミナ

よくわかっていない状態で適当に書いていると、変なエラーもいっぱい出そうだし、そうなると嫌になって「もうや〜めた」ってなりそうだもんね。

あるく
あるく

最初は「何をどういう風に書けばいいのか」がさっぱりわからないし、無理に自己流でやろうとすると、デメリットも多そうだ。

ライ太
ライ太

マネして慣れるのはわかったけど、本当にこれで上達するのか?

AI先生
AI先生

大丈夫ですよ。「真似して書く」のはゴールではなく、上達するための通過点です。

最初に型を体に入れておくからこそ、あとで「ここは変えていい」「これは自分なりに書ける」と判断できるようになります。遠回りに見えて、実は一番確実な近道なんです!

真似だけで終わっても大丈夫?

よくある不安として、「真似しているだけで、身についていない気がする」という思いは、誰しも感じるところではないでしょうか。ですが「この段階では身についていなくて問題ありません」とのこと。このステップの目的は、

  • コードを書くことに慣れる
  • HTMLやCSSの雰囲気をつかむ
  • 手が止まらずに学習を続ける

であり、確かに「コードを書くことに慣れる」というのが、初心者には一番重要に思えます。

ミナ
ミナ

よかったーっ。 まだ身についていなくて大丈夫なんだ〜。なかなか覚えられないから、どうしようかと思ったよー。

ライ太
ライ太

フン……😤 「覚えた気がしない」って悩めてる時点で、ちゃんと前に進んでる証拠だぞ。何も書いてなかった頃より、確実に一段上だ。

あるく
あるく

確かに何もやってなかった頃に比べると、HTMLやCSSへの理解も深まったし、コードを書くのにもなんとなく慣れてきたよね。

AI先生
AI先生

その「なんとなく慣れてきた感覚」こそが、学習がちゃんと積み重なっているサインです。焦らず、この調子で続けていきましょう。

いつまで真似していればいいのか

写経をひたすら繰り返すミナ

いつまで真似する必要があるのか、正直気になるところです。今勉強している1冊ですべて身につくHTML&CSSとWebデザイン入門講座』は、そろそろ1周終えるので、もう1回先頭から模写したほうがいいのか、それとも同シリーズの『実践編』に進んだほうがいいのか、AI先生に聞いてみました。

あるく
あるく

今勉強している本も、最後のページまであと少しだよ。このあと復習として同じ本を先頭から模写し直したほうがいいのか、もしくは実践編に進んだほうがいいのか、どちらがいいんだろう?

ミナ
ミナ

ようやく入門講座もコンプリートだね😄 でもこれからどうすればいいかは気になるなぁ。

ライ太
ライ太

真似するのが上達への近道なら、もう一度やり直したほうがいいのか?

AI先生
AI先生

結論から言うと、いまの段階では「先頭からもう1回ガチ模写」よりも、同シリーズの実践編に進む方がおすすめです。

入門編を最後まで走り切れたなら、次は実践編に進みながら、つまずいたところだけ戻って見直す──それが一番効率的です。

なぜ「もう1周フル模写」は微妙か

1冊ですべて身につくHTML&CSSとWebデザイン入門講座』は素晴らしい教材ですが、内容はどうしても

  • HTML/CSSの基本構造
  • 王道レイアウト
  • 「正解が用意されている模写」

が中心です。

なので1周目は

「なるほど、こう書くのか」
でOK。

でも2周目を最初から全部やると、

  • 手は動くけど
  • 自分で考える余地が少ない
  • 「できてる感」はあるけど、応用力は伸びにくい

という状態になりがちです。Progate復習も同じような状況ですね。

ミナ
ミナ

Progateもそうだったけど、2周目は同じところをぐるぐるしているというか、あんまり伸びてる気はしなかったかも。

あるく
あるく

新しいものに進みながら、わからないところを戻って復習のほうが良さそうだね

ライ太
ライ太

「同じところをぐるぐるしてる」って感じたなら、それはもう卒業のサインだな。前に進みつつ、引っかかったら戻る――今はそのやり方のほうが、ちゃんと力になるぜ😤(・・・多分な😅)

AI先生
AI先生

「理解が10割になるのを待つより、「6割わかったら先に進む → つまずいたら戻る」。この往復こそが知識を「使える力」に変えてくれます。今は進んで大丈夫なタイミングですよ。

ミナ
ミナ

了解! 実践編に進んだとして、結局真似っていつまでやればいいのかな?

ライ太
ライ太

しまった! オイラとしたことが大事なことを聞き忘れていたぜ。そのあたりどうなんだ、ロボット🤖

あるく
あるく

それは一番気になるよね。といっても真似しないと、まだ全然書けなさそうだから、しばらく続くかな・・・

AI先生
AI先生

「まだ真似でOK」どころか、実践編でも「真似がメイン」でいいです。しかも 「一生、真似は続く」 が現実的な答えです。実際はこんな感じですよ。

  • 真似(写経)
  • 理解しながら真似
  • 少しだけ崩して真似
  • 目的をもって真似を組み合わせる

👉 真似の質が変わるだけで、真似自体は終わらない

あるく
あるく

あれ、そうなんだ。どこかで真似しないで何かを作る必要があると思いこんでいたなぁ。

ミナ
ミナ

ずっと真似して良かったんだー。ちょっとホッとしたよ。

ライ太
ライ太

フン……😤 安心するのはいいが、勘違いするなよ。「真似していい」ってのは、考えなくていいって意味じゃない

真似しながら「これ、なんでこうなってる?」って首をかしげたら、その瞬間からもう「自分の力」が混ざり始めてるんだ。
(・・オイラ、今ちょっと良い事言ったよな!🤣) 

AI先生
AI先生

その通りです。「考え始めた瞬間」が、学習のスイッチが入った合図です。最初は真似の中に、あとから理解が追いつく――それが自然な順番。今はもう、真似をしながら考えられている段階に来ていますよ。

まとめ

写経を終えて、新しい勉強を始めたミナ。

・まずは真似して基本を忠実に再現する
・理解は6割で先に進み、わからない場合は戻って確かめるのが効率的
・真似は一生続く

というわけで今回は、初心者が真似して勉強することについて、素朴な疑問をみんなで考えてみました。「いつしか真似しなくてもすごいモノが作れるようになりたい!」と思いつつも、今は地道に真似して慣れていこうと思います。ではでは😄

タイトルとURLをコピーしました