🚣 👂🏾 📤 反応の開発：専門家としての成長への6つの道 🔠 🤾🏼 💕

過去6か月間、私は意欲的なReactプログラマーの開発を見てきました。この間、彼らは信じられないほどの道を進みました。彼らの学習の速さ、知識への渇望、卓越性への欲求-これらすべてが私に強い印象を与えました。

彼らはどのようにそれをしましたか？彼らは、外部の支援なしにPRを開くことができない人々から、他の人々が助けを求める人々にどのように進んだのでしょうか。人々が助言を求めるようになったのは、人々が他の人に助言を与えようとすることです。生徒はどのようにして教師になったのですか？私は彼らにこれらの質問をしました。彼らが答えたのはここにあります。

1. ESLintとTypeScriptを使用する

JavaScriptは、緩く型付けされたプログラミング言語です。この言語を使用すると、同じ問題を無数の方法で解決できます。 JavaScriptには、バグのあるコードやパフォーマンスの低いコードを記述しないようにするための組み込みメカニズムがありません。しかし、幸運なことに、静的コード分析のために2つのツールを使用することで状況を改善できます。これらはTypeScriptとESLintです。ESLintを静的コード分析に

使用することにより、本番稼働前に問題を特定できます。私たちの基準に照らしてコードをチェックできます。これにより、コードベースの保守性が向上します。

たとえば、ESLintプラグインをインストールできますeslint-plugin-react-hooks...このプラグインは、次のコードの問題に気づきますが、これは完全に正常に見え、フックの使用に関する規則の 1つに違反していることを通知します。

//    ,    
  if (userName !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', userName);
    });
  }

TypeScriptを使用すると、静的型システムを使用して関連するエラーをキャッチできます。TypeScriptを使用すると、強力なIntelliSenseツールチップを使用して、さまざまなコンポーネントやライブラリをすばやく簡単に操作できます。コードを書くときに表示されるツールチップは、コンポーネントとライブラリの内部メカニズムに関する情報を提供します。これにより、リファクタリングが高速化し、ジェネリックスなどのコーディング規約が促進されます。

TypeScriptが得意な人は、より優れたJavaScriptプログラマになるだけでなく、最終的にはより優れたReactコードを書き始めます。

2. Reactフックに慣れる

Reactフックは、2019年2月の導入以来、文字通りReact開発の世界を引き継いでいます。 Reactチームは、古いコードをフックに変換してリファクタリングしてはならない、と言っていますが、フックは文字通り至る所にあります。

React開発の領域で前進したい場合は、時間をかけるのに最適な時間は、フックを完全に理解できるように深く学ぶことです。

何らかの副作用が必要ですか？もしそうなら、フックuseEffectはあなたの親友です。コンポーネントの状態を監視し、状態が変化したときに再レンダリングする必要がありますか？を見てみましょうuseState... レンダリング間のいくつかの値を保存および更新する必要がありますが、これらの値が変更された場合、レンダリングしませんか？または、DOM要素の高さまたは幅について知っておく必要がありますか？次に、あなたの友達はこれuseRefです。

たとえば、最も単純なユースケースを見てみましょうuseEffect。ボタンがクリックされたときにページのタイトルが（副作用の形で）更新されるようにしたいとします。あなたはこのようにこの問題を解決しようとすることができます：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}); //

このフックは、すべてのレンダリングで実行されるのではなく、変数が変更されたときにのみ実行されるようにすることで、簡単に最適化できますcount。これは、count依存関係を配列に含めることによって行われます。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); //      count

最も一般的なフックを使用し、独自のフックを作成することに慣れている必要があります。また、フックの合理的な使用法にも精通している必要があります。たとえば、フックをいつ使用するかを知っているとuseEffect、再レンダリングが発生する場合とそうでない場合があります。

3.コードを早めに最適化しないでください

フックについての会話は、時期尚早の最適化のトピックに私たちを導きます。多くの場合、意欲的なReact開発者がコードを可能な限り高速にするために骨の折れるところを見てきました。多くの場合、ReactコードはフックuseMemoとを使用して最適化されuseCallbackます。しかし、それらの使用が常に正当化されるわけではありません。

菓子情報の配列をとする単純なコンポーネントを見てみましょうprops。コンポーネントは配列をフィルタリングし、チョコレートの名前のリストを表示します（そのプロパティtypeは文字列値と同じですchocolate）。

一部の開発者は、以下に示すようなコードを書きたくてたまらないかもしれません。彼らは、「チョコレートのリスト全体が変更されたときにのみチョコレートのリストを更新する」と考えるかもしれません。このアイデアを実装すると、コードが読みにくくなるヘルパー構造でオーバーロードされます。

const Chocolate = (props) => {
  const chocolates = useMemo(
    () => props.candies.filter((candy) => candy.type === "chocolate"),
    [props.candies]
  );
  return (
    <>
      {chocolates.map((item) => (
        <p>{item.name}</p>
      ))}
    </>
  );
};

このようなコンポーネントを作成する代わりに、シンプルでクリーンなコードを書くことをお勧めします。このような場合、を使用する理由はありませんuseMemo。フックuseMemoまたはuseCallbackは、システムに大きな負荷をかける複雑な操作の結果をメモするためにのみ使用する必要があります。

問題を明確に示すアプリケーションのパフォーマンス測定値が得られるまで、最適化作業の開始を延期することをお勧めします。最近どこかで読んだからと

いってuseCallback、どこでもそれを使うべきではありませんuseMemo。すべてを最適化しないでください。問題が発生するのを待ってから解決することをお勧めします。存在しない問題を解決しないでください。

4.新しいコンポーネントを作成するタイミングを知る

多くの意欲的なReactプログラマーが、純粋にプレゼンテーションの役割を果たすことを意図したコンポーネントでプロジェクトのビジネスロジックを実装するのを見てきました。コードをできるだけ再利用可能にするためには、再利用するために可能な限り簡単で便利なコンポーネントを作成することが重要です。

これを実現するには、プレゼンテーションコンポーネントと、ある種のロジックを実装するコンポーネントとの分離を維持するよう努力する必要があります。以前は、一般的な手法は、コンポーネントを「コンテナ」、実際には「コンポーネント」に分割することでした。しかし、このアプローチは徐々にその関連性を失いました。

どこかからアイテムのリストをロードしてページに表示するコンポーネントを見てみましょう。これらのタスクは両方とも同じコンポーネントに実装されていることに注意してください。

const ListItems = () => {
  const items = React.useState([]);
  React.useEffect(() => {
    async function fetchItems() {
      await fetched = fetchItems();
      setItems(fetched);
    }
  });
return (
    <>
      {items.map((item) => (
        <div className="item-container">
          <img src={item.img} />
          <div className="name">{item.name}</div>
          <div className="author">{item.author}</div>
        </div>
      ))}
    </>
  );
};

「コンテナ」ルートを使用するのは魅力的かもしれません。この願望に従って、2つのコンポーネントを作成します。

const ListContainer = () => {
  const items = React.useState([]);
  React.useEffect(() => {
    async function fetchItems() {
      await fetched = fetchItems();
      setItems(fetched);
    }
  });
return <List items={items} />;
};
const List = (props) => {
  return (
    <>
      {props.items.map((item) => (
        <div className="item-container">
          <img src={item.img} />
          <div className="name">{item.name}</div>
          <div className="author">{item.author}</div>
        </div>
      ))}
    </>
  );
};

しかし、そのような状況では、別の行動を取るべきです。つまり、コンポーネントの純粋にプレゼンテーションの役割を果たす部分を抽象化する必要があります。結果は、コンポーネントList（リスト）とコンポーネントItem（要素）の2つのコンポーネントになります。

const List = () => {
  const items = React.useState([]);
  React.useEffect(() => {
    async function fetchItems() {
      await fetched = fetchItems();
      setItems(fetched);
    }
  });
return (
    <>
      {items.map((item) => (
        <Item item={item} />
      ))}
    </>
  );
};
const Item = ({ item }) => {
  return (
    <div className="item-container">
      <img src={item.img} />
      <div className="name">{item.name}</div>
      <div className="author">{item.author}</div>
    </div>
  );
};

5.テストに特別な注意を払います

テスト技術の熟練度は、ジュニアとシニアを区別するものです。Reactアプリケーションのテストに慣れていない場合は、それに関する大量の資料を見つけて研究できます。

おそらく、ある時点でいくつかの単体テストを作成しましたが、アプリケーション全体に及ぶ統合テストを作成するには経験が足りませんか？繰り返しになりますが、知識のギャップや経験を埋めるためのリソースは無数にあります。

たとえば、Reactに基づくフルスタックアプリケーションのテストの全サイクルに関する私の記事を次に示します。

6.ローカル状態とグローバル状態を使用する必要がある状況を区別する

ここでは、Reactでのアプリケーションの状態の管理について説明します。この問題を解決する技術はたくさんあります。たとえば、これはredux、mobx、recoil、APIなどcontextです。それらをリストするのは簡単ではありません。

しかし、どの状態管理テクノロジーを選択するかに関係なく、グローバル状態とローカル状態のどちらを使用するかを決定するときに、Reactのジュニアが混乱することがよくあります。残念ながら、そのような決定を明確に行うための明確なルールはありません。しかし、この問題に関するいくつかのルールはまだ策定できます。つまり、グローバル状態とローカル状態のどちらを使用してデータを保存するかを決定するには、次の質問に答えてください。

データを処理するために、コンポーネントに直接関連しないコンポーネントが必要ですか？たとえば、ユーザーの名前がナビゲーションバーやウェルカム画面に表示される場合があります。
アプリケーションページ間を移動するときにデータを保持する必要がありますか？
多くのコンポーネントが同じデータを使用していますか？

これらの質問に積極的に答えることができれば、グローバルな状態を利用する価値があるかもしれません。ただし、すぐにお知らせします。グローバル状態のメニューで何が起こっているかについての情報は保存しないでください。一部のデータを格納する場所を決定するときは、アプリケーションのさまざまな場所で使用されるデータや、コンポーネント内にのみ格納できるデータについて推測してみてください。

結果

これで、React開発の分野で専門的に成長するために取るべき道がわかりました。

私がReact Juniorだったときに書いたコードを思い出すと、一つのことが頭に浮かびます。理解しにくい複雑なコードを書いていました。経験を重ねるにつれて、コードがよりシンプルになったことに気付き始めました。コードが単純であるほど良いです。私のコードは理解しやすくなりました。コードを記述してから6か月後でも、対処する必要のあるエラーがコードに侵入していることがわかります。

Reactプログラマーの専門的成長への道はどのように知っていますか？

反応の開発：専門家としての成長への6つの道