React Native ドキュメントの日本語訳


よりみやすい形でこちらで翻訳を継続しています。

https://nakanisi-yusuke.gitbooks.io/react-native-document-translate-japanese/content/

React Native

Learn once, write anywhere: Build mobile apps with React

一度学べば、どんなところでもそれを書くことが出来る:モバイル・アプリケーションを React で構築する

ネイティブ・モバイル・アプリを JavaScript と React で構築する

Build native mobile apps using JavaScript and React

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native を用いることで、JavaScript だけでモバイル・アプリケーションを構築することができます。React Native は React と同じ構造を使用しており、宣言的に定義した Component を用いて、上質なモバイル UI を構成することができます。

React Native アプリは、本当の モバイル・アプリケーションです

A React Native app is a real mobile app

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

React Native で作成するのは「モバイル・ウェブ・アプリ」でも「HTML5 アプリ」でも「ハイブリッド・アプリ」でもありません。作成するのは、Objective-C や Java を用いて作成したアプリケーションと、未分けがつかない、本当のモバイル・アプリです。React Native は、通常の iOS や Android のアプリケーションと同じ基本的な UI ブロックを用います。これらの UI ブロックを JavaScript と React の中に組み込みます。

再コンパイルに時間を浪費するのはやめにしましょう

Don’t waste time recompiling

React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With Hot Reloading, you can even run new code while retaining your application state. Give it a try – it’s a magical experience.

React Native を使えば、以前より早くアプリを構築することができます。React Native では、再コンパイルをするのではなく、アプリケーションを即リロードさせることができます。Hot Reloading によって、変更を加えた新しいコードを、アプリケーションの状態を保持したまま、実行することができます。試してみてください。魔法のような体験です。

必要な時にネイティブ・コードを使用することもできます

Use native code when you need to

React Native combines smoothly with components written in Objective-C, Java, or Swift. It’s simple to drop down to native code if you need to optimize a few aspects of your application. It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.

React Native はスムーズに、Objective-C や Java や Swift で書かれたコンポーネントを取り込むことができます。アプリのいくつかの側面を最適化するために、ネイティブ・コードを使用する方法は非常に簡潔です。またアプリの一部に React Native を用い、一部にネイティブ・コードを直に使うことも簡単です。Facebook アプリケーションもそのようにして動作しています。

React Native を始めましょう

Get Started with React Native

Who’s using React Native?

Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you’re curious to see what can be accomplished with React Native, check out these apps!

何千ものアプリケーションが React Native を使用しています。その範囲は広く、既に評価が安定した Fortune 500 カンパニーから、今まさに動いている新規スタートアップでも使用されています。

Getting Started

This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the Tutorial.

このページは初めて React Native をインストールして、アプリケーションを作る人のための情報を提供します。すでにインストールしているひとは飛ばして、次のチュートリアルに進んでください。(このチュートリアル)

Quick Start

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required (see Caveats).

Create React App は、新規のリアクト・ネイティブ・アプリケーションを作るうえで一番簡単な方法です。native コードをビルドするために、他のツールのインストールや設定がまったく必要ありません。Xcode も Android Studio もインストールする必要がありません。

Assuming that you have Node installed, you can use npm to install thecreate-react-native-appcommand line utility:

ただし、Node がインストールされており、npm をつかってコマンドラインから create-react-app をインストールできる必要があります。

では次のコマンドでインストールしていきましょう。

$ npm install -g create-react-native-app

Then run the following commands to create a new React Native project called “AwesomeProject”:

以下のコマンドで、”Awesome Project”という名称の新規の React Native プロジェクトを作成しましょう。

$ create-react-native-app AwesomeProject
$ cd AwesomeProject
$ npm start

This will start a development server for you, and print a QR code in your terminal.

これで開発用サーバーが立ち上がり、QR コードがターミナルに表示されます。

Running your React Native application

Install theExpo client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.

クライアントアプリケーションの Expo をご自身の iOS もしくは Android にインストールして、使用しているコンピューターと同じワイヤレスネットワークに接続してください。Expo アプリを使って ターミナルに表示された QR コードをスキャンをしましょう。するとプロジェクトが端末上で展開されます。

Modifying your app

Now that you have successfully run the app, let’s modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

さてこれでアプリケーションを走らせることに成功しましたので、次は変更をくわえてきいきましょう。App.js をテキストエディターで開いて編集していきます。変更を加えると、自動的にアプリケーションがリロードされます。

That’s it!

Congratulations! You’ve successfully run and modified your first React Native app.

おめでとうございます。最初の React Native アプリを走らせて、さらに変更を加えることに成功しましたね。

Now what?

次にどうすればいいか。

  • Create React Native App also has a user guideyou can reference if you have questions specific to the tool.

  • User guideがあるので、Create React Native Appに関して疑問があれば参照してください。

  • If you can’t get this to work, see the Troubleshooting section in the README for Create React Native App.

  • うまくこのチュートリアルが動かなかった場合には、Troubleshooting を読んでください。

If you’re curious to learn more about React Native, continue on to the Tutorial.

React Native について興味がうまれてもっと学びたいという場合には Tutorial を読み続けてください。

Running your app on a simulator or virtual device

作成したアプリケーションを、シミュレータもしくは仮想デバイス上で動かす

Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.

Create React Native App は、開発環境の設定をする必要がないので非常に簡単に、実際の物理デバイス上でアプリケーションを走らせることができます。ですが、アプリケーションを iOS シミュレータや Android の仮想デバイス上で動かしたい場合には、Xcode のインストールと Android 開発環境のセットアップに関する説明を読んでください。

Once you’ve set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).

セットアップが完了しさえすれば、Android Virtual Device の場合には npm run androidと実行すればアプリケーションをその上で動かすことができます。iOS シミュレータの場合にはnpm run iosと実行してください。(ただし iOS シミュレータは macOS でしか提供されていません)

iOS シミュレータもしくは Android Virtual Device でアプリケーションを動かすための準備

Installing dependencies

You will need Node, Watchman, the React Native command line interface, and Xcode.

Node, Watchman, React Native command line interface, Xcode が必要です。

While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.

開発に使うのは、どんなエディターでもかまいませんが、まず Xcode をインストールして、React Native app をビルドするのに必要なツールを用意する必要があります。

Node, Watchman

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

Node と Watchman のインストールには Homebrew をしようすることを推奨します。Homebrew をインストールした後に、以下のコマンドをターミナルで実行してください。

$ brew install node
$ brew install watchman

If you have already installed Node on your system, make sure it is version 4 or newer.

すでに Node をインストールしている場合には、そのバージョンが 4 以上であるようにしてください。

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Watchman は Facebook が開発したツールで、filesystem の変更を監視します。より良いパフォーマンスのために、このツールをインストールすることを強く推奨いたします。

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Node に付随している npm を使用して、React Native command line interface をインストールしましょう。

Run the following command in a Terminal:

以下のコマンドをターミナルで実行します。

$ npm install -g react-native-cli

If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh.

次のようなエラーが出る場合には Cannot find module 'npmlog'、npm をダイレクトにインストールしてください: curl -0 -L https://npmjs.org/install.sh | sudo sh.

Xcode

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

Xcode をインストールする一番簡単な方法は Mac App Store を使うことです。Xcode をインストールすると、同時に iOS Simulator と iOS app をビルドするために必要なツール一式もインストールしてくれます。

If you have already installed Xcode on your system, make sure it is version 8 or higher.

Xcode をすでにインストールしている場合には、バージョンが8以上であるようにしてください。

Command Line Tools

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose “Preferences…” from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Xcode Command Line Tool もインストールする必要があります。Xcode を開いて、”Preferences…” を Xcode のメニューから洗濯してください。Location パネルに移動し、Command Line Tools のドロップダウンから、一番最新のものを選択してインストールします。

Caveats

Because you don’t build any native code when using Create React Native App to create a project, it’s not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.

If you know that you’ll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you’ll just need to “eject” eventually to create your own native builds. If you do eject, the “Building Projects with Native Code” instructions will be required to continue working on your project.

Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check this document to find out what versions are supported.

If you’re integrating React Native into an existing project, you’ll want to skip Create React Native App and go directly to setting up the native build environment. Select “Building Projects with Native Code” above for instructions on configuring a native build environment for React Native.

Learn the Basics

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
 
React Native は React と似ています。ただし、アプリケーションを構成するために、Web Component ではなく Native Component を用いる点は異なっています。ですので React Native App の基本的な概念を学ぶためには、React の基礎的な概念を理解する必要があります。例えば JSX, component, state, prop といった概念などです。React をすでに知っているのであれば、さらに進んで native component のような React Native に特有の概念を学んでいく必要があります。本チュートリアルは、React の経験がある人もない人も、全ての方向けに作成されています。
 
Let’s do this thing.
 
では進めていきましょう。
 

Hello World

 
In accordance with the ancient traditions of our people, we must first build an app that does nothing except say “Hello world”. Here it is:
 
太古からの我々の伝統に乗っ取り、「Hello, world」と言う以外に何もしないアプリケーションを構築しましょう。
 
If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your App.js file to create a real app on your local machine.
 
興味があれば、サンプルコードを Web シミュレータ上で直接実行してみてください。もしくは上記のコードを App.js ファイルにペースとして、ローカルマシーン上の実際のアプリケーションの上で実行してみましょう。
 

What’s going on here?

 
何がおきているか
 
Some of the things in here might not look like JavaScript to you. Don’t panic. This is the future.
 
ここで起きていることは、JavaScript のようには見えないかもしれません。動転しないでください。これは次世代の JavaScript なんです。
 
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn’t used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, class, extends, and the () => syntax in the example above are all ES2015 features. If you aren’t familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.
 
訳注:ES2015 についての解説。ES2015について慣れていない人は、this pageを参照。
 
The other unusual thing in this code example is <Text> Hello world!</Text>. This is JSX – a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text.
 
訳注:<Text> は見慣れない構文であるが、これはJSX の記法。React Compont の呼び出し。詳しくは React そのもののマニュアルを参照。
 

Components

 
So this code is defining HelloWorldApp, a new Component. When you’re building a React Native app, you’ll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple – the only thing that’s required is a render function which returns some JSX to render.
 
ということで上記のコードは、HelloWorldApp という新しいコンポーネントを定義しています。React Native app を構築していくにあたって、新しいコンポーネントをたくさん作っていくことになります。スクリーンに写っているものはどれでも全て、このようなコンポーネントでできています。コンポーネントは非常にシンプルです。必要なのは、レンダリングされる JSX を return する render function を持っていることだけです。
 

This app doesn’t do very much

 
このアプリはほとんど何もしていませんね。
 
Good point. To make components do more interesting things, you need to learn about Props.
 
おっしゃる通りです。もっと面白いことをするために、次に Props を学びましょう。
 

Props

 
Most components can be customized when they are created, with different parameters. These creation parameters are called props.
 
ほとんどのコンポーネントは、作成される際に、異なるパラメーターを元に、カスタマイズすることができます。この際に用いるパラメーターが、props です。
 
For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.
 
例えば、React Native コンポーネントの基礎的なものの一つして Image がありますが、この Image を作成する際に、source という名前の prop を用いることで Image コンポーネントが何を表示するかを制御することができます。
 
Notice that {pic} is surrounded by braces, to embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX.
 
{pic} というふうに、{} で囲まれている点に着目してください。これによって pic と言う変数を JSX の中に埋め込んでいます。JSX 内に {} によって、どんな JavaScript expression も埋め込むことができます。
 
Your own components can also use props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to this.props in your render function. Here’s an example:
 
自分作成したコンポーネントにも props を用いることができます。これによって、同じコンポーネントを様々な場所で、少しだけ異なる内容を持たせて使用することが可能になります。Render function の中で、this.props を参照するだけです。
 
Using name as a prop lets us customize the Greeting component, so we can reuse that component for each of our greetings. This example also uses the Greeting component in JSX, just like the built-in components. The power to do this is what makes React so cool – if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.
 
name という prop を用いることで、Greeting コンポーネントをカスタマイズすることができるので、同じコンポーネントをそれぞれ異なる挨拶に対して使いまわすことができます。また、この例では Greeting コンポーネントを JSX の中で用いていますが、あたかも built-in コンポーネントかのように用いています。こうすることには大きな利点があり、それによって React をとてもクールなものにしています。つまり、UI primitive(訳注:おそらく Native Cmponent のままの素朴な UI のこと) とは少し違ったものを使いたいと思った場合には、自分でそれを作ってしまえばいいのです。
 
The other new thing going on here is the View component. A View is useful as a container for other components, to help control style and layout.
 
ここではもう一つ新しいものが使われています。 View component です。View は、そのほかのコンポーネントのコンテイナーとして便利なもので、スタイルやレイアウトをコントロールする際に便利です。
 
With props and the basic Text, Image, and View components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to learn about State.
 
props と 基礎的な TextImageView コンポンーネントによって、広範囲にわたる静的な画面を作り出すことができます。時間によって変化するアプリケーションを作りたい場合には、State を学ぶ必要があります。
 

State

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
 
コンピポーネントをコントロールするために用いることができるデータには、二種類あります。一つは prop で もう一つは state です。props は親要素から渡され、コンポーネントのライフタイムを通して固定されます。変化するデータに関しては、state を使う方が良いでしょう。
 
In general, you should initialize state in the constructor, and then call setState when you want to change it.
 
一般的に言って、コンストラクタにおいて state を初期化し、それを変える場合には setState を用います。
 
For example, let’s say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a prop. The “whether the text is currently on or off” changes over time, so that should be kept in state.
 
例えば、テキストを時間経過にあわせて点滅させたいとします。テキスト自体は Blink コンポーネントが生成された際にコンポーネント自体に与えられ保持します。その際には prop 経由でテキストの内容を与えられます。
 
In a real application, you probably won’t be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like Redux to control your data flow. In that case you would use Redux to modify your state rather than calling setState directly.
 
実際のアプリケーションの場合には、state をタイマーを使ってセットするようなことはないでしょう。どちらかといえば、サーバーから新しいデータを取得した際や、ユーザーがインプットした際に、状態を変更するはずです。また Redux のような state container を用いて、data flow をコントロールすることもできます。その場合には Redux を使って状態を変更することになるので、setState をそのまま呼び出すことはありません。
 
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
 
setState が呼び出されると、BlinkApp は自分自身のコンポーネントを re-render します。Timer の中で setState を呼び出すことで、コンポーネントは Timer が駆動するたびに、コンポーネントを re-render します。
 
State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.
 
React Native における State は React における State と全く同じように動作しますので、state の扱いをより知りたい場合には React Component API を参照ください。さて、この時点では我々の例示が今のところは退屈な黒いだけのテキストであることに、苛立ちを感じていることでしょう。より装飾的にするために、次は Style を学んでいきます。
 

Style

With React Native, you don’t use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.
 
React Native 使う場合、スタイルを定義するための、特別な言語やシンタックスは必要ありません。単に JavaScript を使ってアプリケーションをスタイリングしていきます。全てのコアとなるコンポーネントは、style という名前の prop を受け付けます。スタイルの名前とあたいはほとんど web で一般的に使われる CSS と同じですが、例外は名前がキャメルケースを使って書かれているものです。例えば backgroundColor とすべきで、background-color としてはいけません。
 
The style prop can be a plain old JavaScript object. That’s the simplest and what we usually use for example code. You can also pass an array of styles – the last style in the array has precedence, so you can use this to inherit styles.
 
style prop は普通の伝統的な JavaScript のオブジェクトを渡します。これが一番シンプルな形式で、サンプルコードでは一般的にこのタイプが使われます。また style の配列を渡すこともできます。配列の最後のスタイルが適応されますので、これをつかってスタイルを継承させることができます。(訳注:おそらく、配列の前から後ろへと上書きされていくということがいわれていると思われる。)
 
As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here’s an example:
 
コンポーネントが複雑になるにつれて、StyleSheet.create を用いて複数のスタイルを一箇所にまとめた方が、より綺麗に整頓できるはずです。次のように。
 
One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles “cascade” the way they do in CSS.
 
よくある手法として、コンポーネントには一つだけの style prop を受け取らせて、それを用いてサブコンポーネントをもスタイリングさせる手法です。これを用いて style を “cascade” することができます。これは CSS でも行われる手法ですね。(訳注:よくわからない。実例が欲しいところ。)
 
There are a lot more ways to customize text style. Check out the Text component reference for a complete list.
 
text のスタイリングをする方法はたくさんあります。Text component のリファレンスを参照してください。
 
Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.
 
さあ Text を美しく装飾することができました。次なる style マスターへの一歩は、コンポーネントのサイズをコントロールすることです。
 

Height and Width

A component’s height and width determine its size on the screen.
 
コンポーネントの高さと幅の定義によって、スクリーン上に表示されるサイズを規定します。
 

Fixed Dimensions

 
固定サイズの場合
 
The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
コンポーネントの縦横幅を決める一番簡単な方法は、style で幅と高さを与えることです。React Native に置ける全ての縦横幅は、untiless で、density-independent pixel を表しています。(訳注:1px がどのような規格基準での 1px なのかを表していると思われる)
 
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
 
このような方法で縦横幅を設定する方法は、いつでも同じサイズでレンダリングされるべきコンポーネントのために一般的に使われます。スクリーンのサイズがどうであれ一定幅でレンダリングする場合です。
 

Flex Dimensions

 
状況に合わせて伸縮する縦横幅
 
Use flex in a component’s style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
 
コンポーネントの Style の中で flex を用いることで、使用可能なスペースに合わせて伸び縮みさせることができます。flex: 1 を用いると、コンポーネントに対して使えるスペース全部を埋めるように支持することになります。ただしその際に同じ親コンポーネントを持つ隣接するコンポーネントとその領域をわけあうことになります。flex の値が大きくなるほど、兄弟要素の間で、占める割合が増すことになります。
 
_A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
_
 
コンポーネントは使用可能なスペース全てを埋めるわけですが、それは親要素の縦横幅が 0 以上の場合に限られます。もし親要素に高さや幅を固定もしくは flex で指定されてない場合、親要素の縦横幅が 0 になってしまうので、その子要素に flex が指定されていたとしても、見えなくなってしまいます。
 
After you can control a component’s size, the next step is to learn how to lay it out on the screen.
 
コンポーネントのサイズをコントロールできるようになったので、次はスクリーン上にどのようにレイアウトするのかを学習します。

Leave a Reply

Your email address will not be published. Required fields are marked *