模写コーディングがオススメな理由と、やり方の手順を紹介!

HTML&CSS JavaScript jQuery プログラミング

前置き

皆さん、プログラミング学習をやっていて、1つの言語を学習するだけで、終わらせて、次の言語に進んでいませんか?

実は、学習するだけでは、意味がなく、アウトプットをすることが大切なのです。

というわけで、今回は、アウトプットの1つの手段である、「模写コーディング」について解説していきます。



そもそも模写コーディングとは?

模写コーディングとは、世の中にあるサイトを自分で、模写することです

必要なスキルは、HTML、CSS、javascriptを学習していたらできます。

一見、見本があるので、簡単そうな気がしますが、意外にも、初めてやってみると、とても難しく、手が動かないものです。

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

一見、模写コーディングなんて、「他人のサイトを書き写すようなものだから、意味がなさそう・・・」と思うかもしれませんが、そんなことは、ありません。

というわけで、これから、模写コーディングのメリットを紹介していきます。

模写コーディングは、本番に近い環境

模写コーディングの良いところは、本番に近い環境で、やるので、良い練習になります。

スポーツで例えるならば、「練習試合」みたいなものと、思って頂ければ、良いかと思います。

実際に、自分で、テキストエディタやファイルなどを、用意しなければいけませんので、今までの、プログラミング学習では、習うことのできなかった、環境構築の部分も学習できます

自分で最適コードを見つける力がつく

模写コーディングは、オンライン学習サイトや参考書のように、ガイドは、ありません。

「どのタグを使ったらよいのか」、など自分で、考えて、最適解を見つけていかなければなりません

また、意外にも、学習したことが忘れていることもあるので、どこが、自分は、未熟なのか、模写コーディングを通して、見直すこともできます。

記憶に残る

模写コーディングは、普通の学習よりも、学んだことが、記憶に残りやすいといわれています。

なぜかというと、模写コーディングは、参考書の学習と違い、自己的に行動しなければ、できないからです。

どういうことかと、言いますと、参考書の場合、分からなければ、答えがのっていますが、模写コーディングの場合、先程も紹介したように、ガイドは、ありません。

なので、分からないところがあれば、自分で、ネットで調べるなり、何か工夫が必要です。

このように、自己的に考えて、行動しなければ、いけない内容は、苦労するので、記憶に残りやすいというわけですね。

ここからは、模写コーディングのやり方を紹介

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

模写コーディングをするにあたって、必要なもの。どんなことを意識して、やっていけば、よいかを紹介していきます。

まずは、テキストエディタを準備

テキストエディタは、プログラミングを書く上で、必要なものです。

テキストエディタは、沢山の種類がありますが、有名なもので良いと思います。

例として、「Atom」、「sublimeText」あたりで大丈夫です。

僕は、因みに、sublimeTextを使っています。

htmlとcssのファイルを用意する

基本的に、htmlとcssのファイルにコードを書き込んでいくので、作っておきましょう。

後から、必要なんものがあれば、付け足していく感じで、大丈夫です。

模写コーディングをするサイトを決める

模写コーディングをするサイトは、基本的に、自分ができそうだなと思ったものを選んでいくのが、基本です。

なので、「このサイトじゃないとダメ!」ということは、ありません。

とはいえ、選ぶのは、なかなか難しいと思うので、2つ程、模写コーディングにオススメのサイトを紹介していきたいと思います。

模写コーディングにオススメサイト

・isaraの公式サイト

・慶応義塾大学病院の公式サイト

この2つは、html、css、javascriptの基本が使われているので、とても有力な候補となります。

是非、一度、模写コーディングをやってみてください。良い、経験ができるはずです。

模写コーディングで意識すること

意識して欲しいことは、つらくても、諦めずに、最後まで、やりきることです。

模写コーディングをやっていると、自分の能力の低さに、気づいて、嫌になるかもしれません。

しかし、その問題点を改善することによって、成長していくので、頑張りましょう!

そして、分からないところは、ほっとくのではなく、必ず、調べるようにしてください。

調べるという行動は、この先、プログラマーになっても、やり続ける行動なので、今のうちに、癖にしておきましょう!



人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]