WealthParkのコーディングテスト(?)、1つ公開してみます(フロントエンド編)
こんばんは。WealthParkでVPoEをしている藤井です。
かれこれ去年から1年ほど、ユアマイスターの開発責任者の星さんと、小粋fmというポッドキャストを続けています。先日、最新話を公開させて頂きました。(ので、よかったら聞いてみてください。)
最新話ではコーディング試験に関する話をしました。
その中で、WealthParkでどのようなコーディング試験を行っているのか、という話に若干なり、言葉では説明したものの、「正直公開したとしても困らないかな」と思っていることもあり、今回このブログにてその一部を公開してみます。
フィードバックなどございましたら、是非お願いします。
前提
・今回公開するものは、実施しているコーディングアセスメントの1つであり、実際(もしも)受けられたりする場合は、全然違う課題がでることはありえます。
・コーディングアセスメント、面接プロセス共に逐次改善、変更を繰り返している為、ある時点でのスナップショットとして捉えて頂けると幸いです。
感謝
今回の課題を思いついたきっかけは2019年に行われたReact Meetup #6でのkoba04さんの発表の際に使われていた、Hacker Newsのサンプルアプリです。この場を借りて、御礼を申し上げます。
実際の課題
Hacker NewsのAPIを利用して、newsのリストを実装すること(実際の課題ドキュメントにはUIデザインのラフ画 + 要件定義がある)
制限
・react(preact可)の利用は必須, next.jsやcreate-react-appなどを利用することも可
・typescriptの利用は必須
・UIライブラリは使用しないこと(material designや、他社のui componentなど)、css framework(tailwindやstyled-componentsなどを利用することは可)
HackerNewsのAPI
https://github.com/HackerNews/API
UIに関する要求(一部公開)
・APIでデータの取得が完了するまでの間、Loading Animationまたはicnを表示すること
・初回ロードでは100件のデータを表示すること
・後はデザインのラフ画に従い実装(ただし、デザインは比較的自由度高い
以下任意の要求
・Infinite scrolling または pagenation
・Performanceの追求
・綺麗なUI
備考
・本試験はコードの作り込みを期待していない
・なので、時間制限をかけていないものの、数週間や、1ヶ月かけて作って欲しいわけではない、ということを伝えている
・ただ、候補者の方が業務で忙しいこともあるので、時間制限は設けていない
・提出されたコードは、次回の面接時に利用される(提出されたコードを元に、質問や議論をする)旨を伝える
コーディング試験とコーディングアセスメントの違い
コーディングアセスメントという言い方を僕はしています。
"アセスメントとは、対象を客観的に調査、評価すること。"
上記の課題は、コーディング試験の様に、明確に問題があり、それを解くことで、明確なスコアが出るといった類の問題ではありません。もちろん、コードの内容は精査しますし、それによって、合否の判断が行われることもあります。
ただ、この課題は合否の判断に使われ、それでおしまい、といった類の課題ではありません。実際にそこで書いて頂いたコードを元に、次の面接時に議論し、お互いをよりリアルに知ることが出来ることに真価があると考えています。
なので、いわゆる一般的なコーディング"試験"とはやや毛色が違います。
また、HackerRankなどのツールを使い、あるReactのサンプルページを表示し、ここのこの部分に画像を入れたいです。みたいなことを聞いたり、何かの理由で画像がうまく表示できていないのですが、原因を探ってほしいみたいなことを聞くようなテストを行うことも可能です。
ただ、その場合どうしてもまずコードの全体像を把握しにいくスキルだったり、バグの調査のスキルとかが比較的重要になったりしまい(もちろんそれが大切なケースはあると思いますが)ます。
一方で、この課題に関しては、候補者の方に事前にコードを書いてきていただいているので、そういったことを探っていく流れは不要です。変なドキドキをある程度減らせるかな、とは思っています。
考えや経験を知る
このある程度実務に近い課題の中で、実装者の考えや経験を鮮度高く知ることができます。
・react(create-react-app有/無), preact, next.jsの中で選んだものと選んだ理由
・CSSフレームワークの選定理由
・デザインに対する考え方(UI周りが得意なタイプかどうかなど)
・html/cssの書き方、クラス名の付け方など
・アクセシビリティについての考え方
・コンポーネントの分け方
・メモ化を使うところ
・コードの書き方
などなど
まず、そのどれもに唯一の正解は無いと思っています。(一般的に考えてこれが良い、みたいなのはあったとして)
なので、こちらの想定している通りのコードの書き方をしているかどうかではなく(かつ、時間を十分にかけれているわけでは無い前提で)、上記の内容に関連した質疑の受け答えを通じて、その考えやその考えに至る過程などを聞く中で、候補者の方を理解することができます。
もちろん、このシンプルな課題で見ることができないポイントもありますが、実際にこのアセスメントを通じて、かなり質の高い情報を得られていると感じています。
また、得意な部分と苦手な部分が分かるので、アサインやチームのバランスなども考えならがら採用プロセスを進めることができます。
極端な話、cssをコピペして持ってくる、とかもありえるかもしれません。(それが時間が無かったからなのか、デザイン周りが得意でないからなのかとかは質問することですぐにわかります。)
また、候補者の観点からしても、ここで有益なレビュープロセスを行えるかは重要だと考えています。もしも候補者との議論の中で気づきを得ることができれば、実際に会社に参画する中で、こういう部分を伸ばせそうだ、とか、コードレビューでアクティブに議論出来る文化がありそうだ、といったことを感じて頂くことが出来ます。
これは会社を選定する上で重要な基準の1つだと考えています。
なので、ある意味このプロセスで、候補者の方に良い気づきを与えられるか、コミュニケーションしやすいと思ってもらえるか、つきつめると一緒に働いてみたいと思って頂けるか、は我々にとっての試験でもあります。
良いところと考慮点
良いところ
・なんといっても実務に近い環境のコードの書き方が分かる。レジュメよりは鮮度が全然高い。例えば、リーダー職をやっていて、実際にコードに長らく触れていなかったような方が、Hooksを使わなかったり、class componentを使っていたり、とかは分かる。
・また、次の面接を通じて、その人の考え方を知ることができる。どういう基準で利用するライブラリを選定するタイプなのか、など。
これらの情報は、口頭の質問でも確認は出来るが、生のコードと一緒に話すことで鮮度、確度が段違いに高まると感じている。
また、これが大事だからこそ、正直この課題をオープンにすることはあまり問題にならないと感じている。
例えば、どこかでコードをコピペしてきたとして、次の面接でこちら側からの質問を経て、どこまで理解した上で使っているかが透けて見えるからである。
考慮点
・面接する側もきちんとした事前準備が必要
・いっても候補者の方の時間をそれなりに頂くことになる(そんなに時間取られるようなこと、やってられない、という方もいらっしゃるとは思っています)
・良くも悪くも、会社に対してある程度興味や関心を持っていない状態では、候補者にとってやる価値を見出しにくいものだと考えています。
さいごに
このフロントエンド用のアセスメントは、全てのフロントエンドエンジニアに対して汎用的に有効な課題かというと、必ずしもそうではないと思っています。ポジションや期待値によっては違う課題の方が有効なケースも往々にしてありえます。
同じ様な課題を検討される場合には、エンジニアに期待する役割や実際の業務を考慮した上で、履歴書や面接の質問だけではどうしても聞ききれない部分を見れるような、そんな内容がベストだと思います。
今回、思い切って(?)、実際の面接プロセスで使用していた課題を1つ公開してみました。感想やご意見などございましたら、@taka_ftまで是非お願いします。
WealthParkで一緒に働いて頂ける仲間を探しています！
WealthParkでは、現在はFrontEnd Engineerの募集は行っていないのですが、さまざまなエンジニアポジションを募集しております。もしもご興味あるは是非こちらからお願いします。
また、実際に会社がどのようなプロダクトを作っているのか、エンジニア組織はどんな感じなのか、など気になる点がもしもありましたら、カジュアルにお話させて頂くだけでも大歓迎です！気軽に藤井までご連絡下さい！
この記事が気に入ったらサポートをしてみませんか？