Zenn
Closed53

Reactチュートリアルをやる

React
#
tutorial
OneWeekChallenge
蔀蔀

React、何からやったらいいのかもよくわからないので、まず何をやったらいいかを調べるところからはじめる。
（なんとなくNext.jsがいい、というのは聞いたことある）

蔀蔀

手を動かして学びたい人向けにはチュートリアル、理論から学びたい人にはガイドという構成になっているそう。
理想的！

蔀蔀

Reactまわりで混乱していることを今のうちに列挙する

  • Babelとかのトランスパイラ？は必要があるのか？
  • 開発環境どうしたらいい？
    • VSCodeがいい？
  • TypeScriptの導入ってした方がいいのか？
  • Next.jsの導入ってした方がいいのか？
  • HTMLとかCSSとかどうしたらいい？
  • Reduxってもう必要なくなった？
蔀蔀

公式のチュートリアルが十分にわかりやすそうなので、これをやることにします

蔀蔀

タイトルを変更
「Reactをやる」→「Reactチュートリアルをやる」

蔀蔀

やっていく。
平日しか作業しないつもりなので、4/28, 5/6, 5/7の3日で完了させる

蔀蔀

とりあえず自分のMacBookに入ってる補助ツールのバージョンの確認

$ node -v
v12.13.1

$ npm -v
6.12.1

ここによると、Node >= 10.16 及び npm >= 5.6 が必要とのことなので、一応満たしてるからこれで進める

蔀蔀

とりあえず言われるがままに動かした

蔀蔀

vimでも開発できることに気づいた。
でもVSCodeでやるのがトレンドっぽいので、そっちでやるか

蔀蔀

VSCode、まだ苦手意識あるが、まあさすがにこっちの方が開発しやすいか

蔀蔀

Reactのコンポーネント表示してくれるChrome拡張入れた。これは便利

蔀蔀

ざっくりノート

  • ReactはコンポーネントというUI部品でページを構築する
  • コンポーネントはこんな構成になっている
class xxx extends React.Component {
  render() {
    return (
      // do something
    );
  }
}
  • コンポーネント間のデータの受け渡しはprops（properties）で行う
  • コンポーネントは原則状態を持たない
  • （故に再利用性が高くなる）
  • そうは言っても状態変数を持たせたいときはあるので、やる方法はある
  • コンストラクタでthis.stateを設定することで、状態を持つことができるようになる
class xxx extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
蔀蔀

連休挟んだらどうやって起動してたかも忘れた

$ npm start

これだ

蔀蔀

Squareに状態変数を持たすデメリットの説明がよく理解できなかった。
propsと状態変数の違いがよく理解できていないっぽかったので、前の章に戻って読み直した。

どうやら説明はわかっていたが、コード的に理解できていなかったっぽい。
状態変数を持たすと、Square9個が別々に持つことになるので、ハンドリングが大変。
なので、Board だけに持たせて、Squareにはpropsを使って渡す。

複数のコンポーネントが持つべき状態変数を、親コンポーネントに一元管理させることを、
state を親コンポーネントにリフトアップ (lift up)すると言うそう。

蔀蔀
  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;
  }

冷静に見ると、この辺のコンポーネント呼び出すときにpropsを渡すときのホワイトスペースだけで渡すのを見ると、
受け取り側はイニシャライザやコンストラクタ的なものが必要なように感じてしまうが、大丈夫っぽい。
JSが静的型付け言語じゃないから？

蔀蔀

React では、イベントを表す props には on[Event] という名前、イベントを処理するメソッドには handle[Event] という名前を付けるのが慣習となっています。

蔀蔀
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }

ここ意味わからなかった。
例えば[a, b, c] = [0, 1, 2]だとすると、
0番目の要素が存在する、0番目の要素 === 1番目の要素, 0番目の要素 === 2番目の要素の3条件が成立することを判定している。
初見だと===で切れてるように見えて、「squares[a] && squares[a]」と「squares[b] && squares[a]」と「squares[c]」の等価性を見ているように見えて、混乱した。

蔀蔀

JSのNull判定を直接if()にオブジェクト突っこんで行うのすごい野蛮な気がする

蔀蔀

おめでとうございます！ これで動作する三目並べゲームができました。そして React の基本についても学ぶことができました。このゲームの真の勝者はあなたかもしれませんね。

やかましいわ！！！！！！！！！！！！！！！

蔀蔀

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.

これはなんで今まで平気だったんだ？

蔀蔀

うーん、動的リストじゃなかったから、って解釈でいいのかな

蔀蔀

とりあえず完成。最終形がこれ

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


function Square(props) {
    return (
      <button
        className="square"
        onClick={props.onClick}
      >
        {props.value}
      </button>
    );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null),
      }],
      stepNumber: 0,
      xIsNext: true,
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
蔀蔀

ふわっとは理解したけど、JSの記法的なところで不明点が多い。
後はpropsとstateの使い方とか、ReactDOMってなんやねんとか、細かいところが気になる。

蔀蔀

4/28, 5/6の2日間でなんとかなった。
Railsチュートリアルだったらまだ第一章が終わったぐらいだったろう。

ただもし読者が完全プログラミング初心者だったら、Reactチュートリアルは何が何だかわからないだろう。

蔀蔀

JSの歴史を再確認
（何回か話聞いたけどあやふやだった）

JavaScript は 1995 年、Netscape の技術者ブレンダン・アイク (Brendan Eich) によって創られ、1996 年初頭に Netscape 2 で初めてリリースされました。当初は LiveScript と呼ばれる予定でしたが、Sun Microsystems の Java 言語の人気にあやかろうという不運なるマーケティング上の決定により改名されました ― 2 つの言語が共通点をほとんど持っていないにもかかわらず。それ以来、このことは未だに混同の元となっています。

Microsoft はその数か月後、IE3 とともに JScript というほとんど互換性のある言語をリリースしました。さらに数か月後、Netscape はこの言語をヨーロッパの標準化団体 Ecma International に提出し、その結果 1997 年に ECMAScript という標準の第 1 版が生まれました。この標準は重要なアップデートを受けて 1999 年に ECMAScript 第 3 版となり、その後しばらくほとんど安定してきました。言語の複雑化に関する政治的な隔たりから、第 4 版は放棄されたものの、その多くのパーツは 2009 年 12 月に発行された新しい ECMAScript 第 5 版の基礎となりました。そして、標準の第 6 版が 2015 年 6 月に発行されました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript

蔀蔀

私達の経験上、時間の経過によりどのように UI が変更されるかを考えるよりも、任意の時点において UI がどのように見えるべきかを考えることで、あらゆる類のバグを排除することができます。

そうなんすよね。
UIからスタートで考えてるフレームワーク（正確にはライブラリやけど）という点が、なんだかんだで一番強かったように思う

蔀蔀

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

この視点はなかった。確かにそうか

蔀蔀

JSX、<hoge />って書き方に違和感あったけど、これはタグの中身が空の場合を示してるのか

const element = <img src={user.avatarUrl} />;
const element = <img src={user.avatarUrl}></img>; // ↑と同じ意味
蔀蔀

JSXにおいて、

  • 大文字始まりのコンポーネント名を< >で指定
  • ホワイトスペースで引数を指定する

をやると、コンポーネントに対して引数が渡せて、これがpropsなのか。
こっちの説明の方がわかりやすいかも

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
蔀蔀

propsにはどんなプロパティでも渡せるのかな？
プロパティ名・型の縛りはないんだろうか

蔀蔀

DOMが急にわからなくなったので調べる

蔀蔀

Document Object Model (DOM) は、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現です

蔀蔀

自分の言葉で書き直す。

HTMLで構成されたドキュメントは、そのままだとスクリプト（具体的にはJavaScript）で操作しづらいので、操作しやすい表現形式が必要だった。
故にDOMというツリー構造でHTML文書を表現する形式が考えられた。

蔀蔀

具体例

https://qiita.com/KDE_SPACE/items/e21bb31dd4d9c162c4a6

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>タイトル</title>
    <meta chareset="utf-8">
</head>
<body>
    <h1>大見出し</h1>
    <!-- 本文が入る -->
    <p id="text">テキストテキストテキスト</p>
</body>
</html>

↑こちらのHTML文書は、DOMツリー表現だと……

document *1
 └ html *2
    ├ head  *2
    │   ├ 空白 *3
    │   ├ title *2 
    │   ├ 空白 *3 
    │   ├ meta *2 
    │   └ 空白 *3 
    ├ 空白 *3
    └ body  *2
        ├ 空白 *3 
        ├ h1 *2 
        │  └ タイトル *3
        ├ 空白 *3 
        ├ コメント *4 
        ├ 空白 *3 
        ├ p *2 
        │  └ テキストテキストテキスト *3
        └ 空白 *3 

*1: ドキュメントノード
*2: 要素ノード
*3: テキストノード
*4: コメントノード

こうなる

蔀蔀

Chromeの開発者コンソールを使えば、今ブラウザで見ているWebサイトのDOMツリーを見ることも可能。
ただ、見たとて、ではあるが……

人間の目から見ると、元々HTMLが構造的にできているように見えるので、DOMツリーになってもほぼ同じに感じる。

https://ja.javascript.info/dom-nodes

蔀蔀

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。

蔀蔀

コンポーネントのライフサイクルメソッド！
そんなのがあるのか

  componentDidMount() {
  }

  componentWillUnmount() {
  }
蔀蔀

JavaScript では true && expression は必ず expression と評価され、false && expression は必ず false と評価されるからです

ええ……

蔀蔀

残ってるわかってない件は来週やろう。Reactチュートリアルとしてはここまで。

  • Web Components
  • Hooks
  • TypeScript
このスクラップは2021/05/07にクローズされました