30代エンジニア転職への道 - 初めての模写コーディングに挑戦した話

みなさん、こんにちは！前回、ドットインストールでの学習についてお話しした、シミティーです。

今回は、実際のWebサイトの模写コーディングに挑戦した体験談をお話しします。

プログラミング学習の次の一歩

ProgateとドットインストールでHTML/CSSの基礎は学んできたものの、「このままでいいのかな...？」という不安が出てきました。

確かに基礎は身についてきた感じはあるんですが、やっぱり「自分の手で実際のWebサイトを作ってみたい！」という気持ちが強くなってきたんです。

基礎学習だけでは満足できなかった理由は主に2つ。

1つ目は、「本当に自分でWebサイトが作れるようになってるのかな？」という不安。

2つ目は、「就職活動の際に見せられる成果物が欲しい」という現実的な理由です。

でも、いざ「何か作ろう！」と思っても、何から始めればいいのか分からない...。

そんな時に出会ったのが「模写コーディング」という学習方法でした。

模写コーディングとの出会い

「プログラミング　模写」でググってみたところ、模写コーディング向けのサイトがいくつか見つかりました。

その中で目についたのが「ISARA」というサイト。調べてみると、ルールを守れば模写したものをポートフォリオに使えるみたいなんです。

「これだ！」と思って、早速チャレンジすることにしました。

今だと他にも候補がありそうですが、僕が学習をしていた2020年では悪くない選択だったと思います。

レイアウト、配色、フォントなど、プロのデザイナーが作った完成度の高いサイトを模写することで、Web制作の「お作法」みたいなものも学べそうだと思いました。

難易度的にも初心者でも作れるレベルで、デザイン性の高いサイトが作れるので丁度よかったです。

つまずきポイント満載...

いざコーディングを始めてみると...そこからが本当に大変でした。

レイアウトが全然思い通りになりませんでした。

これって後から知ったんですが、フロントエンド（Webサイトの見た目を作る部分）を専門としていないエンジニアさんだと結構苦手意識があるみたいですね。

それと、特に苦労したのがスマホ対応（レスポンシブ）です。

スマートフォンで見やすくなるのって、画面サイズによって崩れないようにコードが書かれているからなんですよね。

この画面サイズごとにレイアウトを切り替えるのが、予想以上に難しかったです。

それから、CSSのスタイルが適用される優先順位があり、スタイルを設定しているのに適用されずに詰まったみたいなこともありましたね。

独学の限界を感じた

このように、基礎学習では気付かなかった課題が次々と出てきました。

学習サイトでは「できた！」って感じだったのに、実際のサイトを作ろうとすると全然歯が立たない。

と早くも独学の限界を感じてきました...。

この時点でプログラミング学習を始めてから2ヶ月くらい経過していました。

まとめ

今回は、模写コーディングに挑戦して直面した壁についてお話ししました。

基礎学習と実践では、こんなにも大きな差があるものなんですね。

でも、この経験が次のステップへの大切なきっかけになりました。

次回は、ここから這い上がるために出会った、あるサービスについてお話しします。

最後まで読んでいただき、ありがとうございました！