こんにちは、けーすけです。今回は私が主催しました「20代のコードレビュー会」のまとめになります。

夢中になってツイートするのを忘れていましたので、参考になればと思います。

取り急ぎ公開しますので、文章まとめきってなかったり、話題が抜けてたりもしますがアンケートを回収したりして追記していきます。

参加した方h、ツイッターのメッセージなどでこんな内容でここ話題になったよ！と教えていただけると幸いです。

話題に上がったこと

• 命名規則どうしてる
• h1はページに一つ？
• hタグを決める基準
• 関連記事のマークアップどうしてる
• mainタグとasideタグの関係
• asideの中にhタグはあり？
• アクセシビリティ的にどうなのか
• WordPressを組むとき、どの段階でPHP書き出す？
• サムネイルの出力はどうしてる

個人的に気になった話題がこちらです。それでは行きましょう！

命名規則どうしてる

結構みんな気になっていたのがこの話題、私と20代という業界入って経験の浅い方々は何を考えてマークアップしているのかなぁ、、、と個人的に気になってました。会社で決まっているかたもいれば、そんなに決まりがない方も。様々でしたが、一番多かったのは「BEM記法」でした。

BEMでかくと単純にみてわかりやすいという意見が多かったです。BEMで書く人、書かない人共通してユーティリティのクラスだったり共通するベースのスタイルに上書きするという考え方を中心にクラス名をつけてるんだなぁという印象。

特にがっつり設計していた方は、ECSSを使っているとのことでした。個人的には初めて聞いたのですが、とてもわかりやすくて今後使っていきたいとものすごく感じました。
やはり日頃行なっている案件によってだいぶ判断の基準が違うんだなぁとも感じました。

是非この記事を見た方に、こんな設計してるよ！とか教えていただけると幸いです。

h1はページに一つ？,hタグを決める基準

永遠の話題。

この場においてですが、h1はページに1つが妥当じゃないか？という結論にいたりました。
ただ、ページのどこをh1にするか？というのはかなり意見が分かれました。

コーポレートサイトならここ。メディア系のサイトならここ。とSEO的にどこで検索に引っかかってほしいかだったり。
ページを1冊の本として、タイトルはどこ？と導き出したり。

正解はないけど最適解がほしい。。。本当に悩ましい。。。

それに付随して、hタグを決める基準は？というのも上がりました。HTML5アウトライナーで段階的になるものを基準にするというのが個人的に腑に落ちました。

関連記事のマークアップどうしてる

こちらhタグの判断と同時にでてきたのですが、例えばこちらのページの下部にある関連記事の場合どうマークアップしてる？という話題参考ページ

1記事をarticleで囲って、タイトルをh1にするのか。ul>liで組んでタイトルは直前の見出しの次のhタグ。とここは2つに分かれました。

どちらが良いのでしょうか、、、迷いどころ。ただ、みなさん判断の基準としていろんなWebサイトを見てこうマークアップしてたから自分もしてた。という意見も多かったです。
やはり日々見ているインプットの中から、答えを探しているんだなぁと感じました。

みなさんは何を基準にどうマークアップしているでしょうか？

mainタグとasideタグの関係,asideの中にhタグはあり？

mainタグとの関係とasideタグの関係。asideの中にmainはだめだけど、mainの中にasideはOK。
では、メインコンテンツとサイドバーの2カラムのレイアウトの場合はどうするの？というのがこの話題の中心でした。

全体をmainで囲って、メインコンテンツはarticle、サイドバーはaside。
divの中にメインコンテンツをmainとサイドバーをasideで組む。

どちらも間違っていない気がするのですがどうでしょうか？私個人的には、前者でマークアップするのですが、、、

アクセシビリティ的にどうなのか

とっても大切な問題。しかしなかなか知識とインプットが追いつかない部分。

imgタグのalt属性はどこまで入れてる？との意見がありました。確かにみんなどこまで入れているんだろうな、、、ととっても気になります。

他にも、アコーディオンメニューの部分は何でマークアップするか？だったり、この部分はbuttonか、aタグが、それ以外かで分かれました。
タブで移動できないから、こう！とか意見もそれぞれ。

WAI-ARIAのrole属性を使っている人はほとんどいなかったです。あと、スマホで音声読み上げってあるの？というのも上がりました。調べます。

WordPressを組むとき、どの段階でPHP書き出す？

ここから少しHTMLとは離れた話題でしたが、ここも気になるところでした。

人数だったり、担当が分かれていたりで一定ではないと思いますが、みんなどうなんだろうぁと。個人的には同時進行できたら早いのになぁと思いながら、HTMLかいてスタイル整えてWordPress化していくことが多いかなぁと思いました。

サムネイルの出力はどうしてる

こちらも少し離れましたが、話題にあがりました。bg-imageにする方が結構多かった印象です。
他にはimgタグで出して、object-fit: cover;を使うという意見も。

アンケート回収結果 : 追記分

アンケートにお答えいただいた方ありがとうございました。
回答が被っているものは1つしか載せていませんが、ほぼそのまま載せています。

コーディングで意識しているとこ

やはり、考えていることはだいたい同じのようです。

• 可読性
• 一般的に見て自然な階層になっていること、汎用性
• セマンティック
• レスポンシブに対応できる構造にできているか。

クラスの命名規則

BEMが圧倒的に多かったです。

• 特になし
• BEM : 最近始めた, まだまだ自己流など
• ECSS

普段どんなサイトを見て勉強してる？

これ気になるところでした。
私は毎朝はてブのテクノロジーカテゴリだけは絶対に見ます。

SNSを使ってる人がとっても多かったです。技術系のメディアサイトをみんな見てるんだなぁ

• Facebookでいくつかのページをフォローして、気になればサイトを見る。
• Awwwards , CSS Design Awards
• codegrid
• webクリエイターボックス、lig、タムタム、コムテ、コリス、photoshopvip

一番気になった話題

みんなそれぞれ気になった部分は違いましたが、hタグは気になった部分だったみたいです。途中でてきた、キャッシュの話も結構初耳が多くて気になった方も多かった模様。

一番が決められないだなんてとても充実した時間を過ごした方も。

• 知らなかったコーディング、ECSS、main,section,figureの悩み、background,beforeの使用、keywordの是非、等々すべて話す相手がいないので印象に残り、一番を決められません。
• hタグをどうするかという永遠のテーマ
• headingタグ、wai-aria
• ECSSとfavicon?v2

本日の感想

一番多かったのが、同世代がこんなに頑張っているのだから自分も頑張んなきゃ！と危機感をもって焦ったという意見が圧倒的に多かったです。
すでにできる人の話を聞く( 業界的にあの人すごい！って人の話とかも )のと自分と同じような年齢、立場の人の話を聞くのでは感じ方がちがうのかなぁ。私自身もやばい、やんなきゃと危機感マックスになりました。

もっとこういった勉強会をしてほしい！との声も上がりましたので、次はどこの誰がするのか楽しみです。また私がやりだすのか、違う人が声をあげてやりだすのか。。。。

まとめ

してよかった！これに尽きます。今後も何かしらやっていきたいと思います。来ていただいた方には、こういう勉強会なかなかないから楽しみでした。と言っていただけたのでマンモスウレピー。

やはり、立場や日頃の業務、受けている案件によって考え方の基準だったりが大きく違うのだなぁと感じました。本当に聞くだけでとっても勉強になりました。
あと20代とくぎったせいか、始まる前の名刺交換がなんだか盛り上がっていた気もします。なにより、同年代としっかりとお仕事であるマークアップをはなせたので精神衛生的によかった。

これからもがつがつと、「福岡にはけーすけってやつがいる」と思っていただけるように色々していきますのでよろしくおねがいいたします。