こんにちは。
regl (Functional WebGL, GitHub) + React を利用しランダムな点のアニメーションを描いてみました。今回、use-interval (GitHub) を用いてみました。
ただし、fragColor など未だに十分理解できていないので変な箇所があるかもしれません。

App.js

import React from 'react';
import createRegl from 'regl';
import useInterval from 'use-interval';

const App = () => {

  const pointSize = 14;
  const pointRandom = () => 
          [2 * Math.random() - 1,  // x
           2 * Math.random() - 1,  // y
           Math.random(), Math.random(), 0];  // r, g, b
  const generatePoints = (nPoints) => Array(nPoints).fill(0).map(pointRandom);

  const regl = createRegl(document.querySelector('.canvas'));

  const frag = `
      precision mediump float;
      varying vec3 fragColor;
      void main() {
        gl_FragColor = vec4(fragColor, 1);
      }
  `;

  const vert = `
      varying vec3 fragColor;
      attribute vec2 pos;
      attribute vec3 color;
      uniform float pointSize;
      void main() {
        fragColor = color;
        gl_PointSize = pointSize;
        gl_Position = vec4(pos, 0, 1);
      }
  `;

  const drawPoints = regl({
    frag: frag,
    vert: vert,
    primitive: 'points',
    count: (context, props) => props.points.length,
    attributes: {
      pos: (context, props) => props.points.map(d => d.slice(0, 2)),
      color: (context, props) => props.points.map(d => d.slice(2, 5))
    },
    uniforms: {
      pointSize: pointSize,
      points: regl.prop('points')
    }
  });

  const clearRegl = () => regl.clear({
        color: [0, 0, 0, 0],
        depth: 1
      });

  let i = 0;
  useInterval(() => {
      clearRegl();
      drawPoints({points: generatePoints((++i%2)*4+2)});
  }, 1000);

  return <div className='canvas'></div>;
};

export default App;

こんにちは。
regl (Functional WebGL, GitHub) + React を利用しランダムな点のアニメーションを描いてみました。今回、use-interval (GitHub) を用いてみました。

App.js

import React from 'react';
import createRegl from 'regl';
import useInterval from 'use-interval';

const App = () => {

  const pointSize = 14;
  const pointRandom = () => 
          [2 * Math.random() - 1,  // x
           2 * Math.random() - 1,  // y
           Math.random(), Math.random(), 0];  // r, g, b
  const generatePoints = (nPoints) => Array(nPoints).fill(0).map(pointRandom);

  const regl = createRegl(document.querySelector('.canvas'));

  const frag = `
      precision mediump float;
      varying vec3 fragColor;
      void main() {
        gl_FragColor = vec4(fragColor, 1);
      }
  `;

  const vert = `
      varying vec3 fragColor;
      attribute vec2 pos;
      attribute vec3 color;
      uniform float pointSize;
      void main() {
        fragColor = color;
        gl_PointSize = pointSize;
        gl_Position = vec4(pos, 0, 1);
      }
  `;

  const drawPoints = regl({
    frag: frag,
    vert: vert,
    primitive: 'points',
    count: (context, props) => props.points.length,
    attributes: {
      pos: (context, props) => props.points.map(d => d.slice(0, 2)),
      color: (context, props) => props.points.map(d => d.slice(2, 5))
    },
    uniforms: {
      pointSize: pointSize,
      points: regl.prop('points')
    }
  });

  const clearRegl = () => regl.clear({
        color: [0, 0, 0, 0],
        depth: 1
      });

  let i = 0;
  useInterval(() => {
      clearRegl();
      drawPoints({points: generatePoints((++i%2)*4+2)});
  }, 1000);

  return <div className='canvas'></div>;
};

export default App;

コンポーネントとは

Componentとは、特定の機能を持った汎用的な「部品」を指す言葉です。
Componentにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。
Component間のデータの受け渡しは「props」を利用する。

propsとは

propsはプロパティの意味であり、関数の引数のように親からデータを渡して子のReact要素を返す役割を持っています。

// コンポーネント
class Greeting extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{ this.props.type }</div>
    );
  }
}
// コンポーネントの呼び出し
ReactDOM.render(<Greeting type="Hello" />, document.getElementById('app'));

React がユーザ定義のコンポーネントを見つけた場合、JSX に記載のある属性と子要素をオブジェクトとしてコンポーネントに渡します。

コンポーネントの作成方法

関数の場合

function Greeting (props) {
 return <h1>{props.type}</h1>
}

クラスの場合

class Greeting extends React.Component {
 render() {
    return <h1>{this.props.type}</h1>
 }
}

クラスの場合、コンポーネント定義でポイントとなるのは、React.Componentというコンポーネントを基底クラスとして継承することです。
そして、render()メソッドを定義することで、その戻り値でコンポーネントの表示内容を指定します。
また、タグ要素は、this.propsというオブジェクト型のプロパティを介して取得ができる。

アロー演算子の場合

const Greeting = (props) => (
 <h1>{props.type}</h1>
)

アロー演算子の場合、1文であればreturn文を省略できるので、最小限の記述で簡潔にコンポーネントの定義が可能。

コンポーネントの状態管理

状態を管理するためには、コンポーネント自体に状態の値を記憶させておく必要がある。
状態の記述を行うには、コンポーネントのstateオブジェクトを利用する。

stateとは

stateは状態を管理するもので、関数内で宣言された変数のようにコンポーネントの内部でデータを更新する役割を持っています。

class CheckTest extends React.Component {
  //コンストラクタ
  constructor(props) {
    super(props)
  // 状態の初期化
    this.state = {checked: false}
  }

  render () {
    // チェックされていない場合
    let mark = '□'
    let style = { fontWeight: 'normal' }

    // チェックされた場合
    if (this.state.checked) {
      mark = '■'
      style = { fontWeight: 'bold' }
    }

    // クリック時のイベント指定
    const clickHandler = (e) => {
      const newValue = !this.state.checked
      this.setState({checked: newValue})
    }

    return (
      <div onClick={clickHandler} style={style}>
        {mark} Hello
      </div>
    )
  }

コンストラクタ内のthis.state = {...}で初期値を設定。
setStateは状態を更新すると自動的にrender()を実行する。
チェックボックスをクリックするたびに、変数「checked」の真偽値が変化し、render()が実行されることで画面が再描画されます。

Reactでのイベント記述方法

render()内でイベントハンドラを定義する場合

class コンポーネント名 extends React.Component {
  render() {
    const handler = (e) => alert('Test')
    return <button onClick={handler}>AlertTest</button>
  }
}

クラスのメソッドとしてイベントハンドラを定義する場合

class コンポーネント名 extends React.Component {
  constructor {
    this.alertHandler = this.alertHandler.bind(this)
  }
  alertHandler () {
    alert('Test')
  }
  render () {
    return <button onClick={this.alertHandler}>
      alertTest</button>
  }
}

複数のイベントを記載する場合には、複雑にならないようにクラスのメソッドとして定義します。
しかし、render()内でalertHandlerを呼び出す際に、alertHandlerメソッド内のthisが書き換わってしまうため、メソッドとthisを結び付けるためにバインド(bind)する必要があります。

historyのバージョンでエラーが出るなんて、、、
4.9.0にしたら直った

はじめに

Reactでselectタグとoptionタグを使ってreduxのステートを更新させようとしたがなかなかうまくいかなかったので方法を紹介します。

困ったこと

• 初期値はdefaultValueとvalueのどっちを使った方がいい？
• onCangeとonClickどっちを使った方がいい？

結論

<select value={値} onChange={関数}>
    <option>{要素の値}</option>

で書かないと動かない。

試したこと

<select defaultValue={値} onChange={関数}>
    <option>{要素の値}</option>

<select defaultValue={値} >
    <option onClick={関数}>{要素の値}</option>

まとめ

どれだけ調べても記事が見つからなかったので解決するまでに非常に時間がかかりました。

Reactとは

Facebookが開発、OSSとして公開しているライブラリ。
GitHubリポジトリはfacebook/reactにある。

Reactでは、ボタンやテキストボックスなどの汎用的なComponentに分け、それを組み合わせることでアプリケーションを構築していきます。
これにより、独自のUIパーツやウィジェットを、手軽に再利用できるようになりました。

そして、Reactの特徴として描画(Render)を行うことによって、Virtual DOMという仮想的なDOMを構築します。
直接DOM操作するのではなく、プログラム的に仮のDOMを構築してそれを操作することで、軽くて高速な処理ができるようになっています。

JSX

Reactでは、HTMLのタグを直接JavaScriptのスクリプトに記述する仕組みを持っています。これをJSXといいます。
Reactを使う上でJSXの利用は必須というわけではありませんが、JSXを利用することでより自然にReactライブラリが使えるようになります。
また、埋め込まれた値をレンダリングする前に、エスケープしてくれるので、インジェクション攻撃を防ぐ事も可能です。

JSX

const e = <h1 id="greeting">Hello, World!</h1>

JSXを使わない場合

const e = React.createElement('h1', {id: 'greeting'}, 'Hello, World!')

JSXはJavaScriptのシンタックスシュガーであり、簡易的でより自然にReactの操作が可能となる。

JSXを記述する際の注意

JSXでエラーになる例

function getDOM() {
  return
  <div><p>JSXテスト</p></div>
}

この場合はJSXの範囲を丸括弧で括る必要がある。

丸括弧で括る

function getDOM() {
  return (
  <div><p>JSXテスト</p></div>
  )
}

また、JSXでは複数のHTMLタグを並べて記載することはできない。
必ず、一つのDOM要素に全て含む必要がある。

JSXでエラーになる例

function getDOM() {
  return (
    <div><p>JSXテスト1</p></div>
    <div><p>JSXテスト2</p></div>
  )
}

一つのDOM要素に含める

function getDOM() {
  return (
    <div>
      <p>JSXテスト1</p>
      <p>JSXテスト2</p>
    </div>
  )
}

JSXでstyleを指定する方法

JSXでstyle属性に文字列を指定することはできないため、CSSのスタイルをオブジェクトのプロパティに指定したものを与える必要がある。

style属性にオブジェクトを与える

const obj = {prop1:value1, prop2:value2, prop3:value3 ... }
const dom = <div style={obj}> ... </div>

コンポーネントとは

コンポーネントとはアプリケーションの部品や構成要素のこと。
Reactを用いた開発ではまずコンポーネントを作成し、組み合わせることでUIを構築します。

概念的には他言語でいう関数やクラスのようなものです。
コンポーネントは任意の入力を受け取り、React要素という「DOMの設計図」を返します。

Reactコンポーネントの使用例は以下の通りです。

HelloMessageコンポーネント

// HelloMessageコンポーネントの定義
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  //コンポーネントの呼び出し
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

ReactDOM.render()メソッド内の<HelloMessage name="Taylor" />がコンポーネントの呼び出し部分で、HelloMessageクラスが呼び出し先のコンポーネントとなります。

JSX

上記のコードを見るとHMTLとJavaScriptが一体化したような特徴的な見た目になっていますが、これはJSXというJavaScriptの拡張シンタックスが使用されているためです。

Reactは従来式の表示とロジックを分けるやり方ではなく、コンポーネントという「関心」の集まりで処理の分離させるようデザインされています。

表示とロジックが1箇所にまとめて書くことになるReactにおいて、JSXを使うメリットは直感的にわかりやすい見た目になることです。

コンポーネントを定義する

コンポーネントを定義する方法は以下の2種類あります。
・関数コンポーネント
・クラスコンポーネント

関数コンポーネント

JavaScriptの関数定義で作成されるコンポーネントです。

SayHelloコンポーネント

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

上記は引数として受け取ったpropsのname属性の値を参照し、React要素を出力するコードです。

クラスコンポーネント

ES6のクラス定義で作成されるコンポーネントです。
クラスコンポーネントを作成する場合はReact.Componentの継承と、renderメソッドの実装が必須です。

SayHelloコンポーネント

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

関数コンポーネントとクラスコンポーネントの違い

以前はstate(状態)を定義することができるかできないか、の違いがありました。
関数コンポーネントはあくまで関数であるため、クラスのようにstateを持つことができなかったのです。

しかし関数コンポーネントを高機能化するHooksの登場で、関数コンポーネントであってもstateを使用することが可能となったため、stateの有無という明確な差異は無くなりました。

機能面で大きな差異は無くなったため、どちらを使っても問題はありません。
関数コンポーネントを見る機会が増えたということなので、Hooksと合わせて学習しどちらも読めるようにしておきましょう。

参考文献

・Reactチュートリアル
https://ja.reactjs.org/

・入門React コンポーネントベースのWebフロントエンド開発
https://www.oreilly.co.jp/books/9784873117195/

初歩的ながらハマったので自戒の念を込めてメモ。

イベントハンドラに引数有の関数を渡す方法

イベントハンドラに引数有の関数を渡したい場合、2通りの書き方があります。

ひとつはアロー関数を使う方法。
もうひとつはbindメソッドを使う方法です。

アロー関数

<Component onClick={() => this.handleClick(i)}>

bindメソッド

<Component onClick={this.handleClick.bind(this,id)}>

ここでポイントは上のどちらも関数を渡しているいうことです。

アロー関数は無名関数を定義する記法、bindメソッドはthisを変更した新たな関数を生成するメソッドであるため、onClickに渡されるのはどちらも関数そのものです。

何にハマったか？

引数無しの関数をイベントハンドラに登録する時は以下のように書くので

<Component onClick={this.handleClick}>

同じように引数有の関数を登録しようとすると想定外の挙動になりました。

<Component onClick={this.handleClick(i)}>

上の例は関数の登録ではなく、関数の実行として扱われます。
onClickイベントの発火を待たず、コンポーネントがレンダリングされた時点でメソッドが動くことになるため、まだクリックしてないのに勝手に動いている…といった状況になりました。

まとめ

イベントハンドラには関数を渡すこと。
アロー関数やbindを使用すること。

なんとなくで書かず、自分が何をしているのか理解した上でコードを書かなければいけませんね…

プログラミングの勉強日記

2020年6月19日　Progate Lv.137
ReactⅠ
　Reactはサイトの見た目を作れるJavaScriptのライブラリ。Reactのモバイル版であるReact Nativeを使うとiOSとAndroidのアプリを作ることもできる。

ブラウザに表示する

　JavaScriptファイルのrenderメソッドのreturn内に<h1>~</h1>と記述するとブラウザ上に表示できる。

App.js

class App extends React.Component{
  render(){
    return(
      <h1>Hello World</h1>
    );
  }
}

JSX

　HTMLと同じように記述できる。見出しには<h1>タグ、文章には<p>タグなどHTMLと同様のタグが使える。ただし、return内に複数の要素があるとエラーになる。そのため、複数の要素がある場合は1つの要素にまとめる。
　imgタグを使う場合、<img src="画像のURL" />と書くので、この/を忘れないようにする。

App.js（エラーが出る）

render(){
  return(
    {/* 複数の要素があるのでエラーになる */}
    <h1> h1 </h1>
    <h2> h2 </h2>
    <p> p </p>
  );
}

App.js（正しい記述）

render(){
  return(
    {/* 1つの要素にまとめる */}
    <div>
      <h1> h1 </h1>
      <h2> h2 </h2>
      <p> p </p>
    </div>
  );
}

App.jsの構造とコメントアウトの方法

　renderメソッドのreturn内のみJSXで記述する。JSXで記述された要素はブラウザに表示される。
　return内では{/* コメント */}として書き、他のところでは//コメントとして書く。

App.js

import React from 'react';  //1. Reactをimport
class App extends React.Component{  //2. React.Componentを継承するクラスの定義
  render(){  //3. JSXを戻り値とするrenderメソッドの定義
    return(
      ...
    );
  }
}
export default App; //4.クラスをインポート

JSXにJavaScriptを埋め込む

　JavaScriptの部分を{}で囲む。タグの属性の値にも使える。

App.js

render(){
  const text='Hello World';
  return(
    <div> {text} </div> {/*中でJavaScriptを埋め込んでいる*/}
  );
}

App.js

render(){
  const imgUrl='https://~~~.png';
  return(
    <img src= {imgUrl} />
  );
}

ボタンの作成

　<button>タグを用いる。ボタンには<button>タグで囲まれる文字が表示される。

イベント

　何かが起きたときに処理を実行するように指定できる。タグ内にイベント名={ ()=> {処理}}と書くことで指定したタイミングで処理を実行できる。アロー関数はJavaScriptなので{}で囲む。

App.js

<button イベント名 = { ()=> {処理} }> </button>

onClickイベント

　クリックされたときに処理を実行するイベント。イベント名にonClickを指定する。

App.js

<button onClick = { ()=> {console.log('Hello World')} }>
  Hello World
</button>

　この例はクリックするとコンソールに「Hello World」と出力される。