Reactの紹介、パート1

公開: 2020-07-02

このブログでは、WordPressの新しい開発スタックとそれに伴う革命について、プラットフォーム自体と、新しいことを学ぶことを余儀なくされている開発者の両方についてすでに話しました。 たとえば、少し前に、 @wordpress/scriptsパッケージを使用してGutenbergを拡張し、そのUIにボタンを追加する方法を説明する投稿を公開しました。 著者として、私は自分がよく知っていることを共有でき、一緒に学ぶことができると感じているので、チュートリアルを書くのが大好きです。

残念ながら、チュートリアルには大きな問題が隠されていると思います。最終的に正しい結果が得られたとしても、多くの人は何が起こっているのかを実際に理解せずに盲目的にチュートリアルをフォローします。 しかし、ほとんどのチュートリアルには、すべてが頭の中でクリックされ、物事がそのようになっている理由を理解する洞察と理解の瞬間である「アハモーメント」が欠けています。

それで、今日は、Reactの紹介から一連の投稿を始めて、少し光を当てたいと思います。 Reactの謎を解き明かし、すぐに上手になるようにお手伝いしたいと思います。 Reactがそのようになっている理由と、物事がそのようになっている理由を理解してほしい。 Reactの背後にある原則を理解してほしい。 より良いコードを書いてほしい。

関数型プログラミング

Reactについて話す前に、関数型プログラミングについて話すのに数分を費やす価値があると思います。今日使用したフレームワークの多くはその原理に依存しているからです。 そして、React（およびRedux）も例外ではありません。

関数型プログラミングは、関数を適用して構成することによってプログラムを構築するプログラミングパラダイムです。 ええと、「プログラミング」は常に関数の構築と実行に関するものだと思うかもしれませんね。 ではない正確に。 我慢して。

たとえば、オブジェクト指向プログラミングについて考えてみましょう。 OOPでは、プログラムは、属性またはフィールドの形式のデータと、メソッドまたはプロシージャの形式のコードを含むことができるオブジェクトを作成および構成することによって構築されます。 見る？ 関数ではなく、オブジェクトです。

では、関数型プログラミングが特別な理由は何ですか？ 関数型プログラミングを特徴付けるいくつかの側面があります。純粋関数、参照透過性、不変性、一次市民としての関数、高階関数などです。自分で（または、必要に応じて）それらを研究することをお勧めします。に、将来の投稿でそれらについて話すことができます）。 ただし、この投稿を短くするために、今日は1つの機能に焦点を当てます…

純粋関数

関数型プログラミングが他のプログラミングパラダイムと異なる点の1つは、関数を定義して操作する方法です。 FPでは、関数は純粋です。つまり、次の2つの条件を満たすことを意味します。

  1. 同じ引数を指定すると、常に同じ結果が生成されます
  2. 副作用はありません

たとえば、これは純粋関数ではありません。

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

いくつかの副作用があるからです。 つまり、グローバル変数を変更し（副作用1）、コンソールにテキストを出力します（副作用2）。

もう1つの不純な関数は次のとおりです。

 function createElement( name ) { const id = Math.random(); return { id, name }; }

ご覧のとおり、必ずしも同じ結果が得られるとは限りません。 特定の名前でcreateElementを呼び出すたびに、得られる結果は異なります。 結局のところ、 id属性はMath.randomを介して生成されます…

純粋関数は、さまざまな理由で優れています。理解が簡単で、驚きがありません。 あなたは彼らにいくつかの入力を与えます、彼らはあなたに特定の出力を返します。 そして、これは素晴らしいことです。なぜなら、関数を定義するこの方法は、関数が何であるかについての数学的な理解にそれらを近づけるからです。それは、すべての入力を明確に定義された出力にマップします。

Reactのコンポーネント

純粋関数と関数型プログラミングは何をしなければなりませんか？ さて、私たちが彼らの関係を導き出すことができるかどうか見てみましょう…

ドキュメントで読むことができるように、Reactは「コンポーネント」と呼ばれる小さなコードを介してユーザーインターフェイスを作成するためのJavaScriptライブラリです。 これは、チュートリアルに表示される最初のコンポーネントです。

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

非常にシンプルで、自明ですよね？

しかし、ちょっと待ってください！ これは「純粋関数」のようには見えません。 実際、これはオブジェクト指向プログラミングを使用して実装されたクラスです。

奇妙なしかめっ面をする女性のGIF

うん、あなたは絶対に正しい。 これは見栄えが良くありません…関数型プログラミングについて話すのに時間を無駄にしましたか？

前のコンポーネントをもう一度見てください。 それはどのように見えますか？ それは何をするためのものか？ それは、ショッピングリストをレンダリングするためのHTMLを生成する単一のメソッド（ render ）を持つクラスです。 このショッピングリストは常に同じですが（簡単な例です）、1つの可変部分があります。それは、クラスが内部プロパティthis.props.nameを使用しているように見えるタイトルです。

したがって、Reactについてまだ何も知らず、コードを見てそれが何をするのかを推測しようとすると、次のようになります。

  1. コンポーネントは「名前」を受け取ることができます。 この名前の付け方は正確にはわかりませんが、付けられていることはわかっています。 結局のところ、 this.props.nameはかなり良い手がかりです。
  2. renderメソッドは、「ショッピング要素」の（静的）リストをレンダリングするためのHTMLを生成します： Instagram 、 WhatsApp 、およびOculus 。
  3. 結果のHTMLは100％静的ではありません。 プロパティの値に基づいて変化する可能性のある「名前」を使用します。

私がどこに行くのか分かりますか？

コンポーネントはReactで機能します

純粋関数について説明しました。 値（ name ）を取り、明確に定義された出力（HTML）を生成するコンポーネントがあります。 これは、OOPから離れて、前のコンポーネントを関数として実装できることを意味しますか？

何を考えているのか疑問に思っている男性を示すGIF

もちろん！ 今見た非常に複雑なクラスは、 propsを受け取り、HTMLを返す、より単純で理解しやすい純粋関数として書き直すことができます。

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

これは私たちが持っていたものとまったく同じですが、方法ははるかに簡単です。 プログラマーとして実装できる最も簡単なことだと言っても過言ではありません。Reactコンポーネントは、いくつかの小道具を取り込んでHTMLを生成する関数にすぎません。

そして、これはまさにあなたが学ばなければならない最初のレッスンです：あなたのReactコンポーネントは純粋関数です：プロップイン、HTMLアウト。 コンポーネントは、データをフェッチするために非同期関数を実行してはなりません（これらは副作用であるため）。 コンポーネントは、受け取るプロパティ（不変性）を変更することもできません。

つまり、もう一度、コンポーネントはいくつかの小道具を取り込んでHTML出力を生成するだけです。 限目。

しかし、待ってください。コンポーネントがそれほど単純な場合、どうすればそれらを使って何か役立つことができるでしょうか。 これについては次の投稿で説明しますので、しばらくお待ちください。

UnsplashのJosiahWeissによる注目の画像。