React 公式よりももっと低レベルなところから始める、React チュートリアル

React が必要になる状況

いつ React が必要になるのでしょうか？

例えば次のサンプルのように、DOMを増減するアプリケーションがあるとして、設計について特に考慮せずにjQueryで単純にDOMを増減させると、目的は達成できるのですが、現在のアプリケーションの「状態」を確認することが非常に難しくなります。例えば、青いブロックが今何個あるのか、といったことを確認するためにはDOM全体を捜査しなければわかりません。

See the Pen React easy tutrial1 by nakanishi (@nakanishi) on CodePen.

そして、状態の管理が難しいと、いつかアプリケーションが破綻します。

上記のアプリケーションがなぜ状態管理が難しいか

上記のアプリケーションの状態管理がなぜ難しいかというと、状態がすべて本物のDOMとして管理されているために、毎回それを捜査・取得する必要があるからです。もし最初からJSの変数に情報が入っていれば、こんなことはしなくてすみます。

ですから、状態をJSで管理して、その状態をjQueryで反映させる、というコードに書き換えてみます。

jQueryで、状態をrenderするような書き方

次のコードは、一箇所に状態を集めて、その状態を元にDOMを作成し、レンダリングするような方式をとっています。

See the Pen React easy tutrial2 by nakanishi (@nakanishi) on CodePen.

ただしこれでもマイナス点はあって、一旦DOMをすべて削除してから、再度すべてを再レンダリングしているので、無駄が非常に多いという問題があります。できれば変更されたところだけをレンダリングし直してほしいわけです。そのほうが負荷を小さくできるわけですから。

それを実現してくれるのがReactやVueといった、仮想DOMというシステムもとにしたライブラリやフレームワークです。

Reactを始める

次のコードはReactを使ったコードです。ボタンをクリックすると、Hello,の後ろの名前が変更されます。しかしこの変更は先ほどまでのコードのようにjQueryでDOMを直接変更してはいません。あくまで、「状態管理をしている変数の値だけを変更」しています。そして、状態が変更された結果、Reactがそれを察知して、View=実際に目に見えるDOMを変更します。

See the Pen React myTutrial1 by nakanishi (@nakanishi) on CodePen.

Freezeとexpectで、mutateのチェックと、テスト

//reducer
const todos = (state = [], action) => {
	//受け取ったアクションのtypeによって切り替わる
	switch (action.type){
		case 'ADD_TODO':
			//stateは配列なので、その中に追加で新しいオブジェクトを与える。
			//与える新しいオブジェクトは、渡されたactionの中の情報を元に生成される
			return [
				...state,
				{
					id: action.id,
					text: action.text,
					completed: false,
				}
			];
	}
};

//deepFreezeはmutateしていないかをチェックするライブラリ
//expectはテスト用のライブラリ
const testAddTodo = () => {
	const stateBefore = [];
	const action = {
		type: 'ADD_TODO',
		id: 0,
		text: 'Test Text',
	};
	
	const stateAfter = [{
		id: 0,
		text: 'Test Text',
		completed: false
	}];
	
	//stateBrforeとactionがmutateしていないかをチェック
	deepFreeze(stateBefore);
	deepFreeze(action);
	
	//todosというファンクションを実行した時に、
	//帰ってくる値が、stateAfterと同じかを.toEqualメソッドで確認
	expect(
		todos(stateBefore, action)
	).toEqual(stateAfter);
};

//テストを実行。問題あればコンソールにでる。(クロームのコンソールの方をチェック)
testAddTodo();
console.log('All tests passed');

See the Pen BdadMV by nakanishi (@nakanishi) on CodePen.

Redux チュートリアルで必要になったES6記法 immutableに配列やオブジェクトを変更する

// オブジェクトを引数として受けて、それを展開する書き方
// Propertyがvalueとnameのものを展開して、valueとnameで受ける
const testFunction = ({value,name}) => (value + name)

const testObject = {
	value: "a",
	name: "b",
}

console.log(testFunction(testObject));
console.log("tesf")


//リストに新たな項目を追加する方法
const list =[0,1,2,3];

const addList = (list) => {
	return [...list,"add"];
}

console.log(addList(list));

// slice(n)はn番目を含んでそれ以降の配列を返す
var newList = list.slice(2)
//console.log(newList);

// slice(0,n)は0から、n番目を含まない、その範囲の配列を返す
var newList = list.slice(0,2)
//console.log(newList);

// slice(m,n)はmから、n番目を含まない、その範囲の配列を返す
var newList = list.slice(1,2)
//console.log(newList);

// index 番目(0から始まるやつで) の配列だけを削除するFn
const removeCounter = (list, index) => {
  // Old way:
  //return list
  //  .slice(0, index)
  //  .concat(list.slice(index + 1));

  // ES6 way:
  return [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];
};

console.log(removeCounter(list,1))

See the Pen arrow function object by nakanishi (@nakanishi) on CodePen.

//オブジェクトにオブジェクトをマージする場合の書き方
const addObject = (lastObject, addOne) => {
	//からのオブジェクト{}に、どんどん上書きしていく
	return Object.assign({}, lastObject, addOne)
}

const lastObject = {
	name: "name",
	value: "value"
}

const add1 = {
	name: "name2",
	value: "value2"
}

const add2 = {
	newProp: "newProp"
}

//同じプロパティがあれば、上書きされる
var show = addObject(lastObject, add1);
//console.log(show);

//同じプロパティがなければ、新たにプロパティが作られる
var show = addObject(lastObject, add2);
console.log(show);

See the Pen JyjypY by nakanishi (@nakanishi) on CodePen.

Redux 公式ドキュメント 日本語に一部翻訳

http://redux.js.org/

Redux の概要

The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.

あなたが作っているアプリケーションの状態 state を全て、たったひとつのオブジェクトで管理し、そしてそれを”store” という変数に入れる。(訳注：もしくは store という概念と紐付けて運用する) 状態を変更する方法は制限されており、”action”を発行する(=emit) 方法だけしかない。action は”何を起こすか”が述べられているオブジェクトである。”action”が状態に対して、どのような変更を加えるのかは、”reducer” によって定義する。reducer は純粋関数である必要がある。

(訳注：純粋関数については例えばこの記事を参照。Redux と state の関連では、私が理解する限り、関数の引数で与えられたもの以外の変動する値を関数内部で使わない(例えば引数では与えられていないグローバル変数など)、引数で与えられたものそのものを変更しない＝イミュータブル、return で新たなstateを返す、というルールを守れば良い。)

That’s it!

Redux の要旨はそれで全て！

“Redux 公式ドキュメント 日本語に一部翻訳” の続きを読む

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

 

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 functions, classes, let, 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等に馴染みがない、という人は上記のガイドを参照するといいよ、とのことです。)

“React チュートリアル 日本語翻訳” の続きを読む

React入門メモ

前身：XHP→Facebookが開発。PHPのフレームワークをJSに移植したもの。そのため「毎回ページをレンダリングし直す 」という特徴がある。

MVCのうち、Vのみを担当する。

stateの変更→render関数→仮想ページ→最終的なDOMの更新

JSX

Reactのコンポーネント内でマークアップ言語を記述するためのシンタックス。最終的には完全なJSにトランスコンパイルされる。

利点はほとんどHTMLシンタックスと同じなので、他のUIやマークアップエンジニアが学習しやすく、プロジェクトのリソースを確保しやすい。

“React入門メモ” の続きを読む

picture要素、picturefillについて

<picture>
   <source media="(min-width: 600px)" srcset="images/demo-over600.png">
   <img src="images/demo-under600.png" alt="超え" />
</picture>

さしあたってこれでCDNは読み込める。

<script>
   // Picture element HTML5 shiv
   document.createElement( "picture" );
</script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>

stateの状態のパターンが「2より大きい場合」のアニメーションの構造について

See the Pen OmZaYx by nakanishi (@nakanishi) on CodePen.

前回のstateが2つしかない場合のアニメーションの設計の考察に続き、今回はstateが4つあるアニメーションについて考察する。つまり、stateの状態のパターンが「2より大きい場合」について。

この場合について考えてみてわかったことだが、stateの状態のパターン数が2なのか、2より大きいのかは、実装の上では本質的な違いがない。何故なら、前回のように２つの段階に切り分けておけば、アニメーションを実行する段階では既に、対象や(どのDOMを動かすのか)、どのようなアニメーションにするのか(開くのか、閉じるのか)は一意に決まっているからだ。逆に言うと、アニメーションを実行する段階で対象と仕様が一意に決まるからこそ、このような2段階切り分けが有効なのだと考えられる。

“stateの状態のパターンが「2より大きい場合」のアニメーションの構造について” の続きを読む