From 26925d6a096680d2c1c06d08c8dc64c58f670bfe Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 24 Mar 2019 11:43:43 +0900 Subject: [PATCH 1/5] docs: translate static-type-checking.md --- content/docs/static-type-checking.md | 185 +++++++++++++-------------- 1 file changed, 92 insertions(+), 93 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 074e7f139..bffa6c99b 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -1,44 +1,44 @@ --- id: static-type-checking -title: Static Type Checking +title: 静的型チェック permalink: docs/static-type-checking.html prev: typechecking-with-proptypes.html next: refs-and-the-dom.html --- -Static type checkers like [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases. +[Flow](https://flow.org/) や [TypeScript](https://www.typescriptlang.org/) のような静的型言語を使用することでコードを実行する前の早期段階に型不整合等の問題を検知することができます。他にも型解析言語を使用することで補完などの機能が追加され、開発体験を上げることができます。これらの理由から、大きいコードベースでは `PropTypes` の代わりに Flow や Typescript を使うことをおすすめします。 ## Flow {#flow} -[Flow](https://flow.org/) is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. You can read an [introduction to Flow](https://flow.org/en/docs/getting-started/) to learn its basics. +[Flow](https://flow.org/) は JavaScript 用の型チェック機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。[はじめての Flow](https://flow.org/en/docs/getting-started/) に基本情報が記載されているので、それを読むと良いでしょう。 -To use Flow, you need to: +Flow を使用するには以下の手順を踏みます： -* Add Flow to your project as a dependency. -* Ensure that Flow syntax is stripped from the compiled code. -* Add type annotations and run Flow to check them. +* Flow をプロジェクトの Dependency に入れる。 +* Flow の記法をコンパイル時にコードから剥がす。 +* 型記法を追加し、Flow を起動して確認する。 -We will explain these steps below in detail. +順を追って説明します。 -### Adding Flow to a Project {#adding-flow-to-a-project} +### Flow をプロジェクトに追加する {#adding-flow-to-a-project} -First, navigate to your project directory in the terminal. You will need to run the following command: +まず、ターミナル上であなたのプロジェクトが含まれているディレクトリに入り、以下のコマンドを入力してください。 -If you use [Yarn](https://yarnpkg.com/), run: +[yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn add --dev flow-bin ``` -If you use [npm](https://www.npmjs.com/), run: +[npm](https://www.npmjs.com/) を使っている場合： ```bash npm install --save-dev flow-bin ``` -This command installs the latest version of Flow into your project. +このコマンドによって Flow の最新版をあなたのプロジェクトに入れることができます。 -Now, add `flow` to the `"scripts"` section of your `package.json` to be able to use this from the terminal: +次に、`package.json` の `"scripts"` に `flow` を追加しましょう。これで、ターミナルで Flow を実行できるようになります。 ```js{4} { @@ -51,53 +51,53 @@ Now, add `flow` to the `"scripts"` section of your `package.json` to be able to } ``` -Finally, run one of the following commands: +最後に、以下のコマンドを実行します： -If you use [Yarn](https://yarnpkg.com/), run: +[yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn run flow init ``` -If you use [npm](https://www.npmjs.com/), run: +[npm](https://www.npmjs.com/) を使っている場合： ```bash npm run flow init ``` -This command will create a Flow configuration file that you will need to commit. +このコマンドで Flow の設定ファイルを生成することができます。この設定ファイルは Git 管理しましょう。 -### Stripping Flow Syntax from the Compiled Code {#stripping-flow-syntax-from-the-compiled-code} +### Flow の記法をコンパイル時にコードから剥がす {#stripping-flow-syntax-from-the-compiled-code} -Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser. +Flow は JavaScript の拡張機能として、型定義の為の特殊な記法を使います。しかし、ブラウザはその記法について知らない為、コンパイル後の JavasScript バンドルに含まれないようにしなければいけません。 -The exact way to do this depends on the tools you use to compile JavaScript. +剥がす方法は使用している JavaScript のコンパイルツールによって変わってきます。 #### Create React App {#create-react-app} -If your project was set up using [Create React App](https://github.com/facebookincubator/create-react-app), congratulations! The Flow annotations are already being stripped by default so you don't need to do anything else in this step. +もし、あなたのプロジェクトが [Create React App](https://github.com/facebookincubator/create-react-app) によって生成されている場合、おめでとうございます！ 既にビルド時に Flow の記法は剥がされる設定になっているため、このステップで何もする必要はありません。 #### Babel {#babel} ->Note: +>注釈: > ->These instructions are *not* for Create React App users. Even though Create React App uses Babel under the hood, it is already configured to understand Flow. Only follow this step if you *don't* use Create React App. +>以下の手順は Create React App *以外*の方法で React をセットアップしている方向けです。Create React App もコンパイルに Babel を使用していますが、既に Flow を組み込める設定は含まれています。 -If you manually configured Babel for your project, you will need to install a special preset for Flow. +もし、あなたが手動で Babel の設定を行っていた場合、以下のコマンドで Flow 用の Babel プリセットをインストールする必要があります。 -If you use Yarn, run: +yarn を使っている場合： ```bash yarn add --dev babel-preset-flow ``` -If you use npm, run: +npm を使っている場合： ```bash npm install --save-dev babel-preset-flow ``` -Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs/usage/babelrc/). For example, if you configure Babel through `.babelrc` file, it could look like this: +そして、`flow` のプリセットを [Babel の設定ファイル](https://babeljs.io/docs/usage/babelrc/) に追加してください。例えば、Babel の設定を `.babelrc` ファイルで行っている場合は以下のようになります。 ```js{3} { @@ -108,50 +108,50 @@ Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs } ``` -This will let you use the Flow syntax in your code. +これであなたのコードで Flow の記法が使えるようになります。 ->Note: +>注釈: > ->Flow does not require the `react` preset, but they are often used together. Flow itself understands JSX syntax out of the box. +>Flow を使うためには必ず `react` のプリセットが必要というわけではありません。ただ、よく組み合わせて使われています。Flow はそのままでも JSX のシンタックスを認識できます。 -#### Other Build Setups {#other-build-setups} +#### 他のビルド設定 {#other-build-setups} -If you don't use either Create React App or Babel, you can use [flow-remove-types](https://github.com/flowtype/flow-remove-types) to strip the type annotations. +もし、Create React App も Babel も使用していない場合、[flow-remove-types](https://github.com/flowtype/flow-remove-types) を使って Flow の記法を剥がすことができます。 -### Running Flow {#running-flow} +### Flow の実行 {#running-flow} -If you followed the instructions above, you should be able to run Flow for the first time. +もし、今までの手順を踏んでいる場合、以下のコマンドで Flow が実行されます。 ```bash yarn flow ``` -If you use npm, run: +npm を使っている場合： ```bash npm run flow ``` -You should see a message like: +以下のようなメッセージが表示されます。 ``` No errors! ✨ Done in 0.17s. ``` -### Adding Flow Type Annotations {#adding-flow-type-annotations} +### Flow の型記法の追記 {#adding-flow-type-annotations} -By default, Flow only checks the files that include this annotation: +Flow の初期設定では、以下のコメントが含まれているファイルのみ型チェックを行います。 ```js // @flow ``` -Typically it is placed at the top of a file. Try adding it to some files in your project and run `yarn flow` or `npm run flow` to see if Flow already found any issues. +上記コメントは基本的にファイルの頭に記載します。あなたのプロジェクトのいくつかのファイルに足してみて、`yarn flow` や `npm run flow` を実行して Flow が問題を検知するかどうかを確認してみましょう。 -There is also [an option](https://flow.org/en/docs/config/options/#toc-all-boolean) to force Flow to check *all* files regardless of the annotation. This can be too noisy for existing projects, but is reasonable for a new project if you want to fully type it with Flow. +Flow の型チェックを、コメントが含まれているかにかかわらず*全て*のファイルに対してかける[設定](https://flow.org/en/docs/config/options/#toc-all-boolean)も存在します。これは既存のプロジェクトに対してかけると確認箇所が大量に出てしまいますが、新規プロジェクトの立ち上げで全てのファイルに型を入れたい場合は検討の余地があるでしょう。 -Now you're all set! We recommend to check out the following resources to learn more about Flow: +これで準備は整いました！ Flow についてより深く知りたい場合には以下の資料が役立つでしょう。 * [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/) * [Flow Documentation: Editors](https://flow.org/en/docs/editors/) @@ -160,49 +160,49 @@ Now you're all set! We recommend to check out the following resources to learn m ## TypeScript {#typescript} -[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler. Being a typed language, TypeScript can catch errors and bugs at build time, long before your app goes live. You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). +[TypeScript](https://www.typescriptlang.org/) は Microsoft によって開発されたプログラミング言語です。型を所有した Javascript のスーパーセットで、独自のコンパイラを所持しています。TypeScript は型言語であるため、実行前のビルド時にエラーやバグを検知することができます。React と TypeScript を組み合わせて使うことに関しては、[ここ](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter)にも詳しく記載されています。 -To use TypeScript, you need to: -* Add TypeScript as a dependency to your project -* Configure the TypeScript compiler options -* Use the right file extensions -* Add definitions for libraries you use +TypeScript を使うためには以下のことを行います。 +* TypeScript をプロジェクトの dependency に入れる。 +* TypeScript のコンパイラの設定を行う。 +* TS 用のファイル拡張子を使用する。 +* 使用するライブラリの型定義をインストールする。 -Let's go over these in detail. +順を追って説明します。 -### Using TypeScript with Create React App {#using-typescript-with-create-react-app} +### Create React App で TypeScript を使用する{#using-typescript-with-create-react-app} -Create React App supports TypeScript out of the box. +Create React App は最初から TypeScript のサポートが含まれています。 -To create a **new project** with TypeScript support, run: +TypeScript サポートが含まれている**新規プロジェクト**を作成するには、以下のコマンドを実行します。 ```bash npx create-react-app my-app --typescript ``` -You can also add it to an **existing Create React App project**, [as documented here](https://facebook.github.io/create-react-app/docs/adding-typescript). +[この資料に記載されているように、](https://facebook.github.io/create-react-app/docs/adding-typescript)**既存の Create React App のプロジェクト**にも TypeScript のサポートを追加することができます。 ->Note: +>注釈: > ->If you use Create React App, you can **skip the rest of this page**. It describes the manual setup which doesn't apply to Create React App users. +>もし、Create React App を使っている場合、**以下の記述は全て飛ばして大丈夫です**。Create React App を使用していない場合のセットアップ手順について記載しています。 -### Adding TypeScript to a Project {#adding-typescript-to-a-project} -It all begins with running one command in your terminal. +### TypeScript をプロジェクトに追加する {#adding-typescript-to-a-project} +全ては Typescript をインストールするところから始まります。プロジェクトが入っているフォルダで以下のコマンドを入力してください。 -If you use [Yarn](https://yarnpkg.com/), run: +[yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn add --dev typescript ``` -If you use [npm](https://www.npmjs.com/), run: +[npm](https://www.npmjs.com/) を使っている場合： ```bash npm install --save-dev typescript ``` -Congrats! You've installed the latest version of TypeScript into your project. Installing TypeScript gives us access to the `tsc` command. Before configuration, let's add `tsc` to the "scripts" section in our `package.json`: +おめでとうございます！ これで最新の TypeScript があなたのプロジェクトにインストールされました。これによって、`tsc` コマンドが使えるようになります。設定をする前に、まずは `tsc` を `package.json` の `"scripts"` に追加しましょう。 ```js{4} { @@ -215,27 +215,27 @@ Congrats! You've installed the latest version of TypeScript into your project. I } ``` -### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler} -The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file: +### TypeScript コンパイラの設定 {#configuring-the-typescript-compiler} +コンパイラはこちらから設定しないと無価値です。TypeScript ではコンパイラの設定は `tsconfig.json` というファイルに含みます。このファイルの生成するには以下のコマンドを実行してください。 -If you use [Yarn](https://yarnpkg.com/), run: +[yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn run tsc --init ``` -If you use [npm](https://www.npmjs.com/), run: +[npm](https://www.npmjs.com/) を使っている場合： ```bash npx tsc --init ``` -Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). +新しく生成された `tsconfig.json` をみてみると、コンパイラの為に様々なオプションが設定できることがわかります。これら全てのオプションの詳細に関しては[こちら](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)を参照してください。 -Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output. +たくさんの設定の中から `rootDir` と `outDir` に注目します。本来、コンパイラは TypeScript のファイルから JavaScript のファイルを生成します。しかし、既存のソースコードと生成されたコードが混合してしまうことは避けるべきです。 -We'll address this in two steps: -* Firstly, let's arrange our project structure like this. We'll place all our source code in the `src` directory. +以上の問題を 2 つの手順によって対応します。 +* まず、プロジェクトの構成を以下の用に変更しましょう。全てのソースコードを `src` ディレクトリに移動します。 ``` ├── package.json @@ -244,7 +244,7 @@ We'll address this in two steps: └── tsconfig.json ``` -* Next, we'll tell the compiler where our source code is and where the output should go. +* 次に、`tsconfig.json` を編集してコンパイラにソースコードの場所と生成する場所を設定します。 ```js{6,7} // tsconfig.json @@ -259,40 +259,39 @@ We'll address this in two steps: } ``` -Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started. +素晴らしい！ これで `build` のスクリプトを実行した際、コンパイラが生成したコードは `build` ディレクトリに格納されます。他の設定に関しては、[TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) に React プロジェクト始めるのにおすすめな `tsconfig.json` を提供しているので、そちらを参照してください。 -Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`. +基本的に、生成された JavaScript のコードは Git 管理するべきではありません。build フォルダは `.gitignore` に追記しましょう。 -### File extensions {#file-extensions} -In React, you most likely write your components in a `.js` file. In TypeScript we have 2 file extensions: +### ファイル拡張子 {#file-extensions} +React ではほとんどのコンポーネントを `.js` や `.jsx` ファイルに書いていたと思います。TypeScript には 2 種類のファイル拡張子が存在します。 -`.ts` is the default file extension while `.tsx` is a special extension used for files which contain `JSX`. +`.ts` がデフォルトの拡張子で、`JSX` が含まれているファイルは `.tsx` を使います。 -### Running TypeScript {#running-typescript} +### TypeScript の実行 {#running-typescript} -If you followed the instructions above, you should be able to run TypeScript for the first time. +上記の手順を踏んでいれば、以下のコマンドで TypeScript を実行することができます。 ```bash yarn build ``` -If you use npm, run: +[npm](https://www.npmjs.com/) を使っている場合： ```bash npm run build ``` -If you see no output, it means that it completed successfully. +実行結果に何も表示されない場合は、正常に完了したと言うことです。 +### 型宣言 {#type-definitions} +他のライブラリを使用している時の型エラーやヒントを表示させるために、コンパイラは型宣言ファイルを参照します。型宣言ファイルにはそのライブラリが使用する全ての型の情報が含まれています。これを使うことによって、npm 等から取得した JavaScript のライブラリをそのまま使うことができます。 -### Type Definitions {#type-definitions} -To be able to show errors and hints from other packages, the compiler relies on declaration files. A declaration file provides all the type information about a library. This enables us to use javascript libraries like those on npm in our project. +ライブラリの型宣言ファイルを取得するには主に以下の 2 つの方法があります。 -There are two main ways to get declarations for a library: +__Bundled__ - これはライブラリ自体が型宣言ファイルを所有している場合です。この場合、ライブラリをインストールするだけでそのまま使用することができます。ライブラリが型宣言ファイルを所有しているかどうかは、プロジェクトに `index.d.ts` ファイルがあるかどうかを確認します。一部のライブラリは `package.json` の `typings`、または `types` の下に型宣言ファイルのパスを指定しています。 -__Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field. - -__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped is a huge repository of declarations for libraries that don't bundle a declaration file. The declarations are crowd-sourced and managed by Microsoft and open source contributors. React for example doesn't bundle its own declaration file. Instead we can get it from DefinitelyTyped. To do so enter this command in your terminal. +__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped には様々な型宣言ファイルが含まれていないライブラリの型定義が用意されています。これらの型定義はクラウドソースにより Microsoft とオープンソースのコントリビュータが管理しています。例えば、React には型宣言ファイルが含まれておりませんが、DefinitelyTyped から取得することができます。取得するにはターミナルに以下のコマンドを入力してください。 ```bash # yarn @@ -302,8 +301,8 @@ yarn add --dev @types/react npm i --save-dev @types/react ``` -__Local Declarations__ -Sometimes the package that you want to use doesn't bundle declarations nor is it available on DefinitelyTyped. In that case, we can have a local declaration file. To do this, create a `declarations.d.ts` file in the root of your source directory. A simple declaration could look like this: +__ローカル型定義__ +もし、使用しているライブラリに型宣言ファイルが含まれておらず、DefinitelyTyped にも該当する型宣言ファイルが無い場合、自前で型宣言ファイルを作成することができます。それを行うには `declarations.d.ts` をソースディレクトリのルートに作成します。型宣言は以下の様に行なえます。 ```typescript declare module 'querystring' { @@ -312,7 +311,7 @@ declare module 'querystring' { } ``` -You are now ready to code! We recommend to check out the following resources to learn more about TypeScript: +これでコードを書く準備は整いました！ Typescript についてより深く知りたい場合には以下の資料が役立つでしょう。 * [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) * [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) @@ -320,16 +319,16 @@ You are now ready to code! We recommend to check out the following resources to ## Reason {#reason} -[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](https://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know. +[Reason](https://reasonml.github.io/) は新しい言語ではありません。歴戦の言語である [OCaml](https://ocaml.org/) によって動く新しい記法及びツールチェインです。Reason は OCaml に JavaScript を書く人には見慣れた記法を提供し、既存の NPM/Yarn を使ったワークフローに寄せています。 -Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html). +Reason は Facebook で開発されており、Messenger 等のプロダクトに既に使われてます。まだ試験的段階ですが、Facebook によって管理された [React を書くためのライブラリ](https://reasonml.github.io/reason-react/) や、[活発なコミュニティ](https://reasonml.github.io/docs/en/community.html)が存在します。 ## Kotlin {#kotlin} -[Kotlin](https://kotlinlang.org/) is a statically typed language developed by JetBrains. Its target platforms include the JVM, Android, LLVM, and [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). +[Kotlin](https://kotlinlang.org/) は JetBrains により開発された静的型言語です。JVM、Android、LLVM、や [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html) といったプラットフォームを対象としています。 -JetBrains develops and maintains several tools specifically for the React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) as well as [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). The latter helps you start building React apps with Kotlin with no build configuration. +JetBrains は [React bindings](https://github.com/JetBrains/kotlin-wrappers) や [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app) のような様々な React コミュニティの為のツールの開発、運営を行っています。後者は React アプリをビルド設定いらずで Kotlin で書き始めることができます。 -## Other Languages {#other-languages} +## 他の言語 {#other-languages} -Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](https://fable.io/) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page! +JavaScript にコンパイルされ、React にも活用できる静的型言語は他にも存在します。例えば、[F#/Fable](https://fable.io/) と [elmish-react](https://elmish.github.io/react) の活用です。詳細はそれぞれのサイトを確認してください。他にも React を活用できる静的型言語があれば、ぜひこのページに追記してください！ From 7b1eb7bf0dfd9ac97a6ef6f77f2e9ddf84beb8f3 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sat, 6 Apr 2019 08:40:47 +0900 Subject: [PATCH 2/5] docs: apply review fixes --- content/docs/static-type-checking.md | 53 ++++++++++++++-------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index bffa6c99b..6322d1e05 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,16 +6,16 @@ prev: typechecking-with-proptypes.html next: refs-and-the-dom.html --- -[Flow](https://flow.org/) や [TypeScript](https://www.typescriptlang.org/) のような静的型言語を使用することでコードを実行する前の早期段階に型不整合等の問題を検知することができます。他にも型解析言語を使用することで補完などの機能が追加され、開発体験を上げることができます。これらの理由から、大きいコードベースでは `PropTypes` の代わりに Flow や Typescript を使うことをおすすめします。 +[Flow](https://flow.org/) や [TypeScript](https://www.typescriptlang.org/) のような静的型チェッカーを使用することでコードを実行する前の早期段階に型不整合等の問題を検知することができます。他にも型解析言語を使用することで補完などの機能が追加され、開発体験を上げることができます。これらの理由から、大きいコードベースでは `PropTypes` の代わりに Flow や TypeScript を使うことをおすすめします。 ## Flow {#flow} -[Flow](https://flow.org/) は JavaScript 用の型チェック機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。[はじめての Flow](https://flow.org/en/docs/getting-started/) に基本情報が記載されているので、それを読むと良いでしょう。 +[Flow](https://flow.org/) は JavaScript 用の静的型チェッカー機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。[はじめての Flow](https://flow.org/en/docs/getting-started/) に基本情報が記載されているので、それを読むと良いでしょう。 Flow を使用するには以下の手順を踏みます： -* Flow をプロジェクトの Dependency に入れる。 -* Flow の記法をコンパイル時にコードから剥がす。 +* Flow をプロジェクトの dependency に入れる。 +* Flow の記法をコンパイル時にコードから剥がすように設定する。 * 型記法を追加し、Flow を起動して確認する。 順を追って説明します。 @@ -24,7 +24,7 @@ Flow を使用するには以下の手順を踏みます： まず、ターミナル上であなたのプロジェクトが含まれているディレクトリに入り、以下のコマンドを入力してください。 -[yarn](https://yarnpkg.com/) を使っている場合： +[Yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn add --dev flow-bin @@ -53,7 +53,7 @@ npm install --save-dev flow-bin 最後に、以下のコマンドを実行します： -[yarn](https://yarnpkg.com/) を使っている場合： +[Yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn run flow init @@ -65,11 +65,11 @@ yarn run flow init npm run flow init ``` -このコマンドで Flow の設定ファイルを生成することができます。この設定ファイルは Git 管理しましょう。 +このコマンドで Flow の設定ファイルを生成することができます。この設定ファイルはバージョン管理しましょう。 ### Flow の記法をコンパイル時にコードから剥がす {#stripping-flow-syntax-from-the-compiled-code} -Flow は JavaScript の拡張機能として、型定義の為の特殊な記法を使います。しかし、ブラウザはその記法について知らない為、コンパイル後の JavasScript バンドルに含まれないようにしなければいけません。 +Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を使えるようにします。しかし、ブラウザはその記法について知らない為、ブラウザに送信されるコンパイル後の JavasScript バンドルに含まれないようにしなければいけません。 剥がす方法は使用している JavaScript のコンパイルツールによって変わってきます。 @@ -79,9 +79,9 @@ Flow は JavaScript の拡張機能として、型定義の為の特殊な記法 #### Babel {#babel} ->注釈: +>補足: > ->以下の手順は Create React App *以外*の方法で React をセットアップしている方向けです。Create React App もコンパイルに Babel を使用していますが、既に Flow を組み込める設定は含まれています。 +>以下の手順は Create React App で React をセットアップしている方向けでは*ありません*。Create React App も内部で Babel を使用していますが、既に Flow を使えるように設定されています。以下の手順は Create React App を使って*いない*場合のみ実行してください。 もし、あなたが手動で Babel の設定を行っていた場合、以下のコマンドで Flow 用の Babel プリセットをインストールする必要があります。 @@ -110,7 +110,7 @@ npm install --save-dev babel-preset-flow これであなたのコードで Flow の記法が使えるようになります。 ->注釈: +>補足: > >Flow を使うためには必ず `react` のプリセットが必要というわけではありません。ただ、よく組み合わせて使われています。Flow はそのままでも JSX のシンタックスを認識できます。 @@ -147,9 +147,9 @@ Flow の初期設定では、以下のコメントが含まれているファイ // @flow ``` -上記コメントは基本的にファイルの頭に記載します。あなたのプロジェクトのいくつかのファイルに足してみて、`yarn flow` や `npm run flow` を実行して Flow が問題を検知するかどうかを確認してみましょう。 +上記コメントは基本的にファイルの頭に記載します。あなたのプロジェクトのいくつかのファイルに足してみて、`yarn flow` や `npm run flow` を実行して Flow が何か問題を検知するかどうかを確認してみましょう。 -Flow の型チェックを、コメントが含まれているかにかかわらず*全て*のファイルに対してかける[設定](https://flow.org/en/docs/config/options/#toc-all-boolean)も存在します。これは既存のプロジェクトに対してかけると確認箇所が大量に出てしまいますが、新規プロジェクトの立ち上げで全てのファイルに型を入れたい場合は検討の余地があるでしょう。 +Flow の型チェックを、コメントが含まれているかにかかわらず*全て*のファイルに対してかける[設定](https://flow.org/en/docs/config/options/#toc-all-boolean)も存在します。これは既存のプロジェクトに対してかけると確認箇所が大量に出てしまいますが、新規プロジェクトの立ち上げで全てのファイルに型を入れたい場合は合理的な選択でしょう。 これで準備は整いました！ Flow についてより深く知りたい場合には以下の資料が役立つでしょう。 @@ -165,7 +165,7 @@ Flow の型チェックを、コメントが含まれているかにかかわら TypeScript を使うためには以下のことを行います。 * TypeScript をプロジェクトの dependency に入れる。 * TypeScript のコンパイラの設定を行う。 -* TS 用のファイル拡張子を使用する。 +* TypeScript 用のファイル拡張子を使用する。 * 使用するライブラリの型定義をインストールする。 順を追って説明します。 @@ -182,15 +182,15 @@ npx create-react-app my-app --typescript [この資料に記載されているように、](https://facebook.github.io/create-react-app/docs/adding-typescript)**既存の Create React App のプロジェクト**にも TypeScript のサポートを追加することができます。 ->注釈: +>補足: > >もし、Create React App を使っている場合、**以下の記述は全て飛ばして大丈夫です**。Create React App を使用していない場合のセットアップ手順について記載しています。 ### TypeScript をプロジェクトに追加する {#adding-typescript-to-a-project} -全ては Typescript をインストールするところから始まります。プロジェクトが入っているフォルダで以下のコマンドを入力してください。 +全ては TypeScript をインストールするところから始まります。プロジェクトが入っているフォルダで以下のコマンドを入力してください。 -[yarn](https://yarnpkg.com/) を使っている場合： +[Yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn add --dev typescript @@ -216,9 +216,9 @@ npm install --save-dev typescript ``` ### TypeScript コンパイラの設定 {#configuring-the-typescript-compiler} -コンパイラはこちらから設定しないと無価値です。TypeScript ではコンパイラの設定は `tsconfig.json` というファイルに含みます。このファイルの生成するには以下のコマンドを実行してください。 +コンパイラはこちらから設定しないと無価値です。TypeScript ではコンパイラの設定は `tsconfig.json` というファイルで定義します。このファイルの生成するには以下のコマンドを実行してください。 -[yarn](https://yarnpkg.com/) を使っている場合： +[Yarn](https://yarnpkg.com/) を使っている場合： ```bash yarn run tsc --init @@ -230,7 +230,7 @@ yarn run tsc --init npx tsc --init ``` -新しく生成された `tsconfig.json` をみてみると、コンパイラの為に様々なオプションが設定できることがわかります。これら全てのオプションの詳細に関しては[こちら](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)を参照してください。 +新しく生成された `tsconfig.json` を見てみると、コンパイラ設定用の様々なオプションがあることがわかります。これら全てのオプションの詳細に関しては[こちら](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)を参照してください。 たくさんの設定の中から `rootDir` と `outDir` に注目します。本来、コンパイラは TypeScript のファイルから JavaScript のファイルを生成します。しかし、既存のソースコードと生成されたコードが混合してしまうことは避けるべきです。 @@ -261,10 +261,10 @@ npx tsc --init 素晴らしい！ これで `build` のスクリプトを実行した際、コンパイラが生成したコードは `build` ディレクトリに格納されます。他の設定に関しては、[TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) に React プロジェクト始めるのにおすすめな `tsconfig.json` を提供しているので、そちらを参照してください。 -基本的に、生成された JavaScript のコードは Git 管理するべきではありません。build フォルダは `.gitignore` に追記しましょう。 +基本的に、生成された JavaScript のコードはバージョン管理するべきではありません。`build` フォルダは `.gitignore` に追記しましょう。 ### ファイル拡張子 {#file-extensions} -React ではほとんどのコンポーネントを `.js` や `.jsx` ファイルに書いていたと思います。TypeScript には 2 種類のファイル拡張子が存在します。 +React ではおそらくコンポーネントを `.js` ファイルに書いていたと思います。TypeScript には 2 種類のファイル拡張子が存在します。 `.ts` がデフォルトの拡張子で、`JSX` が含まれているファイルは `.tsx` を使います。 @@ -284,14 +284,15 @@ npm run build 実行結果に何も表示されない場合は、正常に完了したと言うことです。 + ### 型宣言 {#type-definitions} 他のライブラリを使用している時の型エラーやヒントを表示させるために、コンパイラは型宣言ファイルを参照します。型宣言ファイルにはそのライブラリが使用する全ての型の情報が含まれています。これを使うことによって、npm 等から取得した JavaScript のライブラリをそのまま使うことができます。 ライブラリの型宣言ファイルを取得するには主に以下の 2 つの方法があります。 -__Bundled__ - これはライブラリ自体が型宣言ファイルを所有している場合です。この場合、ライブラリをインストールするだけでそのまま使用することができます。ライブラリが型宣言ファイルを所有しているかどうかは、プロジェクトに `index.d.ts` ファイルがあるかどうかを確認します。一部のライブラリは `package.json` の `typings`、または `types` の下に型宣言ファイルのパスを指定しています。 +__Bundled__ - これはライブラリ自体が型宣言ファイルを所有している場合です。この場合、ライブラリをインストールするだけでそのまま使用することができます。ライブラリが型宣言ファイルを所有しているかどうか確認するには、プロジェクトに `index.d.ts` ファイルがあるかどうかをみます。一部のライブラリは `package.json` の `typings`、または `types` の下に型宣言ファイルのパスを指定しています。 -__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped には様々な型宣言ファイルが含まれていないライブラリの型定義が用意されています。これらの型定義はクラウドソースにより Microsoft とオープンソースのコントリビュータが管理しています。例えば、React には型宣言ファイルが含まれておりませんが、DefinitelyTyped から取得することができます。取得するにはターミナルに以下のコマンドを入力してください。 +__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped には型宣言ファイルがバンドルされていない様々なライブラリのための型定義が用意されています。これらの型定義はクラウドソースにより Microsoft とオープンソースのコントリビュータが管理しています。例えば、React には型宣言ファイルが含まれておりませんが、DefinitelyTyped から取得することができます。取得するにはターミナルに以下のコマンドを入力してください。 ```bash # yarn @@ -302,7 +303,7 @@ npm i --save-dev @types/react ``` __ローカル型定義__ -もし、使用しているライブラリに型宣言ファイルが含まれておらず、DefinitelyTyped にも該当する型宣言ファイルが無い場合、自前で型宣言ファイルを作成することができます。それを行うには `declarations.d.ts` をソースディレクトリのルートに作成します。型宣言は以下の様に行なえます。 +もし、使用しているライブラリに型宣言ファイルが含まれておらず、DefinitelyTyped にも該当する型宣言ファイルがない場合、自前で型宣言ファイルを作成することができます。それを行うには `declarations.d.ts` をソースディレクトリのルートに作成します。型宣言は以下のように行なえます。 ```typescript declare module 'querystring' { @@ -331,4 +332,4 @@ JetBrains は [React bindings](https://github.com/JetBrains/kotlin-wrappers) や ## 他の言語 {#other-languages} -JavaScript にコンパイルされ、React にも活用できる静的型言語は他にも存在します。例えば、[F#/Fable](https://fable.io/) と [elmish-react](https://elmish.github.io/react) の活用です。詳細はそれぞれのサイトを確認してください。他にも React を活用できる静的型言語があれば、ぜひこのページに追記してください！ +JavaScript にコンパイルされ、React にも活用できる静的型言語は他にも存在します。例えば、[F#/Fable](https://fable.io/) と [elmish-react](https://elmish.github.io/react) の組み合わせです。詳細はそれぞれのサイトを確認してください。他にも React を活用できる静的型言語があれば、ぜひこのページに追記してください！ From 556bee87a3c44716a91c6ee099a3cac314ef5773 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sat, 6 Apr 2019 09:00:31 +0900 Subject: [PATCH 3/5] docs: keep consistency for type annotation --- content/docs/static-type-checking.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 6322d1e05..14ee0e401 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -15,8 +15,8 @@ next: refs-and-the-dom.html Flow を使用するには以下の手順を踏みます： * Flow をプロジェクトの dependency に入れる。 -* Flow の記法をコンパイル時にコードから剥がすように設定する。 -* 型記法を追加し、Flow を起動して確認する。 +* Flow の型定義をコンパイル時にコードから剥がすように設定する。 +* 型定義を追加し、Flow を起動して確認する。 順を追って説明します。 @@ -67,7 +67,7 @@ npm run flow init このコマンドで Flow の設定ファイルを生成することができます。この設定ファイルはバージョン管理しましょう。 -### Flow の記法をコンパイル時にコードから剥がす {#stripping-flow-syntax-from-the-compiled-code} +### Flow の型定義をコンパイル時にコードから剥がす {#stripping-flow-syntax-from-the-compiled-code} Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を使えるようにします。しかし、ブラウザはその記法について知らない為、ブラウザに送信されるコンパイル後の JavasScript バンドルに含まれないようにしなければいけません。 @@ -75,7 +75,7 @@ Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を #### Create React App {#create-react-app} -もし、あなたのプロジェクトが [Create React App](https://github.com/facebookincubator/create-react-app) によって生成されている場合、おめでとうございます！ 既にビルド時に Flow の記法は剥がされる設定になっているため、このステップで何もする必要はありません。 +もし、あなたのプロジェクトが [Create React App](https://github.com/facebookincubator/create-react-app) によって生成されている場合、おめでとうございます！ 既にビルド時に Flow の型定義は剥がされる設定になっているため、このステップで何もする必要はありません。 #### Babel {#babel} @@ -108,7 +108,7 @@ npm install --save-dev babel-preset-flow } ``` -これであなたのコードで Flow の記法が使えるようになります。 +これであなたのコードで Flow の型定義が使えるようになります。 >補足: > @@ -116,7 +116,7 @@ npm install --save-dev babel-preset-flow #### 他のビルド設定 {#other-build-setups} -もし、Create React App も Babel も使用していない場合、[flow-remove-types](https://github.com/flowtype/flow-remove-types) を使って Flow の記法を剥がすことができます。 +もし、Create React App も Babel も使用していない場合、[flow-remove-types](https://github.com/flowtype/flow-remove-types) を使って Flow の型定義を剥がすことができます。 ### Flow の実行 {#running-flow} @@ -139,7 +139,7 @@ No errors! ✨ Done in 0.17s. ``` -### Flow の型記法の追記 {#adding-flow-type-annotations} +### Flow の型定義の追記 {#adding-flow-type-annotations} Flow の初期設定では、以下のコメントが含まれているファイルのみ型チェックを行います。 From b88ae865fe7ff3da45e043bd2a0169866719d0ed Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sat, 6 Apr 2019 09:01:20 +0900 Subject: [PATCH 4/5] docs: change checker to check function --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 14ee0e401..3beb5ea20 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -10,7 +10,7 @@ next: refs-and-the-dom.html ## Flow {#flow} -[Flow](https://flow.org/) は JavaScript 用の静的型チェッカー機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。[はじめての Flow](https://flow.org/en/docs/getting-started/) に基本情報が記載されているので、それを読むと良いでしょう。 +[Flow](https://flow.org/) は JavaScript 用の静的型チェック機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。[はじめての Flow](https://flow.org/en/docs/getting-started/) に基本情報が記載されているので、それを読むと良いでしょう。 Flow を使用するには以下の手順を踏みます： From 41f05df14e9b225875372f3f372dbbe5489a3e26 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sat, 6 Apr 2019 09:09:07 +0900 Subject: [PATCH 5/5] docs: dix typo for JavaScript --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 3beb5ea20..2fd38630d 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -69,7 +69,7 @@ npm run flow init ### Flow の型定義をコンパイル時にコードから剥がす {#stripping-flow-syntax-from-the-compiled-code} -Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を使えるようにします。しかし、ブラウザはその記法について知らない為、ブラウザに送信されるコンパイル後の JavasScript バンドルに含まれないようにしなければいけません。 +Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を使えるようにします。しかし、ブラウザはその記法について知らない為、ブラウザに送信されるコンパイル後の JavaScript バンドルに含まれないようにしなければいけません。 剥がす方法は使用している JavaScript のコンパイルツールによって変わってきます。