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