模写コーディングで、初めて「手応え」を感じた話
HTMLとCSSを一通り学んだあと、
正直に言うと、少し困っていました。
文法はなんとなく分かる。
タグも、クラスも、指定の仕方も知っている。
でも、
「で、これで何ができるんだろう?」
という感覚が、ずっと残っていた。
作ろうとすると、手が止まる
Progateや教材を進めているときは、
用意された答えがありました。
でも、
「じゃあ自分で何か作ってみよう」と思った瞬間、
急に手が止まる。
何から書けばいいのか分からない。
レイアウトをどう組めばいいのかも分からない。
知識は増えたのに、
使い方が分からない状態でした。
そこで選んだのが、模写コーディング
自分でゼロから考えるのが無理なら、
すでにあるものを、そっくりそのまま作ってみればいい。
そう思って始めたのが、
模写コーディングでした。
利用したのは、
「CodeJump」というサイトです。
完成形のデザインがあり、
それを見ながら、同じものをHTMLとCSSで再現していく。
設計は考えなくていい。
ゴールもはっきりしている。
今の自分には、ちょうどよかった。
↓僕は使っていませんが、コードジャンプから出ている書籍を紹介します。
HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 [ 小豆沢 健 ]
「あ、これ知ってる」が増えていく感覚
最初は、やっぱり時間がかかりました。
余白が合わない。
文字サイズが違う。
配置がズレる。
でも、途中から変化がありました。
「あ、これflexだな」
「ここはmargin-topか」
「この指定、前にやったやつだ」
完全に理解しているわけじゃないのに、
手が動く。
この感覚は、
これまでの学習では一度もなかったものでした。
正解がある安心感
模写コーディングの一番よかったところは、
正解が目の前にあることでした。
「これで合っているのか?」
と悩まなくていい。
違えば、見た目がズレる。
合っていれば、近づく。
評価基準が、すごくシンプルです。
だから、
「間違えてもいい」という気持ちで進められた。
できるようになった、というより…
この頃の自分は、
「もうWeb制作できる!」
なんてレベルでは、もちろんありません。
でも、
- HTMLとCSSは、触れば何とかなる
- 分からなくても、調べながら進められる
- 前より明らかに、怖くなくなっている
そう感じられるようになっていました。
できるようになった、というより、
逃げなくなった。
それが一番大きな変化だったと思います。
初めて「積み上がっている」と感じた
模写コーディングをいくつかこなした頃、
ふと、こう思いました。
「あ、これ。
ちゃんと積み上がってるかもしれない。」
毎日派手な成長はない。
でも、昨日よりは少し早く書ける。
昨日より、少し迷わない。
この感覚は、
これまでの挫折経験にはなかったものでした。
次回予告
次回は、
WordPressを触ってみて、
初めて「これは仕事っぽいな」と感じた話を書きます。
HTMLとCSSが、
「知識」から「道具」に変わった瞬間。
正直、
ここで一段階、見える世界が変わりました。
↓僕が独学を始めたきっかけになった本です。
改訂版 本当の自由を手に入れる お金の大学 [ 両@リベ大学長 ]

