スキルを習得する

【初心者必見】模写コーディングすべき理由とその方法をご紹介

こんにちは!嫁です。

悩む人々
悩む人々
プログラミング学習を始めたよ!学習サイトのProgateを使って、HTML&CSSのコース終了!次は何をしたら良いのかな?

こんな方は必見です!
ひと通り基礎を学んだあとは、実際に世に出ているサイトの模写をしてみましょう!

嫁
私自身、やる前は「模写コーディングなんてやる意味あるのかな?身になるの?」って思っていましたが、いざやってみるとコーディングの感覚もわかり、ものすごく力が付きました。時間を使える人なら特に、サイトの模写練習は絶対にオススメです!

実際に私が模写してみたのは、ノマドエンジニア講座 iSaraのページです。
おおまかなレスポンシブ設定を含めて、ページ全部の模写をやり遂げることができました!

本記事では、模写コーディングでプログラミングスキルを向上させることに成功した私が、模写コーディングに必要な準備や学習のコツなどをお伝えしていきます!
これを読めば、模写コーディングの有用性と、どんな感じで進めていくかというイメージを知ることができます!

模写コーディング前の基礎学習

まずは基礎学習を進めましょう。
オススメはProgateです。

ちなみに、模写するレベルまで達するためには、Progateの有料会員になることをオススメします。
Progateの有料会員になれば、公開されている全78レッスンに取り組むことができます。
有料会員は月額980円(税別)で、数分程度で簡単に登録することができます。

嫁
Progateの上級編までこなせば、ある程度の基礎知識を身につけられますし、模写コーディングをするにあたっても「こんな表示のさせかた、やった気がする・・・!」というレベルまで達することができます。

Progateは一通り終えても、まだ模写で使います。ブラウザは閉じずにそのまま!


いざ、サイト模写!

模写対象のサイト探し

まずは、模写コーディングをする対象のサイトを検討しましょう。

オススメ1:iSara

iSaraは、ノマドフリーランス養成講座です。
日本人が立ち上げた講座ですが、開催地はなんとバンコク!
エンジニアとしてのスキルだけでなく「稼ぐ力」を手に入れることを目的とした、言葉通り「ノマドフリーランス養成講座」です。

嫁
模写コーディングをするにあたって、ボリューム感はかなりあるものの、難易度としては程よく苦しんで学べるレベルかなあと感じました。また、iSaraはポートフォリオとしての掲載を許可されているため、堂々と自分の実績にすることができます。

※ ただし、ポートフォリオとして使うには利用ルールがあるので、遵守するようにしましょう!

オススメ2:ちづみさんの模写練習用サイト

ちづみさん(@098ra0209)は、フリーランスでwebデザイナーな女性です。
わかりやすすぎるイラストがよくTwitterで話題になってます。
お会いしたことはありませんが、勝手に私がちづみさんのファンです!(笑)

このちづみさんが、模写コーディングのためのめちゃくちゃかわいい練習用サイトを、noteにて提供しています。

嫁
恐縮ながら使用したことは無いですが、もっと早く見つけていたら使っていたと思います。ボリュームも難易度も、Progateが終わってすぐのレベルにピッタリかと!

コーディングの環境を作る

模写するサイトを決めたら、コーディングをするための環境を作っていきましょう。
とは言っても、やることはひとつ。テキストエディタを用意するだけです。

嫁
極端な話、標準でパソコンに入っているメモ帳なんかでもプログラムは作れます。しかし、エディタにはそれぞれ特徴があり、うまく使えばコーディングの時間を圧倒的に減らすことができますので、この際にテキストエディタを導入してみましょう!

嫁おすすめのテキストエディタ

先にお伝えすると、テキストエディタは多彩にあり、好みは人それぞれです。
エディタの紹介をしているサイトもたくさんありますし、フリーで使えるものが大変多くあります。

そのうち、私が使ったことあるものをご紹介だけ!
その中でもコーディングをするのにおすすめなエディタを決めるとしたら、Visual Studio Code です!

★Visual Studio Code
・サクラエディタ
・Atom
・mi
・Eclipse

テキストエディタの導入方法やカスタマイズについては、様々なサイトで解説されているので探してみてください!
なお、上記で紹介しているProgateでは、「HTML & CSS の開発環境を用意しよう!」というコースがあり、エディタのAtomを使った環境の準備をすることができます。

あとはひたすら模写!

準備ができたらあとは頑張るのみ!

パソコン画面に出すべきは、
 ・準備したテキストエディタ
 ・見本のサイト
 ・Progateのスライド検索画面
の3画面です。

こちらの記事でも書いてますが、プログラミングは暗記で進めるものではありません。

わからなくなったら、Progateの類似したスライドをどんどん確認して、自分の作りたいイメージに合わせてみましょう。
それでもダメそうだったら、ググったって良いんです!

模写コーディングの3つの大切なポイント

①Google chromeの「検証機能」を活用すべし

模写コーディングをするにあたって、Google chromeの「検証機能」はマストです!

検証機能を使うと、サイトのHTMLやCSSの状態が簡単にわかります。
簡単な例を、実際の画面を使ってご紹介します。

ページにボタンをひとつ作って、検証モードを開いてみました。

検証モードの上部にある、HTMLにカーソルを当てると、画面の該当部分の状態がわかります。

検証モードはその場で書き換えてみることができます。
例えば、この画面のmarginを変えてみました。

嫁
このように、実際の画面の状態を見ながら確認&検証ができます。とにかく便利で、画面コーディングには無くてはならない機能ですね!

こちらも、上記で紹介しているProgateで、「検証ツール(デベロッパーモード)の使い方」というコースがありますので大いに活用してみてください!

小噺:プログラミングで大切なこと

めずらしく本職の話をします。(笑)

私自身、経験も相当少ないし知識も少ないわけですが、立場的に後輩のプログラムを見てあげる機会があるんです。たまーに。
そのときに後輩(IT未経験)にも伝えたことがあります。

プログラミングのコツとして、想定通りにプログラムが動いてくれないときはどうすれば良いのか。
それは、「何ができていて、何ができていないか」を把握すること。そして、小さな動きから試してみることです。

例えば「ファイルを読み込む」っていう動作がうまくいかないとき。
まず、どこまでできているのかを確認します。
ファイル名は正しく認識できているのか。そもそもファイル名を誤って設定しているのに、読み込みの処理を何度確認したって何も変わりません。
何ができていて、どこからがうまくいっていないのか、それを確認する必要があります。

さらに、小さな動きから試します。
例えばファイル名の設定を簡単にすればできるのか。
ファイル名の設定をコメントアウトすることで処理をあえて飛ばしてみる。それでうまくいったら、その中身が誤っている。

大抵のエラーは、結び目をひとつずつ解いていくように、コツコツ解決させていくことでうまく動きます。
もちろん、そう簡単にいかないものもたくさんありますけど・・・(笑)

この小噺を踏まえて、今回ご紹介した検証ツールを大いに活用していただけたらと思います!

②最初から完璧を目指すのはオススメしません。

模写コーディングをするとき、基本的には上から順に作っていくと思います。
そのとき、そのブロックを完璧にしてから次のブロックへ!というやり方はオススメしません!

「このブロックはおおよそ出来上がったな〜」と思ったら、まずは次に進んでしまったほうが良いです。
また、うまく実装できないパーツがあったとしても、ある程度やってみて駄目だったら一旦飛ばしましょう。

なぜなら、全体像が見えてから戻るほうが、またコーディングに慣れてから戻るほうが、スムーズに解決できることが非常に多いからです。

嫁
私自身、模写コーディングをしてどうしてもうまく表示されない箇所がありました。とりあえずそこは飛ばして進め、あとから戻ってやってみたら、当然のようにできちゃったんです。また、全体のデザインもおおまかなまま最後まで進め、最後にまとめて体裁を整えたことでスムーズに完成まで持っていくことができました。モチベーションを保つためにも、都度完璧を目指すのではなく、どんどん次に進んでしまって最後に整理整頓をすることがオススメです!

③構造がわからなくなったら整理してみるべし

コーディングでは、処理を入れ子にすることが多くあります。
模写コーディングをしていると、だんだん構造がわからなくなってくることがあるんです。

そんなときは、見本の画面を自分で整理整頓してみましょう!

このショーヘーさん(@showheyohtaki)のツイートにあるように、すーさん(@belltreeWeb)の画像を参考にして構造を確認してみましょう。
この感覚を掴むことで、今後自分でオリジナルのページを作るときにも役立てることができます!

嫁
私自身も途中で何がなんだかわからなくなり、かなりざっくりではありますが整理しながら模写コーディングを進めていきました!

おわりに

悩む人々
悩む人々
プログラミング学習を始めたよ!学習サイトのProgateを使って、HTML&CSSのコース終了!次は何をしたら良いのかな?

こんな方が次にすべきことは、模写コーディング
模写コーディングのイメージを持っていただくことができましたでしょうか?

ただ文字を書き写すだけでなく、配置やレスポンシブ設定を同じようにするにはどんな書き方をしたら良いのかを考え、調べ、手を動かすことが重要です。
模写コーディングにチャレンジして、コーディングスキルを伸ばしていきましょう!

ABOUT ME
嫁
当サイトのライターであり、旦那いわむーの相方。大学卒業後、仙台にあるIT企業に務めて4年目になり、夕飯後や休日に記事を執筆する生活をしている。文字を書くことと写真を撮ることが好きなので、どんどん情報発信スキルを上げていこうと日々勉強中。好きなものは旅行とお酒で、ビールはキリン一番搾り推し。