ぱすたけ日記

日記っぽいのを書きます。

マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました&資料を公開します

昨年のはてなリモートインターン2021で講義を担当したフロントエンドブートキャンプ の資料をご覧頂いたことをキッカケに連絡を頂いて、マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました。

その際に使用したワークショップ資料について、マネーフォワードさんにも確認して、Scrapboxの以下のページに公開しました。

構成としては

という3本立てになっています。

フロントエンドのモダン化を進める中で、普段の業務とは別にまとまった時間でチームメンバーにReactやフロントエンドに関するインプットをしたり手を動かしたりしたいというお話だったので、ハンズオン形式でReactで簡単なアプリケーションを作るハンズオンを中心としたワークショップ形式にまとめました。

はてなインターンの資料をご覧頂いてお話頂いたということもあったので、はてなインターンの資料を作っているときに考えつつも、時間の関係や優先度の関係で入れられなかったReact+TypeScriptで実際に手を動かすパートやDOMに関する知識に関するパートを中心に取り扱っています。

講義資料の構成などを考えながらはてなインターン資料の補足を書いたのが年末に書いたこの記事でした。

第2部の「React入門ハンズオン」はこのワークショップのコアの部分です。Reactの実際のコードを書いていく手順を書き下しているイメージです。最初は普段仕事で書いているような順番で構成していったら、ブラウザの画面に成果物が出るのが結構最後の方になってしまったので、その辺はハンズオンらしく順番をこねくり回しています。マネーフォワードさんでのワークショップでは4つのグループに分かれて、それぞれのグループにReactやTypeScriptに慣れている方にTA的にサポートしてもらいながら、Zoomの部屋を僕が巡回しながら質問などに答えていく形式を取りました。

第1部の「DOMとレンダリングパフォーマンス」、第3部の「フロントエンドツールチェインについて」はReactを実際に書く以外のところの要素としてまずはDOMやウェブブラウザ、最後にcreate-react-appやその他のJSのtranspilerやbundlerを紹介しました。こちらは座学的な感じでそれぞれ実施しました。DOMだけじゃなくてウェブブラウザのレンダリングの話をこういうところで持ってくるのは僕の趣味ですね。

全体の構成時間としては休憩なども含めて3時間半ほどで実施しました。Reactハンズオンが2時間弱、それ以外の2つを30分程度という感じです。やってみて感じたのですが、やはりハンズオンしながらReactのフックの話やTypeScriptのあれこれを説明するのはちょっと情報量が過多になるので、事前にはてなリモートインターン2021のフロントエンドブートキャンプの資料を眺めておいてもらうとちょうど良いかなと思ったので、公開版の資料にはその旨を書いています。

しっかりとした長さのワークショップをしかも職業でウェブアプリケーションに関わっている皆さんに実施するということで内容のレベル感や速度感など結構悩みながら当日を迎えたのですが、アンケートでフィードバックを頂いたところ、レベル感なども概ね好評だったようで安心しました。

今回公開した資料自体はご自由に使ってもらって大丈夫です。めちゃくちゃ間違ったこととかは書いてないかと思いますが、資料の中でお気づきの点などあれば、Twitterなどでお知らせ頂ければと思います。

このような機会を頂いたマネーフォワードさんには感謝しています。ありがとうございます!!!