Webサイトを写経してみた!

未分類

先週のマンツーマンレッスン後、Webサイトを自分で選んで模写をする課題が出ました。
模写とは、元のWebサイトを見ながら、コードは見ずに、
同じWebサイトを作成するトレーニングと認識しています。

ただ、、、
元のWebサイトを決めたはいいものの、手が動かない。。。

そこで、まずはWebサイトを写経することから始めることにしました!

写経とは?

ところで、写経とは何なのか?模写との違いは何なのか?
この点について簡単に説明したいと思います。

写経とは、元々は僧侶がお経を写す、という時に使われています。
ただ、プログラミングの世界でもこの言葉は使われていて、
すでにあるコードを写して、Webサイトを制作する学習のことです。

以下のサイトに、写経の効果や学習の進め方など、詳しく書いてありますので、
良ければ一度読んでみて下さい。

https://www.sejuku.net/blog/107268

写経にチャレンジ!

今回、写経の元サイトとして、以下のサイトを利用させて頂きました。

https://note.com/s_hun/n/n5add0595870c

こちらは、写経用のコードがあるだけでなく、
実装の手順や重要な部分の解説もあり、初めての写経におすすめです!


コードや完成品は、当然元サイトと同じになるのですが、
一応、自分が実際に写経したものをお見せしたいと思います!
(注:画像については違うものを使用しています。)

実際の完成品、HTMLのコード、CSSのコードです。

写経をしてみて、感じたこと

写経といえど、エラーを起こしてしまう

写経は、元のコードを写すだけですが、
慣れていないコードを打つこともあり、エラーも起きました。

写すだけなので、小学生でもできることですが、
実際に写経した後、できたサイトが元サイトと同じになっているか、
確認する必要はあると思いました。

そして、できればコードも間違っていないか、確認した方がいいと思いました。
例えば、CSSの基本書式、
セレクタ {プロパティ名:値;}
の最後の「;」が抜けていても、サイトは問題なく表示することがあります。

しかし、この状態のままにしておくと、バグが起こることがあり、
練習ならまだしも、実際の納品物でしてしまったら大変なことになります(汗)

ですので、写経の段階から、コードに間違いがないか、
確認する癖をつけておいたらいいでしょう!

ホームページがどんな構成でできているか、何となくイメージが掴める

これは非常に大きかったです。

というのも、冒頭に申し上げた通り、
僕の場合、模写の進め方が分からず、写経学習をしました。

今回の写経をした後、課題の模写サイト作成に取り組んだのですが、
今度はちゃんと手が動き、提出までできました。

ですので、写経をした意味はあった、と実感しております!


これは実際にしてみて分かったことですが、Webサイトの模写をすることで、
HTML,CSSの知識が少しずつ身についています。

なので、是非模写には取り組んでもらいたいのですが、
「模写しようと思っても、手が動かない。。。」
という人も多いと思います。(実際自分がそうでした…)

そのような時、Webサイトの写経学習は、
写すだけなので手を動かすことができ、
自分でWebサイトを一通り作成したという自信にも繋がるので、
非常にオススメです!

写経だけでは実践力は付かない

これは、先ほど紹介したサイトの中にも書いてあることですが、
僕も実際に写経してみて、実践力までは身につかないな、と感じました。

実践力を身につけるには、サイトの模写、
更にオリジナルサイトの作成をしていく必要があると思います。

ただ、僕もこれらの学習はまだまだ十分にできていません。
(この記事を書いている時点で、模写サイト2つ作成)

もっと学習して、実践力を身につけ、
稼げるようになろうと思います!

コメント

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