こんにちは、LIFULLでエンジニアとして働いている中島です。
私は2010年入社なので現時点で12年程同社で働いています。
長い方ではありますが、LIFULL社はそれよりずっと長く歴史のある会社で、多種多様なメンバーがいます。
その中には自分の意思で職種変更をしたメンバーや、自身の職種がそもそも時の流れとともに無くなり、変わらざるをえなかった方々もいます。
本記事では、フロントエンド領域に関わる職種変更に伴い、LIFULLではどのような課題があったか、また、メンバーの技術ギャップを埋めるためにどのようなサポートを行ったかについて紹介させていただきます。
コーダー職種からフロントエンド職種へ
5年程前、世の中のフロントエンドエンジニアに求められる技術スタックが大きく様変わりし、それまでマークアップ、CSSコーディングを生業にしていた方々はその際に大きな転換期を迎えたのではないでしょうか。
その世の中の転換が正しかったのかは私には分かりませんが、弊社でも同じように世の流れに沿う形でコーダー(マークアップを主とする)職種がなくなり、フロントエンドエンジニアという職種(あるいはもう少しプランナー、デザイナー寄りの職種)への変更の話がでて職種の新設、廃設がおきました。
会社としては移行対象者に対してはそれぞれサポートを試みましたが自学自習がベースにあり、業務時間を利用した学習の許可や、学ぶためのオンライン講座等の提供といった感じのものが多く、本人のモチベーションに依存している側面があり、人によっては中々厳しそうな現実が見えていました。
育成を現場へ
人事規定の変更なので人事側と技術マネージャーが主体となって動くわけですが、そこからのアプローチだと工夫しなければ既出の課題を抱えてしまうので、もともと自分の業務時間の数割を割いて行っていた技術育成の枠を使って移行メンバーのサポートをさせてもらないかと打診してみました。
(対等な同僚で且つ自分から望んだわけではない職種変更にあったメンバーにサポートという表現を使うのは随分と偉そうですが表現が難しいのでサポートという表現で記述していきます)
移行メンバーは10人程なので有志のメンバーで数人ずつ担当すれば現実的に対応可能なのかなと思っての提案だったのですが願ったり叶ったりということですぐにその運用が開始されました。
サポートの内容
弊社の場合、コーダー職からフロントエンド職への移行にあたっての最大の難所はJavaScriptなわけですが、幸い技術育成のためのドキュメントや理解度を図るための課題はもともと別の方々を対象にした技術育成を行っていた際に作っていたのでそれを再利用した方法で行うことができました。
JavaScriptそのものに対する学習カリキュラム
目的と内容については以下の通りです。
- 言語特性の理解(初級)
- 変数
- 式
- 値の種類
- 関数宣言
- 関数式
- スコープ
- if
- for
- Array
- 言語特性の理解(中級)
- スコープチェイン
- クロージャ
- functionが一級オブジェクトであることの理解と意識の植込み
- 高階関数
- 再帰
- コンテキストの理解
- thisの決定原理
- thisの束縛
- call/apply
- classical実装パターンの理解
- constructor/new
- prototype
- inherit
- class syntax
- DOM Modelおよび周辺技術の理解
- DOM Scripting
- イベント
- バブリング・キャプチャリング
- 非同期について
- Ajax/JSONP
- 設計パターンの理解
- オブザーバーパターン
- メディエイターパターン
- ストアパターン
- 各種ライブラリの再実装
10人もいれば全員に向けて会を開くのが最小コストにも見えますが、もともと興味があったメンバーが集まってるという前提があるわけでもないので個別に時間をもうけてお互いのマインドを理解しあい、心理的安全性を高めることに重きをおきながら毎週行いました。(今年で2年、それ以前から受けてた方もいらっしゃるので長い方は4年ほど)
HTMLコーディングをバックグラウンドにもつ方々が多かったので、最近ではある程度言語理解が深まった後はJavaScriptのツールチェインとかaltJSの分野ではなくアクセシビリティを高めるために付随して必要になってくるJavaScriptを学ぶという方向性で授業内容を組み立てるようにしました。
具体的にはWAI-ARIA Authoring Practices 1.1(現在は1.2)で取り扱われているUIパターンの読み込み、実装練習になります。
WAI-ARIA Authoring Practicesで紹介されるUIパターンのうち、カリキュラムとして採用したもの
- Alert
- Disclosure
- Dialog
- Tabs
- Feed
- Listbox
- MenuButton
- Menu or Menubar
- Carousel
- Combobox
- Grid
そのほかのUIパターンについてはこれらを履修後に読み込みだけを実施
これはそれまでの言語理解のための授業に比べると、自身のもともとある強みを拡張する方向の内容になるのでモチベーションの高まりを感じることができてとてもいい選択でした。
(人によってはその後サーバサイドに興味を持ちRubyやNodeでのアプリケーション制作の演習などに進んだケースもあります)
その後の会社への影響
今LIFULLではいくつかのWG(ワーキンググループ)があります。
その中にはLIFULL HOME'S全てのフロントエンド開発をより良くしていこうというWG、全サービスを対象にアクセシビリティ向上を推進していこうというWGなどもあります。
私はその両方に所属しているのですが、フロントエンドを改善していく方のWGでは、デザイナーからこのサポートを経てフロントエンドエンジニアに転身された方が活躍してくれていたりします。
彼ら・彼女らにしかないバックグラウンドを生かした取り組みもあり、デザイナーとの橋渡しやスタイルガイドの作成など幅広く成果を出してくれています。
アクセシビリティの推進活動を行うWGにおいては、会社の全サービスを対象に推進活動を行うため、もともと数人のWGメンバーでは当然各PJに参入して実装支援を行う...とまではいかない現実がありました。
しかし、それぞれのPJには代わりにこのサポートをうけてくださった方々が入っていることが多く、そこで得た知識を実務に生かしてくれており、WGとしてはアクセシビリティレビューの請負や啓蒙活動、相談対応を、現場の転身組は実装でそれを力強く支えるという関係性ができつつあります。
最初は単純に移行をサポートしたいという気持ちだけで始まったものですが、それが回り回って波状的に会社を前進させる力となっているのを感じます。
最後に
近年フロントエンドエンジニアの採用事情はかなり厳しいと聞きます。
採用ばかりではなく内側に眠っている多くの才能にも目を向けていきたいですね。
one more thing
LIFULLでは共に成長できるような仲間を募っています。 よろしければこちらのページもご覧ください。
