Progate/ドットインストール終わってからは「部分模写」がおすすめです。

こんにちは、けんぞうです。
Progate・ドットインストールが終わってからの学習方法として、部分模写がかなり効果的です。

動画でも解説しましたので、良かったら。

Progateが終わったら部分模写しよう

Progate上級コースを修了したら、部分模写をしましょう。

Progateはよくできており、上級コースまで完了したら、HTML/CSS/jQueryなどある程度理解は進んでいるはずです。

とはいえ、その段階で一から自分のアタマで考えてコードを書いていくのは無理があります。そこで、部分模写は効果的です。

サイトを模写することは、他のブログなどでもおすすめされていますが、正直全てを模写しきるのは大変です。、、というか、初学の頃は無理でしょう。

ですので、部分的に模写をするわけです。

部分模写の具体的手順

以下の手順で行います。

僕が作っているサイトを参照しつつ、解説します。

STEP①：真似してみたいサイトをChromeで開き、検証する

画像で赤く囲った部分を模写してみようと思います。

Chromeがサイト開き、右クリック>検証でデベロッパーツールを開きます。

詳細なコードが画面下部で表示されます。

STEP②：Sublime textを開き、必要ファイルを作成する

<header class=”site-header”>の部分をクリックすると、ちょうど模写したい範囲が変色するので、<header>タグ内を模写すればOKです。

ここからは、Sublime textを使って実際にコードを書いていきましょう。必要となるファイルは以下の２つです。

• index.html（HTMLコード記載用）
• style.css（見た目編集用）

STEP③：HTML/CSSで部分的に模写をする

⬆︎左右で画面分割をして模写すると捗る

実際模写をする際は、上記画像のように左右画面を分割しながら模写をすると、かなり捗ります。（僕はディスプレイを使っているので画像が小さくなり、すいませんm(_ _)m）

模写したコードは、HTMLファイルをダブルクリックするorChromeにドラッグ&ドロップすると確認できます。

ここからは、ぜひご自身の力を使いつつ部分模写をしてみて下さい。

Chromeでうまく表示されない際は、以下のポイントをチェックしてみてください。

模写する際の注意点とコツ

最初に模写する際、参考にするサイトを選びのコツを書いておきます。

コツ①：動きのないサイトを選ぶ

最初はなるべく動きのない、簡単なサイトを選びましょう。

画像がスライドしたりアニメーションがついている部分は、jQueryなどの記載も必要になってくるのでちょい難易度があがります。

なので、本当に最初の模写はなるべく簡単そうなサイトにしましょう。

コツ②：できれば完璧に模写する

できれば、完璧に見た目を真似るレベルで模写しましょう。

例えば上記の例のようなものであれば、Progateをクリアして来た方なら完璧に真似できると思います。

もし分からないこと、忘れていることがあれば、Progateでスライドをみて再学習すれば良い復習にもなります。

コツ③：模写した後に「なぜこう書くのか？」を考える

模写し終わってからでいいので、「なぜこういう記述をするのか？」を自分の頭で考えましょう。

この過程を踏むのと、飛ばすのとでは理解度が大きく変わってくるはずです。

理由を理解できたら、「他の書き方で実現できないか？」なども考えてみると、さらに理解が深まりますね。

最後に：「真似」はスキル上達の基本

スキルの上達法で最も効率的なのは真似することだと思います。これはたぶん、プログラミングに限らず言えます。

僕は今までも誰かの真似を徹底することで、割りを数字は伸ばせて来ました。

• 英語：Atsueigoの学習法を徹底して真似てTOEIC600→855
• ブログ：マナブさんの文章の流れを真似することで、半年で17,000PV
• プログラミング：ひたすら模写を繰り返し、自分でサイトを作れるレベルに

真似る、真似る、真似ると何十回か繰り返していると、段々自分で操れるようになってきます。

ちょっと話がそれてしまいましたが、「模写大事だよ」ということです。

関連記事

2019.02.02【プログラミング独学のメリット】独学だから身に付く５つの力