フロントエンドチーム、勉強会始めました

はじめに

こんにちは。フロントエンドエンジニアの平川です。
今回はヤプリのフロントエンドチームで始めた勉強会の活動についてご紹介します。
技術力向上を目指したこの取り組みを通じて、私たちのチームのことを少しでも知っていただければ幸いです。

フロントエンドチームについて

現在、ヤプリのフロントエンドチームにはマネージャーを含めて7名が所属しています。
メンバーは自身が所属するプロジェクト以外にも、それぞれで役割分担をして日々のフロントエンドの課題解決に取り組んでおり、その役割のことを「大臣」と呼んでいます。
（過去投稿した大臣についてはこちら）

今回はフロントエンドチームのスキルアップを目的とした「文部科学大臣」が主催する勉強会についてお話しします。

文部科学大臣設立の経緯

昨年秋にメンバーが5名から7名に増えたことで、Sentryやdependabotなどの監視・アップデートに割いていたリソースに余裕が生まれました。
これにより、今までできていなかった組織的な技術力向上のための施策を行いたいという声が上がり、「文部科学大臣」が誕生しました。

現状のフロントエンドチームの課題を知る

まずはフロントエンドのドメインごとにメンバーがどのくらい知識を持っているか、どの要素で勉強会を開催すればチームにとって価値があるかを把握するため、Front-end Developer Roadmapなどを参考にしてスキルマップを作成しました。

スキルマップの一部

スキルマップを作成することによりメンバーの各技術への理解度が可視化され、ヤプリのフロントエンドチームの課題を把握する助けになりました。
そして第1回の勉強会は、チームとして技術的に弱いかつ旗振り役が講師として勉強会を主催できる「フロントエンドのテスト」について開催することにしました。

第1回勉強会の内容

まずはモダンフロントエンドのテスト手法とその中のユニットテストについて勉強会を行いました。
一概にユニットテストといっても範囲は多岐にわたるため、1時間以内で詰め込みすぎないようにまずは基本のテストの書き方を中心に行いました。
テスト手法やテスト設計についてはいきなり話をしても理解するのが大変だと思うので何度か勉強会を重ねてから行おうと思います。
勉強会では講師がライブコーディングを行い、参加者に適宜質問を投げかけることで、参加者が受け身にならないよう工夫しました。

実際にライブコーディングをしたテスト（FizzBuzz）

const fizzbuzz = (num: number) => {
    if (num % 15 === 0) {
        return 'FizzBuzz';
    } else if (num % 3 === 0) {
        return 'Fizz';
    } else if (num % 5 === 0) {
        return 'Buzz';
    }
    return num.toString()
} 

describe('fizzbuzz', () => {
    it('3の倍数を渡した時にFizzが返ってくること', () => {
        const result = fizzbuzz(3);
        expect(result).toEqual("Fizz")
        const result2 = fizzbuzz(6);
        expect(result2).toBe("Fizz")
    });

    it('5の倍数を渡した時にBuzzが返ってくること', () => {
        const buzz = fizzbuzz(5);
        expect(buzz).toBe("Buzz")
    });

    it('15の倍数を渡した時にFizzBuzzが返ってくること', () => {
        const result = fizzbuzz(15);
        expect(result).toBe("FizzBuzz")
    })

    it('3の倍数でも5の倍数でもない数を渡した時にその数が文字列で返ってくること', () => {
        const result = fizzbuzz(1);
        expect(result).toBe("1")
    })
});

まとめ

今回はフロントエンドチームで始めた勉強会について紹介しました。
技術力の向上とチームの一体感を高めるための取り組みとして、これからも継続していきたいと思います。
興味のある方はぜひカジュアル面談にお越しください！

open.talentio.com