まえがき
現場がレガシーなのでモダンな技術にも触りたいという理由でポートフォリオ作成に踏み切りました。
ソース自体はほとんどChatGPTに教えてもらって、完成したソースをもとにこうしてQiitaにアウトプットしています。
最終的には、React/Spring Boot/Go/Pythonを組み合わせたWebアプリを作成する予定です。
本文
この記事の対象者
・VSCodeなどの環境を自分で用意できる人
・Reactがフロントエンドを担当しているなどの最低限の理解がある人
ぶっちゃけAIに頼らずともすらすらReactのコードが書けるような、現場でReactいじっている人は読まなくても大丈夫です。
あまりにも基本的なことしか書いていないので。
逆に、実務経験どころか研修なども受けていない人だとかえって混乱すると思います。
少なくとも研修終わったばかりでJavaの基本しか理解していない頃の私（自分で調べたりもしていない状態）には難しいでしょう。
前提
以下インストール済(インストール方法は省略)
・React 19.0.0
・Next.js 16.0.0
・App Router
1.appディレクトリ作成
App Routerだとフォルダ構成がそのままページ構成と同じになります。
この際、page.tsxでないといけないです（ファイル名固定）。
app/
page.tsx
※デフォルトだとReactのポート番号は3000です。
諸事情で変更する場合はこの数字を変える必要があります。
ローカルでデプロイしている場合、上記のフォルダ構成で1ページできましたね。
※Page Routerだとフォルダ構成ではなくtsxファイルの名前でルーティングを設定できますが、今回の目的の一つがモダンな技術に触れることなのでApp Router優先で。
tsxファイルの基本的な書き方
function Login(){
(※1)
return (
(※2)
)
}
export default Login
だいぶ省略してますが、
※1では※2などで使う変数や関数を指定します。つまりJSです。
※2ではレイアウトを指定します。つまりHTMLです。
React特有の機能や他ファイルのimportもできるのですが、それはいったん別の機会に。
2.共通レイアウト
さて、同じくappフォルダ直下にlayout.tsxを置きます（これもファイル名固定）。
以下が基本的な書き方です。
function RootLayout({children,}:{children :React.ReactNode;})
{
return (
<html lang='ja'>
<body>
{children}
</body>
</html>
)
}
export default RootLayout
{children,}:{children :React.ReactNode;}
AppRouterの場合、これを書くことでカレントディレクトリ以下で共通化したレイアウトにできます。
肝心なことですが、カレントディレクトリ内で書かれているpage.tsxに共通化されるのではなく、カレントディレクトリ以下のpage.tsxに共通化されます。
だから、Aフォルダとその一つ下のBフォルダでページのレイアウトが異なる場合、Bフォルダ内でlayout.tsxを設定し、（上書きではなく）追記する形になります。
ですので、上の階層でのlayout.tsxは単純なものの方がいいですね。
3.(protected)フォルダ
これは認証に関するフォルダです。
機能としてはApp RouterのRoute Groupに含まれているそうです。
上記でフォルダ構成がそのままURLでリンクしていると言いましたが、
これは例外です。
app/
(protected)/
home/
page.tsx
たとえば上記の場合、一番下のpage.tsxが描画するページを見たい場合、
（ローカルでデプロイしている場合は）
http://localhost:3000/home
がリンク先になります。
(protected)というフォルダの名前はリンクの表記と関係ありません。
なぜこんなことをするかというと、認証が必要なページをまとめるためにあります。
もちろんこれだけで認証が完了する訳ではありませんが、
これを設定しないとわかりにくいです。
＝管理上の問題なのでなくても困らない、けどあるとわかりやすい
あとがき
画面を作るだけならここまで全く困りませんが、
このままだとなにを入力してもなにもできませんよね？
さて、次回は画面内の入力項目の値の取得に移ります。