フロントエンド領域メンター 株式会社ICS代表 池田泰延さんの勉強会を開催しました！

ニジボックスでは、職域ごとのメンター制度を導入しており、各業界のプロフェッショナルをお招きして、メンタリングや勉強会などを行なっています。

今回は、フロントエンド領域のメンターとしてサポート頂いている、株式会社ICS代表の池田泰延さんが開催する勉強会の様子をご紹介いたします！

池田さんと言えば、Webデザイナーとフロントエンドエンジニアのためのメディア『ICS MEDIA』の編集長をなさっており、エンジニアの方なら「いつも見てる〜！」という方も少なくないのではないでしょうか？

池田 泰延さん
株式会社ICS代表。筑波大学 非常勤講師。ICS MEDIA（https://ics.media/）編集長。個人サイトClockMaker Labs（http://clockmaker.jp/labs/）も運営。ビジュアルプログラミングとUIデザインを得意分野としてらっしゃいます。近著として『JavaScriptコードレシピ集』（技術評論社）が発売されています。

どんな勉強会？

早速、池田さんの勉強会について詳しくご紹介していきましょう！

基本的に、参加メンバーが手を動かしながら学んでゆく、ハンズオンスタイルです。
毎回学習テーマを決めて、池田さんに提供いただいたサンプルコードを基に、各自手元でコードを弄りなから理解を深めていきます。
勉強会のテーマは、前回の勉強会後に参加メンバーから募ったアンケートを基に企画しています。

これまで行なってきたどのテーマも、Web技術の最新動向や業界のトレンドを踏まえながら、フロントエンドエンジニアとして案件に対峙した時に実践技術として応用できる、生きた技術の習得を目的としています。

池田さんのメンタリングについて

勉強会だけではなく、日頃の業務の中でぶつかるフロントエンド領域での相談をSlackの専用オープンチャンネルで質問することもできます。

池田さんの回答例はこちらです。
質問に対しての的確な回答とその根拠、さらに、現在の業界動向も鑑みた補足情報まで教えていただきました。フロントエンドエンジニアをやる上で、池田さんにここまでご教授いただけることは、とても貴重な学びの機会なのではないでしょうか。

実際の勉強会の様子

さあ、ここからは実際の勉強会の模様をご紹介していきます！

これまでの勉強会では、Reactであったり、TypeScriptであったり、フロントエンド領域での比較的新しいWeb技術をひとつひとつ深掘りしながら学んできました。

今回はよりサービス開発の実践的な内容に踏み込み、個々の技術が実際のWebサービスで、どのように組み合わされ機能しているのか？について、過去に池田さんの会社で制作してきた案件例を教材として、理解を深めていきます。

教材となるのは「キャンペーン応募サイト」。
SPA（Single Page Application）のキャンペーン応募サイトを動かしながら、React+Redux、TypeScriptを使ってサーバーとのデータのやり取りを学びます。

池田さんのご用意下さった、サンプルコードは過去に実際に制作したサイトのソースコードをベースに、キャンペーンサイトの基本的な制御を学ぶことに焦点を絞って、装飾などを除いたものです。シンプルなので、ロジックなどを読み解きやすくなっています。

今回は、オンラインでの開催ですので、Zoomを活用します。
画面共有された、池田さんの手元の編集画面をみんなで見ながら、説明に従って適切なコードを一緒に記入していくことで理解を深めていきます。いわゆる、モブプログラミング方式ですね！

余談ですが、Web会議システムはプロジェクターと違い、資料やソースコードを目の前で観ることができるので、圧倒的に見やすく、今回のような勉強会では理解がより進みそうです。

サンプルファイルの構成はこんな感じです。

ワンポイントアドバイス：業務の場面でも、他の人が制作したファイルを受け取ることがあると思いますが、まずpackage.jsonの中を見ると全体の処理構造を把握しやすいそうです。また、サイト構造の把握については、index.tsxを起点として参照していきます。

実践講義：前半　サーバーから情報を取得し、フロント側に表示させる

今回教材にするキャンペーンサイトでは大枠で以下の処理を行っています。

① ユーザーがサイトにアクセスすると、あらかじめ設定された条件に応じた情報をサーバーから取得してフロントページに表示する
② ユーザーが応募フォームに情報を入力し、内容の確認画面を経てサーバー側に送信、データベースに情報が登録される

こちらは、池田さんが仕組みを説明するために、ホワイトボード代わりにAdobe XDを使ってその場で描いて下さった概念図です。

講義前半では①の処理を実際に動かします。

様々なスキルレベルのメンバーが参加している勉強会では、ゼロからコードを記述するのではなく、サンプルコードのお目当ての処理が行われている箇所を読み解きながら、どんな処理がどうつながって目的の処理が達成されているのかを、まずみんなで理解します。

一通り処理の構造が理解できたら、今度は穴あき問題に挑戦、手元のサンプルコードに実際にコーディングを行い、動作を確認します。

池田さんの解説で理解した、
「Reactで構築した枠に、fetchでサーバーから引っ張ってきた情報を入れて表示させる。」
ことを意識しながら記述することで、理解が深まります。

実践講義：後半　フォームに入力された情報をサーバーのデータベースに登録

後半では、クライアントで入力したデータをサーバーに登録する、という前半とは逆の処理を学習。また、フォームからの情報登録には、フォーム入力、確認、送信完了という順番での処理ステップがあります。入力された情報が適切かを判定するバリデーションや、想定されるユーザーのネットワーク速度のばらつきなども鑑み、意図的に処理に遅延バッファを持たせるなど、前半に比べてより複雑な設定が必要になってきます。

また、今回の重要なポイントとして、処理ステップをSPAとして1画面で分かりやすく管理するために、react-routerという機能を使っています。これによって、処理ごとにURLを切り替えることができ、開発時の業務分担もしやすくなる上、サービス運用時に必要になるアクセス解析にも役立ちます。

ワンポイントアドバイス：バリデーターの扱いについてはいろんな意見が交わされているが、現状ではHTMLのバリデーション機能がある程度優秀なので、こちらを採用するのが安全だと考えているそうです。

react-routerで設定する処理は、

① apply…「フォーム入力画面」応募フォームに入力された情報をフロントエンド側のストアに一時的に保存
② confirmation…「確認画面」ストアに一時保存されたデータを読みだして表示
③ success…「完了画面」サクセスページを表示

の3ステップです。

ポイントとして、フロントエンド側にキャンペーンページ用と応募フォーム用の二つのストアを用意している点も把握しておきます。

実際にApply処理部分のソースコードを見てみると、dispatchでフォームの情報をストアに保存した後、routerの機能を使ってhistory.pushで次の処理の遷移を指定して、表示を切り替えていく仕組みになっています。

ワンポイントレッスン：「?.」（Optional chaining）
applyDataというのが入力フォームに入れた値なのですが、この値を「?.」（Optional chaining）演算子で出しています。
通常、読み出し先に情報が無かった場合にはundefinedエラーとなってしまうのですが、Optional chainingを使うことで、初期値で空文字を返すことができるようになります。
今回のサンプルコードでは、加えてundefinedの場合に初期値を返すようにもしているので、構文として覚えておくと重宝するそうです。

それでは、「確認ページ」のコードをみんなで書いていきます。

処理的には、フォームで入力された情報をストアから読み出して表示し、確認ボタンを押すことでサーバーに送信し登録します。

前半と同じく、穴あき問題にしたソースコードに適切な記述を行います。
ちょっと難易度を上げて、一連の処理をほぼ消して必要な処理を組み立てていきます！

上記のコードから、goNextの処理の中身を消します。

入力した応募フォームの中身をサーバーに送るまでの処理を構築していきます。

今回簡易的に設定したサーバーの中身はこちらです。
postメソッドのみ受付可能にしています。

ブラウザの見た目上では、「確認ページ」の「応募する」ボタンを押したときの処理になります。

記述してゆくときのポイントとして、ブラウザのディベロッパーモードでちゃんと処理が行われているのかをこまめに確認しながら制作を進めると安心です。

サーバー側の設定をしていくときには、「望まないデータを保存させないようにする」ことに留意しながら構築することが大切になります。今回はクライアントサイドでもバリデーションを行なっていますが、それだけではなくサーバーサイドでもしっかりとバリデーションを行うことが必要です。クライアント側ではできない処理として、disallowListで行う「NGワードの検証」があります。

また、サーバー設計の際にはstatus codeをちゃんと定義しておくことで、エラー処理の際に「なぜエラーが起きているのか？」が追跡しやすくなります。

さあ、フロントサイドとサーバーサイドを適切に構築したら動作確認タイムです。

参加者の手元のコードがしっかり動いているのかを確認します。
「応募完了画面」の表示を確認できたら、本日の目標達成です。

以上で、本日の勉強会は終了です！

実際のサービス開発に使われた生きたコードを読み解き、自分で記述することがスキルアップにつながる。池田さんの実践的なスキルアップ講座に参加したメンバーは皆、コードを読み解いてどんな処理を行っているのかを理解することで、実際のプロジェクトに対峙したときに応用できる、生きた知見として吸収することができたのではないでしょうか？

ニジボックスでは、今回講義をいただいた池田さんをはじめ、領域ごとに業界での先端を行くプロフェッショナルのサポートが受けられる機会を積極的に設けています。
この記事を読んでメンター制度についてご興味が湧いた！という方は、ぜひお気軽にカジュアル面談でお話ししましょう！
皆さんのコンタクトをお待ちしています。

池田さんから読者の皆さんへのメッセージ

書籍や学習教材ビデオだと基本の「いろは」を知ることができるものの、「現場の使い方」に触れる機会は少ないのではないでしょうか。この勉強会では、開発におけるベストプラクティスを学べるよう、意識して開催しています。

ニジボックスのメンバーはみんな勉強熱心です。テクノロジーへの好奇心や、業務上の課題解決など、勉強会では積極的に質問がでてきます。お互いにスキルアップを目指すカルチャーがあるので、自分の力を伸ばしたいという方にぴったりの環境だと思っています！

関連記事：
ニジボックスのフロントエンドエンジニア育成の取り組みについて
「つくりながら学ぶ、教えることで伸びていく」リクルートグループ流のフロントエンド人材育成メソッド
過去にオフライン開催した池田さん勉強会の様子はこちら！（参加メンバーによるレポート）
ニジボックスのメンター、ICSの池田さんとReact勉強会を行いました！