コーディングの練習をしてコーディング力を上げようとする時にぶつかる悩みとして、
- そもそもどう練習すればいいんだろう
- どのぐらいのレベルを目指せば仕事にできるんだろう
- おすすめの課題はどれだろう？
といったものがあります。
実際コーディングの練習課題を検索して探してみると、数多くのものがヒットしますよね。
そこで今回は、「コーディング練習におすすめのサイト3つを精選して紹介」します。
これらをこなすだけで、実務レベルのコーディング力を手に入れることができます。
これを話している私自身はフリーランスエンジニア歴6年でコーディング案件を200件以上納品している実績があり、現役でWeb制作のスクールメンターも行っています。
今回の記事を見ていただくことで、「どのコーディング課題を選べばいいのか分かるようになる」ので、是非最後まで御覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
コーディング練習の前提
Progateと基礎学習は終わらせておこう
他のサイトではProgateをおすすめサイトに上げていたりしますが、今回はあえてそこは終えている前提で話していきます。
Progateは「HTML/CSSのFlexbox編」までを終わらせましょう。道場編はやらなくていいです。
このあたりは以下の記事を参考にしてください。
また、Progate後に基礎学習として、1冊ですべて身につくHTML & CSSとWebデザイン入門講座などの基礎学習を本で行っておくといいです。
このあたりの基礎学習に関しては以下の記事が参考になるはずです。
なぜこれらの基礎学習が必要なのでしょうか？
これから紹介する学習サイトの課題は、基本的に基礎学習を終えていることを前提にしているからですね。
学習サイトでは、「デザインカンプからのコーディング」を練習していくので、基礎力がないと厳しいです。
デザインカンプからのコーディングとはなんぞやに関しては、以下の記事を御覧ください👇
いよいよここから、おすすめ学習サイトを3つ紹介していきます！
学習サイト❶Codejump
CodeJumpは、プログラミング初心者から上級者まで、幅広い学習者と開発者をサポートするために設計されたプラットフォームです。
高品質なチュートリアル、コーディングチャレンジ、実践的なプロジェクトなど、多彩な学習リソースを提供しています。
多彩な課題が用意されている
CodeJumpの特徴は、とにかく大量の課題が掲載されていて、コーディング練習に困ることがない！ということでしょう。
入門編だけでこんなに数がありますし、
実案件をモデルにした高難易度の実務編もたくさん揃っています（こちらは有料）
各課題には答えのソースコードが記載されているのも丁寧だと思いますね。初学者の頃は
いきなりデザインからコーディング難しい・・・手が進まない・・・
ということも多いと思います。その場合に答えがあれば「写経」することもでき、挫折率を低くすることができますね。これは大きいと思います。
また、実案件に限りなく近い「Codejump Pro」というものもあり、こちらは仮想案件にチャレンジしていくものになります（月額課金のサブスク形式）
とにかく初心者から中級者まで幅広く網羅していますね！
＼幅広いコーディング課題に挑戦できる／
学習サイト❷模写修行
模写修行 (https://moshashugyo.com/) は、駆け出しエンジニアやプログラミング初心者をサポートするための情報を提供するウェブサイトで、
独学での学習に限界を感じている初心者から中級者まで、幅広いレベルのプログラマーにとって役立つ情報を提供しています。
パーツ毎に実装→答え合わせがしていける快適感
模写修行の素晴らしいところは、学習を「パーツ毎に進めていける」点だと思います。
いきなりデザインカンプを一から実装する→挫折❌🙅♂
パーツ毎に実装→挫折しない⭕🙆♂
元々模写修行自体が優良なWebメディアなので、解説も丁寧で分かりやすいですね。
独学で学習を進めている人には強力な味方になるはずです。
＼挫折せずにコーディングを学べる／
学習サイト❸しょーごログ-コーディング練習課題
しょーごログのコーディング練習課題とは、私の出している課題になります。
入門編から上級・Photoshop編まで揃えており、最終的に即戦力コーダーを目指します。
先に紹介した2つと違い、基本的に各課題にレビューをつけています。
レビューを受けることがとても重要
各課題にレビューをつけているのは理由があります。それは
コーダーの責務はデザインを再現することなのに、「まあこれで合ってるだろ」が多すぎる、プロにレビューを受ける機会がなさすぎる
と感じていたからです。
私が一人ひとりの課題のレビューを行っている都合、どうしても無料とはいきませんが、
入門編に関しては無料で出しているので、そちらから挑戦していただくのもいいかなと思います。
またこの入門編を使ったライブコーディング動画も出していますので、一緒に手を動かして進めていただくことも可能です。
ロードマップとレビューを活用しつつ実務レベルを目指す
このコーディング課題はどうやって進めればいいのかな。
という方向けに、このブログでは以前より学習ロードマップを公開しています。
基本的に私の出しているロードマップ内にしょーごログのコーディング練習課題が組み込まれているので、ロードマップに沿うだけで転職も案件獲得も可能です。
最近も独学で転職成功された方にインタビューを行いました。
しょーごログのコーディング練習課題ではとにかく、
- ポートフォリオとして評価されて
- プロのレビューを受けられる
という点を重視しているので、是非活用してください！
＼プロのレビューを受けられるコーディング課題／
自分にあったコーディング練習サイトを探そう
今回は3つのコーディング練習サイトを紹介してきました。
- Codejump（課題数が豊富）
- 模写修行（分かりやすい）
- しょーごログ-コーディング課題（レビュー付き）
それぞれ特徴が異なっていますが、始めて取り組むなら個人的には「模写修行」とかはおすすめですね。
何と言っても、パーツ毎に少しずつ学習を進めて行けて、都度解答・解説があるので、独学勢の強い味方になるかと思います。
「しょーごログのコーディング練習課題」はレビュー付きの本格課題なので、もし本気でコーディング学習に力を入れると決断したなら、こちらを取り組んでいただくのもいいと思います。
レビューを受けて自信と実力を付けていってもらえればと思います。
完全無料でコーディング練習をしたい場合
今回の記事では一部コーディング練習課題が有料でした。
こちらの記事では無料のデザインカンプのみに絞った解説を行っています。
どうしてもコーディング練習にお金はかけたくない。。。
こんな方向けです。
その他：コーディングの独学方法
このサイトでは独学でWeb制作コーディングを学ぶ人が実務レベルを目指す上で有用な記事をいくつも出しています。
以下の記事ではWeb制作の独学について述べています。
Web制作の案件獲得方法についても書いているので、是非学習終了後の姿をイメージするのに参考にしてください。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
筆者の考えとして、無料のものでまずは自分にコーディングの適性があるかを確かめるのが良いと考えています。
しかし本気でコーディングを学ぶなら、有料で品質が高くレビューのあるものを選ぶべきだと思います。