こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。
今回はPR TIMES社内でHTML解体新書の輪読会を開催し、無事完走したので輪読会の進め方や効果について話そうと思います。
輪読会を開催した経緯
PR TIMESではエンジニアによってHTMLに対する知識量が人によって差があり、意味付けが間違ったマークアップやネストできる要素等がレビューで指摘できない課題がありました。
ネストできる要素はMarkuplintの導入で改善できましたが、意味付け等の知識に関しては個々人に委ねられることが多く、エンジニアの知識の底上げができていない状況でした。
そこで、HTMLの仕様を理解してもらうことで、PR TIMES内でHTMLのアウトプットの底上げを図るためにHTML解体新書の輪読会を開催しました。
輪読会の進め方
1. 本の決定
今回、輪読会で読む本は完全に私の独断で決めました。
エンジニアはフロントエンド・バックエンドに限らずある程度HTMLは書ける状態なので初心者向けの本を選ぶのは違うし、今回はHTMLの知識を得てほしいという目的があったので、フロントエンド全般を体系的に学ぶ本も違う気がする…と悩んでいたところで、HTML解体新書の詳細を見るとまさに自分が考えていた内容（初級・中級からさらなるステップアップ）にドンピシャの内容だったのでこちらを選ぶことにしました。
本書は、最低限のHTMLに関する知識やスキルを持ち、簡単なHTMLファイルを作成できることを前提に、HTMLを再入門、あるいはHTMLの初・中級者からさらなるステップアップをしたい、という読者を対象にしています。
2. 輪読会の形式の決定
輪読会を進めるに当たり、以下の点を意識して輪読会の形式を策定しました。
- 議論が活発に行われること
- あとから入った人がHTML解体新書を読まなくても輪読会のログである程度情報を掴むことができること
形式に関しては何パターンか方法を考え、ProsとConsを洗い出しフロントエンド定例内で同意をとりました。形式として提案したパターンとPros, Consは以下です。
結果として、事前準備の負担や全員で意見を言いやすいことを加味して、以下の案を採用しました。
・本を持っている人で音読して読んでいく
・読んだ内容でわかったこと、わからなかったこと、深堀りしたいことをFigjamに貼っていく
3. 輪読会の実施
週に1回1時間、決めた形式に則って輪読会を実施しました。
タイムスケジュールとしては、以下のような形で進めていきました。
- 音読パート(30分)
- Figjamに読んでわかったこと/わからなかったこと/議論したいことを貼ってくパート(10分)
- Figjamの内容を発表するパート(20分)
輪読会をやってみてどうだったか
ページ数が多い本でもみんなで一緒に読めば読み進められた
ページ数が多い技術書って途中で挫折してしまったり、自分が読みたい章だけ読んで満足してしまう。みたいなケースが自分はよくあるのですが、輪読会を開催することにより最初から最後まで読み進められることができました！
1冊全部読みきるのに約1年程かかりましたが、無事完走できたので参加してくれた開発部のメンバーに感謝です。
みんなでわからない・わかったを共有できた
figjam内で「このHTML要素初めて知った!」「PR TIMESだとこういう使い方ができそう！」みたいなアウトプットを繰り返してみんなで初めて知ったことや理解できなかった部分を共有できたのが輪読会を通しのての一番の収穫だったなと思います。
共有の中で長い間HTMLを使って開発をしていたエンジニアが若いエンジニアの疑問に答えたり、MDNを画面共有しながら詳しい仕様ってどうだったっけ？みたいな議論が行われていました。
HTML要素の説明のパートなので特定のHTML要素に関するわからないや感想が多い
バックエンドエンジニアも参加してくれた
バックエンドエンジニアも輪読会に参加してくれました！
本がなくても参加できる会にしたのでふらっと参加してくれる人がいたのも嬉しかったです。
HTML仕様について話をしてたセクションだったので、HTMLの仕様書についての話題が多い
アクセシビリティについて考えるきっかけになった
3章のHTMLの要素の説明時にアクセシビリティについての説明があったことや、4章でがっつりWAI-ARIAの話があったこともあり、普段アクセシビリティについてあまり意識していなかったエンジニアもアクセシビリティについて考えるきっかけにすることができました。
最後に
PR TIMESで実施した輪読会について今回はご紹介しました。
分厚い本もみんなで読めばこわくない！ということで、様々な本の輪読会をまた社内で開催できるといいな〜と思っております。
We are hiring!
一緒にPR TIMESの開発を担ってくれるエンジニアはもちろん、各種ポジションで採用を行っています！
