React.jsの最新技術（Max Stoiberのインタビュー）

最新のWeb開発は、いくつかの大規模なコミュニティに集中しています。 過去5年間、Reactはさまざまな業界のプログラマーの共感を獲得してきました。 Reactは、WebインターフェイスのプログラミングでMVCを初歩的なものにした唯一のライブラリです。 今日、Reactは、Facebook、Airbnb、BBC、Coursera、eBay、Expedia、IMDBなど、さまざまな製品を開発するために大企業で使用されています。



Reactワールドのユニークな機能の1つは、その周りのオープンソース開発者の最大かつ非常に活発なコミュニティです。 Max Stoiberは、Reactを今日のプロジェクトとして作成した人々の1人です。 過去数年にわたって、彼は人気のあるコミュニティの定型プロジェクトに取り組んでおり、最新かつ最高の技術を大量使用に導入しています。



Maxとコミュニティの新しいトレンド、Reactで開発するための静的型付け、コンポーネントのスタイリングへの新しいアプローチ、スナップショットテストについて話しました。



React開発の秘密は、インタビューで以下で共有できます。



-こんにちは、マックス！ Reactコミュニティで現在起こっている興味深いことは何ですか？



-styled-components -React-componentsをスタイルするための新しい素晴らしい方法（もちろん、私自身はGlen Maddernでこのプロジェクトを作成したので、 偏見があります ）。 しかし、真剣に、 React VRは非常に有望に見えます。試してみる良い機会が待ち遠しいです。



-FlowとReactはFacebookによって開発されており、Reactチームはよりフローしやすいようです（たとえば、react-nativeはフローで完全にカバーされています） 反応もフローを使用します。 これは、TypeScriptよりもReactでフローを使用する方が良いということですか？ TypeScriptはFlow + Babelの潜在的な代替品になる可能性がありますか？



-私の仕事では、これら2つのツールがFacebookの開発者によって作成されたため、Reactとの互換性が保証されているという単純な理由で、FlowとBabelを使用しました。 C TypeScriptは少し異なる話です。 フロー開発者の計画には多くの興味深いアイデアがあります。TypeScriptは、デバイスの機能（デッドコードの除去など）のために必然的に遅れを取ります。



Flowは、いわゆるFlowgraphを作成します。これは、アプリケーション全体のグラフです。どのモジュールが相互に接続されているかを記憶します。 TypeScriptにはこのような機能はありません。タスクが大きすぎるため、Flowはさらに進んでいます。 フローは、アプリケーションの大部分が残りのコードから切り離されているかどうかを判断し、それらを削除することを提案します！ ジェフ・モリソンは ReactEuropeでこれについて多くのことを話しました 。



-React-boilerplateは、すべてのGitHubで最も有名で使用されているトップ10のボイラープレートプロジェクトです！ 何が彼をそんなに人気にしたと思いますか？



-React-boilerplateは、 create-react-appをカウントして上位3位になります。 コミュニティは彼が本当にトップ3に入るのを助けたと思います。 このプロジェクトは、周囲のコミュニティの活動により人気があります。 どういうわけか、私はそれを改善するために多くの時間を費やす参加者の絶え間ない流入を確保することができました。 他の多くのボイラープレートとは異なり、これは1人の愛好家のプロジェクトではありません-それは人々の巨大なグループの仕事です！



反応ボイラープレートを使用すると、将来のReactアプリケーションを開発およびテストするための既製の環境を迅速にデプロイできます。 プロジェクトには、いくつかの短いコマンドで将来のアプリケーション用の新しいコンポーネントを生成するのに役立つコマンドラインツールが含まれています！ コンポーネント、スタイル付きコンポーネント、 Babelを使用するために必要なすべての構成、およびコンパイルされたプロジェクトの形で用意されている既製のフォルダー構造が、このプロジェクトで利用できます。



コミュニティに参加して、 フィードバックと参加を歓迎します 。



-最近、Reactアプリケーションとcss-in-js で人々がスタイルを管理する方法についてアンケートを実施しました。 どのような結論を導き出すことができますか？ 一般的なcss-in-jsとは何ですか（人々はそれについて異なる意味を持っています）？ 単なるCSSよりも優れているものは何ですか？ Reactコンポーネントをスタイルする方法は？ インラインスタイルは良いですか？ まだBEM / OOCSSを使用していますか？



-私の結論は、コンポーネントをスタイルするためのより便利な方法が必要だということです。それが、すべての問題を解決することを期待して、 スタイル付きコンポーネントでグレン・マッダーンと協力し始めた理由です！ スタイル付きコンポーネントを使用してください！



スタイル付きコンポーネントの特徴は、コンポーネント指向システムで高度な技術を使用できることです。 ReactiveConfに関する私のプレゼンテーションでは、これについて詳しく説明しています。 一言で言えば、要点は、コンポーネントとスタイル（クラス名）の間の接続を取り除き、単一のタスクに完全に焦点を当てた小さなコンポーネントのシステム全体を作成することです。また、 コンテナコンポーネントとプレゼンテーションコンポーネントを区別するのにも役立ちます 。

著者注：今日のスタイル付きコンポーネントは、すべての一般的なエディターおよびIDEで構文の強調表示をサポートしていませんが、MaxはReactiveConf 2016でのプレゼンテーションで、この重要な機能がAtom、WebStormなどですぐに利用できることを保証しました。

-Reactのどの開発ツールをお勧めしますか？



-Redux DevToolsは、実行中にアプリケーションで発生したすべての変更を非常に簡単に追跡できるため、優れたツールです。 双方向のデータバインディングを使用するAngularなどの他のフレームワークとは異なり、アプリケーションで何が起こっているのか、なぜ起こっているのかを正確に把握しています。



ReactとReduxのDevToolsは素晴らしいだけで、それらのすべてがまだそれを使用しているわけではないのは残念です。

著者のメモ： React Developer Toolsは、アプリケーション内のコンポーネントの階層を視覚化するために不可欠なツールです。 デバッガに頼らず、コードを変更せずに、State、Propsコンポーネントを分析できます。

-特にjsとReactがテストしているものを見ると、頭が少し回転しています。 モカ、ava、jest、酵素...また、いくつかの方法があります。浅いテスト、jsdomを使用できます。jestには最近、より多くのスナップショットが登場しています。 これらすべてで何をしますか？ ここにReactテストの疲労はありますか？



-さらに、これらのツールのほとんどはReact専用ではないと思います。 テストツールは長年使用されてきました。 私はJestの大ファンです。それはオーストリア人（ Christoph Pojer ）によって作成されただけでなく、スナップショットテストがReactコンポーネントのテスト方法および一般的なテストの真の革命だからです！



スナップショットテストは、単体テストを簡素化します。 実際、以前は手動で行う必要があったすべての作業を自動化します。写真を撮るだけで、何かを変更すると、Jestに「はい、これは正しい変更です」（コードレビュー中に確認されます）または「いいえ、すべてが壊れて、元通りに戻ります！」 すべてが自動的に行われるため、ユニットテストの実行が簡単かつ迅速になりました。



Reduxはまだ馬に乗っていますか？ MobXを使用する必要がありますか？



-redux-sagaとともにアプリケーションでReduxを使用し、この組み合わせに非常に満足しています。



Sagaはアプリケーション内の独立したスレッドと考えることができます（JavaScriptはもちろんシングルスレッドのままです）。 サガは、Action（ Redux Actions ）を非同期的に使用してメインスレッドと通信します。 ボタンを押した後に何が起こるかはアプリケーションにとって重要ではなく、アクションを起動するだけです。 Sagaスレッドは、アクションが到着するまで待機し、何かを実行してから、アクションを送り返すことができます。この場合、メインアプリケーションは、アクションが実行されていることをまったく疑っていません。 佐賀がアクションを返すとき、それは再レンダリングするだけで、それはそれだからです！



これにより、メインアプリケーションと長時間継続するトランザクションが非常にきれいになり、驚くほど開発が改善されます。 アプリケーション全体がクリーンで機能し、テストしやすくなります。



-あなたが取るものは何でも：CSS、テスト、タイピング、バンドル-Reactにはたくさんの解決策があります。 これは問題だと思いますか？ Reactのアプリケーションはすべて、雪片のように異なります。おそらく、標準が必要ですか？



-いいえ、標準が必要だとはまったく思いません。 Reactは、複雑な対話型アプリケーションを作成するために使用されます（少なくともこれが目的です）。 そのような各アプリケーションは、その自然な複雑さにより、まったく異なる要求を行います。

---

考えられるさまざまな解決策があるように見えますが、今日では、Reactコンポーネントの様式化、テスト、デバッグなど、アプリケーション開発の一般的なタスクを解決するためのいくつかの推奨される高度なアプローチを選択できます。



スタイル付きコンポーネントは、今日の本格的なアプリケーションでの使用には少し気味が悪いかもしれませんが、それを現在取り組んでいるReactコミュニティの貢献者の努力にすべて依存しています。 6か月間、または今日最も人気のある最新のライブラリの開発に貢献してください。 Maxと話をした後、Reactの力はパフォーマンスやパターンではなく、新しいアイデアを受け入れ、Webインターフェース開発をより良く効率的にするという共通の目標にコミットしている人々の友好的なコミュニティにあると結論付けることができます。

---

JavaScriptの世界を追いかけようとしているなら、次のプロフェッショナルなイベントはHolyJS 2016モスクワテクノロジー会議です。 このカンファレンスには、フロントエンド、バックエンド、デスクトップ、さらにはVR向けのJavaScript開発に関する20の講演があります。