フェンリル採用情報サイトをリリース！エンジニアによる制作裏話

エンジニアの青野です。

先日フェンリル採用情報サイトが新しく公開されましたので、その裏側について書きたいと思います。

フェンリルのコーポレートサイトには既に採用ページがありましたが、この度新しく新卒採用、キャリア採用、インターンシップを含めた採用総合サイトとしてリニューアルすることとなりました。

そこで表示速度の改善やこれまでにない表現の実装、またサーバー管理コストの削減などを実現するために、新しいアーキテクチャで新規サイトを構築することにしました。

Nuxt.jsでフロント改善

まずフロント側をモダンなJSフレームワークであるNuxt.jsを使用することにしました。

Nuxt.jsを採用した理由としては

・公式で日本語ドキュメントがあり、学習コストがそこまで高くない

・コマンド一発でローカル環境構築

・仮想DOMによる差分更新やSSR（サーバーサイドレンダリング）のため表示速度の激的な向上

・コンポーネント単位での開発

・ディレクトリ構成が明瞭で複数人での開発にも向いている

・Vue.jsと違いルーティングの自動生成が楽

・ライブラリをあれこれ入れなくてもやりたいことがだいたいできる

などなど。

他にもまだまだ理由はありますが、ざっと挙げるだけでもこれだけメリットがあります。

また、コードの品質を保つために、ESLint + Prettier（プリティア）の導入。

両者はどちらも似た性質を持っていますが、PrettierはESLintのフォーマットよりも優れているところがあり、どちらかだけではなく併用することでより品質の向上が見込めるようになりました。

Google App Engineで開発に集中できるように

できるだけ開発に集中できる環境にしたかったということと、別件でGCP（Google Colud Platform）を利用していたというのもあり、PaaSであるGoogle App Engineを採用しました。

Google App Engineの良いところは、Googleの安定したインフラ上で運用されていることや、自動スケーリングすることによって急激なアクセス増加などがあっても影響がほぼないところです。

また、Google App Engineにはバージョン機能があり、本番環境とは別に新バージョンを用意することができます。

この機能によって旧バージョンから新バージョンへすぐに切り替えることができます。

さらに旧バージョンを保存しておけるため、問題があればすぐに旧バージョンへ戻すことができます。

ありがたいですね。

継続的デリバリー環境を構築

今まではテストの頻度が低いためバグ発見が遅いことや、ほとんどのリリースプロセスが手動のため開発効率が悪いなどの問題がありました。

こういった問題を解消するため、同じGCP サービスであるCloud Source RepositoriesとCloud Buildを使用、連携し、以下の図のようにビルドやデプロイなど、全体的なプロセスを自動化しました。

まとめ

採用情報サイトでのLazyLoadの導入や、一部要素の先読み。また各UIのインタラクションの調整やアクセシビリティの向上など、まだまだ改善できるところがありますので順次取り組んでいきます。

全体的な感想は、新しい技術に触れることは楽しいということと、やっぱり表示速度が早いページは気持ちがいいですね。

今後も楽しみながら改善施策を行っていきたいと思います。