見出し画像

Nuxt.jsからE2Eテスト導入まで、フロントエンジニア未経験でジョインしたSYNCAチームでの成長エピソード

株式会社WARC

プロフィール

HR tech事業部/SYNCA フロントエンジニア 仲本 憲嗣
2020年当社入社。大学卒業後、独学でHTMLとCSSを学んでWeb制作会社にジョイン。制作会社ではLPやサービスの開発などを通してJavascriptやWordpress、Vue.jsなどを習得。現在はNuxt.jsやTypescript、Firebaseを活用して自社サービスを開発中。

HR tech事業部/SYNCA フロントエンジニア 小野塚彩交
2022年当社入社。2019年に事務職からコーダーにキャリアチェンジ。Web制作会社・受託開発会社ではWebサイト・ECサイト・Webアプリなどの新規コーディングの他、保守・改修案件やLP、WordPressまで幅広く担当。


Web制作会社のコーダーを経て、フロントエンジニアにジョブチェンジ

- 今日はよろしくお願いします。まず、お二人がWARCに入社した経緯を教えてください。

仲本:前職のWeb制作会社でコーダーを3年ほど経験しました。転職のきっかけは、Web制作の案件をこなしていく過程で、JavaScriptやjQueryを触るようになり、Web開発のおもしろさを実感したことです。そこで、次のキャリアパスとしてフロントエンジニアにチャレンジしたくなり転職活動を始め、2020年9月にWARCに入社しました。

小野塚:実は私も似たキャリアを辿っています。Web制作会社や事業会社でコーダーを経験し、業務の必要に応じてJavaScriptやjQueryに触れるようになる中で、キャリアアップの道筋としてフロントエンジニアが視野に入りました。業務と並行して自己学習をしながら転職活動を行い、WARCにフロントエンジニアとして入社しました。

- フロントエンジニアとしてのキャリアを考えて転職活動する際に、重視していたことは何ですか?

仲本:一番の動機は「自社プロダクトを運営している会社で開発したい!」でした。社会の課題に対してチームで試行錯誤しながら、プロダクトで課題解決していく事業に関われるかどうかを重視していました。

転職活動中、複数の転職サービスに触れる中で、キャリアアップや転職支援を支える転職サイトの社会的意義や便利さに共感し、人材業界への興味を持ち始めました。そんな時、コーポレート人材の転職支援に特化した「SYNCA」を運営しているWARCからのスカウトメールをきっかけに、カジュアル面談を経て入社しました。

小野塚:Web制作会社のコーダー業務では、jQueryのような安定したライブラリに触れる機会も多かったです。一方で、Webフロント技術はVue.jsReact.jsNuxt.jsなどのモダンなフレームワークが主流になってきており、フロントエンジニアとしてキャリア形成するためにもトレンドに即したフレームワークに対応できるスキルが必要と感じ、Vue.js/React.jsを自己学習しました。

自己学習で制作したWebアプリが完成したタイミングで転職活動を始め、WARCからのスカウトメールをきっかけに「SYNCA」というサービスを知りました。
転職においても、新しい技術を活かして成長できる環境を重視していたので、興味を持ち面談に進みました。

- WARCの募集要項や、技術的な人材ニーズについて、フロントエンジニア志望の視点でどんな魅力を感じましたか?

仲本:私も小野塚さんと似たことやっていまして(笑)。Vue.jsを個人的に導入して検証などをしていたんです。選考前にカジュアル面談をした際は、モダンな開発環境のリアルな話が知りたくて、根掘り葉掘り聞いてました。

小野塚:私も、カジュアル面談で技術的なことをたくさん質問しちゃいました(笑)。自主制作でVue.jsを活用したWebアプリケーションを開発していたのですが、やはりプロダクトでどのようにフレームワークが活用されているのかは興味津々でした。

仲本:「SYNCA」はNuxt.jsを活用してWebフロントを効率的に独立させていて、バックエンドとAPIで通信する機能的な設計となっていました。制作会社ではLaravelなどのMVCモデルのフレームワークを活用し、Viewの実装はVue.jsを載せて〜という流れがセオリーだったので、Nuxt.jsを活用した「SYNCA」のモダンアーキテクチャの話に夢中になりました。

小野塚:カジュアル面談で技術的な魅力も感じましたし、「SYNCA」を通して人材業界の課題を解決したいという思いも聞けたのも印象的でした。「この人達と一緒に働きたい!」と思えたのが内定承諾の決め手です。ただ、入社してみると、コーダーからフロントエンジニアになるための高い壁に、良い意味でブチ当たりましたが(笑)

フロントエンジニアとして急成長できる技術カルチャー

- フロントエンドエンジニアとして直面した壁についてぜひ聞かせください

仲本:フロントエンジニアと聞くと、JavaScriptを書いてフレームワークを活用して〜というイメージをもっていたのですが、実際のプロダクト開発となると、テスト駆動開発やデプロイ環境、パフォーマンスチューニングやUI改善など、Webに関わる幅広い知見が求められました。

具体的には、GitHub Actionsを活用したCI/CDツールによるソフトウェアワークフローの自動化や、それをトリガーとして実行されるテストツールの導入とテストケースの実装(ユニットテスト:Jest , E2Eテスト:Cypress)などです。フロントエンド開発にはビルド環境が欠かせませんが、環境を構築しやすいDockerなどの仮想環境の概念的な理解をする必要があります。
また、2週間周期のスプリント開発やその過程で行うコードレビュー、パフォーマンス計測とその改善施策なども行います。

これらは「SYNCA」を開発する上で、フロントエンジニアが習得していく周辺技術と言えます。

小野塚:と言っても、私も入社した時は知らない技術用語だらけでした(笑)。モダンな開発環境に囲まれて、何から手をつければ良いか戸惑ったのですが、SYNCAチームは職種を問わずメンバーのフォローアップが手厚いので助かりました。個人的には仲本さんから入社前に出してもらったNuxt.jsの課題が心強かったです。

仲本:Nuxt.jsはドキュメントが充実していて、熟読してルーティングやディレクトリ構造の仕組みを把握すれば、Vue.jsで煩雑になりがちなリソース管理がシンプルになるよう設計されているので、それに沿って開発すれば生産性を高められるんですよね。また、GitHub ActionsといったCI/CDツールや、Cypressを活用したE2Eテスト(エンドツーエンド)なども、最初はその高機能さに面食らいましたが、プロダクト開発を効率化/高品質化するためにうまく活用できれば、これほど心強い環境はないと実感しました。

小野塚:SYNCAチームは技術的に尖ったこと、先鋭的なことをしているというよりも、時流に合わせてより効率的で開発しやすい環境に適応し続けているという技術カルチャーが根底にありますよね。

仲本:システムの保守運用を想定してレガシーなフレームワークを使い続けることや、最先端の技術を取り入れてエッジの立ったフレームワークにすることもきっとできますが、SYNCAは品質とクオリティと開発スピードを担保しながらも、エンジニアがワクワクするようなアーキテクチャにしているのが魅力的に感じました。

小野塚:その技術カルチャーに私も共感しています。例えば、バックエンドの開発チームがSwaggerを導入していることでAPIドキュメントが自動生成されているので、サーバーとフロントでの意思疎通もスムーズなんです。チーム内の開発効率のことを考えた技術選定をされているため、フロントエンジニアにとっても開発しやすい環境だと思います。

-  「SYNCA」の開発で具体的に携わっている機能について教えて下さい

小野塚:「SYNCA」は主に、求職者である登録ユーザーの画面、クライアント企業の管理画面、SYNCAチームのカスタマーサクセス部門のオペレーション画面があります。現在はそれらをデザイナーチームと協力しながら、技術的な刷新を伴ったリニューアルを進めています。

リニューアルにあたって、特にページ表示の際のパフォーマンス改善にも注力しています。

仲本:例えば、ページ表示時のガタつき防止や、ページの読み込み遅延の改善などです。ソフトウェアモニタリングの統合パッケージであるNew Relicを活用したブラウザモニタリングツールで遅延が発生する箇所を分析して、その原因特定と解決策を探ったりします。

デザイナーチームが素晴らしいUIデザインをしてくれるので、ページ描画が遅延してUXが損なわれるのは避けたいです。パフォーマンスチューニングはフロントエンジニアとしての腕の見せどころですね。

小野塚:SYNCAのデザイナーチームは「UIで『SYNCA』をもっと使いやすくするために何ができるか?」を真剣に考えているので、一緒に働いていて一体感を感じます。仕事のクオリティも丁寧で、なによりFigmaのレイヤー構造がめちゃめちゃきれいです。

仲本:デザイナーがクオリティ高く仕上げたデザインを、Webフロントできっちり再現するのもやりがいがありますよね。前職で培ったコーダー経験がすごく活かされています。

-  サービスを運用していく際に、課題になる「技術的な負債」について、どのように向き合っていますか?「技術的な負債」の解消のために、日頃から心がけていること等があれば教えてください。

仲本:適切なテストツールの導入と、テストの自動化を重視しています。

ユニットテストは、JavaScript テスティングフレームワークであるJestを活用しています。E2Eテストに関しては、Cypressを導入しています。基本的に1タスク1テストをセットで開発するよう心がけています。

Webフロントへのテストツール導入と運用は、慣れない事もあり試行錯誤なのですが、バックエンドチームが意識高くテスト環境を拡充しているので、刺激を受けています。

あとはコードレビューも開発の中で習慣化していますよね?

小野塚:WARCに入社して、コードレビューは日常的にするようになって、むしろ第三者にレビューしてもらわないと不安という感覚になってきました。

Linterツールを導入してコーディング規約の非準拠は自動検知できるようになっているので、コードレビュー時には設計思想や、実装の意図などの議論ができているのが特徴です。

プロダクトへの想いが詰まったバトンを渡せるエンジニアと働きたい

- 業務の過程で、テスト環境構築やCI/CDツールの活用など、JavaScript関連以外の技術も身につく事が伺えました。新しい技術を習得する際のコツを教えてください。

小野塚:技術的な情報のインプット/アウトプットはTwitterが中心になっています。例えば、技術検証していて疑問に思ったことをツイートすると、過去に同じ事で課題に直面していた社外のエンジニアの方がリプライでツールを紹介してくれることがあったりします。

また、Twitterのつながりから、Webフロントのコミュニティにも積極的に参加しています。最近のお気に入りは「フロントエンドクラブ」という、社外のエンジニアと同僚のように話せるコミュニティです。Webフロントエンドエンジニアを中心に600名を超える規模になっているので注目しています。

社内外のエンジニアから技術的なインプットを得る事で刺激になっているので、情報のキャッチアップが習慣になっています。

仲本:私は小野塚さんとは真逆な性格なんです(笑)。SNSでいろんな人とつながってインプットというよりも、プロダクトが導入している技術について自宅でもコツコツ調べたり、今後のアップデートにどう対応するか検証したりしています。

最近だと2022年11月にNuxt.jsのVersion3がリリースされたので「SYNCA」でどう対応しようか考えるのが楽しいです。

小野塚:Vue.jsもVersion3に移行していく必要もあるので、2023年は忙しくなりそうですね!

仲本:こういった技術トレンド情報は小野塚さんをはじめ、SYNCAチームから沢山入ってくるので頼もしいですね。
SYNCAチームではデザイナーチームやビジネスチームも交えてLT(ライトニングトーク)会を開催していて、ランチでコミュニケーションを取りながら各メンバーがそれぞれの分野のノウハウや情報を共有してくれます。エンジニア領域に限らず、やはり信頼できる仲間が注目している情報は、深掘りしていて楽しいです。

-  WARCへの転職を考えているフロントエンジニア志望の方がいたとして、どんな方と一緒に働きたいですか?

仲本:「SYNCA」は利用者数も急速に伸びている一方で、プロダクトとして技術的に改善していく余地がたくさんあります。そのため、新規開発にコミットしたい方にも、リファクタリングしてパフォーマンス改善にコミットしたい方にも、幅広く活躍の場を提供できると思います。

小野塚:SYNCAチームは職種の垣根を超えて「良いプロダクトを作ってマーケットや社会の課題にリーチしたい!」という気持ちの人が集まっているので、共感できる人にとっては働きがいがあると思います。

私たちのようにWeb制作会社でコーダーを経験してきた方が、フロントエンジニアとしてキャリアアップのためにチャレンジするのも歓迎しています。

仲本:SYNCAチームは、制作会社や受託開発で主流とされている「ウォーターフォールモデル」のような開発プロセスではありませんが、制作会社では納期遵守の価値観が根付いているので「SYNCA」の開発では心強いです。特にフロントエンドはユーザーが直接触れる箇所なので、リリースの期限を守ることが重要だと思っていますし、私自身も気を付けています。

小野塚:SYNCAチームはスプリント開発をしているので、どちらかというと「チームリレー」みたいな動き方ですよね。チームで決めたゴールに向かって、それぞれの職種がプロフェッショナル性を発揮して、想いの詰まったアウトプットをバトンみたいに渡すというか。

仲本:開発スケジュール的にも「ここで落とすわけにはいかない」みたいなマインドは、納期遵守の価値観にも通じますよね。

小野塚:確かに、Webフロントはスプリント的にも最後なのでアンカー的な責任感はありますね。バックエンドやデザイナーチームの成果をきっちり反映させられるかどうかは、フロントエンジニア次第なので、やりがいがありますよね!

仲本:フロントエンジニアチームは、一緒に働く仲間を募集しています!「SYNCA」というプロダクトの目指す世界観に共感していただける方、チームプレーを大切にした働き方がしたい、という方はお気軽にお声掛けください!

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!