実務課題の振り返り

はじめに

13章の実務課題について私の経験をかいてみます。
同じことをすることはないと思うので、へぇーな情報しかないのですが、今タマネギ先生とともえさんが実務課題に挑戦中で、人によってやること全然違うなぁと思ったので、私が何をしたか振り返ってみます。

結構前なので振り返るというか、思い出すなんですがw

オリアプ出来て少し自信がついたところで、仕様書読んで、「ふぁ？？」でした。
私ってなにもわからないんだなと自覚させていただきました。

担当したページ

ShiftBのポータルサイトなのですが、私が担当したのは管理画面です。
一覧ページと、一覧ページ上にある新規登録モーダルを実装しました。

要件

• 検索ボタンやエンターなしで、入力したら検索実行。文字入力の度にリクエストが飛ぶと、リクエスト数が増えすぎるので、0.3秒の間引き処理。

• 検索した際は、クエリパラメータをフロントエンドのURLのクエリにも反映させるようにしてください。（画面をリロードしても、検索条件を保存できるように）

• クエリパラメータ付きのフロントのURLをブラウザに直接打った際は、画面のUIもクエリパラメータに沿った形（ページネーションや検索窓）で表示できるように

• テーブルはライブラリ（https://tanstack.com/table/latest)を使用

• ページネーションもライブラリ（https://www.npmjs.com/package/react-paginate）を使用

えっと、調べます。ってなったのはこのあたりでしょうか・・
他にも色々figmaにコメントありましたが、できるんかなってなったのはこのあたりです！

プルリクの粒度

1. サイドバーの実装（フロントのみ）

2. 受講者一覧テーブルの実装（API＋フロント）

3. 検索＋ページネーション（API＋フロント）

4. 新規登録（API＋フロント）

ブランチ名も指定ありでした。

CSS出来な過ぎてサイドバーの実装で手こずったなんて絶対言えない。今はさすがに瞬殺できますよ！

納期

忘れました！笑
半年以上前のことなので・・多分2-3週間・・？

大変だったこと

他の完成しているコード見ながらできるのは助かるのですが、例えばバリデーションはreact-hook-form×zodで実装されてるから、同じようにやった方が良さそうだ。ところでzodってなに。みたいな感じになったり、0.3秒の間引き処理？？なんとなくわかるけどわからん。(→調べてわかったこれをデバウンス処理という。)って感じでした。

とにかく知らないこと＆やったことないことだらけ！！！

react-tableもここで初めましてでした。調べるけどよくわからんって思いながらやってましたが、レビューコメントでは「難しいけど、実務でよく使われてるから頑張れ」みたいなことを言われた記憶あります。
何とかなりました。そしてその後オリアプで再度チャレンジすることにより、理解も深まり今ではテーブル系は全部react-table使うようになってます。
出会いに感謝です。。

検索機能も、検索ボタンでAPI叩くではない指定があったり、URL操作でも反映、、、等。
バックエンドも含めて実装したのですごく力ついたように思います。

実務課題は基本技術的な質問NGなので、納期もありますしプレッシャーありましたが、私の髪の毛は残っていました。
わからなくても自力で何とかする！できると思ってこのページを振ってもらってるんだ！と思って頑張りました。(多分違います。実装したい順番とオリアプ完成したタイミングでこのページになったんだと思いますw)

おわりに

ガッツリ管理画面だったので、この後やらせていただいたShiftBは関係ないガチ案件の管理画面も同じ要領でできて、ぶべさんに爆速だったと褒められました。(嬉しい)
5ページの予定が追加ページも任せていただけて、未熟な記述ではあると思いますが、特にハマることはなく処理を成立させられないと悩むことはなかったです。

実際一度作って終わりではなく、自信ないなら同じような技術が必要なものを繰り返し作ることも必要だと思います。
特に私のような凡人は一度では「うーん自信ないなぁ」ってなるので、2回3回と違うものを同じライブラリ使って書いてみるとか、同じ要件を自分に課して書いてみる。それでどんどん技術力ついているように思います。

私まだエンジニアではなく「育休中の主婦」が肩書きなので、技術力が前に比べるとついている自覚はあっても、実務に通用するとは思えないのですが・・

実務課題は難しいので成長するできることは間違いないです！
オリアプ完成したら挑戦してみてほしいです♪