宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

react【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、reactのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
ja.reactjs.org

Quipperに入社する前も一度読んだんですが、専門用語が多すぎてさっぱり意味がわかりませんでした。

ドキュメントを読む前にやったことは以下です。

  • JavaScript本格入門を読む
  • ReactとReduxのUdemy
  • 普段のコーディング
  • りあクト!を読む

Getting Started

まずはこのページから。
Getting Started – React

Reactのドキュメントは、
 手を動かしたい人→チュートリアル
 コンセプトからひとつひとつ学んでいきたい人→ドキュメント
と、導線が2種類あるのが素敵ですね!

チュートリアルはやったことがあるので最後にして、まずはコンセプトから改めて学んでいきたいと思います。

Hello world

JavaScriptは12月にそこそこ学んだので、JavaScriptチュートリアルは飛ばします。
Hello World – React

JSX

次はJSXについて。読んでみると意外と新しい発見がありました!
JSX の導入 – React

  • JSXはJavaScript構文の拡張で、テンプレート言語ではない。
  • JSX は HTML よりも JavaScript に近い。そのためReact DOM は HTML の属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用する。
  • JSXはレンダリングされる前にエスケープしてくれる。便利。
  • JSX はオブジェクトの表現である。以下は一緒。
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

render

要素のレンダー – React

  • React要素はイミュータブル(状態を変えることができないオブジェクト)
  • UIを更新するには、ReactDOM.render()に渡すこと
  • renderによってUI ツリー全体を表す要素を作成しているにも関わらず、内容が変更されたテキストノードのみが React DOM により更新されているのがポイント

コンポーネントとprops

コンポーネントと props – React

  • もしかして、propsってpropertiesの略...!?
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • ES6から登場したclassも使用できる。

(ちなみに最近classでしかできなかった機能が関数コンポーネントでできるようになったため、classより全部関数コンポーネントで定義した方がイケてるらしいです。)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上の2つは同じ意味ですが、下はpropsを引数に渡してないにも関わらず突然現れるので読みにくいと思いました。

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

純関数、つまり、同じpropsに対して絶対同じDOMが返ってこないとダメってことなんですね。

この章では、処理される順番が詳しく載っていたので大変わかりやすかったです。

stateとライフサイクル

propsは絶対同じ結果が返ってこないとだめだけど、表示を変えたいときは...?stateの出番です!!
state とライフサイクル – React

  • クラスのコンポーネントは常に props を引数として親クラスのコンストラクタを呼び出す必要があるからsuper(props);って書いてたんですね〜なるほど〜
  • this.stateに直接代入してよい唯一の場所はコンストラク
  • stateを変更したいときはsetState()を使う。
  • Reactは単一方向データフロー

つまり、データは上から下にしか伝わっていかず、下から上にデータが伝わることはない、ということですね!
propsは滝、stateは途中で合流する水源ってとてもわかりやすかったです。

イベント処理

イベント処理 – React

  • constructorの中で関数をbindをしないといけない理由は、JavaScript ではクラスのメソッドはデフォルトではバインドされないから。bindせずにonClick に渡した場合、実際に関数が呼ばれた時に this は undefined となってしまう。
  • constructorにいちいちbindを書くのが面倒なら、以下の方法で書く。
class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

// もしくはこう。callbackされるところにかける。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

条件付きレンダー

条件付きレンダー – React

  • ifとか&&とか条件演算子とかの話
  • コンポーネントレンダーされても隠したいときはnull使ってねという話。(空div返してた...)

リストと key

リストと key – React

  • map使えるよ、keyつけるの忘れんといてなーという話だった。
  • keyにindexは使っちゃだめ。

フォーム

フォーム – React

HTMLでは input、textarea、そして selectは通常自分で状態を持っているが、Reactではユーザに変更される値はstateに保持している。

stateのリフトアップ

state のリフトアップ – React

  • 異なるコンポーネントで、一緒にデータを変更したい(同期させたい)ときの話。
  • この章では、摂氏が入力されたら同時に華氏に変換、または華氏が入力されたら摂氏に変換するフォームを作成する。
  • 一番近い先祖のstateを変更して、子コンポーネントにpropsとして渡そうねって話だった。

コンポジション vs 継承

コンポジション vs 継承 – React

  • prop.childrenの話(渡すpropsが決まってないとき、子要素でprops.childrenって書けば任意のpropsが渡せる)
  • 継承なんてする必要ない!コンポーネントに分けてimportしろ!

React の流儀

jsonデータとページのデザインがあれば、Reactの設計はこうやるんだよ!ってことが書いてありました。
React の流儀 – React

Step 1: UI をコンポーネントの階層構造に落とし込む
Step 2: Reactで静的なバージョンを作成する
Step 3: UI 状態を表現する必要かつ十分な state を決定する
Step 4: state をどこに配置するべきなのかを明確にする
Step 5: 逆方向のデータフローを追加する

3行以内でまとめる

reactとは、

次はrender propsとHOC、その次にHOOKSを学ぶと良さそうな雰囲気...!!
頑張ります😭

以上です!