2022 年にゲームを向上させるための React のベスト プラクティス

公開: 2022-12-09

React は、Web アプリケーションを構築する際にユーザー インターフェイスを作成するための最も人気のあるライブラリの 1 つです。 多くの企業で広く使用されており、活発なコミュニティがあります。

React 開発者として、ライブラリがどのように機能するかを理解することだけが、ユーザー フレンドリーで拡張が容易で保守可能なプロジェクトを構築するために必要なことではありません。

また、クリーンな React コードを作成できるようにする特定の規則を理解することも必要です。 これにより、ユーザーへのサービスが向上するだけでなく、プロジェクトで作業している他の開発者がコード ベースを維持しやすくなります。 次の React プロジェクトに取り組んでいますか? きれいな React コードを書くことを学ぶことはゲームチェンジャーの筋肉です ここから始めましょう ️ Click to Tweet

このチュートリアルでは、React 開発者が直面する一般的な課題のいくつかについて説明することから始め、次に、より効率的な方法で React コードを作成するのに役立ついくつかのベスト プラクティスについて詳しく説明します。

始めましょう！

React 開発者が直面する課題

このセクションでは、Web アプリの構築中および構築後に React 開発者が直面する主な課題のいくつかについて説明します。

このセクションで説明するすべての課題は、ベスト プラクティスに従うことで回避できます。これについては、後で詳しく説明します。

初心者に影響を与える最も基本的な問題から始めます。

反応するための前提条件

React 開発者が直面する主要な課題の 1 つは、ライブラリがどのように機能するか、およびそれを使用するための前提条件を理解することです。

React を学習する前に、いくつかのことを知っておく必要があります。 React は JSX を使用するため、HTML と JavaScript の知識は必須です。 もちろん、Web アプリを設計するための CSS または最新の CSS フレームワークについても知っておく必要があります。

特に、React に飛び込む前に知っておくべき主要な JavaScript の概念と機能があります。 主にES6に該当するものには、次のものがあります。

  • アロー関数
  • 残りのオペレーター
  • スプレッド演算子
  • モジュール
  • 破壊
  • 配列メソッド
  • テンプレート リテラル
  • 約束
  • let変数とconst変数

上記の JavaScript トピックは、初心者が React の仕組みを理解するのに役立ちます。

また、次のような React の新しい概念についても学びます。

  • コンポーネント
  • JSX
  • 状態管理
  • 小道具
  • レンダリング要素
  • イベント処理
  • 条件付きレンダリング
  • リストとキー
  • フォームとフォームの検証
  • フック
  • スタイリング

React の概念とライブラリを使用するための前提条件をしっかりと理解しておくと、その機能を効率的に利用するのに役立ちます。

しかし、これに圧倒されないようにしてください。 絶え間ない練習と学習により、React を使用して素晴らしいプロジェクトを構築する方法をすぐによく理解できます。 これは、新しいプログラミング言語を学習するのと似ています。理解するには、少しの時間と練習が必要です。

状態管理

React で変数の状態/値を更新する方法は、通常の JavaScript を使用して行う方法とは異なります。

JavaScript では、変数の更新は、等号演算子 ( = ) を使用して新しい値を割り当てるのと同じくらい簡単です。 次に例を示します。

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

上記のコードでは、初期値が300のxという変数を作成しました。

equal to 演算子を使用して、新しい値100を割り当てました。 これは、 updateX関数内に記述されています。

React では、変数の状態/値の更新の動作が異なります。 方法は次のとおりです。

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

React で変数の状態を更新するときは、 useStateフックを使用します。 このフックを使用する場合、次の 3 つの点に注意してください。

  • 変数名
  • 変数を更新する関数
  • 変数の初期値/状態

この例では、 xは変数の名前であり、 setXはxの値を更新する関数であり、 xの初期値 ( 300 ) はパラメーターとしてuseState関数に渡されます。

 const [x, setX] = useState(300)

xの状態を更新するために、 setX関数を使用しました。

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

そのため、 updateX関数はsetX関数を呼び出し、 xの値を100に設定します。

これは変数の状態を更新するのに完璧に機能しているように見えますが、非常に大規模なプロジェクトではコードが複雑になります。 大量のステート フックがあると、特にプロジェクトの規模が大きくなると、コードの保守と理解が非常に難しくなります。

ステート フックの使用に関するもう 1 つの問題は、作成されたこれらの変数が、アプリを構成するさまざまなコンポーネント間で共有されないことです。 ある変数から別の変数にデータを渡すには、Props を使用する必要があります。

幸いなことに、React で状態管理を効率的に処理するために構築されたライブラリがあります。 変数を一度作成すれば、React アプリの好きな場所で使用することもできます。 これらのライブラリには、Redux、Recoil、Zustand などがあります。

状態管理にサードパーティのライブラリを選択する際の問題は、React で既に学んだこととは異なる新しい概念を学ばなければならないことです。 たとえば、Redux はボイラープレート コードが多く、初心者が理解するのが難しいことで知られていました (ただし、これは Redux Toolkit で修正されており、Redux よりも少ないコードを記述できます)。

保守性と拡張性

製品に対するユーザーの要件は変化し続けるため、製品を構成するコードに変更を加える必要が常にあります。

チームがコードを維持するのが容易でない場合、コードをスケーリングすることはしばしば困難です。 このような問題は、コードを記述する際の悪い慣習に従うことから生じます。 最初は完全に機能し、望ましい結果が得られているように見えるかもしれませんが、「今のところ」機能するものは、プロジェクトの将来と成長にとって非効率的です。

次のセクションでは、React コードの記述方法を改善するのに役立ついくつかの規則について説明します。これは、プロのチームと協力する際のコラボレーションにも役立ちます。

React のベスト プラクティス

このセクションでは、React コードを記述する際に従うべきベスト プラクティスのいくつかについて説明します。 さっそく飛び込みましょう。

1.明確なフォルダー構造を維持する

フォルダー構造は、あなたや他の開発者がプロ​​ジェクトで使用されているファイルとアセットの配置を理解するのに役立ちます。

適切なフォルダー構造により、簡単に移動でき、時間を節約し、混乱を避けることができます。 フォルダー構造は各チームの好みによって異なりますが、ここでは React で一般的に使用されるフォルダー構造をいくつか紹介します。

機能またはルートによるフォルダーのグループ化

ルートと機能に従ってフォルダー内のファイルをグループ化すると、特定の機能に関するすべてを 1 つのスペースに保持するのに役立ちます。 たとえば、ユーザー ダッシュボードがある場合、ダッシュボードに関連する JavaScript、CSS、およびテスト ファイルを 1 つのフォルダーに格納できます。

これを示す例を次に示します。

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

上記のように、アプリの各コア機能には、すべてのファイルとアセットが同じフォルダーに保存されています。

類似ファイルのグループ化

または、類似したファイルを同じフォルダーにグループ化することもできます。 フック、コンポーネントなどの個別のフォルダーを持つこともできます。 この例をチェックしてください:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

コーディング時にこれらのフォルダー構造に厳密に従う必要はありません。 ファイルを注文する特定の方法がある場合は、それを選択してください。 あなたと他の開発者がファイル構造を明確に理解している限り、問題はありません。

2.構造化された輸入注文を制定する

React アプリケーションが成長し続けるにつれて、追加のインポートを行う必要があります。 インポートの構造は、コンポーネントを構成するものを理解するのに大いに役立ちます。

慣例として、同様のユーティリティをグループ化するとうまくいくようです。 たとえば、ローカル インポートとは別に、外部またはサード パーティのインポートをグループ化できます。

次の例を見てください。

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

上記のコードでは、最初にサードパーティのライブラリをグループ化しました (これらは事前にインストールする必要のあるライブラリです)。

次に、スタイルシート、画像、コンポーネントなど、ローカルで作成したファイルをインポートしました。

シンプルで理解しやすいように、この例では非常に大きなコードベースを示していませんが、この形式のインポートに一貫性を持たせることで、あなたや他の開発者が React アプリをよりよく理解するのに役立つことを覚えておいてください。

うまくいく場合は、ファイルの種類に応じてローカル ファイルをさらにグループ化できます。つまり、コンポーネント、画像、スタイルシート、フックなどをローカル インポートの下で個別にグループ化できます。

次に例を示します。

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. 命名規則に従う

命名規則は、コードの可読性を向上させるのに役立ちます。 これは、コンポーネント名だけでなく、変数名やフックにまで適用されます。

React のドキュメントでは、コンポーネントの命名に関する公式のパターンは提供されていません。 最もよく使用される命名規則は、camelCase と PascalCase です。

PascalCase は主にコンポーネント名に使用されます。

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

上記のコンポーネントはStudentListという名前で、 Studentlistやstudentlistよりもはるかに読みやすいです。

一方、camelCase 命名規則は、変数、フック、関数、配列などの命名に主に使用されます。

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. リンターを使う

リンター ツールは、コードの品質を向上させるのに役立ちます。 JavaScript と React で最も人気のあるリンター ツールの 1 つは ESlint です。 しかし、これがコード品質の向上にどのように役立つのでしょうか?

リンター ツールは、コード ベースの一貫性を維持するのに役立ちます。 ESLint のようなツールを使用すると、プロジェクトで作業するすべての開発者が従うべきルールを設定できます。 これらの規則には、一重引用符の代わりに二重引用符を使用するための要件、矢印関数を囲む中括弧、特定の命名規則などが含まれる場合があります。

ツールはコードを観察し、ルールが破られたときに通知します。 ルールに違反するキーワードまたは行は、通常、赤で下線が引かれます。

すべての開発者は独自のコーディング スタイルを持っているため、リンター ツールはコードの統一に役立ちます。

リンター ツールは、バグを簡単に修正するのにも役立ちます。 スペルミス、宣言されているが使用されていない変数、およびその他のそのような機能を確認できます。 これらのバグの一部は、コーディング中に自動的に修正できます。

ESLint などのツールはほとんどのコード エディターに組み込まれているため、外出先でもリンター機能を利用できます。 コーディング要件に合わせて構成することもできます。

5. スニペット ライブラリを使用する

アクティブなコミュニティでフレームワークを使用することの優れた点は、開発を容易にするために作成されたツールが利用できることです。

スニペット ライブラリは、開発者が頻繁に使用するビルド済みコードを提供することで、開発を高速化できます。

良い例は、ES7+ React/Redux/React-Native スニペット拡張機能です。これには、ビルド済みコードを生成するための便利なコマンドが多数含まれています。 たとえば、すべてのコードを入力せずに React 機能コンポーネントを作成する場合、拡張機能を使用する必要があるのは、 rfceと入力してEnterを押すだけです。

上記のコマンドは、ファイル名に対応する名前の機能コンポーネントを生成します。 ES7+ React/Redux/React-Native スニペット拡張機能を使用して、以下のコードを生成しました。

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

もう 1 つの便利なスニペット ツールは、Tailwind CSS IntelliSense 拡張機能です。これにより、Tailwind CSS を使用して Web ページのスタイルを設定するプロセスが簡素化されます。 この拡張機能は、ユーティリティ クラス、構文の強調表示、リント機能を提案することで、オートコンプリートに役立ちます。 コーディング中に色がどのように見えるかを確認することもできます。

6. CSS と JavaScript を組み合わせる

大規模なプロジェクトで作業する場合、コンポーネントごとに異なるスタイルシート ファイルを使用すると、ファイル構造がかさばり、ナビゲートしにくくなる可能性があります。

この問題の解決策は、CSS と JSX コードを結合することです。 これには、Tailwind CSS や Emotion などのフレームワーク/ライブラリを使用できます。

Tailwind CSS を使用したスタイリングは次のようになります。

 <p className="font-bold mr-8">resource edge</p>

上記のコードは、段落要素に太字のフォントを与え、右側に余白を追加します。 これは、フレームワークのユーティリティ クラスを使用して行うことができます。

Emotion を使用して要素のスタイルを設定する方法は次のとおりです。

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. コンポーネントの作成を制限する

React のコア機能の 1 つは、コードの再利用性です。 コンポーネントを作成し、そのロジックを書き直すことなく、そのロジックを可能な限り何度でも再利用できます。

ダウンタイムや WordPress の問題に悩まされていませんか? Kinstaは、時間を節約するために設計されたホスティングソリューションです! 私たちの機能をチェックしてください

そのことを念頭に置いて、作成するコンポーネントの数を常に制限する必要があります。 そうしないと、そもそも存在しないはずの不要なファイルでファイル構造が肥大化します。

これを示すために、非常に簡単な例を使用します。

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

上記のコンポーネントは、ユーザーの名前を示しています。 ユーザーごとに異なるファイルを作成すると、最終的には不当な数のファイルが作成されることになります。 (もちろん、単純にするためにユーザー情報を使用しています。実際の状況では、別の種類のロジックを扱っている可能性があります。)

コンポーネントを再利用可能にするために、Props を利用できます。 方法は次のとおりです。

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

その後、このコンポーネントをインポートして、何度でも使用できます。

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

これで、ユーザーごとに 3 つの個別のファイルを用意するのではなく、1 つのファイルで作成されたロジックに由来するUserInfoコンポーネントの 3 つの異なるインスタンスが作成されました。

8.遅延読み込みを実装する

React アプリが成長するにつれて、遅延読み込みは非常に便利です。 コードベースが大きいと、Web ページの読み込み時間が遅くなります。 これは、ユーザーごとにアプリ全体を毎回ロードする必要があるためです。

「遅延読み込み」は、さまざまな実装で使用される用語です。 ここでは、JavaScript と React に関連付けますが、画像や動画に遅延読み込みを実装することもできます。

デフォルトでは、React はアプリケーション全体をバンドルしてデプロイします。 ただし、コード分割とも呼ばれる遅延読み込みを使用して、この動作を変更できます。

基本的に、特定の時点でアプリのどのセクションが読み込まれるかを制限できます。 これは、バンドルを分割し、ユーザーの要件に関連するもののみをロードすることによって実現されます。 たとえば、最初にユーザーのサインインに必要なロジックのみをロードし、ユーザーが正常にサインインした後でのみ、ユーザーのダッシュボードのロジックをロードできます。

9. 再利用可能なフックを採用する

React のフックを使用すると、コンポーネントの状態とやり取りしたり、コンポーネントの特定の状態変化に関連してアフター エフェクトを実行したりするなど、React の追加機能の一部を利用できます。 クラスコンポーネントを書かなくても、これらすべてを行うことができます。

フックを再利用可能にすることもできるので、使用されるすべてのファイルでロジックを再入力する必要はありません。 これを行うには、アプリのどこにでもインポートできるカスタム フックを作成します。

以下の例では、外部 API からデータを取得するためのフックを作成します。

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

上記の API からデータを取得するためのフックを作成しました。 これで、任意のコンポーネントにインポートできます。 これにより、外部データを取得する必要があるすべてのコンポーネントですべてのロジックを入力するストレスが軽減されます。

React で作成できるカスタム フックの種類は無限であるため、それらをどのように使用するかはあなた次第です。 異なるコンポーネント間で繰り返す必要がある機能である場合は、必ず再利用可能にする必要があることを覚えておいてください。

10. エラーの記録と管理

エラー境界、try および catch ブロックの使用、またはreact-error-boundaryなどの外部ライブラリの使用など、React でエラーを処理するさまざまな方法があります。

React 16 で導入された組み込みのエラー境界はクラス コンポーネントの機能であったため、クラス コンポーネントの代わりに機能コンポーネントを使用することをお勧めするため、これについては説明しません。

一方、 tryおよびcatchブロックの使用は命令型コードでのみ機能し、宣言型コードでは機能しません。 これは、JSX を使用する場合に適したオプションではないことを意味します。

react-error-boundary のようなライブラリを使用することをお勧めします。 このライブラリは、コンポーネントをラップできる機能を提供し、React アプリのレンダリング中にエラーを検出するのに役立ちます。

11. コードの監視とテスト

開発中にコードをテストすると、保守可能なコードを作成するのに役立ちます。 残念ながら、これは多くの開発者が無視しているものです。

多くの人は、Web アプリを構築するときにテストは大したことではないと主張するかもしれませんが、テストには無数の利点があります。 以下にいくつかを示します。

  • テストは、エラーやバグを検出するのに役立ちます。
  • バグを検出すると、コードの品質が向上します。
  • 単体テストは、データ収集と将来の参照のために文書化できます。
  • バグを早期に検出することで、開発者に支払いを行って、バグを未チェックのままにしておくと発生する可能性のある問題を解決する費用を節約できます。
  • バグのないアプリやサイトは、オーディエンスからの信頼と忠誠心を獲得し、それがさらなる成長につながります。

Jest や React Testing Library などのツールを使用して、コードをテストできます。 選択できるテスト ツールはたくさんありますが、最終的には最適なツールを選択する必要があります。

React アプリをビルドしながら、ブラウザーでアプリを実行してテストすることもできます。 通常、検出されたエラーは画面に表示されます。 これは、ローカル マシンで WordPress サイトを設計、開発、デプロイできるツールである DevKinsta を使用して WordPress サイトを開発することに似ています。

12. 機能部品を活用する

React で機能コンポーネントを使用することには、多くの利点があります。記述するコードが少なくなり、読みやすくなり、React の公式ドキュメントのベータ版が機能コンポーネント (フック) を使用して書き直されているため、それらの使用に慣れる必要があります。 .

関数コンポーネントを使用すると、 this使用やクラスの使用について心配する必要がなくなります。 フックのおかげで少ないコードを記述して、コンポーネントの状態を簡単に管理することもできます。

React で見つかる更新されたリソースのほとんどは機能コンポーネントを利用しているため、問題が発生したときにコミュニティによって作成された役立つガイドやリソースを簡単に理解して従うことができます。

13. React のバージョン変更を最新の状態に保つ

時間が経つにつれて、新しい機能が導入され、一部の古い機能が変更されます。 これを追跡する最善の方法は、公式ドキュメントを見ることです。

また、ソーシャル メディアの React コミュニティに参加して、変更が発生したときに情報を入手することもできます。

React の現在のバージョンを最新の状態に保つことは、最高のパフォーマンスを得るためにコード ベースを最適化または変更する時期を判断するのに役立ちます。

React でルーティングに使用される React Router のように、React を中心に構築された外部ライブラリもあり、最新の状態にしておく必要があります。 これらのライブラリがどのような変更を加えるかを知ることは、アプリに関連する重要な変更を加え、プロジェクトに携わるすべての人にとって作業を容易にするのに役立ちます。

さらに、新しいバージョンがリリースされると、一部の機能が廃止されたり、特定のキーワードが変更される可能性があります。 安全を期すために、そのような変更が行われたときは、常にドキュメントとガイドを読む必要があります。

14.高速で安全なホスティングプロバイダーを使用する

Web アプリをビルドした後、誰でもアクセスできるようにしたい場合は、それをホストする必要があります。 高速で安全なホスティング プロバイダーを使用することが重要です。

Web サイトをホストすると、Web サイトのスケーリングと管理を容易にするさまざまなツールにアクセスできます。 Web サイトがホストされているサーバーにより、ローカル マシン上のファイルをサーバーに安全に保存できます。 あなたのウェブサイトをホストすることの全体的な利点は、あなたが作成した素晴らしいものを他の人が見ることができることです.

Firebase、Vercel、Netlify、GitHub Pages などの無料ホスティング サービスや、Azure、AWS、GoDaddy、Bluehost などの有料サービスを開発者に提供するさまざまなプラットフォームがあります。

Kinsta のアプリケーション ホスティング プラットフォームを使用することもできます。 必要なことは、GitHub リポジトリに接続し、Kinsta のグローバルに配置された 25 のデータセンターから選択するだけです。 迅速なセットアップ、24 時間年中無休のサポート、最先端のセキュリティ、カスタム ドメイン、高度なレポートおよび監視ツールなどにアクセスできます。

概要

優れた Web アプリを作成するために必要なことは、React の使い方を学ぶことだけではありません。 Angular や Vue などの他のフレームワークと同様に、効率的な製品を構築するために従うべきベスト プラクティスがあります。

これらの React 規則に従うことは、アプリに役立つだけでなく、フロントエンド開発者としての利点もあります。効率的でスケーラブルで保守可能なコードを作成する方法を学び、その分野の専門家として際立つことになります。 React コーディング ゲームを強化したいですか? 知っておくべきことはすべてこのガイドにありますClick to Tweet

したがって、React を使用して次の Web アプリを構築するときは、これらのベスト プラクティスを念頭に置いて、ユーザーと開発者の両方が製品を簡単に使用および管理できるようにしてください。

この記事で言及されていない、他に知っている React のベスト プラクティスは何ですか? 以下のコメントでそれらを共有してください。 ハッピーコーディング！