模写コーディングができない5つの理由を解説！5つの解決方法も紹介

「模写コーディングができない」

「模写コーディングをしているけどうまくできない」

「効率的なやり方を知りたい」

模写コーディングを始めた人には、このような疑問があるでしょう。

大手プログラミングサイトでは、興味があるものを作るべきと紹介しています。

しかし、模写コーディングを始めてみたけど思うように作業が進まない人が多いのではないでしょうか。

本記事では、JavaでWebアプリの開発経験がある私が、以下の内容を紹介します。

模写コーデイングができない理由を解説すれば、2ヶ月で製作可能になります。

本記事を参考に、Webアプリの開発にチャレンジしましょう。

なお、転職保証付きプログラミングスクール DMM WEBCAMPでは、実践を意識した独自カリキュラムにより生徒の成長を効率よくサポートします。この記事を読んでいる今コーディングのやり方がわからなくても成果物作成までサポートしてくれるため、タイピングができれば問題ありません。

興味がある人は以下のボタンから詳細を確認してみてください。

模写コーディングができないのは普通のこと

模写コーディング自体がレベルが高い学習方法です。すべてのコードを自分の手で書く必要があります。学習サイトではサポートが豊富にあり、わからないときは答えが提示されました。

模写では環境が大きく変わるため、十分な力が出せず制作時間も大幅に増えます。

サポートが豊富にあった学習サイトを卒業したばかりの人が躓くのは当たり前なのです。

模写コーディングができない5つの理由

模写コーディングができない原因は以下の5つが考えられます。

それぞれ詳しく解説します。

1.HTML・CSSの適切なコードが選択できない

模写コーディングはHTML・CSSの理解が深くないとできません。学習サイトのカリキュラムと違い、状況に合わせて適切なコードを選択する能力が必要になるからです。

選択する能力は、コードを組み合わせた結果どんな動きになるのか知らないと獲得できません。

コーディング作業は、模写であっても高度なHTML・CSSの理解が必要です。

2.選んだサイトのレベルが高い

模写コーディングは、サイトのレベルが自分のレベルを超えてしまうと達成が困難になります。調べる工程が追加され初心者にとって大きな負担になるからです。

たとえば、Java公式サイトは一見シンプルですが、ツールを見るとたくさんのdiv（指定されたエリアは名前を付けてほかと区別できる）とCSSを組み合わせているのがわかります。

このようなサイトは、初心者の模写に向いていません。7割の作業がコードの検索に使われ制作に時間がかかります。

選んだサイトのレベルが高い場合は挫折する可能性が高いため、ツールで調査して準備しましょう。

3.サイトの構成がわからない

模写コーディングはいきなりコードを書くと挫折します。

サイトは複数の要素が組み合わさっているため、ある程度の構成を把握してから作業しないとうまくいきません。

サイトはheader・main・footerで構成されています。headerにはメニューを配置し、footerはサイトの目的に合わせてボタンやリンクを配置する場所です。mainにたくさんの部品を配置してサイトは完成します。

しかし、この構造を知らずにいきなりdivをたくさん使ってサイトを作ると、工程数が増えて制作時間が5倍以上になり非効率的です。

そのため、サイトの構成がわからない状態でコードを書き出すと失敗します。

4.ファイル構造がわからない

ファイル構造がわからないと模写コーディングはできません。

画像を読み込んだり、別の場所にあるCSSファイルを読み込むには、どこにあるのか場所を指定します。

場所はパスと呼ばれ、../css/style.cssのように記述し、活用するのです。

そのため、保存場所のパスが違うとCSSや画像が読み込めず、エラーが出ます。このエラーに苦戦して挫折する人が多いため、ファイル構造は初心者の難関です。

5.一気に作り上げようとしている

模写コーデイングを一気に作ろうとすると失敗します。初心者の場合、どれだけ早くても1週間はかかります。

そのため、公式サイトに5時間で完成すると書かれていても鵜呑みにしてはいけません。1日で終わらせようという考えは失敗を招きます。

サイトの模写は短期間で終わるものだと考えてはいけません。経験者はそのくらいだけど、自分は3倍以上かかると認識しましょう。

模写コーディングできない！をできるに変える5つのコツ

模写コーディングをできるようにするには以下のコツを意識する必要があります。

それぞれ詳しく説明します。

1.HTMLとCSSのコードを見ながら作る

コードが掲載されているサイトや参考書を見ながら制作しましょう。

学習サイトを頭から周回するのは非効率的です。わからないコードが出てきたら調べて埋めていく方法を取ります。不足している経験を検索で補いましょう。

とくに、floatとFlexboxは念入りに調べておきます。頻繁に使いますが理解できないコードで有名です。

一度学習したコードでも見ながら模写すると作業効率が上がります。

2.初心者向けのサイトから始める

模写コーディングでおすすめのサイトから取り掛かりましょう。初心者が模写に適したサイトを見つけ出すのは困難です。

つまらないと感じても、一度は初心者向け模写サイトに取り掛かりましょう。アウトプットする感覚を体験してください。

慣れてくれば高レベルなサイトも模倣可能になります。

3.サイトの構成を手書きでメモする

サイトの構成を分析してメモします。福笑いのようにあてはめて考えると混乱しません。

始めにheader・main・footerに分けてから、それぞれの中身を考えるといいでしょう。

考えるとき、完璧に予測する必要はありません。スケッチできるレベルでやめます。

できれば、A4サイズの紙に書いて見えるところに貼っておくといいでしょう。

いつでも確認できる場所においておけば、迷ったときの目印になります。

4.ファイル構造を把握する

お手本サイトのファイル構造を把握しましょう。

imagesファイルとcssファイルがどこで読み込まれているのかチェックしておきます。パソコンにデフォルトで備わっているデベロッパーツールを使えばすぐに確認可能です。

次に、自分が作る模写サイトのファイル構造を考えます。読み込まれているCSSが2つ以下の場合は、同じファイルにまとめてしまって構いません。

ファイルを指定するバスに注意しましょう。読み込むHTMLからどれくらい離れているのかでパスが決まります。

./css/style.cssは、読み込むhtmlの一つ上の場所にあるCSSフォルダの中にstyle.cssがあるという意味です。

ファイル構造の問題をクリアするには、お手本サイトと制作するサイトのファイル構造を正確に把握する必要があります。

5.製作期間を設ける

制作期間は多めに設けてチャレンジします。模写コーディングは立派なプロジェクトです。時間をうまく使って制作しましょう。

内訳も重要です。以下を参考にしてください

このように大まかに予定を組めば進捗状況が明確になり、モチベーション維持に役立ちます。

おすすめのお手本サイトを3つのレベルで紹介

お手本におすすめのサイトをレベル別に紹介します。

それぞれ説明します。

初級レベル：始めてコーディングする場合

完全初心者・学習サイトを終えたばかりの人は、以下に紹介する2つのサイトがおすすめです。

どちらもWebサイトを構成する要素がシンプルにまとまっているため、これから取り掛かる人に向いています。

紹介した2つのサイトで模写コーディングを体験しましょう。

中級レベル：5回以上10回未満コーディングを経験した人

5回以上コーディングを経験した人は、コーディングに必要な段取りが体にしみついているため、ある程度難しいサイトにチャレンジしても問題ありません。

どちらもコードを調べて模写する必要があります。事前準備をしておけば乗り越えられるでしょう。

上級レベル：ネットのサイトを7割模写できる人

初心・中級レベルの模写が7割できたら、上級レベルのサイトを攻略できます。ただし、シンプルなものから始めましょう。

この段階でリンク先まで完全再現する必要はありません。レイアウトとリンクを置く場所に注力しましょう。

とはいえ、模写コーディング続けると、これで成長できているのか不安になる人も多いでしょう。そこで、おすすめなのが転職保証付きプログラミングスクール DMM WEBCAMPです。

実践を意識した独自カリキュラムにより、未経験者がアプリ開発できるところまでサポートしています。

ぜひ以下のリンクから詳細を確認してみてください。