---
# System prepended metadata

title: szpp-judge フロントエンド開発をやってみよう【概要】

---

# szpp-judge フロントエンド開発をやってみよう【概要】

- 想定読者
  React ちょっと分かるけど Next は分からんくらい

- 資料
  「[リクルート新人研修資料](https://speakerdeck.com/recruitengineers/nextjs-2022)」から一部を抜粋して進めます。

- 内容
  - 前半
    - szpp-judge 開発環境のセットアップ
    - React.js の読み書き(ほとんど省略)
    - Next.js を使って szpp-judge/frontend を書く上で知らないと困るところの解説
  - 後半
    - szpp-judge/frontend の画面設計してみよう

- 目標
  - szpp-judge とは何か、登場人物とそれらのあれこれがちょっと分かる
  - JavaScript はだいたい分かってる人が React の方言を知る
  - React は分かるけど Next.js のエコシステムは知らんって人が、こんな感じかーって分かる
  - szpp-judge/frontend の開発に参画したくなる

- おことわり

  React.js を勉強することよりも、なんかよく分からんけど Next.js での開発の雰囲気は分かるかも？という感触がつかめることを目標にしています。
  Next.js にしかない便利機能やある種のローカルルールが登場します。これは Web ページの見た目を司っている React.js より Next.js がもっと包括的なフレームワークであるからです。
  そのエコシステムに乗っかるためには致し方ないのです。そのため純粋な React.js っぽい書き方をする部分については必要最低限にしており、Next.js 以外では使えない話が登場することをことわっておきます。
