コーディングを勉強しようと思ってネットを調べると、基礎的な内容で終わっていたり具体的な勉強サイト、勉強方法、本が紹介されていなかったりします。そこで本記事では現役7年目のWeb制作エンジニアしょーごが、コーディングの勉強方法をご紹介。
コーディングの勉強はやり方を間違えると延々に沼にハマって抜け出せなくなります。延々に学習中の方とか普通にいますので、本記事でコーディングの勉強方法やコツ、勉強後のことまで幅広く学んで頂ければと思います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
コーディングとは？
コーディングとは、簡単に言えばデザインカンプをブラウザに再現する作業の事を指します。デザインカンプからのコーディングとも呼びます。デザインカンプというのは以下のようなものです。
このデザインカンプは私が無料配布している「コーディング課題-入門編」から引用しており、コーディング実装した実サイトは以下から見ることができます。
コーディングの勉強方法を調べている方の中には「Webデザイン」と「コーディング」のそもそもの違いが疑問かと思いますが、基本的に以下のように分けられると思ってください。
- Webデザイン：Webサイトの見た目のデザインを作成
- コーダー（コーディング）：デザインデータに沿ってHTML/CSS/JSなどを使用してスマホやPCで見れる状態にする人
このブログもコードを書いているからこうやって見ることができています。またWordPressを搭載しているため、ブログのように自動更新できる状態になっているわけです。
コーディングの勉強方法
それでは早速コーディングの勉強方法をご紹介。以下の流れで進めていくといいです。
- 本・動画で基礎を学ぶ
- AI環境を構築
- デザインカンプからコーディング
- Sass,JavaScriptを習得・実践
- WordPressを習得
- ポートフォリオを準備する
①：本・動画で基礎を学ぶ
まずは本で学ぶのが一番分かりやすくおすすめです。私が一環しておすすめしているのは以下の書籍です。
この本で基礎の基礎を固めるのが重要だと思います。同時並行でProgateなどを進めるといいですね。
②：AI環境を構築
コーディングの基礎が身についたら、その次はAI環境を構築します。これが2025年以後のコーディングの勉強方法の特徴です。
基本的にVSCodeでコーディングを行うのが鉄板だったのですが、私も含め結構な数のエンジニアがCursorなどなんらかAI機能を搭載したエディターを使用しています。
詳しい導入方法はCursorの使い方記事を参考にしてみてください。ハードルが高いと感じたら一旦「VSCode＋ChatGPT」などでもOKです。
AIを使うとコーディング力が上がらないという論点もありますが、既に現場にはどんどんAIが入り込んでおり、使いこなした方が学習スピードも上がっていいと思います。わざわざ取り入れない選択をしなくてもいいかと。
③：デザインカンプからコーディング
コーディングの基礎学習と環境整備が終わったらデザインカンプからのコーディングを実践していきます。
基本的には以下の流れに沿っていけばOKで、詳しくはWeb制作独学ロードマップに掲載しています。この記事はコーディングの勉強方法の全体像を掴んで欲しいので、ここでは触りだけ触れます。
もしこの段階でデザインカンプからのコーディングが厳しければ、以下の書籍を挟んでください。良い副読本です。
④：Sass,JavaScriptを習得・実践
学習ロードマップの前半が終了し、基本的なHTML/CSSコーディングを習得できたら、その次はSassやJavsScriptを習得していきます。
それぞれ以下の目的で学習していきます。
- Sass：CSSをより便利に書けるようになる言語。CSSの進化も著しいが、いまだ多くの現場に導入されているため、学習は必須
- JavaScript：Webサイトに動きをつけるうえで必須。
具体的な学習方法はロードマップ記事に譲ります。またこのタイミングでCSS設計について理解しておいてもいいでしょう。この時点で以下のようなサイトの制作が完了しています。
⑤：WordPressを習得
ここまででHTML/CSSによる静的サイト制作が完了したので、ここからはいよいよWordPress学習に入っていきます。
WordPress学習では「①完全独学」と「②サービスを活用して爆速で進める」の2パターンがありますが、おすすめは「②サービスを活用して爆速で進める」になります。
WordPressの仕組みを理解するのはとても大変です。もしWordPress学習を独学するならその手法も解説していますが、挫折率が高いため、分かりやすいと評判のUnazukiを利用するのがいいでしょう。
最後の課題であるコーディング演習課題【上級】は納期設定があったりかなり実践的なので、是非実案件前にチャレンジしておきたい、卒業制作のような扱いになります。私が直接レビューを担当します。
⑥：ポートフォリオを準備する
HTML/CSS/JS/WordPress学習が終わったら、最後に営業や転職活動に必要なポートフォリオを準備します。私のロードマップやコーディング学習方法に則った人はポートフォリオ自体は揃っているはずなので、入れ物を軽く準備しておけばOKです。
ポートフォリオは何でも良いわけではなく、正直しょぼいな、、、と思ってしまうポートフォリオも多いです（営業される立場でもあるので、、、）。評価されるポートフォリオについても以前このサイトでも解説していますし、詳しいポートフォリオの準備方法も解説しています。
コーディング勉強のコツ
ここからはコーディング勉強のコツをご紹介。といっても一つしかありません。それは以下。
コーディング勉強をするなら、絶対にプロのレビューを複数回受けるべき！！
プロのレビューを受けるのはとても大事です。プログラミングスクールでもまともにレビューを受けられる場所は少なく、更に複数回のレビューともなると、数十万円のスクールでも提供していなかったりします。
Web制作やコーディング関連の教材は多いですが、一方的に販売するだけでレビューはしていないものも多いです。よって、教材を選ぶ際には必ずレビュー付きのものを選定してください。
コーディングの勉強が向いている人
私ってコーディングに向いてるのかな？
と疑問に思っている方は多いでしょう。私がこれまで見てきてコーディング適性があると思った人は、以下の通り。
- コツコツ頑張れる
- 毎日取り組める意思を持っている
- 極端に出費を避けない
- コード書いてて楽しいと感じる
私はコーダー7年目ですが、未だにコードを書いている人は結論、コードを書くのが好きだったりします。それと、デザインとかマーケティングとかに色々ブレてない人が多いですね。コーディング一本で突き進んだから、まだ続けられてるとも言えそうです。
コーディングの勉強が向かない人
逆にコーディングの勉強に向かないと思う人も一定数います。
- 毎日コツコツ勉強できない
- コード書くのが苦痛
- 自己投資にお金をほぼ使いたくない
- 逆に色んなことに手を出している人もだめ
- 楽して稼ぎたいは挫折の元
リアルな話、コーディングは結構たいへんです。以下の図を見てほしいですが、「コーディング・システム入れ込み」はほんの一部分の工程でしか無いですが、それより上流工程が遅れると、下の工程のコーディングにしわ寄せがきて、ぜも納期は変わらないということが大変多いです。
そんなときに生き残れるタフさが必要です。あとお金使わずに無料独学に固執する人も、結局学習を辞めているか、永遠に何年も学習し続けている人が多い印象です。
自分が学習を優位に進めるために、コーディング学習にあらゆるリソースを投入できる人は、見事稼げるでしょう。
コーディングの勉強におすすめのスクール
さて、コーディングの勉強は結構厳しいという話をしてきましたが、そんなコーディング勉強をサポートしてくれるのがスクールになります。
この記事をご覧の方はスクールにお金をかけたくない人が多いかもしれませんが、ここでは個人的に有料だと思うスクールを一つだけご紹介。
それがデイトラのWeb制作コース
です。詳しくはデイトラWeb制作コースレビュー記事にて解説していますが、Web制作スクールで最も実践的な内容を提供しています。
メンターに無限に質問できるという仕組みによって大きく挫折可能性を低めることができるのと、ポートフォリオを揃えることも可能。私のコーディング課題と併用して理解を深めている方も多いので、検討する価値は大いにあります。
コーディング勉強後は？
コーディングの勉強後は様々な選択肢があります。
- 制作会社に転職するのか
- フリーランスコーダーとして独立するのか
- ノーコードWeb制作で副業するのか
個人的にはまずは制作会社に転職して、人脈やスキルを固めるのが最も再現性が高いと思っています。事実制作会社に入るとめちゃくちゃスキルアップするので、数年後にフリーランスになる際に、とてもスムーズに移行が可能です。
私のコーディング課題を利用して転職成功した方々にインタビューをしているので、参考にしてみてください。
まとめ
本記事ではコーディングの勉強方法について解説してきました。コーディングの勉強は将来どういったキャリアを歩みたいのかによって変わります。基本的にコーディングを仕事にするなら見せられるポートフォリオが必要になってきます。
このブログでは詳しいWeb制作の学習ロードマップを体系的にまとめていますので、是非下記記事も参考にしてみてください。
コーディング勉強に関するよくある質問
コーディングの勉強時間はどのくらいですか？
プログラミングの習得に必要な勉強時間は、目標や言語によって異なります。基礎を身につけるには約100〜300時間、実務レベルになるには約1,000時間が目安とされています。1日30分〜数時間の学習を継続的に行うことが重要です。言語別では、HTML/CSSは約100時間、Pythonは約200〜300時間、Javaは約400〜500時間程度です
プログラミングは独学で学べますか？
プログラミングは独学で学べます。オンライン教材や書籍が豊富にあり、自分のペースで学習できます。本サイトでもWeb制作の独学方法を解説していますが、メンターがいない独学では挫折率が高くなる傾向にあります。
HTMLを独学で勉強するにはどれくらいの期間が必要ですか？
HTMLの独学期間は個人差がありますが、基礎を習得するには70時間程度が目安です。1日2時間の学習で、IT知識がある人なら15日、初心者でも35日程度で基本を身につけられます
ただし、実践的なスキルを磨くにはさらに時間が必要です。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
