Reactのベストプラクティス！書き方の基本や使えるフレームワーク、適用時のトラブル対処法まで解説

Reactを用いた開発では、そのパワフルな特性を最大限に活用するために、適切なフレームワークやライブラリの選定が欠かせません。

Reactの理解を深めることで、目指すサービスが実現しやすくなります。

この記事では、Reactの基本から始めて、適切なCSSフレームワークやUIライブラリの選び方、トラブルへの対処法まで、幅広く解説しています。

Reactを用いた開発において、より良いユーザー体験を提供するための知識を深めたい方は、ぜひ最後までご覧ください。

開発においてご不明な点があれば、株式会社Jiteraに気軽にお問い合わせください。

大手の開発実績が多数あり、独自のAI技術を活用した高品質な開発サービスを提供しています。

Reactとは

Reactとは、状態を管理することで、効率的な描画を可能にしたJavaScriptのライブラリです。

この仕組みのおかげでパフォーマンスの高いWebアプリケーションを実現できます。

さらに、ReactにCSSフレームワークを組み合わせることによって、ユーザーの扱いやすい見た目や操作性を可能にしています。

CSSフレームワークも充実しているため、状況や目的に合わせて選ぶのが良いでしょう。

ここでは、ReactのCSSについて詳しく扱っていきます。

React CSSの基本 – スタイリング方法

React CSSとは、ReactでCSSのスタイリングをすることの総称です。

Reactでスタイリングをするには、大きく2つの方法があります。

その方法とは、

自分で一からCSSを書く
UIライブラリを使って、ある程度統一感のある見た目にする

などです。

自分でCSSを書くメリットとしては、自由度が高いことが挙げられます。

他社や競合とは異なる独自のデザインを作りたいのであれば、CSSから自前で一からデザインを構築するのが良いでしょう。

CSSを自分で書く方法も、一般的にはCSSフレームワークを用いて書くことが多いです。

リリースまで時間がなく、スピード感を持った開発をしたいのであれば、UIライブラリを使って、スタイリングするのがおすすめです。

このように、スタイリングの方法は状況に応じて選定しましょう。

ReactのCSSフレームワーク活用法

自分で1からCSSを書く場合も、UIライブラリを使う場合も、CSSフレームワークを用いることが多いと書きましたが、実際にCSSフレームワークをどのように活用していけば良いのでしょうか。

Reactには、多くのCSSフレームワークがあります。

フレームワークをうまく活用するためには、その中から目的に合ったものを選ばなければはなりません。

開発の途中でCSSフレームワークを変えると、多くの画面に影響が出てしまうため、丁寧に選ぶことをおすすめします。

例えば、広く使われているフレームワークを選ぶのも一つの選択肢でしょう。

開発の事例が多く、ドキュメントが充実していて開発もしやすいです。

人気のUIライブラリには、Material-UI, Ant Designなどがあります。

こういったUIライブラリを使うことで、デザインに統一感が出るため、全体としてすっきりとした印象になるでしょう。

パフォーマンスやエンタープライズ用があるかどうかなどの違いもあるため、気になったCSSフレームワークは、仕様をよく確認しておいてください。

フレームワークは、一部有料になっているものもありますので、注意が必要です。

ReactのCSSベストプラクティス

ここでは、実際に開発をする際は、どのようにCSSを適用させれば良いのかを解説していきます。

ReactにCSSを反映させていくにあたって、気を付けた方が良いことが主に2つあります。

一つ目はコードの整理と管理です。

開発の規模が大きくなっていくにつれて、当然コード量も増えていきます。

CSSのコード量が多くなっていくと、管理するのが難しくなり、開発効率が落ちる可能性も考えられます。

二つ目はレスポンシブデザインの適用です。

スマートフォンでもパソコンでも見やすい見た目にすることで、ユーザーがブラウザバックをするのを防げます。

それぞれ詳しく解説していきます。

コードの整理と管理

開発が進むに連れて、画面数が増え、それに対応するCSSのコード量も増えていきます。

しかし、ボタンやメニューのデザインなど、コンポーネント単位のデザインは同じなため、どこか1か所のCSSを変更しようとすると、変更の範囲が多くの画面にわたってしまうでしょう。

このように、コードの整理をしないと、何らかの修正をするたびに多くの時間を消費してしまいます。

コードをうまく管理するには、リファクタリングをする必要があります。

リファクタリングとは、コードを管理しやすいようにまとめたり、置き換えたりすることです。

定期的にリファクタリングをすることで、画面数が増えてCSSの記述が多くなったとしても、コードが整理されているため、開発はしやすいでしょう。

React CSSで特におすすめのリファクタリングは、コンポーネント単位でまとめることです。

コンポーネントとしてまとめておくことで、

コード量が少なくなり、可読性が上がる。
コンポーネント内のCSSを変更すると、それ以外のデザインも同時に変更できる

といったメリットがあります。

同じようなデザインのボタンやタブが何度も出てくる場合は、リファクタリングをしてコードを整理しておくことがおすすめです。

レスポンシブデザインの適用

レスポンシブデザインを適用もしておいた方が良いでしょう。

レスポンシブデザインとは、スマートフォンにも対応できる画面のデザインのことです。

今やスマートフォンでWebページを開いたり、アプリを起動することが当たり前になってきました。

パソコンよりもスマートフォンの利用時間の方が長いという人もいるくらいです。

スマートフォンで開いたときに画面のデザインが崩れていると、ユーザーがサービスの信頼を失ってしまう原因になります。

そのため、レスポンシブデザインは必ず実装するようにしましょう。

レスポンシブデザインは、使われる頻度が高いため、CSSフレームワークで用意されていることもあります。

レスポンシブデザイン全てを実装せずとも、とても少ない記述で実装できます。

例えば、tailwind CSSというCSSフレームワークを使えば、<img class="w-16 md:w-32 lg:w-48" src="..."> という記述で、画面の幅が768pxから1024pxの間は、画像の幅が64pxにするという指定ができます。

CSSフレームワークを使えば比較的簡単にレスポンシブデザインにすることができるので、ぜひ取り入れてみてください。

Reactでの最適な状態管理

Reactを採用するにあたって、状態管理についても理解しておいた方が良いでしょう。

状態管理は、Reactの特徴ともいえる、データ管理の仕組みのことです。

状態管理を最適化することで、不要なレンダリングを防ぎ、ユーザビリティが向上します。

開発するにあたって、状態管理の理解は必須と言えるでしょう。

ここでは、状態管理の基本と具体的にどのように行えば良いのかを解説していきます。

状態管理の基本

Reactの状態管理にはuseStateというフックを使います。

useStateは、値を維持しておく変数とその値を更新するための関数を持ちます。

この変数のことをstateと言い、日本語では”状態”という意味合いです。

例えば、+1ボタンを押した数をカウントしていくという機能を実装する場合、以下のようになります。

const CountButtonExample = () => {

// useState

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount(count + 1)}>+1</button>

<div>{count}</div>

このように、状態を管理ができると機能と値を結びつけて実装することができます。

画面内の変数やコンポーネント間の値の管理は基本的にuseStateを使用しますので、覚えておくと良いでしょう。

実践的な状態管理テクニック

ReactはuseStateを利用したライブラリも充実しており、便利な機能を提供してくれます。

フォームの処理では、React Hook FormやFormikが有名です。

両方とも入力フォームを管理するのに使われます。

フォームにバリデーションをかけたいときやエラーメッセージを表示させるなどの処理を全て書こうとすると大変ですが、こういったライブラリを使うことで、比較的簡単に実装できます。

スタイリングも有名なUIライブラリをサポートしているので、その点も人気の理由でしょう。

また、useStateはpropsでしか渡すのが基本ですが、アプリケーション全体で管理するuseContextも状態管理する方法の1つです。

useContextは、管理する変数をアプリケーションのどこからでも呼び出せるのが特徴です。

そのため、ユーザーデータなどを入れることが多いです。

しかし、多用しすぎるとパフォーマンスが落ちてしまう可能性もありますので、useStateで管理できるところはuseContextは使わないようにしましょう。

Reactプロジェクトの効率的なフォルダ構成

フォルダ構成と聞くと、開発と直接関係ないように思えますが、規模が大きくなるにつれて、重要性が増してくるでしょう。

フォルダが整理されていないまま、プロジェクトの規模が大きくなったり、開発メンバーが増えたりすると、チームメンバーの混乱を招く可能性があります。

そういったことを防ぐためにも、開発の初期段階からフォルダの構成についてルールをつくっておくのがおすすめです。

また、分かりやすいフォルダ構成には特徴があります。

ここでは、効率的に開発が行えるフォルダ構成を紹介していきます。

フォルダ構成の基本原則

Reactの公式ドキュメントにもフォルダ構成について触れられており、いくつかのパターンが提示されています。

基本的にはそちらに従っていくと良いです。

まず1つは、機能やルート別にグループ化をするフォルダ構成です。

例えば、テストフォルダなどです。

CSSファイルを取りまとめたフォルダであれば、フォルダ名はcssにするといったように、フォルダ名には、その機能やルートが一目で分かるようなものをつけると良いでしょう。

ファイルを探す際に、フォルダにどんなファイルが入っているかが一発で分かるため、開発の効率も上がります。

もう1つは、ファイルタイプ別にグループ化するフォルダ構成です。

例えば、CSSの実装がされたファイルを取りまとめるフォルダや画像フォルダなどが挙げられます。

画面や機能ごとにフォルダを分けてしまうと、規模が大きくなってくると、フォルダ数が膨大になってしまいますが、ファイルタイプ別にすることで防ぐことができます。

プロジェクトの方向性やエンジニアの意向にもよりますので、チームで話し合って決めるのが良いです。

しかし、こだわりすぎてあまりにも多くの時間をかけるのも良くありません。

一度決めたら基本的には変えずにそのまま運用していくのが良いでしょう。

大規模プロジェクトのフォルダ管理

大規模プロジェクトを管理する場合も、基本的には公式ドキュメントにある通り、機能ごとにしたり、ファイルタイプごとに構成しましょう。

しかし、フォルダが多く、分かりにくくなってしまっている箇所に関しては、機能別に分けたフォルダの下にファイル別のフォルダを作るなどして、見やすくします。

このように、機能別のフォルダとタイプ別のフォルダをうまく組み合わせて構成を作ると良いです。

機能ごとやファイルタイプ別ごとにすることで、後に階層を増やすことになっても柔軟に対応できるといったメリットがあります。

また、プロジェクトの規模が大きい場合、ページやコンポーネントもまとめておくと見やすい場合が多いでしょう。

React開発時のよくあるトラブル

Reactで開発をしていると、必ずと言ってよいほどエラーが出ます。

ここでは、その中でも頻度の高いエラーを紹介します。

よく出るエラーを把握しておくことで、次にエラーが出たときにすばやく対処できるでしょう。

また、エラーの原因にも見当がつきやすくなります。

よくあるトラブルは押さえておくと良いかもしれません。

文法エラー

文法エラーは、その名の通り、Reactの構文が間違っていたり、予期していない型の変数が入っているなど、書きかたに問題があります。

エラーをしっかりと読めれば、原因は比較的特定しやすいでしょう。

React特有の文法エラーをいくつか紹介します。

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

こちらは、ReactのComponentで返されるJSXがタグで閉じられていない、または複数ある際に吐かれるエラーです。

Reactが返すJSXは一つである必要があるため、一つのタグでラップしなければいけません。

タグがしっかりと書けていると思ったときには、<></>やdivタグでreturn内全体を囲ってあげると解決するかもしれません。

レンダリングエラー

レンダリングエラーもReactを扱っていてよく発生するエラーと言えます。

こちらは、無限ループと呼ばれる状態です。

例えば、useStateとuseEffectを同時に利用した際におこる可能性があります。

const StartScreen = () => {     const [count, setCount] = useState(0);     useEffect(() => { setCount(Math.random())     })     return(         <View>             <Text>{count}</Text>         </View>     ) }

stateの更新によってuseEffectが呼ばれ、useEffectで値を更新したため、さらにレンダリングされる→useEffectが呼ばれるが繰り返されてしまいます。

こういったエラーを避けるためには、useEffectの第二引数を正しい値にすることが必要です。例の一つとして、useEffectの引数を空配列にすれば、初回のレンダリングにのみ呼ばれます。

Reactの仕組みをよく理解すると、レンダリングエラーが起きてもすぐに対処できるでしょう。

状態管理エラー

状態管理エラーとは、useStateなどHooksに対して起きるエラーのことです。

stateの更新時に問題があったり、Hooksのルール違反であることがよく原因として挙げられまjす。

例えば、以下のようなコードでは、Hooks can only be called inside the body of a function component.と言われてしまいます。

const [value, setValue] = useState(); const ExampleComponent = () => { return <></> }

これは、Hooksはコンポーネントの中でしか定義できないというReactのルールにのっとっています。

また、Uncaught TypeError:cannot read properties of null (reading ‘0’)と言われてしまう場合は、stateの値がnullである可能性があります。

nullを入れていなくても、読み取れない値で更新しようとしたり、nullが入ってしまった場合でもこのようなエラーが出ます。

このようにReactは、stateという特殊な仕組みを持っているため、使うのに慣れるまでは状態管理エラーが出てしまうことがあるでしょう。

パフォーマンスエラー

Reactのパフォーマンス改善によく用いられるHooksとして、useMemoとuseCallbackが挙げられます。

これらを使うことで、不要なレンダリングを防ぐことができます。

useMemoは、指定した変数以外が変更されてもレンダリングがされません。useCallbackは、関数に対して同様の挙動がされます。

レンダリングを防ぐと、一つ一つの処理が軽くなるなどのメリットがあるため、使える場面では利用していくと良いでしょう。

しかし、当然ですが、useMemoもuseCallbackも正しい使い方でなければエラーになってしまいます。

例えば、第二引数に値を入れ忘れたり、違う値を入れてしまうと、意図した動作にならなくなってしまいます。

また、useEffectと同様に無限ループの原因にもなってしまいますので注意しましょう。

React開発時の注意点・ポイント

ここでは、Reactで開発するときの注意点やポイントについて解説していきます。

開発の際は、エラーやバグなどで開発が思うように進まないこともあるでしょう。

しかし、ツールを導入したり、ポイントを抑えることでエラーにかける時間を減らすことができます。

特に以下の3点に気をつけると良いでしょう。

コンソールのエラーメッセージを確認する

エラーが発生したら、まずはエラーメッセージを確認し、何が原因なのかを探りましょう。

闇雲にコードを修正しても、原因となる箇所を修正しない限りは動きません。

Reactの場合は、ターミナルやブラウザの検証ツールのコンソールにエラーメッセージが表示されます。

エラーメッセージを確認することで、どこを修正すればよいかのヒントになります。

また、分からなかったとしても、エラーメッセージで検索したり、React自体のバグがないかを確認することできます。

自分では分からなくても検索したらすぐに原因が分かるということはよくありますので、エラーメッセージは確認すると良いでしょう。

デバッグツールを使用する

エラーが出た際、エラーメッセージのみですぐに原因の箇所が分からないときももちろんあります。

デバッグツールとは、どこに原因があるのかを追っていくツールです。

例えば、エラーが起きた際にどの変数にどの値が入っているかなどを一つ一つ確認していくことができます。

デバッグツールを利用することで、問題の切り分けができ、効率的にエラーを解消できるでしょう。

Reactの開発で使えるデバッグツールで有名なものにReact Developer Toolsがあります。

インストールするもの以外にも検証ツールで使えるものや、エディタの拡張機能を利用するものもあります。

さまざまなツールがあるため、使いやすいものを選択すると良いです。

インストールするだけなので、開発効率を上げるためにも導入を検討してみると良いでしょう。

コードをシンプルにする

コードをできるだけシンプルにすることで、開発効率をあげることができます。

コードがシンプルで分かりやすいと、そのコードが何をしている記述なのかが一目で分かり、コードを理解するために処理を追っていく必要がなくなるからです。

バグやエラーを修正するとき、まずは問題のあるコードを理解するところから始めます。

記述量が多ければ多いほど、バグが起きやすくなりますし、可読性も下がります。

そのため、コードが冗長で分かりづらいとコードの理解に毎回時間がかかってしまい、修正に必要な時間も多くなってしまいます。

しかし、短ければ良いわけではありません。

短すぎてそのコードが何を示しているのか分からないといった事態は、むしろ開発の効率を下げてしまうでしょう。

シンプルでかつ他人が見ても分かりやすいコードを心がけましょう。

React開発：まとめ

Reactの開発について述べてきました。

Reactはメジャーなフレームワークの1つで、多くのプロジェクトに採用されています。

また、Reactには、CSSフレームワークやUIライブラリなど、デザインを作るのに便利なフレームワークが揃っています。

プロジェクトの方針に基づいて、便利なツールを適宜活用していくのが良いでしょう。

もし開発のことで分からないことがあれば、Jiteraなど開発の経験やサポートが豊富な企業の相談するものおすすめです。

状況や目的に合ったフレームワークを提案してもらえるでしょう。