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

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


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


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

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

Tutorial: Intro To React

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

Before We Start


What We’re Building


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


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.




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 チュートリアル 日本語翻訳”