翻訳|「JavaScriptEverywhere」第11章ユーザーインターフェイスとReact（_）
一番上に書く
みなさん、こんにちは。フロントエンド開発エンジニアのMaoXiaoyouです。英語の技術書が翻訳されています。
みんなの読書体験を向上させるために、文章の構造と内容がわずかに調整されました。この記事に欠陥を見つけた場合、またはコメントや提案がある場合は、コメント領域にメッセージを残すか、WeChat：code_maomaoを追加して、お互いにコミュニケーションを取り、学び合うことを歓迎します。
（σﾟ∀ﾟ）σ…：*☆ああ、いいね
第11章ユーザーインターフェースとReact
19792009年、有名なスティーブジョブズ（Steve Jobs）がゼロックスパーカー（Xerox Parc）を訪れ、ゼロックスのAltoパソコンのデモンストレーションを見ました。当時、他のコンピューターはコマンドを入力することで制御さAltoれ、マウスを使用して、開閉可能なグラフィカルウィンドウインターフェイスを備えていました。ジョブズApple Macintoshは、彼のオリジナルの作品でこれらのアイデアを利用し続けました。元々のMac人気UIはコンピュータの急増につながりました。今日、私たちは通常、パーソナルコンピューター、スマートフォン、タブレット、ATMゲーム機など、多くのグラフィカルユーザーインターフェイスを操作することがあります。ユーザーインターフェイスが私たちを取り囲み、さまざまなデバイス、コンテンツタイプ、画面サイズ、インタラクティブ形式で使用できるようになりました。
たとえば、私は最近、会議のために別の都市に行きました。その朝、私は目を覚まし、電話でフライト状況を確認しました。空港まで車で行き、画面に地図を表示して、聴いている音楽を選べるようにしました。途中、ATM飛行機に立ち寄って現金を受け取り、PINコードを入力し、タッチスクリーンに指示を入力しました。空港に着くと、チェックインカウンターに乗り込みました。搭乗口でバスを待っている間、タブレットでいくつかのメールに返信しました。飛行中、私は電子インク表示装置で本を読みました。着陸後、携帯電話のアプリを使って乗る車を見つけ、昼食のために立ち寄り、ディスプレイで注文を選択しました。会議では、スライドがスクリーンプラットフォームに投影され、私たちの多くはラップトップでメモを取りました。夕方にホテルに戻ったとき、ホテルのテレビ画面メニューから、見つけたテレビや映画の商品を閲覧しました。私の一日は多くのUI画面サイズでいっぱいで、生活の中核要素（交通、金融、娯楽など）に関連するタスクを完了するために使用されます。
この章ではJavaScript、ユーザーインターフェイス開発の歴史を簡単に紹介します。この背景知識を習得Reactした後、この本の残りの部分で使用される基本とJavaScriptライブラリについて説明します。
JavaScript和UI
もともとは、インターフェイスを強化し、ブラウザに埋め込まれたスクリプト言語を提供するために1990、10年の半ば（あまり知られていない、10日）に設計されました。これにより、設計者と開発者は、自分では達成できない相互作用を追加できます。残念ながら、ブラウザベンダーごとに実装が異なるため、使用するのは困難です。これは、単一のブラウザで動作するように設計されたアプリケーションの急増につながる要因の1つです。WebJavaScriptWebWebHTMLJavaScript
10年2000の半ばに
jQuery（そして、例えば、同様のライブラリMooTools）が人気になりました。jQuery開発者が簡単なAPI書き込みを使用できるようにします。JavaScriptこれAPIは、さまざまなブラウザ間で適切に実行できます。間もなく、Webページのコンテンツをすべて削除、追加、置換、およびアニメーション化できるようになります。ほぼ同時に、Ajax（「非同期JavaScript合計XML」の省略形）により、サーバーからデータをフェッチしてページに挿入することができました。これら2つのテクノロジーの組み合わせWebは、強力なインタラクティブアプリケーションを作成するためのエコシステムを提供します。
これらのアプリケーションの複雑さが増すにつれて、編成とサンプルコードの必要性も増します。よる2010十年の初め、フレームワークのようなBackbone、AngularそしてEmber支配し始めたJavaScriptアプリケーションドメインを。これらのフレームワークは、フレームワークコードに構造を課し、一般的なアプリケーションパターンを実装することで機能します。これらのフレームワークは通常、ソフトウェア設計モジュール、ビュー、およびコントローラー（MVC）モードに従ってモデル化されます。各フレームワークは、Webアプリケーションのすべてのレイヤーを規制し、テンプレート、データ、およびユーザー操作を処理するための構造化された方法を提供します。そうすることには多くの利点がありますが、それはまた、新しいテクノロジーまたは非標準テクノロジーを統合するための作業負荷が大きくなる可能性があることを意味します。
同時に、デスクトップアプリケーションは引き続きシステム固有のプログラミング言語で記述されています。これは、開発者とチームが1つまたは2つのスタイルの選択（MacアプリケーションまたはWindowsアプリケーション、Webアプリケーションまたはデスクトップアプリケーションなど）を強いられることを意味します。モバイルアプリケーションも同様の立場にあります。レスポンシブWebデザインの台頭は、デザイナーと開発者がモバイルWebブラウザ用の本当に素晴らしいウェブサイトとアプリケーションを作成できることを意味しますが、ベースのWebアプリケーションのみを構築することを選択すると、モバイルプラットフォームアプリケーションリポジトリからそれらをロックします。AppleのiOSアプリケーションはObjective C（そして最近ではSwift）プログラミング言語にAndroid依存してJavaいます（友達JavaScriptと混同しないでください）。これは、によってHTML、CSSおよびJavaScript構成Webが唯一の真のクロスプラットフォームユーザーインターフェイスプラットフォームであることを意味します。
JavaScriptの宣言型インターフェース
で2010年の初め、Facebook開発者はJavaScriptの組織と管理における課題に直面自分のコードを。それに応じて、ライブラリのソフトウェアエンジニアJordan WalkeはFacebook、次に書くように促しました。他の一般的なフレームワークとの違いは、プレゼンテーションのみに焦点を当てていることです。この目的のために、「宣言型」プログラミングアプローチが採用されています。これは、開発者が記述された状態に集中できるようにする抽象化を提供することを意味します。PHPXHPReactReactJavaSriptUIReactUI
React同様のライブラリ（たとえばVue.js）の台頭により、開発者の記述UI方法に変化が見られました。これらのフレームワークは、コンポーネントレベルでUI状態を管理する方法を提供します。これにより、ユーザーはアプリケーションについてスムーズに感じると同時に、優れた開発エクスペリエンスを提供できます。デスクトップアプリケーションを構築するためのツールやElectronクロスプラットフォームのネイティブモバイルアプリケーション用のツールなどのツールを使用するとReact Native、開発者とチームはすべてのアプリケーションでこれらのパラダイムを活用できるようになります。
Reactで十分です
残りの章では、Reactライブラリを使用してライブラリを構築しますUI。React使用経験は必要ありませんが、使用する前に文法を理解していれば使用すると便利です。このcreate-react-appために、新しいプロジェクトを構築するために使用します。create-react-appこれは、あるReact開発ツールによって、私たちはすぐに新しい構築することができ、チーム、Reactのようなプロジェクトやヘルプ抽象基本的なビルドツールを、WebpackとBabel。
ターミナルアプリケーションにcdプロジェクトディレクトリを入力し、次のコマンドを実行します。これにより、次の名前のjust-enough-reactフォルダに新しいReactアプリケーションが作成されます。
$ npx create-react-app just-enough-react
$ cd just-enough-react
これらのコマンドを実行just-enough-reactすると、完全に機能するアプリケーションの構築に使用されるすべてのプロジェクト構造、コードの依存関係、および開発スクリプトを含むディレクトリが出力されます。次のコマンドを実行して、アプリケーションを起動します。
$ npm start
これで、Reactアプリケーションがブラウザにhttp://localhost:3000表示されます（画像11-1）。
画像11-1入力npm startはブラウザでデフォルトを開始しますcreate-react-app
これで、src/App.jsファイルを変更してアプリケーションの編集を開始できます。このファイルには、主要なReactコンポーネントが含まれています。いくつかの依存関係が必要になった後、次のようないくつかのHTMLトークンを返す関数が含まれています。
function App() {
return (
// markup is here
)
}
コンポーネントで使用されるマークはと呼ばれJSXます。
JSX同様のXMLベースのXML文法であり、ファイル内のユーザーアクションを正確に記述UIして組み合わせることがJavaScriptできます。あなたが理解しているならHTML、選択JSXはいくつかの小さな違いを学ぶことです。この例では、最大の違いはあるHTMLというclass属性がさclassNameを避けるために交換しJavaScript、競合とのクラス構文を。
JSX？
私のように、ネットワークの標準化と関心の分離の厳格な背景から来た場合、これは煩わしいと感じるかもしれません。私が最初にJSXそれに遭遇したとき、私はすぐにそれを強く嫌ったことを認めます。ただし、UIロジックとプレゼンテーション出力を組み合わせると、時間の経過とともに大きくなる可能性のある多くの魅力的な利点が得られます。
ほとんどのスタイルコードを削除し、単純な「Hello World！」に単純化して、アプリケーションのカスタマイズを始めましょう。
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<p>Hello world!</p>
</div>
);
}
export default App;
すべてのJSXコンテンツをカプセル化するタグに気付くかもしれません。各React UIコンポーネントは、親HTML要素内に含まれるかReact、HTML要素以外のコンテナを表すフラグメントを使用する必要があります。次に例を示します。
function App() {
return (
<React.Fragment>
<p>Hello world!</p>
</React.Fragment>
);
}
React最も強力な機能の一つは、私たちが直接である{}中括弧で囲むことができるということであるJSX使用JavaScript。Appいくつかの変数を使用するように関数を更新しましょう。
function App() {
const name = 'Adam'
const now = String(new Date())
return (
<div className="App">
<p>Hello {
name}!</p>
<p>The current time is {
now}</p>
<p>Two plus two is {
2+2}</p>
</div>
);
}
前の例では、インターフェースで直接使用したことがわかりますJavaScript。どれくらいクールですか？
Reactもう1つの便利な機能は、各UI関数を独自のコンポーネントに変換する機能です。経験則として、そのUI1つの側面が独立して動作する場合は、それ自体のコンポーネントに分離する必要があります。新しいコンポーネントを作成しましょう。まず、src/Sparkle.jsで新しいファイルを作成し、新しい関数を宣言します。
import React from 'react';
function Sparkle() {
return (
<div>
</div>
);
}
export default Sparkle;
それでは、いくつかの機能を追加しましょう。ユーザーがボタンをクリックするたびに、点滅する絵文字（あらゆるアプリケーションの重要な機能）がページに追加されます。これを行うためにReact、useStateコンポーネントをインポートし、コンポーネントの初期状態を定義します。初期状態は空の文字列になります（つまり、ちらつきはありません）。
import React, {
useState } from 'react';
function Sparkle() {
// declare our initial component state
// this a variable of 'sparkle' which is an empty string
// we've also defined an 'addSparkle' function, which
// we'll call in our click handler
const [sparkle, addSparkle] = useState('');
return (
<div>
<p>{
sparkle}</p>
</div>
);
}
export default Sparkle;
状態とは何ですか？
15詳細については第1章で紹介しますstateが、今のところ、ステートフルコンポーネントがコンポーネント内の情報の現在の状態を変更できることを知っておく必要があります。
たとえば、UIコンポーネントにチェックボックスがある場合、その状態は選択されているときであり、その状態は選択されていtrueないときfalseです。
これで、onClick機能ボタンを追加してコンポーネントを完成させることができます。キャメルケースの命名に注意してください。これJSXは次の場合に必要です。
import React, {
useState } from 'react';
function Sparkle() {
// declare our initial component state
// this a variable of 'sparkle' which is an empty string
// we've also defined an 'addSparkle' function, which
// we'll call in our click handler
const [sparkle, addSparkle] = useState('');
return (
<div>
<button onClick={
() => addSparkle(sparkle + '\u2728')}>
Add some sparkle
</button>
<p>{
sparkle}</p>
</div>
);
}
export default Sparkle;
コンポーネントを使用するには、次のようにコンポーネントをsrc/App.jsファイルにインポートしてJSX要素として宣言します。
import React from 'react';
import './App.css';
// import our Sparkle component
import Sparkle from './Sparkle'
function App() {
const name = 'Adam';
let now = String(new Date());
return (
<div className="App">
<p>Hello {
name}!</p>
<p>The current time is {
now}</p>
<p>Two plus two is {
2+2}</p>
<Sparkle />
</div>
);
}
export default App;
これで、ブラウザでアプリにアクセスすると、ボタンが表示され、クリックしてページに輝く絵文字を追加できるはずです。これはReact本当の超大国の1つです。アプリケーションの他の部分とは関係なく、個々のコンポーネントまたはコンポーネント（画像11-2）を再レンダリングすることができます。
図11-2ボタンをクリックすると、コンポーネントの状態が更新され、コンテンツがページに追加されます
これでcreate-react-app、新しいアプリケーションの作成、アプリケーションコンポーネントの更新JSX、新しいコンポーネントの作成、コンポーネントの状態の宣言、およびコンポーネントの動的な更新が完了しました。これらの基本を基本的に理解したので、宣言型開発をReact使用する準備が整いました。JavaScriptUI
結論として
私たちはさまざまなデバイスのユーザーインターフェイスに囲まれています。JavaScriptまた、Webテクノロジーは、単一のテクノロジーを使用して複数のプラットフォームでこれらのインターフェースを開発する比類のない機会を提供します。同時に、Reactおよび他の宣言型ビジュアルライブラリにより、強力な動的アプリケーションを構築できます。これらのテクノロジーの組み合わせにより、開発者は各プラットフォームの専門知識がなくても素晴らしいものを構築できます。次の章では、デスクトップ、およびモバイルアプリケーションGraphQL API用Webに構築されたインターフェイスを使用してそれを実践します。
理解が不十分な場合は訂正してください。大丈夫だと思ったら、もっと多くの人を助けたいと思って、集めたり共有したりしてください。