コーディング初心者がやりがちな3つのミスとは！案件を効率よく進めるコツを130名以上の駆け出しに指導しているプロが伝授

インタビュアーのワカジツです！本日はよろしくお願いいたします。

早速ですが、コーディングの初心者がやりがちなミスや失敗について教えてください。

私がこれまでに130名以上へコーディング指導を行ってきたなかで、特に初心者がやりがちなミスが、次の3つです。

1. 我流で進めてしまう
2. 自分で書いたコードの間違いに気付けない
3. HTMLやCSSの理解を深めていない

それぞれ詳しく解説するので、コーディングを始めたてで中々仕事が獲得できていない方は、ぜひ参考にしてみてください！

よくあるのが、無料のWeb記事やYouTube動画でコーディングを学習したあとに、我流で実務に着手するケースです。

自発的に学習をするのはいいことなのですが、無料で得られる情報だけだと、案件で求められるコーディングレベルとはかけ離れてしまいます。

その結果、案件を受けたとしても修正が非常に多くなり、苦労している印象です。

間違っている情報が多いということでしょうか？

間違っているというよりは、あまり実務に適していないものが多いですね。

案件で求められるコーディングの情報は、結構クローズドな場所で出回っています。

Brainなどの有料教材を買ったり、コミュニティで先人の方から情報を得たりしないと、いざ実務で大変な思いをすることになるため、注意が必要です。

もちろん無料のWeb記事でも探せば優良な情報がありますが、たどり着くまでに時間がかなりかかると思います。

自分のコードが合っていると思いこんでしまっているのも、初心者にありがちなミスです。

完成したWebサイト自体が正しく表示できているので、ちゃんとコーディングできていると感じてしまうんですよね。

私も初心者のころは、自分のコードが正しいと思っていました。

Webサイトが正しく表示できていても、間違っているということがあるのでしょうか？

例えばパソコンじゃなくてタブレットやスマホで見たときに表示崩れが起きていたり、ユーザー目線で見ると「もっとこのように実装したほうがいい」みたいな改善案があったりします。

やはり初心者とベテランでは、Webサイトを見る視座が違うんですよね。

そのため、先ほども言ったように、先人の方から情報を得ることが大切だといえます。

確かに初心者が一人でコーディングするだけでは、さらにいい改善案とかは出てこなさそうですね…。

Web制作を始める人の多くは、何かしらの教材をもとに学習を進めると思います。

ただし、教科書通りに進めてはいるものの、解説している内容を丸写ししているだけで、HTMLやCSSへの理解を深めていないという方も少なくありません。

「なぜこのHTML・CSSが使われているのか」「なぜこのように実装しているのか」という根本部分を理解していないと、実務にうまく対応できないコーダーになってしまいます。

外側だけでなく、中身を理解しないと、ミスにつながりやすいということでしょうか？

そうですね。正直コーディングというのは、他の人が作ったパーツを流用することで、ある程度きれいな見た目の制作物を作れてしまいます。

コピペOKのコード集とかも売られていますからね。

もちろん他の人のコードを活用するのはまったく問題ないのですが、「なぜこのコードなのか」を深堀って理解していないと、スキルが身につきません。

案件でも柔軟性がなくなり、クライアントの要望に答えられなくなってしまいます。

それでは、初心者がコーディング案件を効率よく進めるコツを教えてください！

1. 時間を管理する
2. 「なんとなくコーディングする」という状態をなくす

この2つは、学習段階から意識しておくといいポイントです。それぞれ解説します！

デザインカンプからのコーディングや案件対応など、いま自分が実施している課題に対して、どれくらい時間がかかるのかを計測して把握しておきましょう。
また、目標時間を設定することも大切です。

コーディングにかかる時間を把握すれば、自分が「特にどこに手間取っているのか」がわかりやすくなります。

手間がかかっている部分を解消すると、より効率のいいコーディングを実施することが可能です。

学習段階から時間を測るんですね！意外とやっていない人は多そうです。

そうですね。案件を受注したときに、クライアントから「どれくらい時間がかかりますか？」と聞かれることは多いです。

学習段階から時間を計測していれば、このような質問に即座に答えられますし、「◯時間かかるから◯円で提案しよう」と、見積もりも作りやすくなります。

予想以上に時間がかかって納期を落とすという事態も避けられるので、毎回忘れずに計測するようにしましょう。

先ほどもお伝えしましたが、「教科書の内容を丸写ししている」「他の人が作ったコードを理解せず使っている」という人は多いです。

ただ、このような「なんとなくコーディングしている状態」だと、間違っていても自分で軌道修正ができません。

ちゃんと自分なりの考えを持ってコーディングをすることで、ミスが減り、様々な案件に柔軟に対応できるようになります。

すでにあるコードを使うときも、自分で「なぜこのコードなのか」を考えるということでしょうか？

その通りです。他の人が作ったコードを使ったり、AIに頼ったりすることは、今後もよくあると思います。

とはいえ、それだけだと自分のスキル向上や効率化には繋がらないため、ちゃんと理解することを意識してみてください。

では、実際の案件で、特にチェックされるコーディングのポイントがあれば教えてください！

特にWeb制作会社と仕事をする際に見られるポイントは、以下の2つです。

1. コーディングのこだわりや配慮
2. コードの見やすさ

コーディングは、自分の画面では見えないところでのこだわりや配慮が非常に大切です。

• 異なるデバイス・ブラウザで問題なく表示できるか
• お知らせの更新など、テキストなどの要素が増えてもきれいに表示できるか
• ボタンが反応する領域は適切か

など、パッと見ただけではわからない部分にも、しっかりこだわる必要があります。

初心者の場合、細かくこだわれていないケースが多いのでしょうか？

そうですね。自分がコーディングしたパソコンやブラウザでは問題なく表示できているケースが大半なので、気付きづらいかもしれません。

特に初心者はコーディングに時間がかかって、納期ギリギリになることもよくあります。

また、そもそも「どこにこだわればいいのか」を知らないケースも多いです。

そこで私のBrain「【全学習者が見落とすポイント徹底解説】案件で求められるコーディングTips」では、コーディング初学者～営業駆け出しの方向けに、実案件で求められるポイントを徹底解説しました。

コーディングの教材やスクールでは学べないものの、案件では絶対に確認されるポイントを厳選して解説しています。

買い切りの教材ですが、今後の市場やツールの変化に合わせて、内容を半永久的に更新していくのが強みです。

無料部分でも案件で求められるポイントを解説しているので、ぜひそちらだけでもご覧ください！

Web制作会社の案件の場合、ひとつのWebサイトに多くの人が携わることがあります。

そのため、見やすいコードで記述できているかは、かなり重要視されるポイントです。

コードが見づらい状態だと、保守運用を担当するコーダーさんに迷惑をかけてしまう可能性があるため、誰が見てもわかりやすい内容にすることを心がけましょう。

誰が見てもわかりやすいコードというのは、どのようなものでしょうか？

例えばコーディングをする際のルールを設ける「CSS設計」を行うことですね。

CSS設計を行っていない＝ルールを決めずにコーディングをしているのと同じです。

CSS設計はコーダー共通のルールでもあるので、CSS設計を行っていないと、他の人から見るとかなり見づらくなってしまいます。

詳しくは「【重要】コーディングの効率化はCSS設計が命！作業が遅い人の特徴や時短のコツを最高月商195万円のコーダーが解説」という記事でも解説しているので、ぜひそちらもご覧ください！

ありがとうございました！