こんなに伸びた！2023 年 Pairs の Web チーム新卒研修
この記事は「Eureka Advent Calendar 2023」24 日目の記事です
はじめに
こんにちは，Eureka に 23 年新卒として入社しました，びゅん太郎 と申します．Web Front-end Team (以下 Web チーム) に所属しており，Pairs の Web 版の開発を行っています．
4 月に入社してから約 3ヶ月間，私は Web チームの中で技術研修を受けておりました．今振り返ると入社当時の私は，それはもうエンジニアと言うにはあまりにも貧弱でした
研修前と後との比較を御覧ください．
なんということでしょう
React すら触ったことのない私が，React や Next.js を使用して簡単な Web アプリケーションを作れるようになりました．まさに劇的ビフォーアフターですね
そんな私を急成長させた Web チームの新卒研修，気になりますよね？気になっちゃいますよね？
そんなあなたに，2023 年 Web チーム新卒研修の全貌をお届けします．特別です
もくじ
- Web チーム新卒研修内容
- ワークショップ
- 実装課題１: BINGO カード
- 実装課題２: GitHub List
- まとめ
Web チーム新卒研修
2023 年度の Web チーム新卒研修は，入社当時のわたしのスキルレベルに沿った，わたしだけのカリキュラムを用意していただきました．Web チームの新卒が私一人だけだからこそできる，大変贅沢な研修でございます
研修は大きく分けて以下の 2 項目から構成されます
- TODO アプリワークショップ
- 実装課題 2 つ
ワークショップ
まずはメンターと一緒に，TypeScript と React を用いた TODO アプリワークショップを行いました．
- 内容: TypeScript, React, Next.js などの技術を使って簡単な TODO アプリとそのテストを実装するワークショップ
- 目的: TypeScript, React, Next.js などの技術，テスト，GitHub の使い方の基礎を学ぶ
- 進め方: メンターと一緒に実装
実装した TODO アプリの機能と利用技術を以下にまとめます
実はこのワークショップが， TypeScript と React を用いた初のアプリ開発になります．Next.js に至っては知識 0 の状態でした．
そりゃあもう，無限に分からない単語がでてきますよ
しかし，分からない知識や考えはメンターにその都度質問し解消していきました．
そしてこれらの知識・考えはこのワークショップで完璧に理解することを臨んでいるわけではなく，次に立ち塞がっている実装課題に対する布石でありました
実装課題１: BINGO カード
概要
まずひとつめの実装課題は BINGO カードの実装になります．番号の抽選は行わず，BINGO するときに配られる例のカードを Web アプリケーションとして作ります
- 内容: TypeScript と React を使って BINGO カードとそのテストを実装する
- 目的: TypeScript, React などの技術，CSS-in-JS，テスト，GitHub の使い方の基礎を学ぶ
- 進め方: 基本的にひとりで実装し，JIRA と GitHub Pull Request を使って作業管理を行う
実装した BINGO カードの機能と利用技術，ついでに動作例も載せておきます．
こだわり POINT
課題の要件には含まれていませんが，わたくしびゅん太郎が進んで取り組んだ内容について紹介させていただきます．
ビンゴカードの機能をひと通り実装した段階で，ひとつ気になる点がありました．
それは，任意のマスをクリックするとビンゴカードの 5*5 = 25 個のマス全てが再レンダーされてしまう点です．クリックしたマスのみ再レンダーされる形が理想ですね
この無駄な描画を防ぐだめに，マスのメモ化 (キャッシュ) に取り組みました
上記の動画ではページ全体のレンダー時に render App という文字列を出力し，各セルのレンダー時には render Cell という文字列を出力させています．
メモ化前の左の動画はマスを 1 回クリックする度 render App という文字列が 25 回出力されています．しかしメモ化後の右の動画では，1 回のクリックに対して 1 回の render Cell が確認できますね
メモ化の実装については，セルを表現している React コンポーネントのメモ化を行えば十分でありとっても簡単です．
// ビンゴカードのセルコンポーネント
const InnerTableDataComponent: React.FC<TableDataProps> = props => {
...
}
// コンポーネントのメモ化
export const TableDataComponent = React.memo(InnerTableDataComponent);実装課題 ２: GitHub List
概要
さて，研修も大詰め最後の実装課題です．
- 内容: TypeScript, React, Next.jsを使って GitHub の機能を用いたアプリケーション開発
- 目的: TypeScript, React などの技術，Tailwind CSS，クライアント/サーバーサイドにおけるデータ取得と操作の実装方法を学ぶ
- 進め方: 基本的にひとりで実装し，JIRA と GitHub Pull Request を使って作業管理を行う
最終課題ということもあってか，実装するアプリケーションもなかなかのボリュームですね．
GitHub との接続は GitHub 公式の REST API を使用しました
各機能の紹介
GitHub List に備わっている各機能について，動作例を用いながら紹介します
リポジトリ検索
検索ワードを元に，GitHub 上に存在する public なリポジトリ一覧を取得し，その詳細を閲覧できます．
実は一覧画面と詳細画面とで異なるレンダリング手法を採用しています ．
一覧画面は useSWR で取得し、CSR (Client-Side Rendering) を行っています．
useSWR は，APIを通じたデータの取得・キャッシュを簡単に記述する手助けをしてくれる React hook です．Next.js を作成している Versel 製のライブラリ SWR から利用できます．めっっっっっちゃ大事
下の例は GitHub API のラッパーライブラリである octokit を利用して，リポジトリ一覧を取得する API を叩いています．
const {
data: repositories = [],
isValidating,
mutate,
} = useSWR(
key,
async () => {
if (typeof searchQuery === 'string') {
const res = await octokit({ env: 'browser' }).rest.search.repos({
q: searchQuery || '',
headers: {
'X-GitHub-Api-Version': '2022-11-28',
},
});
return res.data.items;
}
}
);useSWR は一度 TODO アプリワークショップで触れており，GitHub List の実装時には抵抗なく進めることができました．課題の構成の組み方が神〜
対して詳細画面では，Next.js の getServerSideProps でデータを取得し、SSR (Server-Side Rendering) を行っています．
getServerSideProps を用いたレポジトリ詳細取得の例も載せてみました．
export const getServerSideProps: GetServerSideProps<
GetRepositoryResponse
> = async context => {
const owner = context.query.owner;
const repo = context.query.repo;
if (typeof owner !== 'string' || typeof repo !== 'string') {
return {
redirect: {
destination: '/repository',
permanent: false,
},
};
}
try {
const res = await octokit({ env: 'browser' }).rest.repos.get({
owner,
repo,
headers: {
'X-GitHub-Api-Version': '2022-11-28',
},
});
return {
props: {
data: res.data,
},
};
} catch (err) {
return {
redirect: {
destination: '/repository',
permanent: false,
},
};
}
};このように，異なるレンダリング手法を課題の要件として敢えて取り入れており，各レンダリング手法の実装方法について学ぶことができました．
ユーザー検索
こちらは GitHub のユーザー一覧を取得し，その詳細を閲覧できる機能です．ユーザー検索機能についても，レポジトリ検索機能と同様，一覧画面は CSR を行い詳細画面では SSR を行っています．
Gist 操作
さて最後に紹介する機能は Gist 関連の機能になります．ログインした GitHub アカウントに紐づいた Gist 一覧・詳細の取得，そして Gist の新規作成・編集・削除が可能です
Gist に関連する画面は useSWR でデータ取得を行い CSR を行っています．
がんばり ポイント
GitHub List 実装中，検索キーワードの持ち方に苦労しました．例えばリポジトリ検索機能では，react という検索キーワードを入力するとそのワードを元にリポジトリ一覧を取得します．
ということは，どこかでその入力された react というデータを保持しなければいけませんね．これに最初は苦戦しました．
メンターにアドバイスをいただきながら，上記の問題に対して 2 つの解決策を考え，勉強としてそれぞれのパターンを実装しました．
- 検索キーワードを URL で保持する (← 主流)
- 検索キーワードを React コンテキストとして保持する
１つ目は URL に検索キーワードを埋め込む方法ですね．Web サイトでよく見るやつです
例えば，リポジトリ検索画面で react というキーワードを保持したいのであれば /rpository?q=react なんていう URL でどうでしょうか
下記はキーワードを URL に埋め込む実際の例です．
const RepositoryList: React.FC = () => {
const { query, push } = useRouter();
const searchQuery = query.q;
...
return (
<>
...
<Search
className="mt-4 mb-6"
placeholder="Enter repository name..."
isValidating={isValidating}
onSubmit={input => {
if (prevSearchQuery === input) {
mutate();
}
setPrevSearchQuery(input);
push(`/repository?q=${input}`);
}}
/>
...
</>
);
};
<Search> コンポーネントはカスタムコンポーネントであり，検索キーワードを入力するフォームにあたります．
<Search> の onSubmit props を見てみると push によって入力されたキーワード (input) が URL の q というパラメータに埋め込まれていることが分かります．
そして，URL に存在するパラメータは query.q でアクセスできます．
query や push は Next.js の useRouter という hook が提供する機能ですね．ルートに関する情報を取得したり，新しいルートに遷移するために使います
もう検索キーワードを保持するもう一つの解決策として，キーワードを React コンテキストとして持つ方法があります．簡単にいうと「検索キーワードをグローバルな値で持とうぜ！」ってことです
しかし前者の解決策の方が実装が容易であり，拡張性にも優れていると判断し，最終的に URL で検索キーワードを保持する方法を採用しました
まとめ
TODO アプリワークショップと 2 つの実装課題を通して，Web フロントエンドエンジニアとしての最低限の知識と技術を身につけることができたと思います．
そしてこの研修で私が成長できたのは，チームの皆さま，そして何よりメンターの先輩がいてこそです．この場をお借りして感謝申し上げます．
これからも精進しましょう
おわり．
