無事合格。やったぜ。
fwywdの一次採用試験を受けるにあたって大まかな作業の流れと、より良い成果物を作るためのポイントを共有しようと思う。
より実践的な話に興味があったらこっちも読んでみてね。
【Git Flow】チーム開発のお作法～GitHubとブランチ管理編【採用試験対策】
【Next.js＋TypeScript】Tailwind CSSの環境構築Q&A
【Next.js + TailwindCSS】TypeScriptを使ってコンポーネントを作ってみよう【fwywd一次採用試験】
#こんな人を対象にしているよ
fwywdの採用試験に挑戦しようか迷ってる・・・けど、
- どう手をつければいいのかわからない
- 全体的な試験の流れを知りたい
- 出来るだけ高品質な成果物作りを目指したい
と思っている人。
#fwywdの採用試験って？
株式会社キカガクさんの新規事業、fwywdが無料公開している採用試験。
お題に沿った成果物作りを通して実運用に耐えうるWebのフロントエンド技術を身に着けることができる。
１～３次試験まで実施予定。
サイト作り、バックエンド構築、テスト駆動開発、チーム開発のお作法まで網羅している。
しかもfwywd チームからレビュー結果やアドバイスまで貰えちゃう。
即戦力級の技量が自然と身につく。
学習目的の人でも参加OK。
無料でこのクオリティはやばいぞ（語彙力）。皆もやろう。
##一次採用試験
本稿では一次採用試験のみに焦点を当てている。
ざっくり内容を説明すると、
- Next.jsとTailwind CSSを使い
- Githubでバージョン管理しつつ
- ポートフォリオサイトを制作し
- Vercelにサイトをデプロイして成果物を提出し
- 制作時の「学び」を自分なりに文書化する（ライティング）
ことが目標。
デザインは予め指定されている。
Next.js＋Tailwind CSSを使用したコーディング技術、Githubでのコード・バージョン・タスク管理、サイトのデプロイ経験、ライティング経験が身につくようになっている。
実運用レベルでNext.jsを学んでみたい人にピッタリ。
#作業の流れ
- （初めての人はReactやNext.jsの基本知識をざっと把握しておく）
- おおまかに開発予定を決める
- Github IssuesにToDoリストとしてまとめる
- がりがりコードする
- Vercelにデプロイ
- サイトの検証と修正
- ライティング
１．ReactやNext.jsの基本知識
そもそもReactって何？から始める人はReact公式サイトのトップページがおすすめ。
Next.jsって何？から始める人はこの記事が参考になる。
「へーNext.jsを使うとこんな便利なんだー」ぐらい理解できたら次に進もう。
どうやって使うのかって部分は後回し。
リンク集:
React公式サイト
Next.jsを使うべき5つの理由 + 実装Tips
２．開発予定を立てる
大まかに計画していく。
頭の中で立ててもいいし、構想をメモしてもいい。筆者は妄想で済ませた。
試験内容を読み込んで何をするのかしっかり理解しておくと後々ラクになる。
３．Github IssuesでToDoリスト作成
目的は読み手に対しブランチ管理と絡めて開発工程を共有しレビューしやすくすること。
故に「読み手がいる」ことを意識して書く。
Github上での操作方法は公式ドキュメントを参考にすると◎。
実際に筆者が作ったToDoリストの中身はこんな感じ。
- わかりやすく簡潔な題名
- わかりやすい説明
- タスクリスト（おおまかな所要時間付き）
実際のToDoリスト例:
4．開発スタート
作成したToDoリストに沿ってがりがりとコーディングしていく。
技術的な何かでつまづいたら下記の記事を読むことを強くオススメしたい。偉大なる先人に感謝。
開発時の細かいコツ
ここに気を付けておくと後々ラクになるんじゃないかなってことをまとめておく。
Githubをしっかり活用しよう（重要度:高）
制作物が完成した後になって「あっ！ちゃんと使ってなかった！」とならないために、初めからフル活用しよう。
実際にどう使うか知りたい人はこの記事もぜひ読んでみてね。
【Git Flow】チーム開発のお作法～GitHubとブランチ管理編【採用試験対策】
どこをコンポーネント化できるか予めアタリをつけておく（重要度:中）
コーディングを始める前に、デザインを眺めてどこをコンポーネント化するか決めておく。
最終的に開発スピードがぐんと上がる。Propsの勉強にもなるよ。
筆者は以下の部分を３つコンポーネント化した。これだけでもかなり時間短縮になった。
レスポンシブ対応にするならモバイルファーストの方がいいかも（重要度:低）
ここは正直好みが分かれるところだから、個人的ないち意見として読んでほしい。
PC画面だけでなくスマホ用の画面実装にも挑戦したい！って人はスマホ用画面から開発した方が楽だと思う。
モバイルファーストとは？
スマートフォン画面を基準にデザインすること（雑）。
理由は２つあって、
- Tailwind CSSのブレークポイントがmin-widthで設定されている（そのためTailwind CSSも公式ドキュメントでモバイルファーストでの実装を想定・推奨している）
- 単純に一番小さい画面→大きい画面を実装する方が楽ちん
ちなみに筆者は以前初めにPC画面を実装した後スマホ用画面も実装しようとして、
想定の５倍ぐらい時間がかかったことがある。
なかなかの手間だった…。
５．Vercelにデプロイ
なんて使いやすいんだVercel。案内に従ってポチポチしてればあら不思議、デプロイが終わっている。具体的な手順が知りたい人は下記の記事通りにやるのがおすすめ。
６．サイトの検証と修正
fwywdチームがチェックすべきところをレベル別にリストアップしてくれている。レベルは５段階。
少なくともレベル１:表示系まで達成できているかチェックしておこう。どこまでこだわるかは自由。
レベル５まできっちり実装できれば完成度はかなりのものとなる。
参考までに、レベル５まで実装した筆者のLightHouse計測結果がこちら。
レベル５まで実装したら自ずとオールグリーンになった。
７．ライティング
制作物を提出して無事合格をもらったら、次は後半戦。内容はライティング。
その準備として、コーディング中に自分が躓いたところや調べたところはその都度メモして残しておくことをオススメしたい。後に良いネタ帳になってくれる。
より実践的なポイントを知りたい人はこちら
【Git Flow】チーム開発のお作法～GitHubとブランチ管理編【採用試験対策】
【Next.js＋TypeScript】Tailwind CSSの環境構築Q&A
【Next.js + TailwindCSS】TypeScriptを使ってコンポーネントを作ってみよう【fwywd一次採用試験】
ここまで読んでくれてありがとう。
ちょっとでもこの記事を気に入ってくれたならいいね！してオラに元気をわけてくれると嬉しいな。