メインコンテンツへスキップ

ドキュメントの改善に向けて

·4分で読めます
Kevin Lacker
ケビン・ラッカー
Facebookのエンジニアリングマネージャー

優れた開発者体験を持つことの一部は、優れたドキュメントを持つことです。良いドキュメントを作成するには多くのことが必要です。理想的なドキュメントは、簡潔で、役立ち、正確で、完全で、そして楽しいものです。最近、私たちは皆様からのフィードバックに基づいてドキュメントを改善するために努力しており、行った改善点の一部を共有したいと思いました。

インライン例​

新しいライブラリ、新しいプログラミング言語、または新しいフレームワークを学ぶとき、最初に少しコードを書き、試してみて、それが機能するかどうかを確認する、美しい瞬間があります...そして、それは実際に機能します。あなたは何か現実的なものを作成しました。私たちはその実体験をドキュメントの中に直接入れたいと思いました。このように

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

Devin Abbott（@devinaabbott）の助けを借りて、react-native-web-playerモジュールを使用したこれらのインライン例は、React Nativeの基本を学ぶのに最適な方法だと考えています。また、可能な限りこれらを使用するために、新しいReact Native開発者向けのチュートリアルを更新しました。試してみてください。サンプルコードのほんの少しを変更したらどうなるのか知りたいと思ったことがあるなら、これは探索するのに非常に良い方法です。また、開発ツールを構築していて、自分のサイトでライブのReact Nativeサンプルを表示したい場合は、react-native-web-playerを使用すると、それが簡単になります。

コアシミュレーションエンジンは、Nicolas Gallagher（@necolas）のreact-native-webプロジェクトによって提供されています。これは、Web上でTextやViewのようなReact Nativeコンポーネントを表示する方法を提供します。コードベースの大部分を共有するモバイルおよびWebエクスペリエンスの構築に興味がある場合は、react-native-webをチェックしてください。

より良いガイド​

React Nativeの一部には、複数の方法で物事を実行する方法があり、より良いガイダンスを提供できるというフィードバックをいただきました。

私たちは、異なるアプローチを比較し、何を使用すべきかについてアドバイスする新しいナビゲーションガイドを用意しました - Navigator、NavigatorIOS、NavigationExperimental。中期的には、これらのインターフェイスの改善と統合に向けて取り組んでいます。短期的には、より良いガイドがあなたの生活を楽にすることを願っています。

また、ボタンのようなインターフェイスを作成する基礎の一部を説明する新しいタッチの処理に関するガイドと、タッチイベントを処理するさまざまな方法の簡単な概要もあります。

私たちが取り組んだもう1つの領域は、Flexboxです。これには、Flexboxを使用したレイアウトの処理方法と、コンポーネントのサイズを制御する方法に関するチュートリアルが含まれています。また、地味ですが役立つことを願って、React Nativeでのレイアウトを制御するすべてのプロパティのリストも含まれています。

はじめに​

React Native開発環境をマシンにセットアップし始めると、さまざまなものをインストールおよび構成する必要があります。インストールを本当に楽しくてエキサイティングな体験にするのは難しいですが、少なくともできる限り迅速かつ痛みのないものにすることができます。

私たちは、開発オペレーティングシステムとモバイルオペレーティングシステムを最初に選択できるようにする新しい「はじめに」ワークフローを構築し、すべてのセットアップ手順を1つの簡潔な場所に提供しました。また、インストールプロセス全体を見直し、すべてが機能すること、およびすべての意思決定ポイントに明確な推奨事項があることを確認しました。無害な同僚でテストした後、これは改善されたと確信しています。

また、既存のアプリへのReact Nativeの統合に関するガイドにも取り組みました。Facebookアプリ自体のように、React Nativeを使用する最大のアプリの多くは、実際にはアプリの一部をReact Nativeで構築し、一部を通常の開発ツールを使用して構築しています。このガイドが、より多くの人がこの方法でアプリを構築するのを容易にすることを願っています。

皆様の助けが必要です​

皆様からのフィードバックにより、何を優先すべきかがわかります。一部の人はこのブログ記事を読んで、「ドキュメントの改善？ふん。Xのドキュメントはまだゴミだ！」と思うでしょう。それは素晴らしいことです - そのエネルギーが必要です。私たちにフィードバックを与える最善の方法は、フィードバックの種類によって異なります。

不正確な説明や実際に機能しないコードなど、ドキュメントに間違いを見つけた場合は、問題を提出してください。「Documentation」タグを付けて、適切な人にルーティングしやすくしてください。

もし具体的な間違いではないものの、ドキュメントの内容が根本的に分かりにくい場合は、GitHub issueにはあまり適していません。代わりに、ドキュメントのどの部分が改善を必要としているかについて、Cannyに投稿してください。これは、ガイドの作成のような、より一般的な作業を行う際の優先順位付けに役立ちます。

ここまで読んでいただき、またReact Nativeをご利用いただきありがとうございます！