フロントエンド勉強会の振り返り

フロントエンド勉強会の振り返り

tanifumiya|2023年12月01日
アドベントカレンダー

この記事は、Lancers(ランサーズ) Advent Calendar 2023 の1日目の記事です。

フロントエンドエンジニアの谷(@high_g_engineer)です。
2023年が馴染んできたと思ったら、もう終わろうとしてますね。怖い怖い。
年の瀬なので、約1年ほど取り組んだ「フロントエンド勉強会」を振り返ります。

フロントエンド勉強会とは

フロントエンド初学者を対象とした社内勉強会です。
モットーは、フロントエンド力を底上げする勉強会。
オリジナルのカリキュラムを元に、口頭で説明を加えながら、ハンズオン形式で進めていました。

勉強会で扱った内容

  • JavaScript(ES2015)
  • HTML、CSSの基本的なマークアップ
  • React周辺知識(環境構築、コンポーネント、ReactHooks、GlobalState、CSS in JSなど)
  • TypeScript
  • 社内製デザインシステムの利用方法

カリキュラムの内容はこんな感じ

カリキュラム

多忙でお休みする時期もありましたが、大体はコンスタントに週次開催出来ていました。

勉強会

なぜ勉強会を開催するに至ったか

当時、フロントエンドエンジニアの採用が上手く進まなかったこともあり、「フロントエンドエンジニアを外から採れなければ、中から育てればいいじゃない」という考えにシフトしていったという経緯があります。

なぜ、そこまでフロントエンドにこだわるの?という人のために順を追って説明します。
フロントエンドはユーザーへの価値提供を行うために、非常に重要なエンジニアリング領域です。
どれだけ本質的な課題を見抜けても、どれだけ良いデザインカンプが作れても、 それをブラウザ上で正しく表現できなければ、ユーザーに価値を正しく届けられません。

また、デザインカンプをそのままブラウザ上で表現できても、適切なインタラクションやアクセシビリティへの配慮ができていないと、ユーザーにストレスを与えたり、正しく情報を伝えられなかったりなどの問題が発生します。
サービスは、ストレス無く利用できることは当たり前で、使っていて心地よい、また使いたいと思ってもらえるような体験を提供できていないと、生き残るのが難しいご時世になってきています。

こういった使い心地のよいサービスづくりを利益を出しながら行うためには、目の前の実装ができればOKという話ではなく、競合に負けない速度で開発を行うための開発体験の向上も並行して行っていかなければなりません。
ユーザーに価値を提供し続ける意味でも、競合に負けない速度で開発を行う意味でも、技術スタックを一定のタイミングでアップデートする必要があります。

同じ技術スタックや更新が滞っている知識で開発をし続けると、負債を溜めるスピードが加速度的に増し、自分で自分の首を締め続けるような状況になっていきます。
そして、技術スタックはただアップデートすれば良いわけではなく、市場に合った正しい技術選定ができていないと、組織がスケールしませんし、現場のモチベーションも上がりません。

ユーザーへの価値提供、開発体験向上、技術スタックのアップデート、組織のスケールを考えた場合、すべての鍵となるのがフロントエンドだと自分は思っています。
しかし、ランサーズはフロントエンドエンジニアの数が少なく、フロントエンドに関心のある人が多くありません。
そういった状況で、個々人にフロントエンドの技術や知識の習得をまかせるのも酷なので、この勉強会をはじめました。

※1年前に書いた記事に、当時の心境も書いているため、詳しく知りたい方はこちらもどうぞ。 https://engineer.blog.lancers.jp/フロントエンド/フロントエンド入門勉強会はじめました-フロント/

勉強会のその後、どうなったか

勉強会の結果、実務でReactのコードを書いてくれるエンジニアが増えました!

実際のところ、勉強会が終わってすぐに書く人が増えた訳ではなく、「書きたい!」「書いているけど困っている」という声を上げてくれたエンジニアに対し、都度、モブプロ、モブレビューでのサポートを行うことで少しずつ増えていったという感じです。

勉強会は飽くまでも、きっかけで、その後に説明が足りていなかった知識や理解に困っている部分を補完していき、さらにフロントエンドに興味を持ってもらうという段階的なアプローチをしていきました。

モブプロは自分の業務時間を削られるので、大変ではあるのですが、対応した方からうれしい声をいただくこともあって励みになります。

モブプロ

そして、実務的なReact開発、マークアップ、アクセシビリティ、UIなどに関心を持ってくれる人が現れ、自発的にフロントエンドテスト本やHTML解体新書など書籍の読書会が開催され、参加者も増えてきました。

読書会

そして、そして、2年前から開催しているフロントエンド定例の固定参加者も増えて、毎週の議題も濃くなってきており、新しい技術の共有や負債解消の取り組みなどがチーム的に行えるようになってきました。よきです。

フロントエンド定例

まとめ

組織的な技術力の向上については、少しずつ地道に取り組めば、ボトムアップで変えていくことができると思います。
ただ、一気に変えることは難しいので、まずは身の回りにいる1、2人くらいからはじめることが大切です。
そして、こちらが共有したと思っても、ほとんど聞かれていないし、理解もされていないという体で、共有後のサポートを念入りにすることが大事です。むしろ、そこからが本当の戦いです。

根気がいる取り組みではあるですが、逆にいうと根気さえあれば特に他は不要な訳です。
淡々とわからないことを一つずつ潰せば良いだけです。
自分が分からないことが出てくれば、調べながら相互に成長していけば良いだけなんですよね。

まだまだ、最高のユーザー体験やフロントエンド開発体験の実現は、もう少し先の未来ですが、この調子で自分自身のスキルアップを行い、視座をあげながら、組織全体のサポートを粛々と行えば、一気に変わる瞬間が訪れると思っています。

「組織が駄目だ!」とか「上が何にもやってくれない!」みたいな考えはいまだに浮かんでは消えていくのですが、それと同時に、そうなっている要因の一つとして、自分自身がやれることに言い訳をつけて、やっていないからかも?と思うようになりました。
改めて、もっとシンプルにやれることはないか?を思考しまくって、行動していきます。
この記事が、思考を行動に転換していく活力に少しでもなれば幸いです。

明日の担当は、@isanasan_ です!お楽しみに!