とあるサイトのコードレビュー

01waveの冨永です。

先日、特別な勉強会を開いていただきました。
なにが「特別」なのかと言いますと、、、
「トミーさんが聞きたいことをなんでも聞いていいよ!」という貴重なお時間をいただいたのです。

聞きたいことは山ほどあるが、聞きたいことがわからない。
新人あるあるのドツボにはまってしまっている私。

そういえば、社内で「あのサイト良いよね〜」「このサイト良くないよね〜」など会話が飛び交っていたことを思い出し、そのことについて聞いてみようと思いました。

私にとっては、どこが良くてどこが悪いのか理解できていなかったため、
とあるサイトを題材にコードレビューの勉強会を開いていただきました。

そこで教えていただいた気づきなどをまとめています。

タグは正しい使い方をすること

article タグについて

記事を囲む時のタグですね。
トップページの新着情報を囲むときなどによく使います。
このタグで注意したいのが、見出し<h1>〜<h6>を必ず入れること!

コードレビューしたサイトには見出しが入っていませんでした…。
見出しを入れていなくても問題なく表示されてしまうため、意識して気をつけたいところですね。

aside タグについて

内容よりも私が気になったのは読み方です!
「アサイド」と読む人もいれば、「エーサイド」と読む人もいました。
読み方としては、どちらでもいいそうなのですが、英語の発音表記は「əˈsīd」だったので、私は「アサイド」と読むことにします!

それはさておき、意味としては、直接関係ないが関連あるもの(補足情報)を囲むタグですね。
バナーを入れるタグなのかと思っていたのですが、他にも「 お問い合わせフォーム」や「サイドバー」などを入れることがあるみたいです。

i タグについて

「i」タグの略称について、「icon」の「i」かと思っていたのですが、実はこれ「italic(斜体)」の「i」だそうです!!
アイコンを入れるときによく見かけていたので勘違いしていました。
そのため、アイコンを入れる時は<span>などで入れることが望ましいそうです。

ソースコードは人から見られることを意識すること

  • 読み込む必要のない不要なコードは消すこと
  • インデントを綺麗に調節すること
  • 文章として必要のないものはHTMLではなく、CSSの擬似要素として記入すること

当たり前のことなのですが、ついつい忘れがちなことですね。

また、idタグなどに「test」や「hoge」「moge」などを目にすることがありました。
これは、プログラマーが使う仮置きの変数だそうです。
仮置きで置いておくのはいいのですが、完成し納品する際は、各々にあった名前に変更しましょう。

他の人が見てもわかりやすいコードを書くことは、後々、自分が修正するときにも見やすいことになりますので、普段から意識していきたいところですね。

過度なアニメーションは避けること

アニメーションが多すぎると本来重要である内容が薄れてしまったり、負荷が大きいと画面がスムーズに表示されなくなる場合があります。
ユーザーにとっては、目的のゴールに辿り着くことができずストレスや不満を感じてしまいますね。
これでは、せっかく訪れてくれたユーザーも離れてしまいます。
動きのないサイトより、動きのあるサイトの方が見栄え良く見えますが、何事もほどほどが一番ということです。

勉強会のときに、アニメーションについて参考になるサイトを教えていただきました。
Google Developers – Web Fundamentals – アニメーション

補足

他にもさまざまなことを教えていただきました。
どれも為になることばかりでしたので、簡単にですが記載しておきます。

  • title属性に記号は使わないほうが良い
  • <img>タグ内のaltは極力入力すること
  • !importantは強力なので、基本使わないこと
  • 影の付け方は、違和感ないようにつけること
  • 同じソース内ではコードを統一すること。<br>タグの<br />などバラバラに書かないこと

まとめ

一つのサイトを複数人で見ることにより、コードを書くときにどんなことに気をつけたらいいのかを知ることができました。
自分の目でサイトを見ても気づく点は微々たるもので、複数人で意見を言い合いながら見ることにより理解力も深まり、とても内容の濃い勉強会でした。
この勉強会の空気感だけで頭が良くなった気分です(笑)

初心者にとっては全てが知識となり、経験者の方には復習や新たな気づきもあるコードレビュー。
ぜひ皆さんの会社でも実践されてみてはいかがでしょうか?新たな発見が生まれるかもしれませんね。