2020年08月26日

コーディングテストno1 あなたは本当にコーディング出来てる!?

コーディングテストno1 あなたは本当にコーディング出来てる!?

こんにちは!SeekNextの佐藤です。
今回はコーディングテストと題して私からコーディングに関してテストを出題したいと思います!

最近、採用活動に力を入れ始めたこともあり、「初心者の方」や「現在Web制作を学んでいる方」などのコードをレビューする機会が増えました。そこで私なりに初心者に共通して言えることが幾つも見えてきました。そんな初心者の方がプロに近づく為のちょっとした知識について記事にしていこうと思います!

コーディングテストno1

以下の画像をご覧ください。皆さんはどのようなコーディングを行うか考えてみて下さい。

よくある記事の一覧です。皆さんのコーディングはいかがですか?

初心者が陥りがちなコーディング

ここで、テストレビューを行ってきた経験を踏まえると初心者の方々は以下のようなコーディングが多い傾向にあります。(一番左は動画になっていますが、画像と思ってコーディングします。クラス名やリンクなどは省略)

<div>
  <img src="~~">
  <p>2020年6月6日</p>
  <p>2分で分かる案内サポートのメリット講座<p>
</div>
<div>
  <img src="~~">
  <p>2020年6月6日</p>
  <p>スマホでバーチャルカスタマイズができる!<p>
</div>
<div>
  <img src="~~">
  <p>2020年6月6日</p>
  <p>ドライブの季節!スタッフお勧めスポット<p>
</div>
<div>
  <img src="~~">
  <p>2020年6月6日</p>
  <p>新作入荷情報!お問い合わせの多かったアイテム入荷<p>
</div>

皆さんの考えたコーディングと比較してどうでしょうか?結構上のコーディングをした方も多いのではないでしょうか?

プロが組むコーディング

もちろん、私のコーディングが絶対的な正解というわけではなりませんし、もし私のコードよりもいいコーディングをご存知の方がいらっしゃいましたら、是非ご教示頂きたいです!

また、タグの使い方が少し違うくらいでは、SEOにもデザイン的にも何の問題もないので、ご安心ください。

ただ、何百のコーディングを実装、見てきた私が上記のコードを見るとなんか「初心者くさい」ダサイコードに見えてしまいます。デザインの参考サイトに掲載されるようなサイトも上記のようにコーディング行っていないはずです。

<ul>
  <li>
    <div><img src="~~"></div>
    <span>2020年6月6日</span>
    <h2>記事のタイトル</h2>
  </li>
  <li>
    <div><img src="~~"></div>
    <span>2020年6月6日</span>
    <h2>記事のタイトル</h2>
  </li>
  <li>
    <div><img src="~~"></div>
    <span>2020年6月6日</span>
    <h2>記事のタイトル</h2>
  </li>
  <li>
    <div><img src="~~"></div>
    <span>2020年6月6日</span>
    <h2>記事のタイトル</h2>
  </li>
</ul>

私なら上記のようにコーディングします!記事のタイトルは<h2>で組んでいますが、文脈によって変更します。

初心者のコーディングの特徴
第1位

  • 文章は全て<p></p>を使用する

私がコードレビューを行っていると圧倒的に多いです。基本的に<p></p>は『パラグラフ(段落)』を表すタグなので、日付みたいな1単語に<p>を使用するのは私の中では微妙かなと考えています。おそらく参考サイトに掲載されるようなサイトは使用していないと思います。

また、記事のタイトルもまさにタイトルなので、<h>タグで組んであげるのがベストかなと思っています。

<p>タグを卒業しよう!

いかがでしたか?意外とドキッとした方も多かったのではないでしょうか?
このように、初心者の教育にも力を入れている企業だからこそ発信できる「役立つコーディング知識」をこれからどんどん発信していこうと考えていますので、
是非、弊社ブログをお気に入り登録してください!
Twitterにて情報発信も行っていますので、フォローよろしくお願いします!