こんにちは。NewsPicksのkitoです。
NewsPicksでは、JobPicksという「みんなでつくる仕事図鑑」をコンセプトにしたサービスを提供しています。様々な職種のロールモデルの実名でリアルな経験談を閲覧・投稿でき、就活、転職、副業の仕事選びに役立ちたいと思って日々開発しています。
開発メンバーは、チームリーダーでサーバーサイドとフロントエンド両方こなすOさんと、主にサーバーサイドを担当されるTさん、そしてフロントエンドエンジニアの私の3人で開発しています。
今回は、我々が企業ページと呼んでいる企業を軸としてロールモデルの経験談などをまとめたページをリリースまでにやったことを書きたいと思います。NewsPicksの中規模プロジェクトでエンジニアの動きをリアルに感じていただければ幸いです。
はじまり
プロジェクトの検討がはじまったのは2021年の夏でした。
マーケターや編集者さんを含めた定例ミーティングで、どなたが口火を切ったのか忘れてしまいましたが、新しいコンテンツをみんなで考える時間があり、そのなかで企業を切り口としたコンテンツがユーザーに響くのでは? という話があがりました。
JobPicksには職業を軸としたコンテンツはそれまでにもありましたが、企業を軸として職業の経験談を集めたコンテンツはなかったので、私も賛成したことを覚えています。それまで小規模な開発が続いていたので、ちょうどもう少し大きな規模の開発をやりたいと思っていた時期でした。
開発着手
仕様がほぼ決まり開発着手しはじめたのが、2021年11月でした。
当初から開発メンバー3人がフルコミットで企業ページをつくりはじめたというより、11月は他のタスクも並行してやっていることが多かった印象です。
Tさんは先行して企業のマスターデータの設計をはじめていました。
企業マスタは国税庁のデータを使い、APIから直接すべてのデータは取得することはできないようで初期データは手動でCSVをダウンロードし、差分のみAPIからとってくる方法になりました。
また、Tさんは検索エンジンの選定と法人取得のAPI実装にも取りかかっていました。
検索エンジンは、ElasticSearchとAlgoliaが候補にあがったようですが、データの保存件数と検索回数、コストの観点などからElasticSearchが選ばれました。
12月に入り、主に私のタスクになるのですが既存の経歴入力を改修し、formのinputに文字を入力するとAutocompleteで法人名を一覧で表示するUIの開発に着手しました。私はAPIへの負荷が気になり、lodash.jsのthrottleやdebounceのようなAPIの呼び出しを間引くための処理を、（JobPicksではフロントエンドでReact.jsが使われているので）Hooksで作成した方が良いのではと検討していましたが、今回のケースでは結局問題にならなかったので検討だけに終わりhooksの実装は行いませんでした。Autocomplete入力は改善余地はまだまだあるにしろ、開発メンバー以外にも概ね好評のようでほっとしました。
企業マスタ
ユーザがformから法人名を入力する際、法人名が既存の企業マスタに存在しているとは限りません。
手入力で法人名を入力するための切り替えリンクを用意し、手入力した法人名を企業マスタに反映するようにしました。
手入力された法人名が企業マスタに反映されて問題になるのは、同じ法人名の法人があったときです。
国税庁のデータからとってきた法人だと住所があるので、法人名の下に住所を載せることで、同じ法人名であっても違う法人だと判別できるUIにできます。しかしユーザーに手入力して頂いた法人名だと、住所がないので判別できなくなってしまいます。 解決策としては、手入力の際は法人HPのURLを入力して頂くことでした。法人の住所を入力して頂くのは負担が大きすぎるので、比較的入力しやすい法人HPのURLを入力して頂くことにしました。
もっとも、国税庁の法人データからとってきたデータであったとしても、法人名の問題からは逃れられないです。
なぜなら法人は、合併したりして名前が変わります。一般的に知られている法人名と国税庁のデータ上の法人名がかなり違っていることがあります。学校法人や公務員だと、ユーザーが勤めていると思っている組織と法人のサイズがあってないこともあります。
様々な困難があり手動で名寄せを行った部分が少なからずありますが、理想的な企業マスタは現状では実現できていないというのが正直なところです。
企業ページのコンテンツ
経歴入力は企業ページより先行してリリースされることになり、
12月の末に不具合修正などを経てリリースされました。
年が明けるとリーダーのOさんがエグい勢いで企業APIの作成と一覧ページのフロントエンドのタスクを実装していきました。 私も企業×職業ページに使われるコンポーネントを順次実装していき、徐々に企業ページの形になっていきました。
フロントエンドを実装していていつも思うのは、UIが形になったときが一番満足感が大きくモチベーションが上がる瞬間だということです。
First View付近にロールモデルの経歴を表示するセクションがあるのですが、このセクションは個人的に気に入っています。他のメンバーからもJobPicksらしくてリアリティーがあると好評でした。実名だからこそ生々しさがあり、就活や転職を考えているユーザーには興味深く見て頂けるかと思います。（＊上のスクリーンショット） また、NewsPicksやJobPicksでは独自の記事を作成しているため、企業ページに関連する記事を掲載できボリューミーで独自性のあるコンテンツにすることができました。
企業ページと記事の紐付けは、記事を入稿するヘッドレスCMSであるContentfulにExtension作成して対応しました。
企業ページの初期リリースでは、開発期間を考慮して企業アイコンを入れるかどうか議論がありました。ただ、アイコン画像があるとないとでは企業ページの印象がガラリと変わってしまいます。最終的には初期リリースに含めることになり、Tさんに企業の公式HPのOGPから企業アイコンを作成する実装をして頂きました。上場企業のHPからの収集はそれほど難しいことではないようでしたが、ただ、非上場企業などは手作業で公式HPを検索して手動で探してきたようです。 もろもろのタスクが完了し、1月の終わりにようやく企業ページがリリースされました。2月初旬まではbugfixや残タスクを行いました。
まとめ
今回は、JobPicksの企業ページの開発について書かせて頂きました。 NewsPicks開発がどのような形で進むのかイメージして頂けたなら幸いです。
企業ページはリリースされたわけですが、もちろんそれが終わりではなく、むしろはじまりです。
SEOの改善や、さらなるコンテンツの拡充など課題は多いでしょう。
これから企業ページを大きく育てるために今後も開発していきます。
ユーザベースではエンジニアを募集しています！ カジュアル面談などお気軽に！
