ある時サーバサイドのメンバーからこんな事を言われました

最近のフロントエンドの実装が高度化していてわからないんだよね・・・

ちょうど自分も Carely の構成に慣れてきたタイミングだったので、それなら、とサーバサイド向けの勉強会を開催しました。社内でコードを触っている人が対象という事で、資料はざっくりめに作って実際に手を動かしながら解説するような構成です

基礎編1 全体像を把握してコードを書けるようになる

• 全体的な構成と Rails → 画面までの処理の流れを説明

• 3つの SFC パターンの説明

• デバッグの仕方（ vue devtool の使い方）

• shared の説明（仕組み的なのは次）

第一回目では全体像を理解してもらうため、ページにアクセスしてから実際にアプリケーションがレンダリングされるまでと、その際に使われている技術要素について解説しました。事前ヒアリングでも「検索して分かる内容ではなく、 Carely での独自部分が知りたい」ということだったので、 Rails との繋ぎ込みの部分やどういったフォルダ構成で共通ファイルなどを管理しているかをメインに解説

基礎編2 仕組みを知る

• codegen と API 周りの実装方法

• ビルドの仕組み

• ドキュメント周りの生成方法と仕組み

• テスト周りの実装と仕組み

二回目はさらに進めてフロントエンドを取り巻くエコシステムを解説。ビルドや CI についての概要から、メインで利用している graphql-codegen の細かい実際の利用方法などを解説しています

応用編 新規でページを作れるようにする

応用編では Ruby on Rails にエンドポイントを作ってあるところからスタートして、既存の GraphQL を活用して取得と更新ができる所までをハンズオン形式でライブコーディングしました

GraphQL に関してはサーバサイドで実装していても実際にどう使われているかしっかり把握できていないメンバーもいたと思うので、全体像を把握するという意味でいい内容だったと思います

オンボーディング資料として

こんな感じで「実装面の仕組みと読み解き方」「ビルドなどの周辺の仕組み」「実際に作ってみる」という部分を動画付きで解説できたため、現在ではフロントエンドエンジニアのオンボーディング資料としても活用しています

この記事は iCARE の技術顧問がどんな事をやっているか - 2021アドベントカレンダー の20日目の記事です