Reactで初めてページを作成した感想

Reactで初めてページを作成したときに苦労したポイント

こんにちは、デザイン戦略部の塚原です。

今年の5月にReactの開発に初めて携わる事ができました。
ボタンをクリックするとモーダルが開き、その中でフォームを送信する。という規模としてはとても小さい機能開発です。
通常であれば、1週間ほどで開発終了になると思いますが、
私の会社では、これまでVueを使った開発が多かったため、Reactとその関連技術に慣れるまでに時間がかかりました。
すべての内容を書くと長文になってしまうので以下に、最初のステップでつまずいた点や感じた事をまとめました。

ReactとJavaScriptの知識だけではページ作成ができない

プロジェクトの開発環境を調べると、Next.jsとTypeScriptが導入されていることが分かりました。
Reactで開発を行うには、Next.jsやTypeScriptも理解する必要がありましたが、最初はこれらの技術がそれぞれ何を担っているのかが曖昧でした。そのため、まずNext.jsについて調べました。

Next.jsとは

VueではVue Routerを使ってルーティング処理を行いますが、Next.jsではルーティングが自動で行われます。Next.jsを使うと、React単体での開発に比べて、開発効率が上がります。公式サイト（Next.js公式）でも、Next.jsがどのような機能を提供しているかが紹介されています。

特に最初に気になったのが、「Reactでどのようにして新しいページを作成するのか」という点でした。

Next.jsの環境での新規ページ作成

私の開発環境では、Next.js 13から導入された「App Router」を使用して、/info/about/ ページを作成しました。App Routerを使う場合、/src/app/ 以下に作成したいURLのディレクトリを作成します。たとえば、/info/about/ ページを作りたい場合、/src/app/info/about フォルダを作り、その中に page.tsx と必要に応じて layout.tsx を追加します。

page.tsx には、指定したURLで表示したい内容を記述します。
layout.tsx には、ページ共通で表示するサイドバーやmeta情報などを記載します。

// page.tsx
export const About = () => {
return (
<div>ここに/aboutで表示したい内容を記載</div>
);
};
export default About;

'use client' とは？

開発中に既存のファイルを見ると、ファイルの冒頭に 'use client' と記載されているものと、記載がないものがありました。Next.jsでは、コンポーネントを Server Components と Client Components に分類する必要があります。'use client' と宣言すると、そのコンポーネントはクライアント側でレンダリングされる Client Components として扱われます。

Server Components はサーバーサイドでレンダリングされます。'use client'を指定しないとServer Componentsとして扱われます。
Client Components にはクリックイベントや状態管理（useState、useEffectなど）が含まれます。Client Componentsで呼び出したコンポーネントは全てClient Componentsになります。逆に、Client Components以下でServer Componentsを呼び出す事は出来ないので上の階層をServer Componentsにする必要があります。

Server ComponentsとClient Componentsの使い分けについては公式サイト"When to use Server and Client Components?"を見て確認しました。

// parent.tsx (Client Component)
"use client";

export const Parent = () => {
return ;
};

// ChildSomething.tsx (Client Component)
export const ChildSomething = () => {
return
<div>子コンポーネント</div>
;
};

Server ComponentsとClient Componentsの使い分け

最初は、この使い分けが理解できず、Server Componentsにクリックイベントを書いてエラーが出たり、Client Componentsに非同期処理（async/await）を書いてエラーになったりしました。そのため、上階層にあるpage.tsxはServer Componentsで作成してapi処理を書き、page.tsxで呼び出すコンポーネントをClient Componentsにしてクリックイベントを実行しました。

まとめ

React、Next.js、TypeScriptを理解し、適切にServer ComponentsとClient Componentsを使い分けることが、最初の大きな壁でした。これらの基礎を理解することで、ページ作成やルーティング、イベントハンドリングがスムーズに進むようになりました。

全く知識がない状態から着手したため、gitlabのMR上で技術戦略部のメンバーにレビュー頂いたのですが約50件弱ほどの指摘スレッドが立っていました。サーバーコンポーネントとクライアントコンポーネントの切り出し方や、typescriptの指摘、react hook、基本的なjavascriptの指摘など広範囲に及びます。今回とても勉強になりましたがレビュー者の時間を割いてしまったので、今後レビュー時間を減らせるように指摘箇所の振り返り等していきたいと思います。

ラクーンホールディングスでは現在デザイナー・エンジニアを募集中です！
今回紹介した勉強会のように、デザイナーやエンジニアでもやりたいことを実現しやすい現場です。少しでも興味がありましたらぜひご応募ください。お待ちしております！