はじめに

こんにちは、VoicyでWebフロントエンジニアをしているCちゃん@shinobear01です！今回は、Webフロントエンドの勉強会を開いたので、内容を共有します。

社内勉強会の概要

今回、2023年の6月初旬にVoicyWebフロントエンドの勉強会を開催しました。内容としては、Voicyの再生サービスのWeb版であるブラウザのvoicy.jpを題材に、現在存在しない404ページを作成しながら、Angularで作成されているVoicyのWebフロントの修正方法を学びました。

開催日: 2023年6月初旬 18:30-20:00
開催場所: Voicy社内
参加人数: 9人
参加者: 様々職種のエンジニア

当日の流れ

18:30 - 18:35 目的とゴール
18:35 - 18:55 環境構築
18:55 - 19:15 404ページ初級編~コンポーネントをつくろう~
19:15 - 19:35 404ページ中級編~コンポーネント間のデータのやりとり~
19:35 - 19:55 404ページ上級編~さいきょうの404~
19:55 - 20:00 まとめ

目的とゴール

目的は、日常の業務においてWebフロントのソースコードの簡単な修正を行い、PRを出せるようにすることです。

ゴールはさいきょうの404ページを作成することです。

環境構築

今回は、Voicyで実際にサービスとしてリリースしているWebの再生サービスであるhttps://voicy.jp/ のリポジトリを使って勉強会を開催しました。仕事でvoicy.jpを使ったことのないメンバーは、リポジトリをgitでクローンしてくるところから始めて、READMEにある環境構築手順を行ってもらいました。

サービスが起動でき、画面にvoicy.jpのトップ画面が表示できたメンバーから404ページの作成に進みました。VoicyではWebフロントフレームワークのAngularを使っているので、Angularの説明も軽くしながら進めていきました。

さいきょうの404ページ実装編

voicy.jpを各個人のローカル環境で起動できたので、404ページの作成を始めます。

初級編、中級編には、それぞれ期待するページの受け入れ要件を定義し、サンプルの解答画像を用意しました。解答画像には、CSSを反映していますが、時間の関係で今回は学びませんでした。

説明のスライドはコードが少し載っているため、載せられないのですが、行った内容を紹介します。

上級編では、自分の好きなデザインの404ページを作る予定としました。

初級編

初級編では、まずコンポーネントを作成し、画面に文字列を表示しました。実際に開発を行う時と同様の手順で、どこのフォルダにコンポーネントを作ればいいのか知ることからはじめました。

受け入れ要件

不正なURLで404ページが表示されること（不正なURL例: voicy.jp/aaa)
404の文字列が表示されること
404ページ初級編課題

説明手順

コンポーネントとはなんだ
どのディレクトリ404ページのコンポーネントをつくろうか
404ページのコンポーネントを作成しよう
作成したコンポーネントの中身を見てみよう
404ページのコンポーネントをトップページに表示してみよう
URLが不正なとき、404ページを表示しよう
404の文字列を表示しよう

中級編

中級編では、放送をBEから取得してきて、404ページおすすめの放送として表示しました。

受け入れ要件

受け入れ要件としては、初級編の2つに以下を追加しました。

作成者がおすすめの放送を表示すること

これは、DIやAPI通信、BEからどうデータを受け取って使っているのかを学んでほしかったので受け入れ要件としています。よくある404ページとは違いますが、フロントエンドの開発の練習のために題材にしました。

説明手順

aタグを使っておすすめの放送のリンクを貼ってみよう
表示する放送カードはどのコンポーネントか、どの画面で使っているのか調べよう
おすすめの放送のカードを表示してみよう
DI？依存性の注入？どうやるの？
サービスで使うStoreとはなんだ
サンプルコード

上級編

今回は時間が押してしまい、上級編に進めませんでしたが、早く終わったメンバーは、それぞれvoicy.jpのカスタマイズを楽しんで行っていました。生放送を表示したり他の好きなWebサイトのhtmlを埋め込んだりして、カスタマイズしていました。

上級編の受け入れ要件は特に用意しておらず、個人でカスタマイズして好きなページを作ってみようというものだったので、カスタマイズをしたメンバーはそういう意に叶っていて、上級編をクリアできたといえると思います。

振り返り

資料作成について
- 意外と環境構築でつまづいたので、まっさらな状態で1から説明のスライドの内容を試すとつまづきポイントがわかると思いました。
課題について
- 参加した全員が課題にぶつかりながらも課題をクリアできたことから課題の難易度がちょうどよかったのかなと思いました。
- アンケートを取ったのですが、多くのメンバーが満足感のある会だったと回答してくれていたので、開催してよかったと思いました。
- また、資料の説明が不足していても、エンジニア対象の勉強会だったので、それぞれ個人で調べたり近くの席の人同士で教えあったりしてなんとかなる部分も多かったです。公式のドキュメントを貼ったり、こういう部分はここのページが参考になるなどの参考文献があったら役にたったかもなと思いました。
進行について
- また、新たな発見として、エンジニアは画面とお友達なので、よく画面を見ている（わたしもきっとそう）ことを知りました。みんなが画面を見ていると、発表者は今説明していいのかな、聞いているのかなと思うことがわかりました。
- Slackで資料を共有してもみんな開けておらず、どこにあるの...？とそれぞれの見たいタイミングで聞かれたので、いつでも見つけられるよう勉強会のカレンダーに資料は貼っておきたいということも発見でした。
- 環境構築で不明なエラーに当たったメンバーがいたので、その際他のWebフロントエンドエンジニアに助けてもらったのがすごく助かりました。助っ人がいると安心です。

おわりに

今回、VoicyWebフロントエンド勉強会を開催しました。私が開催した初めての勉強会だったので、当日までドキドキしていました。私がつまずいてもっと何かしら失敗するかなと思っていたのですが、なんだか上手くいったので、参加者がVoicy社員でよかったなと心から思いました。また、今回の反省点を踏まえて、2回目のWebフロントエンド勉強会を開くことにしました！1回目よりも絶対にいい会にします。

最後まで読んでくださりありがとうございます！ Voicyは本当にいいメンバーが揃っている働きやすい環境なので、よかったら一緒に働きませんか？ご興味あればぜひ採用ページを見てみてください〜！

recruit.voicy.jp