プログラミングの学習をしているけど、
コーディングの練習ができる学習サイト無いかな?
コーディングの練習ってどうやればいいのだろう……
効率的な学習方法を知りたいな。
プログラミング学習を始めてコーディングの練習をしたいと思っている方で、このような悩みを抱えている人も多いのではないでしょうか。
基礎学習を終了し、より実践的に学んでいきたい。ですが、その段階にきたところで学習方法が分からず困ってしまう方も多いようです。
この記事では、そんなあなたのために
- コーディング練習をするのにオススメの学習サイト
- 仕事を獲得するまでに必要なコーディング練習方法
- コーディング練習後のチェックポイント
目次
コーディングの練習にオススメの教材&サイト4選
ここではコーディングの練習におすすめのサイトを紹介します。侍テラコヤ
登録無料で100種類以上の教材が学べる侍テラコヤは、
- 回答率100%のQ&A掲示板
- 必要に応じて受けられるオンラインレッスン
といったサポート体制を整えているため、学習中に出てきた不明点を解決しながらスキルの習得が可能です。また「学習ログ」で勉強の進み具合やこれまでの学習時間を確認しながら、自分のペースで学習を進められます。

また、侍テラコヤは入会金不要・いつでも退会OKに加え、「無料会員登録」でお試し利用ができるので「他のサービスを選べばよかった」と後悔する心配もありません。
コスパよく効率的にスキルを習得したい方は、ぜひ侍テラコヤをお試しください。
運営会社 | 株式会社SAMURAI |
実績 | ・業界最安値0円から ・累計登録者1万8,000名以上 ・講師満足度95% |
受講形式 | オンライン ・テキスト/動画視聴 ・マンツーマンレッスン |
習得できるスキル | HTML、CSS、PHP(Laravel)、Ruby(Ruby on Rails)、Python、Java、JavaScript (jQuery) 、AWS、Linux、ITパスポート、Webデザイン、WordPressなど |
担当講師 | 現役エンジニア/Webデザイナー |
対応時間 | 全日24時間 ※営業時間(10時~22時)外の質問は翌営業日に回答 |
サポート内容 | ・無料でのお試し利用可能 ・100種類以上の教材閲覧 ・回答率100%のQ&A掲示板 ・現役エンジニアとのマンツーマンレッスン(回数制) ・就職/転職サポート(20~31歳の利用者に限る) |
アクセス | 完全オンライン |
備考 | ※全プランの共通事項 ・入学金:無料 ・利用継続:最短1ヶ月から利用可能 ・全額返金保証制度あり ・1レッスン時間60分 |
・各項目は公式サイトに記載された情報をもとに掲載しています。
・料金には2023年11月時点の税込み価格を掲載しています。
Progate

引用元:Progate https://prog-8.com/
これから学習を始めるという方は、先ずはプログラミング学習サイトで有名な「Progate」から初めてみましょう。
プロゲートは、初級編は無料で学習できるのでおすすめです。実際のコーディング部分は有料になりますが、実際にHTMLとCSSを使ってコーディングを行う講座も準備されています。
基礎をまだ学習できていないという方はProgateを取り組んでみましょう。

Progateとは?評判や使い方、効果的な学習方法を解説!有料版やアプリ版の違い
更新日:2023年11月23日
ドットインストール

引用元:ドットインストール https://dotinstall.com/
「ドットインストール」は、言語ごとに動画形式で学ぶことができる学習サイトです。基礎学習から応用編まで講座の種類があり、このサイトだけでステップアップできる講座の内容になっています。
コーディングを実践する講座では、実際にWebサイトを作成するものなどが準備されています。
基礎学習は終わったけど何したらいいか分からないという方は、ドットインストールを使ってより実践的な練習を実施してみましょう。

ドットインストールとは?利用者が語る特徴とおすすめの活用法
更新日:2023年11月24日
Schoo

引用元:Schoo https://schoo.jp/
「Schoo」はオンライン学習サイトです。業界屈指の講師が目的に合わせた講座を動画で配信しています。イメージとしては、インターネット上の学校のようなものです。
講座の内容も豊富に揃っており、初学者向けやより実践的な内容をやりたいなど、目的にあった講座が見つかるのが特徴です。
基礎学習をして、実践的な練習をしたいという方にオススメの学習サイトです。
2パターンのコーディングの練習方法

- Step1:写経
- Step2:模写
Step1:写経
写経とは、僧侶が経典を書き写す修行のことです。プログラミングにおける写経とは、実際のランディングページや教科書のコードを、そっくりそのまま書き写すことを意味しています。 この書き写す作業に意味があるのか? と疑問があると思いますが、写経を実施するメリットは多くあります。 写経をするメリットは- コードを覚えることができる
- 今まで触れたことのないコードに出会える
- サイト全体のコードの流れを知ることができる
Step2:模写
数回写経をして、全体の流れやコードの書き方が身についたと感じたら、次は模写を実施してみましょう。 模写とは、一般に公開されているWebサイトのページを真似して作ることです。写経と違い模写をするときは、コードを見ずに練習をしていきます。 模写を繰り返し実施することで、デザインを見ただけでコーディングのイメージを持てるようになります。実践に近い練習ができる上に、反復練習を行うことでコーディングの速度を上げることができます。コーディングの流れを決めよう

画像:Shutterstock
ここからは模写でコーディングを練習するときのコーディングの模写のルールと流れについて紹介します。
模写の流れは、
- 練習するサイトの選定
- 画像などの素材をダウンロード
- 全体の構成図を紙に簡単に書く
- コーディングをする
- 模範サイトのコードと自分のコードを確認する
コーディングにルールを設けよう

画像:Shutterstock
しかし、
フォントはどうしたらいい?
色の取得はどうするの?
このような疑問があると思います。
ここでは、模写の練習をする前にあらかじめコーディングのルールを決めておきましょう。
そのルールについて紹介します。
画像素材の利用は模範サイトのものを使う
画像を自分で準備するのは大変なので、実際に使われている画像を使いましょう。模範サイトからダウンロード可能なので、一度自分のパソコンに保存してから使うようにしましょう。幅や余白はデベロッパーツールで確認する
はじめのうちは、幅や余白はデベロッパーツールで確認するようにしましょう。 幅や余白を目視で調整するのは難易度が高く、時間を必要以上に消費します。先ずは大まかなコーディングスキルを身に付けることを優先しましょう。 コーディングになれてきてから、細かいところまで調整するようにすることをオススメします。レスポンシブ対応するためのブレークポイントは自分で決めておく
スマートフォンの普及により、レスポンシブ対応しているということが一般的になってきました。したがってレスポンシブに対応した形で模写をオススメします。 しかし、細かいブレークポイントまで完璧に再現するには時間がかかるので、こちらもはじめのうちはブレイクポイントをあらかじめ決めておきましょう。模写したサイトをチェックしよう

- 参考にしたサイトとデザインのズレが無いか
- タグのミスがないか
- マウスホバーのときなどの動きが再現できているか
- レスポンシブが上手くできているか
まとめ:Check項目でミスが無ければ仕事を獲得をしよう

挫折せず目的を達成するなら
専属マンツーマンレッスンの侍エンジニア

プログラミング学習の挫折率は約90%と言われています。学習を成功させるには、モチベーションを維持して成長を実感できる環境が必要です。
侍エンジニアなら「現役エンジニア講師」、「学習コーチ」、「Q&A掲示板」トリプルサポート体制であなたの学習をサポートするほか、オーダーメイドカリキュラムで必要なことだけを学べるため、さまざまなランキングでNo1という実績を挙げています。
挫折せず最短でプログラミングを習得したいなら侍エンジニアがおすすめです!