プログラミング

【初心者エンジニア必見】模写がオススメな理由とやり方

プログラミングの基礎学習が終わって、「次は何をしよう?」と考え中の方、「模写コーディング」をしてみましょう!

HTML/CSSの基本が出来てたら大丈夫。

実際に何か作ってみる作業をして、実践的なスキルを身に付けるのがおすすめです。

模写コーディングとは?

ズバリ、すでに完成しているWebサイトを模写して再現することです。

HTML/CSSを使ってお手本となるサイトを見ながら、全く同じように作ることを言います!

これがなかなか難しい!

私もいくつかのサイトを模写したことがありますが、心が折れそうになったことも。

まずはシンプルなサイトから模写してみることをおすすめします!

こんな人にオススメ!

  • 基礎学習が終わった人
  • HTML/CSSの実践的なスキルを身に付けたい人

模写コーディングがオススメな理由

基礎学習はあくまでパーツ的な学習でしたが、模写コーディングは様々なパーツを組み合わせて1つのサイトとして完成しているので、基礎学習の集大成とも言えるでしょう。

また、学習していないコードも出てきたりして、よりコーディングの幅が広がります。

メリット

  • ページ全体をよく観察して組み立てるスキルが付く
  • コーディング速度が速くなる
  • 実務レベルに近づける
  • 模写したものを実績として扱える
  • 基礎学習の範囲外の技術が学べる
  • コーディングのパターンがわかってくる

模写コーディングのやり方

模写するサイトを決める

シンプルな構成のサイトから模写するのがオススメです!

いきなり複雑なサイトから始めると挫折に繋がりやすいので。

「こんなの簡単すぎる!」というサイトから腕試しがてら、始めてもいいくらいです!

模写におすすめのサイト

PAS-POL 旅のモノづくりブランド

pas-pol.jp

iSARA(イサラ)バンコクのノマドエンジニア育成講座

isara.life

調べながら完成に近づけてみる

ヘッダー、メニュー、コンテンツ、フッター、など、まずはパーツに分解してみましょう!

わかる所からコーディングしてみましょう、最初から完璧なコーディングでなくても大丈夫。

まず挑戦してみることが大事!

(私は模写最後まで出来ず、検証ツールで先に答え見たこともあります。)

検証ツールを使って答え合わせ

自分のコーディングとどう違うのか照らし合わせてみましょう。

クラス名とかは自分のオリジナルのもので良いですよ!

divタグやid、cssの使い方を確認してみましょう。

知らないコードが出てきたらググって、使い方を調べる、自分のコードに埋め込む。その繰り返しです。

最初はかなり時間も掛かるはず!でも慣れてきたらコーディングのスピードも速くなるので、最初はゆっくり着実に進めていきましょう。

Webページのレイアウトやデザインの勉強にもなりますよ。

ここまで読んでくださりありがとうございました!

模写を繰り返すとかなり実力が付きますよ。

基礎学習を繰り返すのも良いですが、思い切ってトライしてみてください!

それでは、また!