GoLang note Python React

React - コンポーネントとPropsと雑記（Elixirとか）

今日は新宿で毎週開催されているストイックなもくもく会に参加してきました。

皆さんレベル高すぎて、私のような狭く浅い人間が行っていいものか迷いますが、勇気を出して2回目の参加。

チェックインのプルリクに、またもや1時間もかかってしまった・・。Git慣れないよぅ。

最後全員今日やったをことをプチLTするのですが、なんだろ〜と思ったキーワードをいくつか...

Elixir（エリクサー）
  • Rails coreメンバーのJosé Valimって人が2012年に開発
  • Erlangの仮想マシン（BEAM）上で動作する
  • 並行処理ができる
  • 関数型プログラミング
Gin
  • Go言語向けのWebフレームワーク
GORM
  • Go言語のORM（Object-Relational-Mapping）
  • RDBの操作ができる
kuromoji.js
  • Javaの形態素解析器KuromojiのJavaScript移植版
d3.js
  • javascriptからデータを基にSVGを描画するライブラリ
d3-clud
  • ワードクラウドを生成する、d3.jsのプラグイン
  • タグクラウドみたいなもの？
react-d3-cloud
  • d3-cloudのReact版？？
NZMATH
  • Pythonの数論システムらしい
  • 更新が止まっているから、Python3に直すと言っていた

他にもいろいろ・・

みんな何言ってるかわかんない....

今回の参加で、はじめてGitPitchというのを使ってみたのですが、スライドが簡単に作成できていいですね。

敷居の高いもくもく会ですが、自分がいかに何も知らないかとか見聞を広めるのに良いので、

「お前、もうくるな」

と言われるまで、月一くらいで参加したいなと思います。

 

前置きが長かった！

引き続き柴咲先生の講義を受ける。

https://oukayuka.booth.pm/items/1312652

↑ 柴咲先生

 

Reactの思想

仮装DOM（Virtual DOM）
  • ブラウザのDOMの解析はオーバーヘッドが大きい
  • ReactではJavaScriptオブジェクトでDOMと同じノードツリーを再現して（VMDOM）、差分だけ生DOMに書き戻す
  • フロント開発者がブラウザのオーバーヘッドを気にせずに開発できる

コンポーネント

  • コンポーネントは、Reactオリジナルではない
  • Web Componentsの考えからきている
  • カスタマイズ可能なタグでアプリを組み上げることができる技術、考え方
単方向データーフロー
  • Vue、Angular・・データバインディングが使用されている（テンプレートに埋め込んだ変数が別のところにひも付き、その変更がリアルタイムに反映される）アプリが複雑になった時にあちこちでバインドされてる変数が思わぬ事故を招く可能性がある
  • Reactではコンポーネントの中身が知らないところで書き変わらないよう、データは必ず親コンポーネントから子コンポーネントへ一方向で渡される下の階層から上の階層にデーターを反映させることはできない

あぁ〜、なるほど。なんかスッキリ理解した・・。今まで闇雲にコード書いててよかった（涙

  • ReactのコンポーネントはJavaScript記述
  • マウントする場所ではJSXのタグで記述
  • コンポーネント自体はJavaScriptのクラスや関数で定義

importメモ

import React, { Component } from 'react';

  • Reactの部分..JSXでリテラルを使うために読み込むものらしい。

import CharacterList, { Character } from './CharacterList';

  • 普通にエクスポートされたものは { xxx } と名前を指定する
  • import { hoge as fuga } って感じで別名をつけられる

 

Propsメモ

関数に対する引数みたいなもん

マウント時
  • タグの中で、そのタグ属性値として表現される
コンポーネント自身での定義では
  • クラスコンポーネントの場合には、propsというメンバー変数
  • 関数コンポーネントの場合は、その関数の引数

親コンポーネント

    return (
      <div className="container">
        <header>
          <h1>生徒情報</h1>
        </header>
        <CharacterList school="1年１組" characters={characters} />
      </div>
    );

<CharacterList school="1年１組" characters={characters} />

  • インポートしたCharacterListをマウントしている
  • 属性school、characters（子コンポーネントのファイルの最初にinterfaceで定義されてるやつ）
  • characters Propsとして子コンポーネントに渡される

子コンポーネント

export interface Character {
  id: number;
  name: string;
  age: number;
  height?: number;
}

// CharacterListクラスが親コンポーネントのJSXのマウントされる時に
// これら↓の型が決まる school="1年1組" characters={characters}
interface CharacterListProps {
  school: string;
  characters: Character[];
}
// <CharacterListProps> 上で定義したインターフェース
//     - ジェネリクス
//     - class CharacterList クラスに対する型引数
//     - このコンポーネントのPropsの型を指定している
class CharacterList extends Component<CharacterListProps> {
  render() {
    // propsから要素をローカル変数として取得
    // わざわざ変数に入れなくても、this.props.schoolってやるとアクセスできる
    const { school, characters } = this.props;
    return (
      <>
        <Header as="h2">{school}</Header>
        <Item.Group>
          {characters.map(c=> (
            <Item key={c.id}>
              <Icon name="user circle" size="huge" />
              <Item.Content>
                <Item.Header>{c.name}</Item.Header>
                <Item.Meta>{c.age}歳</Item.Meta>
                <Item.Meta>
                  {c.height ? c.height : '???'}cm
                </Item.Meta>
              </Item.Content>
            </Item>
          ))}
        </Item.Group>
      </>
    );
  }
}

<> と </> ってなに？

  • フラグメント（React.Fragment シンタックスシュガー）
  • class 指定のない<div></div>を入れいると余計な階層ができちゃうからそれを避ける。中身がなくなる処理があるものには使わない。

<Item key={c.id}>

  • ループで複数のコンポーネントを生成するとき、その要素に一意のkey属性がいる
  • ないとJSエラーでる
  • パフォーマンスのために大事

今日はここまで。

次回はステートについて...

なんだけど、明日Goのお勉強会へ行くので、これから環境を作らねば。。

-GoLang, note, Python, React