プログラミングの学習をしているけど、
コーディングの練習ができる学習サイト無いかな？
コーディングの練習ってどうやればいいのだろう……
効率的な学習方法を知りたいな。
プログラミング学習を始めてコーディングの練習をしたいと思っている方で、このような悩みを抱えている人も多いのではないでしょうか。
基礎学習を終了し、より実践的に学んでいきたい。ですが、その段階にきたところで学習方法が分からず困ってしまう方も多いようです。
この記事では、そんなあなたのために
- コーディング練習をするのにオススメの学習サイト
- 仕事を獲得するまでに必要なコーディング練習方法
- コーディング練習後のチェックポイント
この3点について紹介します。
この記事を読むことで、実践的な練習方法が分かり次の行動を具体的に起こせるようになっています。仕事の獲得に向けて、スキルアップをしましょう！
この記事の目次
コーディングの練習にオススメの教材＆サイト5選
ここではコーディングの練習におすすめのサイトを紹介します。
Progate
これから学習を始めるという方は、先ずはプログラミング学習サイトで有名な「Progate」から初めてみましょう。
プロゲートは、初級編は無料で学習できるのでおすすめです。実際のコーディング部分は有料になりますが、実際にHTMLとCSSを使ってコーディングを行う講座も準備されています。
基礎をまだ学習できていないという方はProgateを取り組んでみましょう。
ドットインストール
「ドットインストール」は、言語ごとに動画形式で学ぶことができる学習サイトです。基礎学習から応用編まで講座の種類があり、このサイトだけでステップアップできる講座の内容になっています。
コーディングを実践する講座では、実際にWebサイトを作成するものなどが準備されています。
基礎学習は終わったけど何したらいいか分からないという方は、ドットインストールを使ってより実践的な練習を実施してみましょう。
Schoo
「Schoo」はオンライン学習サイトです。業界屈指の講師が目的に合わせた講座を動画で配信しています。イメージとしては、インターネット上の学校のようなものです。
講座の内容も豊富に揃っており、初学者向けやより実践的な内容をやりたいなど、目的にあった講座が見つかるのが特徴です。
基礎学習をして、実践的な練習をしたいという方にオススメの学習サイトです。
2パターンのコーディングの練習方法
ひと通りProgateやドットインストールで基礎は学んだけど、次のステップとして何をしたら良いのか分からいという方に向けて、ここでは2パターンの練習方法について紹介します。
- Step1：写経
- Step2：模写
これらはコーディングの成長を加速させる練習方法です。似ているようですが、2つには違いがあります。違いと実施する際のポイントについて紹介します。
Step1：写経
写経とは、僧侶が経典を書き写す修行のことです。プログラミングにおける写経とは、実際のランディングページや教科書のコードを、そっくりそのまま書き写すことを意味しています。
この書き写す作業に意味があるのか？ と疑問があると思いますが、写経を実施するメリットは多くあります。
写経をするメリットは
- コードを覚えることができる
- 今まで触れたことのないコードに出会える
- サイト全体のコードの流れを知ることができる
主にこの3つがあります。
小学生のときに感じを何回もノート書いて練習していましたよね。それと同じでコードを実際に書写すことで、コードを頭に叩き込むことができます。
また、手を動かすなかで初めて出てくるコードを目にすることになり、実践で使えるスキルを身に付けることができます。
写経をするときのポイントは、コピペをせずにタイピングを書き写すことが重要です。タイピングすることで書くスキルと読むスキルを同時に身に付けることができます。
コピペは行わずに実際にタイピングをして練習を実施してみてください。
Step2：模写
数回写経をして、全体の流れやコードの書き方が身についたと感じたら、次は模写を実施してみましょう。
模写とは、一般に公開されているWebサイトのページを真似して作ることです。写経と違い模写をするときは、コードを見ずに練習をしていきます。
模写を繰り返し実施することで、デザインを見ただけでコーディングのイメージを持てるようになります。実践に近い練習ができる上に、反復練習を行うことでコーディングの速度を上げることができます。
コーディングの流れを決めよう
ここからは模写でコーディングを練習するときのコーディングの模写のルールと流れについて紹介します。
模写の流れは、
- 練習するサイトの選定
- 画像などの素材をダウンロード
- 全体の構成図を紙に簡単に書く
- コーディングをする
- 模範サイトのコードと自分のコードを確認する
大まかな流れは上記のようになります。
実際にコードを書き始めるまでに準備が必要ですが、実際の案件を進行するときも同じような流れになります。基本的にこの流れにそって実施することをオススメします。
コーディングにルールを設けよう
しかし、
色の取得はどうするの？
このような疑問があると思います。
ここでは、模写の練習をする前にあらかじめコーディングのルールを決めておきましょう。
そのルールについて紹介します。
画像素材の利用は模範サイトのものを使う
画像を自分で準備するのは大変なので、実際に使われている画像を使いましょう。模範サイトからダウンロード可能なので、一度自分のパソコンに保存してから使うようにしましょう。
幅や余白はデベロッパーツールで確認する
はじめのうちは、幅や余白はデベロッパーツールで確認するようにしましょう。
幅や余白を目視で調整するのは難易度が高く、時間を必要以上に消費します。先ずは大まかなコーディングスキルを身に付けることを優先しましょう。
コーディングになれてきてから、細かいところまで調整するようにすることをオススメします。
レスポンシブ対応するためのブレークポイントは自分で決めておく
スマートフォンの普及により、レスポンシブ対応しているということが一般的になってきました。したがってレスポンシブに対応した形で模写をオススメします。
しかし、細かいブレークポイントまで完璧に再現するには時間がかかるので、こちらもはじめのうちはブレイクポイントをあらかじめ決めておきましょう。
模写したサイトをチェックしよう
模写が完了したら、必ず下記の項目をチェックするようにしましょう。実際の案件では厳しくみられることになりますのでチェックするクセをつけておきましょう。
- 参考にしたサイトとデザインのズレが無いか
- タグのミスがないか
- マウスホバーのときなどの動きが再現できているか
- レスポンシブが上手くできているか
模写が完了したあとに満足して、見直しをしない人が結構いたりします。スキルを上げていく上で非常にもったないので、必ず見直しをするようにしましょう。
早くレベルを上げるためには、チェックと改善が重要です！
まとめ：Check項目でミスが無ければ仕事を獲得をしよう
この記事ではコーディングの練習方法について紹介しました。
コーディングの練習はとにかく反復練習が重要になりますので、まずはサイト全体の構造を理解することに意識を向けながら練習をすすめましょう。
一度完成したら、模範としたサイトのコードと自分のコードを比較して、違うところを探してみましょう。比較して違うところを見つけたら、なぜこれを使っているのかなどを考えることで、力が身に付きます。
