残念! ReasonReactがReactを書くための最良の方法である理由はここにあります

Reactを使用してユーザーインターフェイスを構築していますか?まあ、私もです。そして、ReasonMLを使用してReactアプリケーションを作成する理由を学びます。

Reactは、ユーザーインターフェースを記述するための非常に優れた方法です。しかし、それをさらにクールにすることはできますか?いい?

改善するには、まず問題を特定する必要があります。それでは、JavaScriptライブラリとしてのReactの主な問題は何ですか?

Reactは当初JavaScript用に開発されたものではありませんでした

Reactを詳しく見ると、その主な原則のいくつかがJavaScriptに関係ないことがわかります。不変性、関数型プログラミングの原則、特に型システムについて話しましょう。

不変性は、Reactのコア原則の1つです。小道具や状態を変更したくない場合は、予測できない結果を招く可能性があります。 JavaScriptでは、そのままでは不変性はありません。慣例によりデータ構造を不変に保つか、immutableJSなどのライブラリを使用してそれを実現します。

Reactは、アプリケーションが機能の合成であるため、関数型プログラミングの原則に基づいています。 JavaScriptには、一流の関数など、これらの機能の一部がありますが、関数型プログラミング言語ではありません。優れた宣言型コードを作成する場合は、Lodash / fpやRamdaなどの外部ライブラリを使用する必要があります。

それでは、型システムはどうなっていますか? Reactでは、PropTypeがありました。静的に型付けされた言語そのものではないため、JavaScriptで型を模倣するために使用しました。高度な静的型付けを利用するには、FlowやTypeScriptなどの外部依存関係を再度使用する必要があります。

React、およびJavaScriptの比較

ご覧のとおり、JavaScriptはReactの基本原則と互換性がありません。

JavaScriptよりもReactとの互換性が高い別のプログラミング言語はありますか?

幸いなことに、ReasonMLがあります。

Reasonでは、そのままで不変性を取得します。関数型プログラミング言語であるOCamlに基づいているため、言語自体にもこのような機能が組み込まれています。 Reasonは、独自の強力な型システムも提供します。

React、JavaScript、Reasonの比較

Reasonは、Reactの基本原則と互換性があります。

理由

新しい言語ではありません。 OCamlのJavaScriptに似た代替構文およびツールチェーンであり、20年以上にわたって使用されている関数型プログラミング言語です。 Reasonは、プロジェクト(Flow、Infer)で既にOCamlを使用しているFacebook開発者によって作成されました。

Reasonは、Cに似た構文を備えているため、JavaScriptやJavaなどの主流の言語を使用している人々にとってOCamlを親しみやすくしています。 (OCamlと比較して)より良いドキュメントと、その周辺の成長するコミュニティを提供します。さらに、既存のJavaScriptコードベースとの統合が容易になります。

OCamlは、Reasonの補助言語として機能します。 ReasonはOCamlと同じセマンティクスを持ちます-構文のみが異なります。これは、ReasonのJavaScriptのような構文を使用してOCamlを作成できることを意味します。その結果、強力な型システムやパターンマッチングなど、OCamlの優れた機能を活用できます。

Reasonの構文の例を見てみましょう。

let fizzbuzz =(i)=>
  スイッチ(i mod 3、i mod 5){
  | (0、0)=> "FizzBu​​zz"
  | (0、_)=> "フィズ"
  | (_、0)=>「バズ」
  | _ => string_of_int(i)
  };
for(i in 1 to 100){
  Js.log(fizzbuzz(i))
};

この例ではパターンマッチングを使用していますが、それでもJavaScriptとよく似ています。

ただし、ブラウザで使用できる言語はJavaScriptのみであるため、コンパイルする必要があります。

BuckleScript

Reasonの強力な機能の1つに、BuckleScriptコンパイラがあります。これは、Reasonコードを取得し、読み取り可能でパフォーマンスの高いJavaScriptにコンパイルし、デッドコードを大幅に排除します。全員がReasonに精通しているわけではないチームで作業している場合は、可読性が高く評価されます。なぜなら、彼らはコンパイルされたJavaScriptコードを読むことができるからです。

JavaScriptとの類似性は非常に近いため、コンパイラによってReasonのコードの一部を変更する必要はまったくありません。したがって、コードをまったく変更することなく、静的に型指定された言語の利点を享受できます。

let add =(a、b)=> a + b;
add(6、9);

これは、ReasonとJavaScriptの両方で有効なコードです。

BuckleScriptには4つのライブラリが付属しています:Beltと呼ばれる標準ライブラリ(OCaml標準ライブラリでは不十分です)、およびJavaScript、Node.js、DOM APIへのバインディング。

BuckleScriptはOCamlコンパイラに基づいているため、Babelよりもはるかに高速で、TypeScriptよりも数倍速い非常に高速なコンパイルが可能です。

Reasonで書かれたFizzBu​​zzアルゴリズムをJavaScriptにコンパイルしましょう。

BuckleScriptを介したReasonのJavaScriptへのコードコンパイル

ご覧のとおり、結果のJavaScriptコードは非常に読みやすくなっています。 JavaScript開発者によって作成されたようです。

ReasonはJavaScriptにコンパイルされるだけでなく、ネイティブおよびバイトコードにもコンパイルされます。そのため、Reason構文を使用して単一のアプリケーションを記述し、MacOS、Android、およびiOSの携帯電話のブラウザーで実行できます。理由で書かれたJared ForsythによるGravitronと呼ばれるゲームがあり、これは今述べたすべてのプラットフォームで実行できます。

JavaScript相互運用

BuckleScriptはJavaScriptの相互運用性も提供します。動作中のJavaScriptコードをReasonコードベースに貼り付けることができるだけでなく、ReasonコードはそのJavaScriptコードとやり取りすることもできます。つまり、Reasonコードを既存のJavaScriptコードベースに簡単に統合できます。さらに、ReasonコードでNPMエコシステムのすべてのJavaScriptパッケージを使用できます。たとえば、単一のプロジェクトでFlow、TypeScript、およびReasonを組み合わせることができます。

ただし、それほど単純ではありません。 ReasonでJavaScriptライブラリまたはコードを使用するには、まずReasonバインディングを介してReasonに移植する必要があります。つまり、Reasonの強力な型システムを活用するには、型指定されていないJavaScriptコードの型が必要です。

ReasonコードでJavaScriptライブラリを使用する必要がある場合は、Reason Package Index(Redex)データベースを参照して、ライブラリが既にReasonに移植されているかどうかを確認してください。 Reasonで記述されたさまざまなライブラリとツール、およびReasonバインディングを備えたJavaScriptライブラリを集約したWebサイトです。そこにライブラリが見つかったら、それを依存関係としてインストールし、Reasonアプリケーションで使用するだけです。

ただし、ライブラリが見つからない場合は、Reasonバインディングを自分で作成する必要があります。 Reasonを始めたばかりの場合、バインディングの作成はReasonのエコシステムで最も難しいことの1つであるため、最初からやりたいことではないことに注意してください。

幸いなことに、私はReasonバインディングの作成に関する投稿を書いているだけなので、お楽しみに!

JavaScriptライブラリの一部の機能が必要な場合、ライブラリ全体のReasonバインディングを記述する必要はありません。これは、使用する必要がある機能またはコンポーネントに対してのみ実行できます。

ReasonReact

この記事では、ReasonでReactを作成する方法について説明します。これは、ReasonReactライブラリのおかげです。

「ReactでReactを使用する理由がまだわかりません」と考えているかもしれません。

その主な理由については既に述べましたが、ReasonはJavaScriptよりもReactとの互換性があります。なぜより互換性があるのですか? ReactはReason、より正確にはOCaml用に開発されたためです。

ReasonReactへの道

Reactの最初のプロトタイプはFacebookによって開発され、OCamlのいとこであるStandard Meta Language(StandardML)で記述されました。次に、OCamlに移動しました。 ReactもJavaScriptに転写されました。

これは、Web全体がJavaScriptを使用していたため、「これからOCamlでUIを構築する」と言うのは賢明ではなかったからです。

そのため、JavaScriptライブラリとしてReactに慣れました。他のライブラリや言語(Elm、Redux、Recompose、Ramda、PureScript)と連携して、JavaScriptでの関数型プログラミングを普及させました。また、FlowとTypeScriptの登場により、静的型付けも一般的になりました。その結果、フロントエンドの世界では、静的型を使用した関数型プログラミングパラダイムが主流になりました。

2016年、ブルームバーグはOCamlをJavaScriptに変換するコンパイラーであるBuckleScriptを開発およびオープンソース化しました。これにより、OCamlの強力な型システムを使用して、フロントエンドで安全なコードを書くことができました。最適化された非常に高速なOCamlコンパイラを使用し、バックエンドを生成するネイティブコードをJavaScriptを生成するJavaScriptに交換しました。

関数型プログラミングの人気とBuckleScriptのリリースにより、当初はML言語で記述されていたReactの元のアイデアにFacebookが戻る理想的な環境が生まれました。

ReasonReact

OCamlセマンティクスとJavaScriptシンタックスを使用して、Reasonを作成しました。また、ReactのReasonラッパー(ReasonReactライブラリ)を作成し、ステートフルコンポーネントへのRedux原則のカプセル化などの追加機能を追加しました。そうすることで、彼らはReactを元のルートに戻しました。

ReasonのReactの力

ReactがJavaScriptに入ったとき、さまざまなライブラリとツールを導入することで、JavaScriptをReactのニーズに合わせて調整しました。これは、プロジェクトの依存関係が増えることも意味しました。これらのライブラリがまだ開発中であり、重大な変更が定期的に導入されていることは言うまでもありません。したがって、プロジェクトではこれらの依存関係を注意して維持する必要があります。

これにより、JavaScriptの開発がさらに複雑になりました。

典型的なReactアプリケーションには、少なくとも次の依存関係があります。

  • 静的型付け— Flow / TypeScript
  • 不変性— immutableJS
  • ルーティング— ReactRouter
  • フォーマット—よりきれい
  • リンティング— ESLint
  • ヘルパー関数— Ramda / Lodash

JavaScript ReactをReasonReactに交換しましょう。

これらすべての依存関係がまだ必要ですか?

  • 静的型付け—組み込み
  • 不変性—ビルトイン
  • ルーティング—組み込み
  • フォーマット—組み込み
  • リンティング—組み込み
  • ヘルパー関数—組み込み

これらの組み込み機能の詳細については、他の記事をご覧ください。

ReasonReactアプリケーションでは、開発を容易にする多くの重要な機能が既に言語自体に含まれているため、これらの依存関係や他の多くの依存関係は必要ありません。そのため、パッケージのメンテナンスが簡単になり、時間が経っても複雑さが増すことはありません。

これは、20年以上前のOCamlのおかげです。これは成熟した言語であり、その中核となるすべての原則が整っており、安定しています。

要約

当初、Reasonの作成者には2つの選択肢がありました。 JavaScriptを使用して、何らかの方法でJavaScriptを改善する。そうすることで、彼らは歴史的な負担にも対処する必要があります。

しかし、彼らは別の道を進んだ。彼らはOCamlを優れたパフォーマンスを備えた成熟した言語として採用し、JavaScriptに似たものに変更しました。

ReactもOCamlの原則に基づいています。そのため、Reasonで使用すると、より優れた開発者エクスペリエンスが得られます。 Reason in Reasonは、Reactコンポーネントを構築するより安全な方法を表します。強力な型システムがあなたを支え、JavaScript(レガシー)のほとんどの問題に対処する必要がないためです。

次は何ですか?

JavaScriptの世界から来ている場合は、JavaScriptと構文が類似しているため、Reasonを使いやすくなります。 ReasonReactはReactと同じメンタルモデルと非常に類似したワークフローを備えているため、Reactでプログラミングを行っている場合は、Reactの知識をすべて使用できるため、さらに簡単になります。つまり、最初から始める必要はありません。成長する理由を学びます。

プロジェクトでReasonの使用を開始する最良の方法は、段階的に使用することです。 Reasonコードを使用してJavaScriptで使用できること、およびその逆の方法については、既に述べました。 ReasonReactでも同じことができます。 ReasonReactコンポーネントを取得し、React JavaScriptアプリケーションで使用します。その逆も同様です。

この漸進的なアプローチは、Facebook Messengerアプリの開発にReasonを幅広く使用しているFacebook開発者によって選択されました。

ReactでReactを使用してアプリケーションを構築し、Reasonの基本を実用的な方法で学習したい場合は、Tic Tac Toeゲームを一緒に構築する他の記事をご覧ください。

質問、批判、観察、または改善のためのヒントがある場合は、お気軽に以下のコメントを書くか、Twitterまたは私のブログで私に連絡してください。