目次
コーディングの注意点・やってはいけないこと
初心者がコーディングで間違えやすいポイントについてまとめました。
自分に当てはまっている内容がないか確認してみてください。
もし当てはまる場合はより良いコーディングができるよう少しずつでも改善していきましょう！
いきなりHTMLを書き始める
未経験者にありがちなのはコーディングのスピードを意識するあまり、何も考えずにいきなりHTMLを書き始めてしまうことがあります。
そのまま作業を進めていくと雑なコードになり、他人が見たときに
「コードが汚くて分かりづらい。。」
「修正しづらいよ〜」
と思われてしまうかもしれません。
いきなりHTMLを書き始めるのではなく、以下の内容だけでもコーディングの前に決めておきましょう。
どこからどこまでを一つのエリアとして区切るか決める
ページのコンテンツをいくつかの大きなかたまりで分けることでコードが管理しやすくなります。
また、そのエリアごとにどんなクラス名をつけるかルールを決めることでCSSも分かりやすいものになります。
見出しにどのhタグを使うか決める
hタグを正しい順序で使用するとユーザーが見やすいページになるうえ、SEOの評価も高くなります。
基本的には最も大きい見出しにh1タグ、その次にh2、またその次にh3…と
階層が深くなるごとに小さい見出しを使用するのがルールです。
HTMLを書き始める前にどのhタグを使うか決めておくことでミスがなくなります。
文字はテキストと画像どちらで実装するか決める
制作をしていると、文字をテキストと画像どっちで実装するべきか迷うことがあります。
コーディング終わりました！
↓
「この部分は画像じゃなくてテキストで作り直してくれる？」
ガーン。。。
となることも。
コーディングのやり直しには時間がかかります。
コーディングを始める前にどの部分をテキストで作成し、どこを画像にするか明確にしましょう。
CSSのid名,class名を適当につけてしまう
idやclassは分かりやすいものである必要があります。
他人が見たときその要素が何を表すものなのか分かりやすいものが理想です。
例を紹介します。
1 2 3 4 5 6 7 8 | <div> <section class="area1"> 〜〜省略〜〜 </section> <section class="area2"> 〜〜省略〜〜 </section> </div> |
1 2 3 4 5 6 7 8 | <div> <section class="news"> 〜〜省略〜〜 </section> <section class="mainContents"> 〜〜省略〜〜 </section> </div> |
コメントを書かない
HTML,CSS共に何もコメントを入れないと見返したときに何を書いたか分かりづらくなります。
適度にコメントを入れどこに何を書いたかわかるようにしましょう。
1 2 3 4 5 6 | <section class="news"> <div> <h2>ニュース</h2> 〇〇の新商品発売！ </div> </section><!--news end--> ←わかりやすくコメントを入れる |
画像の画質・容量が最適化されていない
制作現場では画像の容量は何KBまでというルールがあったりします。やり直すとかなり時間がかかるのでルールにのっとって画像を書き出しましょう。
また画像の容量が重いとページ自体の読み込みが遅くなります。
その結果ユーザーに見てもらえなくなる可能性が高くなるので注意が必要です。
また逆に画像を軽くしようとして画質が悪い状態で書き出してしまうこともあります。
容量と画質のバランスを意識して書き出しを行いましょう。
画像を引き伸ばして使ってしまう
ブラウザで表示される画像のサイズが実際の画像サイズよりも大きいと
画像が引き伸ばされてぼやけてしまいます。
実際のサイズより大きく表示しないよう気をつけましょう。
画像の書き出しに誤差がある
画像を書き出すときに1pxでもズレがあるとコーディングがうまくいかないことがあります。
PhotoShopでスライスやアセットを行うときに誤差がないか確認することが大切です。
丁寧なコーディングを心がけよう
品質の高いページを作成するには学習を継続して「コードに詳しくなること」や「丁寧にコーディングする意識を持つこと」が必要です。
とはいえ未経験者の方は最初はできなくて当たり前なので自信をなくさず、日々の学習や業務の中で少しずつ改善していきましょう。
僕がよく使っている学習サイト「Udemy」の解説記事はこちら↓
実践的な授業を行うプログラミングスクールもオススメ
正しいコーディングを身につけるには実務とほぼ同じ環境を経験できるスクールに通うのがオススメです。
プログラミングスクールの中には、現場で使える実践的な技術を教えてくれるところもあれば、ただ教材通りに講義するだけのスクールもあります。
実際の制作現場に近い実践的な技術を学べるスクールに通うことが大切です。
【TECH::EXPERT】は有名企業のエンジニアへヒアリングを重ねて教育プログラムを作り上げているので制作現場の実践的な技術を学ぶことができます。
TECH::EXPERT】の実践的な教育プログラム
- 設計、開発、インフラ構築、運用まで一気通貫で学べる
- フロントからサーバーまでの全レイヤーのスキルが身につく
- チーム開発やコードレビューなど実務とほぼ同じ環境を経験できる
- あなた一人でゼロからサービス公開まで可能に
また【TECH::EXPERT】は、転職成功率99.0%かつ、転職できなければ全額返金保証されているため非常にオススメなプログラミングスクールです。
【TECH::EXPERT】の転職サポート
- 転職できなければ全額返金保証
- 転職成功率99.0% (※2019年8月末時点)
- 転職が決定するまでマンツーマンでサポート
【TECH::EXPERT】は、400名を超える転職決定実績を出しており、これは国内最大級です。
また30歳を超えていても利用することができるので30代以降で転職をお考えの方にも非常にオススメです。