コーディング初心者の練習に最適な学習サイト4選【チェックシートあり】

この記事では、初心者におすすめのコーディング練習サイトを紹介します。

コーディングの練習にオススメの教材＆サイト4選

ここではコーディングの練習におすすめのサイトを紹介します。

侍テラコヤ

なお、副業での収入獲得を目指しているものの、どんな仕事が自分に合うかわからない人は「副業診断」をお試しください。

かかる時間はたった1分ほど。5つの質問に答えるだけで、自分にあう副業を診断してもらえます。

自身が取り組みやすい副業で収入を獲得したい人は、ぜひ一度お試しください。

＼ 5つの質問に答えるだけ ／

Progate

これから学習を始めるという方は、先ずはプログラミング学習サイトで有名な「Progate」から初めてみましょう。

プロゲートは、初級編は無料で学習できるのでおすすめです。実際のコーディング部分は有料になりますが、実際にHTMLとCSSを使ってコーディングを行う講座も準備されています。

基礎をまだ学習できていないという方はProgateを取り組んでみましょう。

なお、IT企業への転職や副業での収入獲得を見据え、独学でコーディングスキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

ドットインストール

「ドットインストール」は、言語ごとに動画形式で学ぶことができる学習サイトです。基礎学習から応用編まで講座の種類があり、このサイトだけでステップアップできる講座の内容になっています。

コーディングを実践する講座では、実際にWebサイトを作成するものなどが準備されています。

基礎学習は終わったけど何したらいいか分からないという方は、ドットインストールを使ってより実践的な練習を実施してみましょう。

なお、ITの仕事に興味はあるものの、どの職種が自分にあうのかわからない人もいますよね。そんな人は「ITキャリア診断」をお試しください。

かかる時間はたったの1分。5つの質問に答えるだけで、自分にあうIT職種を診断してもらえます。

自身に適した職種が知りたい人は、手軽に試してみると良いですよ。

＼ 5つの質問に答えるだけ ／

Schoo

「Schoo」はオンライン学習サイトです。業界屈指の講師が目的に合わせた講座を動画で配信しています。イメージとしては、インターネット上の学校のようなものです。

講座の内容も豊富に揃っており、初学者向けやより実践的な内容をやりたいなど、目的にあった講座が見つかるのが特徴です。

基礎学習をして、実践的な練習をしたいという方にオススメの学習サイトです。

2パターンのコーディングの練習方法

ひと通りProgateやドットインストールで基礎は学んだけど、次のステップとして何をしたら良いのか分からいという方に向けて、ここでは2パターンの練習方法について紹介します。

これらはコーディングの成長を加速させる練習方法です。似ているようですが、2つには違いがあります。違いと実施する際のポイントについて紹介します。

Step1：写経

写経とは、僧侶が経典を書き写す修行のことです。プログラミングにおける写経とは、実際のランディングページや教科書のコードを、そっくりそのまま書き写すことを意味しています。

この書き写す作業に意味があるのか？　と疑問があると思いますが、写経を実施するメリットは多くあります。

写経をするメリットは

主にこの3つがあります。

小学生のときに感じを何回もノート書いて練習していましたよね。それと同じでコードを実際に書写すことで、コードを頭に叩き込むことができます。

また、手を動かすなかで初めて出てくるコードを目にすることになり、実践で使えるスキルを身に付けることができます。

写経をするときのポイントは、コピペをせずにタイピングを書き写すことが重要です。タイピングすることで書くスキルと読むスキルを同時に身に付けることができます。

コピペは行わずに実際にタイピングをして練習を実施してみてください。

Step2：模写

数回写経をして、全体の流れやコードの書き方が身についたと感じたら、次は模写を実施してみましょう。

模写とは、一般に公開されているWebサイトのページを真似して作ることです。写経と違い模写をするときは、コードを見ずに練習をしていきます。

模写を繰り返し実施することで、デザインを見ただけでコーディングのイメージを持てるようになります。実践に近い練習ができる上に、反復練習を行うことでコーディングの速度を上げることができます。

コーディングの流れを決めよう

ここからは模写でコーディングを練習するときのコーディングの模写のルールと流れについて紹介します。

模写の流れは、

大まかな流れは上記のようになります。

実際にコードを書き始めるまでに準備が必要ですが、実際の案件を進行するときも同じような流れになります。基本的にこの流れにそって実施することをオススメします。

コーディングにルールを設けよう

しかし、

このような疑問があると思います。

ここでは、模写の練習をする前にあらかじめコーディングのルールを決めておきましょう。

そのルールについて紹介します。

画像素材の利用は模範サイトのものを使う

画像を自分で準備するのは大変なので、実際に使われている画像を使いましょう。模範サイトからダウンロード可能なので、一度自分のパソコンに保存してから使うようにしましょう。

幅や余白はデベロッパーツールで確認する

はじめのうちは、幅や余白はデベロッパーツールで確認するようにしましょう。

幅や余白を目視で調整するのは難易度が高く、時間を必要以上に消費します。先ずは大まかなコーディングスキルを身に付けることを優先しましょう。

コーディングになれてきてから、細かいところまで調整するようにすることをオススメします。

レスポンシブ対応するためのブレークポイントは自分で決めておく

スマートフォンの普及により、レスポンシブ対応しているということが一般的になってきました。したがってレスポンシブに対応した形で模写をオススメします。

しかし、細かいブレークポイントまで完璧に再現するには時間がかかるので、こちらもはじめのうちはブレイクポイントをあらかじめ決めておきましょう。

模写したサイトをチェックしよう

模写が完了したら、必ず下記の項目をチェックするようにしましょう。実際の案件では厳しくみられることになりますのでチェックするクセをつけておきましょう。

模写が完了したあとに満足して、見直しをしない人が結構いたりします。スキルを上げていく上で非常にもったないので、必ず見直しをするようにしましょう。

早くレベルを上げるためには、チェックと改善が重要です！

まとめ：Check項目でミスが無ければ仕事を獲得をしよう

この記事ではコーディングの練習方法について紹介しました。

コーディングの練習はとにかく反復練習が重要になりますので、まずはサイト全体の構造を理解することに意識を向けながら練習をすすめましょう。

一度完成したら、模範としたサイトのコードと自分のコードを比較して、違うところを探してみましょう。比較して違うところを見つけたら、なぜこれを使っているのかなどを考えることで、力が身に付きます。