こんにちは。Webエンジニアの佐藤です。
先日、OpenWorkにて新機能「就活レポート」がリリースされました。
本リリースはWeb・ネイティブアプリ両方で行われましたが、今回はWeb側の開発において苦労した点・工夫した点などを綴りたいと思います。
就活レポートとは
プレスルームの説明がとても分かりやすいのでそのまま引用します。
「就活レポート」は、来年就職活動を行う予定の学生のみなさまに向けて開発したもので、学生ステータスのユーザーが閲覧・投稿することができます。本レポートには、入社を決めた会社に関する情報のみならず、その投稿をした先輩の志望業界・企業選びの軸の変化や参加したインターンシップ情報、就職活動期間における様々な情報が掲載されています。 引用元：OpenWork プレスルーム
「選考を有利に進めるためのもの」というよりかは、「就活開始から入社先決定まで、先輩がどのような流れで就職活動を進めたのか」という全体像を掴むのに適したコンテンツとなっています。
もちろん学生の方がメインターゲットではありますが、社会人の方が見てもとても興味深いものとなっていますので是非覗いてみてください。
https://www.vorkers.com/student_report/list
主要な機能
そんな「就活レポート」ですが主に下記3つの画面で構成されています。
- 回答画面
- 一覧画面
- 詳細画面
回答画面で学生からレポートを募り、一覧画面で条件に合致するレポートを表示、詳細画面で対象のレポートを表示。コンテンツの規模こそ大きいものの、とてもシンプルな機能です。
開発時に苦労した点・工夫した点
アンケートフォームの実装
前述の通り一覧・詳細画面に関しては機能がシンプルなこともあり、実装が滞ることはありませんでしたが、回答画面(以降「アンケートフォーム」)に関しては中々に複雑でした。
そもそもアンケートフォームがリリースできなければ表示するレポートを集めることもできないので、開発側として如何にこちらをスムーズに実装できるかどうかが鍵となっていました。
アンケートフォームは上記のように、単一URL上でポチポチして回答を進めていく仕様になっています。(上記gifでは1つ目のセクションのみを回答)
構成として
- 入社先情報
- 本選考
- インターン
- 就活初期
- まとめ
- 回答者情報
という全6セクションに分かれており、その配下に各フォームが複数存在しています。
字面だけだとボリューミーに思えるかもしれませんが、フォーム一つ一つで入力すべきことは少なめなので実際に回答してみると「意外と早く終わった」と感じるかもしれません。
フォーム遷移の実現方法
しかしフォームの数自体が多いことは紛れもない事実で、開発において最も考慮したのが「フォーム遷移をどのように実現するか」でした。
というのも、方法はいくつかあれど下記の点を考慮する必要があったためです。
- 各コンポーネントの設計をシンプルにしたい
- 仮に今後設問(フォーム)を増やす場合でも工数が掛からないようにしたい
そこで今回はVueの動的コンポーネントを利用し、複数のコンポーネントを動的に切り替えることでフォームの遷移を実現することに。
遷移しても入力状態を変更したくないフォームに関してはkeep-aliveを指定してコンポーネントをキャッシュし、確認画面のようにリアクティブに表示内容を変えたい場合は敢えてキャッシュさせないようにしました。
そのおかげで、各フォームを分離でき保守性を高められたのは勿論のこと、実装途中で発生した「〇〇と△△のフォームをn番目に移動する」といった仕様変更にもスムーズに対応することができました。
jQuery→Vueへの移行
一部の設問では、OpenWorkにある既存のフォームを再利用したいという場面がありました。例えば下記などです。
| フォームの種類 | 既存の使用箇所 |
|---|---|
| 企業検索フォーム | ユーザー登録ページ |
| 回答者情報フォーム | 口コミ投稿時の在籍情報入力ページ |
ですが現在Vueに移行しようという流れこそあれど既存のOpenWorkのフロント部分は大半がjQueryで書かれており、上記フォームもその例外ではありませんでした。
そこで今回は「汎用的なフォームゆえに今後も再利用する可能性がある」ことも考慮して、jQueryで書かれた上記フォームを仕様はそのままにVueで新規実装することに。
今後余裕があれば既存機能のリファクタも行なっていきたいと考えています。
急ピッチでの開発
そもそも今回の「就活レポート」、開発を始める段階では仕様が固まりきっておらず余裕のあるスケジュールとは言えない状態でした。
そこで下記のサイクルを迅速に何度も回し、検討と開発を並行して進めていくことに。
- 機能の開発・修正
- 共用環境をプロジェクト内で展開
- 各メンバーからのフィードバックを元に議論・検討
特にアンケートフォームの方に関しては、一覧・詳細画面と比べて考慮すべきことが遥かに多く、プロジェクト内で何度も議論しました。
その結果、一番の関門であった「目標日までのリリース」も無事達成。
リリース日の関係から削ぎ落とした仕様なども多少ありましたが、今振り返ってみるとエンジニアとして程よい焦燥感と充実感を持ちながら開発できた、とても貴重な経験だったなと思います。
最後に
昨年度まで学生として就職活動を行なっていた自分が就活生のための機能を開発する、というのは何とも不思議な感覚でしたが、「どうしたら学生にとってより価値あるものになるか」を議論しながらプロジェクトとして1つのコンテンツを作り上げていくというのは大変やりがいを感じるものでした。
オープンワークでは、経験に関わらずこのような大きいコンテンツの開発に携われる機会があります。 興味のある方は是非弊社採用サイトを覗いてみてください。
