初めてのReactアプリ作成ガイド

(原文) A Guide to Creating Your First React App

FacebookがReactの初期バージョンを使い始めたのは、2010年代初頭のこと。しかし、アプリ開発者が安定したリリースを手に入れたのは2020年になってからでした。そのため、オープンソースのJavaScriptライブラリの使用経験が豊富な開発者もいれば、基本的な使い方から高度な使い方までを網羅したReactアプリガイドの恩恵を受ける開発者もいます。

幸いなことに、ほとんどの開発者はすでにJavaScriptの使用経験があるため、初めてのReactアプリをすぐに作ることができます。

Reactアプリを構築するために必要ないくつかのスキル

CSSとJavaScriptを知っていると仮定すると、Reactアプリガイドを理解して最初のアプリを作り始めるために必要なスキルの多くをすでに持っています。最初は戸惑うこともあるかもしれませんが、何日か続けてみてください。また、『Thinking in React』を読む時間もとってください。多くの開発者が、「5ステップのチュートリアルが非常に役立つ」と言っています。

始めるための前提条件

JavaScript、CSS、HTMLの経験があれば、すでにReactを使うことに非常に近い状態です。しかし、Reactで何かを作る前に、以下をインストールする必要があります。

• Node.js
• PowerShell
• npm
• Create React App(利用可能な唯一のコーディング環境ではありませんが、おそらく最高です)

初めてのReactプロジェクトにツールチェーンは必要ないかもしれません。しかし、以下のようなオプションをチェックしてみるといいかもしれません。

• Nx
• Gatsby
• Parcel
• Razzle
• Neutrino

これらの開発ツールキットはどれも便利なものです。必ずしも使わなければならないわけではありませんが、使うべきです。あなたの人生をずっと楽にしてくれるでしょう。

ReactとJavaScriptの違いを知る

ReactとJavaScriptの間には類似点がありますが、Reactを使いこなすにはいくつかのハードルを乗り越えなければなりません。最も顕著な違いとしては、以下のようなものがあります。

• UIの構築方法 -JavaScriptでは、HTMLドキュメントの中でインターフェイスを作成し、それがサーバーにコードを送信します。Reactでは、ブラウザ上でUIを定義します。最初は、このような短いHTMLを追加することが不自然に感じられます。しかし現実的には、同じ結果が得られます。違いは、Reactがブラウザ内で動作するのに対し、JavaScriptはサーバーの助けが必要だということです。
• アプリ間での機能分担 -開発者によるJavaScriptの使用方法は非常に複雑になっているため、JavaScriptのコードはしばしば耐え難いほど複雑に見えます。その結果、同じアプリで作業中に多くのファイルを開いておくことになります。Reactでは、機能をコンポーネントに分割することで、プロジェクトをより管理しやすくしています。各コンポーネントには、実行するのに必要なコードがすべて含まれています。その結果、散らかったライブラリではなく、短いリストのようなコードを得ることができます。
• ユーザーデータの管理方法 - JavaScriptの場合、ユーザーから送信されたデータは、ブラウザが扱うドキュメント・オブジェクト・モデル（DOM）に格納されます。例えば、テキストフィールドに名前を入力すると、その情報はサーバーに転送される前にDOMに入ります。Reactはユーザーデータを変数として保存します。ユーザーの視点では、何も変化しません。バックエンドでは、データの管理が非常に簡単になります。

Reactを使ってアプリを作る練習

いくらJavaScriptでアプリを作ったことがあっても、Reactでアプリを作り始めるにはReactアプリガイド以上のものが必要になります。W3Schoolsには、簡単なアプリの作り方を教えてくれる入門書があります。

以下により、より多くの経験を積むことができます:

• Reactの構文を使ってチック・タク・トーゲームを作る。
• CodePen、CodeSandbox、Stackblitzなどのサンドボックスで実験する。
• React.js コンポーネント用の UXPin Merge ライブラリを作成する。
• Codecademyコースを受講する（コースにはお金がかかりますが、多くの公共図書館システムでは、無料で利用できるメンバーシップを持っています。)

Reactを学ぶべき4つの理由

あなたがJavaScriptを使ってアプリを作ることを楽しんでいる初級開発者であれば、同じ分野の他の人たちがなぜReactに興奮しているのか不思議に思うかもしれません。その理由は、複雑な機能を実行するアプリケーションを構築する必要があるキャリアに達するとわかります。ある時点で、JavaScriptは今日のアプリ開発者のニーズに対応していないため、非常に苦痛になります。

Reactを学ぶべき理由は...

• 再利用可能なコンポーネントを提供し、長期的に時間を節約します。
• DOM の落とし穴を回避します。
• 自由にツールやアドバイスを提供する開発者の堅牢なコミュニティを持っています。
• 急速に業界標準になりつつあります。

また、Reactでビルドを学ぶことで、多くのデザインパターンにアクセスすることができます。最初から学んでおくべきおすすめのパターンとしては、以下のようなものがあります。

• ステートレスコンポーネント
• 条件付きレンダリング
• レンダリングプロップ
• 制御されたコンポーネント
• Reactのフック

あなたが知っておくべき最高のReactデザインパターンを読むことで、Reactデザインパターンについてより深い理解を得ることができます。

Reactアプリのプロトタイプを作成してテストする

UXPinを使うとReactアプリのプロトタイプを簡単に作成してテストすることができます。JSXプリセットのオーサリングと管理をチェックして、UXPin でコードをテストするのがいかに簡単かを確認してください。コンポーネントを UXPin エディタのキャンバスにドロップするだけで、意図した通りに動作するかどうかを判断することができます。

UXPin Mergeを使えば、さらに一歩進んで、Reactを使ってデザイン全体を構築することができます。UXPin Mergeでは、コード化されたReact.jsコンポーネントをGitリポジトリからUXPin Editorにインポートし、同期させることができます。要するに、Reactでコーディングできるものは何でも、プロトタイプで見せることができるということです。また、デザイン部門と密接に連携している場合は、ハンドオフプロセスが短縮され、コミュニケーションプロセスの摩擦がなくなるため、非常に有益です。

アプリ開発の経験の有無にかかわらず、UXPinは役立ちます。このクラウドベースのツールのコラボレーション機能を使って、自分のアイデアを他の人と共有しましょう。UXPinのアカウントを作成しなくても、プロジェクトを見てフィードバックを残すことができます。UXPinのアカウントを作成しなくても、適切なリンクを与えれば、他の人はプロトタイプにアクセスできます。

UXPinは、コードに落とし込む前にアイデアを検討するためにも使用できます。UXPinに搭載されているライブラリは、機能を素早く簡単にテストすることができます。気に入ったものがあれば、製品に合わせて微調整した独自のバージョンを作ることもできます。

UXPinは、世界中のプロダクトチームがアイデアをより早く製品に変えることを支援するデザインプロセスツールです。

UXPin の革新的なテクノロジーである Merge を使用すると、PayPal のような企業は DesignOps の課題を簡単に解決することができます。UXPin Merge は、最終製品との完全な一貫性を達成するために React コンポーネントを使用してデザインすることを可能にします。

本記事は2020/12/16投稿、2021/3/17更新を翻訳したものです