登場人物
新福さん
複数社を経てファインディに参画。Findyのフロントエンドを担当。Findy Team+の開発環境改善やCI/CD構築などにも取り組む。好きなFWはAngular。OSSにPRを投げるのが趣味。
フロントエンドのトレンドを追いかけ、OSSのコントリビューションやコミュニティ運営にも携わる
——まずは今取り組んでいる業務内容や社内外の稼働について教えてください。
フロントエンドエンジニアとして、Findyのフロントの実装、社内フロント開発環境の改善、CI/CD構築などに取り組んでいます。
仕事以外ではOSSのコントリビューション活動のほか、福岡のフロントエンドカンファレンスの委員長もやっています。
——「フロントメインでやっていこう」はいつ頃から？
どうですかね…。今振り返ると、私がフロントエンジニアを始めた頃は、フロントエンドは技術の移り変わりが激しいと言われていたんです。1社目は若手が少なかったこともあり、トレンドを追いかけているのが自分くらいしかいなくて、やっていくという感じでした。
あとフロントは、ブラウザ画面に自分の作ったものが表示される。見た目ですぐわかるので、勉強のモチベーションを保ちやすいというのもあるかもしれないです。
モバイル向けのアプリを開発していた時に、OnsenUIのバグを報告してからOSSのコントリビュートもやるようになりました。そこからAngularやNxのコミュニティにも参加するようになっていきました。
エンジニアドリブン、非エンジニアも技術的な言葉がわかる環境が決め手に
——そんな新福さんがFindyに入社した理由は？
元を辿ると新型コロナウイルスの感染拡大ですね。当時いた会社でも、週4日リモート、1日だけ出社といった制度はあったのですが。自分の体調や健康を踏まえたとき、できるならフルリモートの環境がいいと思って、転職を意識し始めました。
そこからFindyを使って、いいねがついた企業を見たりして……。
——最終的に入社の決め手はどういうところだったんですか？
フルリモートの制度があること、あとはエンジニアやエンジニアリング的な思考をちゃんと大事にしてくれる文化ですかね。
エンジニアではない、マーケティングの方もプログラミングを勉強していたり、技術的な言葉を問題なく理解していたりと、エンジニアを大切にする文化がある。面談とか面接を繰り返していくと、その文化が伝わってきました。
あとは何より、エンジニアの使うプロダクトを自分たちで作っているのも大きいですね。思い返すと、今まで作ってきたものは自分では使わないものやメインユーザーではないケースがほとんどでした。自分が一番のメインユーザーであるプロダクトに関われるというのは、今までやったことなかったので興味がありましたね。
——実際に入社してみて、良い意味でも悪い意味でも、ギャップはありましたか？
良くないギャップでいくと、私が入社したときにモノレポからの脱却が佳境に入っていたのですが、見てみると無理やり剥がしたものがあったり、ライブラリが古いものだったりして。設計なども改善の余地が無数にありました。当時はずっと「伸びしろ〜！」って言ってました（笑）
良いギャップだと透明性の高さですね。今までの会社だと経営層がどういうことを考えているか、考えていることが共有される機会ってそこまで多くなくて。ファインディだと社内ドキュメントで共有されるので、経営層の思想がわかりやすいというのはありますね。
開発基盤をテコ入れし、テストを充実したことで、安心感とスピード感を持った開発環境を実現
——入社してから取り組んできたことについて教えてもらっても良いですか？
まずは開発環境の準備からやり始めました。
前職で、Nxでのビルドテスト環境構築について知見はあったので、とりあえずNxを導入し、開発基盤をテコ入れしようという流れになりました
——Nxで開発環境作って、そこからテストに入っていく感じですかね？
そうですね。クラスコンポーネントとかは巨大なものもあったので、純粋なユーティリティや関数など、着手できるところから始めるました。
手をつけてみると仕様がわからないこともあって。仕様を読み解きつつ、それに沿うテストケースを書きつつ、最初は大変でしたね。
——確かに入社すぐだとわからないですもんね。テストはどんな構成でやってるんですか？
全体的なテスト戦略として、設計の段階でコンポーネントとロジックを完全に分離して、ロジック側は頑張る、コンポーネントは末端の方をしっかり書くという戦略です。ロジック部分のカバレッジを限りなく100%に近くしようという方針を立てています。
今はコンポーネントの部分を進めている段階です。コンポーネントは、よくあるContainer ComponentとPresentational Componentで分けていて、ContainerはロジックをReactのHooksから引っ張って、次のコンポーネントに渡す形です。なので、Hooksで分離したロジックに、しっかりテストを書けば、Container Component自体はそこまで頑張りすぎなくて良い。その代わり、そこに繋がるPresentational Componentはしっかり書くという感じです。
Presentational Componentでは、スナップショットテストで最終的にレンダリングされるDOMの確認をしたり、インタラクション系のテストをしています。ただ、これだけだと実際の見栄えはわからないので、そこをカバーするためにStorybookを使って、Visual Regression Testを行う機能を組み込んでいます。
——ツールでいうと、どういったものを使っているのでしょうか？
ユニットテストはJestとTesting Library、本格的なE2Eテストはまだ導入できていませんが、最初はCypressからStorybookを参照し、スクリーンショットを撮って差分がないかをテストするといったことをしています
また、Chromaticと呼ばれる、Storybookを自動的にテストするSaaSを試しています。軽い設定だけで、自動的に送られてきたプルリクに対し、Visual Regression Testを全部のStorybookで実践してくれる。出たエラーやピクセル差分を見せてくれるので非常にレビューもしやすいです。
——テストが充実するなかでリリースに対する安心感やスピード感も出てきましたか？
そうですね。CI/CD環境は整備しましたし、リリースも自動化できているので、開発しやすい環境が組めていると感じます。
——ここまで話を聞いて、しっかり品質が高く、かつ早くという体制を、作っているフェーズだなと改めて感じました。
作るプロダクトも増えているけれど、社内のリソースは限られている。それをいかに有効活用するかが鍵になってくると思います。
ライブラリの最新化とかもそうですし、社内で採用しているライブラリは共通にしていっています。どのチームになっても、どのプロダクトを触っても、同じような感覚で開発できる。チームが違うからレビューできませんとかも起こりづらくなると考えています。
とはいえ、まだまだやらないことは沢山あるのですが。
自分が使ってきたものを作れる楽しさが魅力。フロントエンドの設計やテスト含め技術全般に興味のある人に是非ジョインして欲しい
——ファインディでエンジニアとして働くやりがいはどの辺りでしょう？
やはり僕自身がFindyのユーザーでもあるので、今まで自分が使ってきたもの、使っているものを作っている感覚は、とても新鮮で楽しいですね。こうしたらいいのにとか、ここの作りが気に入らないなと思ったとき、自分でプルリク上げて修正できるので。
——開発環境も整ってきたなかで今後やっていきたいことは何かありますか？
せっかく社内に複数プロダクトがあるので、垣根を超えて、コラボレーションできる環境を作っていきたいです。
例えば、Findy転職だとスキル偏差値のグラフが出てきたり、Findy Team+だと統計機能があったりする。これらを他のプロダクトに移植しやすい環境づくりだったり、Findy Team+の洗練されたコンポーネントデザインをベースにしたデザインシステムの作成だったり、色々やれたらいいなと思っています。
あとはモノレポに再度統合するというのもありますね。Findyのフロントエンドのrepositoryが一つあって、ユーザー用と企業用、管理用のが揃って、共通して使うデザインシステムが載るというようなイメージです。CIの設定周りをいじるときに一つずつ見るのは面倒なので、モノレポにするというのは一つの手なのかなと考えています。
——最後に、どういう人に入社してほしいかを教えて下さい！
あくまで今の時点ではあるのですがフロントエンドの技術全般に興味がある人ですね。設計やフレームワークなど、色々と必要なものが多いことを前向きに捉え、開発を楽しめる人と一緒に仕事するのは楽しいですし、そういった方々にどんどん入ってもらいたいです。
欲を言うとすると設計やテストの知見が豊富な方だったら嬉しいです（笑）豊富でないとしても、なぜテストが必要なのか、なぜ設計を考えないといけないのかというレイヤーから、思考できる人だと嬉しいですね。
←社員インタビューへ戻る
Findyで一緒に働きませんか？
まずは気軽にカジュアル面談も可能です。少しでも興味お持ちいただけましたらぜひご連絡ください！
【エンジニア組織全体】
【Findy 転職】
【Findy Team+】
