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

プログラミングの学習をしているけど、
コーディングの練習ができる学習サイト無いかな?

コーディングの練習ってどうやればいいのだろう……

効率的な学習方法を知りたいな。

プログラミング学習を始めてコーディングの練習をしたいと思っている方で、このような悩みを抱えている人も多いのではないでしょうか。

基礎学習を終了し、より実践的に学んでいきたい。ですが、その段階にきたところで学習方法が分からず困ってしまう方も多いようです。

この記事では、そんなあなたのために

  • コーディング練習をするのにオススメの学習サイト
  • 仕事を獲得するまでに必要なコーディング練習方法
  • コーディング練習後のチェックポイント

この3点について紹介します。

この記事を読むことで、実践的な練習方法が分かり次の行動を具体的に起こせるようになっています。仕事の獲得に向けて、スキルアップをしましょう!

この記事の要約
  • コーディングの練習には「侍テラコヤ」がおすすめ
  • イラスト&スライドで学習したい人はProgateがおすすめ
  • 写経+模写でコーディングを学ぶとスキルが習得しやすい

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /


当ブログがオススメする
無料プログラミング学習サイト3選

スクロールできます
1位:侍テラコヤ2位:Progate3位:ドットインストール
サイト名


学べる内容HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、WebデザインなどHTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL などHTML/CSS、JavaScript、Ruby、Python、JavaC言語 など
質問
相談サポート
練習問題の数
特徴現役エンジニアとのマンツーマンレッスン
回答率100%のQ&A掲示板が使い放題  
実践的なスキルを身につけられる課題機能
環境構築をしなくても学べる 
イラスト付きのスライド式教材   スマホアプリでも学べて手軽
    
レッスン動画でインプット可能
3分の簡単な動画で手軽に学べる
有料プランなら質問ができる
 
詳細公式サイト公式サイト公式サイト
どのプログラミング学習サイトも無料プランを用意しているので、気になる学習サイトは試してみるのがオススメです!
目次

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

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

侍テラコヤ

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow

登録無料で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分

・各項目は公式サイトに記載された情報をもとに掲載しています。
・料金には2024年6月時点の税込み価格を掲載しています。

Progate

引用元:Progate https://prog-8.com/

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

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

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

Progateとは?評判や使い方、効果的な学習方法を解説!有料版やアプリ版の違い
更新日:2024年4月29日

ドットインストール

引用元:ドットインストール https://dotinstall.com/

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

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

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

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

Schoo

引用元:Schoo https://schoo.jp/

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

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

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

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

ソースコードの写経・模写

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

  • Step1:写経
  • Step2:模写

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

Step1:写経

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

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

写経をするメリットは

  • コードを覚えることができる
  • 今まで触れたことのないコードに出会える
  • サイト全体のコードの流れを知ることができる

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

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

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

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

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

Step2:模写

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

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

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

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

画像:Shutterstock

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

模写の流れは、

  • 練習するサイトの選定
  • 画像などの素材をダウンロード
  • 全体の構成図を紙に簡単に書く
  • コーディングをする
  • 模範サイトのコードと自分のコードを確認する

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

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

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

画像:Shutterstock

しかし、

フォントはどうしたらいい?
色の取得はどうするの?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 参考にしたサイトとデザインのズレが無いか
  • タグのミスがないか
  • マウスホバーのときなどの動きが再現できているか
  • レスポンシブが上手くできているか

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

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

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

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

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

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

この記事を書いた人

目次