React チュートリアル 日本語翻訳

React-redux の実践的な動画コースを公開させていただきました。

以下のクーポンで割引価格で購入が可能です。

Udemy React Redux Course 割引適用のリンク

https://www.udemy.com/react-redux-basic/?couponCode=FROM_MY_SITE


 

GitLocalize 様より OSS プランをご提供頂きました。ありがとうございます。 GitLocalize は、GitHub リポジトリと連携して、翻訳作業をサポートしてくれるサービスです。 現在、以下のGitLocalize プロジェクトにて、修正作業を進行する予定です。https://gitlocalize.com/repo/153


勝手に日本語化シリーズ、今回は React の公式 Tutorial にチャレンジします。例によってわかりづらいところはかなり言葉を足しています。

https://facebook.github.io/react/tutorial/tutorial.html

Tutorial: Intro To React

チュートリアル:React への案内

Before We Start

始める前に

What We’re Building

作るもの

Today, we’re going to build an interactive tic-tac-toe game.

今日は、3目並べゲームを作っていきます。これはユーザー操作を受付け、それに反応して進んでいく、インタラクティブなゲームです。

If you like, you can check out the final result here: Final Result. Don’t worry if the code doesn’t make sense to you yet, or if it uses an unfamiliar syntax. We will be learning how to build this game step by step throughout this tutorial.

完成形をこちらから見ることもできます。でも、今のところ、コードが何を意味しているのかわからなくても、使われているシンタックスが見慣れないものであっても、心配しないで大丈夫です。これから段階的に、このゲームを作る方法を、チュートリアルを通して学んでいきましょう。

Try playing the game. You can also click on a link in the move list to go “back in time” and see what the board looked like just after that move was made.

まずは実際にゲームをプレイしてみてください。右側にある「move list」をクリックして、「時間を逆戻し」することもできます。これは使えば、その手を打った直後の状態に戻ることができます。

Once you get a little familiar with the game, feel free to close that tab, as we’ll start from a simpler template in the next sections.

ゲームの概要が大体理解できたら、タブを閉じて、まずはシンプルなテンプレートを作るところから始めていきましょう。

Prerequisites

前準備

We’ll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven’t used them before.

ある程度 HTML と JavaScript に慣れている前提で進めていきますが、全くそれらの知識がないかたも理解することは出来ると思います。

If you need a refresher on JavaScript, we recommend reading this guide. Note that we’re also using some features from ES6, a recent version of JavaScript. In this tutorial, we’re using arrow functionsclasseslet, and const statements. You can use Babel REPL to check what ES6 code compiles to.

過去に JS を書いていたけれどしばらく離れていて、久しぶりに JS に戻ってきた人には、このガイドを読むことをおすすめします。直近の JS バージョンである ES6 をの機能を使っていきますので。このチュートリアルでは、ES6の機能から、arrow functions, classes, それから let と const よる変数の宣言を用いていきます。Babel REPLを使えば ES6 のコードがどのようにコンパイルされるか確認するこができます。(訳注:フロントエンドをされている人には特に説明は必要ないとは思いますが、現在 gulp 等のタスクマネージャーを用いて、先行して策定されたバージョンであるES6で書いたJSを、ブラウザが認識できる現行のJSへとトランスコンパイルするのが標準的なワークフローです。ES6に馴染みがない、Gulp等に馴染みがない、という人は上記のガイドを参照するといいよ、とのことです。)

Continue reading “React チュートリアル 日本語翻訳”