ﾕｰｻﾞｰｻｲﾄﾞのCATIA 関連ｻｲﾄ7

恐らくこれの続きです。
ﾕｰｻﾞｰｻｲﾄﾞのCATIA 関連ｻｲﾄ6 - C#ATIA
1年に1件ぐらい発見しているのかな・・・。

〇3D楽
3D CADを楽に覚える。コツをつかんで楽して覚えよう│3D楽
何処かのスクールなのかな？　モデリングのチュートリアル等も
充実してます。
スケッチトレーサー使えなきゃ、マテリアルのテクスチャ使う方法や
ライセンス無しでもパワーコピーなら展開コマンド使えちゃうよ
（会員登録すると定義ファイルをDL出来るっぽい）等まで記載されてます。

・・・配布するの良いのかな？Helpのサンプルデータに
あるんですけどね。
ﾗｲｾﾝｽの無いｺﾏﾝﾄﾞを使用する - C#ATIA

STLからIges変換

STLからIges変換って、STLの三角ポリゴンを三角のサーフェスにする
だけなのですが、まぁ役に立たないと思うんですけどね。

探したところ、こちらにFreeサービスが有りました。
STLをIGESに変換する オンライン フリー - STL IGES 変換
バイナリの22MBと18MBで試しましたが、エラーでした。
残念。

Fusion360の場合、ポリゴンをポリゴンとして取り込むので素早いのですが
まぁ某国産CADCAMはご丁寧にサーフェスに変換して開こうとします。
（逆に言えば、サーフェスとしてエクスポート出来ます）

大量の三角サーフェスなんて、役に立たないと思う。
CGRの方が良いよ。

state のリフトアップ2

こちらの続きです。
state のリフトアップ1 - C#ATIA

苦労の末、劇的にショボいComboBox(selectタグ)が出来ました。

選択した結果がComboBoxの下に表示されます。
表示させたいのではなくて、後の処理的に取得したいための代案です。

こんな感じです。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super()
 
    this.state = {
      toolList:[
        { type: "選択して", dia: "下さい" },
        { type: "DR", dia: 6.8 },
        { type: "TP", dia: 8.0 },
        { type: "EM", dia: 10.0 },
      ],
      selectedValue: null
    }
  }

  render(){
    const tools = this.state.toolList

    return (
      <div className="App">
        <h1>Select Tool</h1>
        <select
          id="tool"
          name="tool"
          value={this.state.selectedValue}
          onChange={ e => this.setState({selectedValue: e.target.value}) }>
          {tools.map( tool =>
            <option
              value={[tool.type , tool.dia]}
            >
                {tool.type}{tool.dia}
            </option>
          )}
        </select>
        <h2>{this.state.selectedValue}</h2>
      </div>
    );
  }
}

export default App;

色々なものが足りませんが。

単一のコンポーネントがイケていない為、ComboBoxのみの
コンポーネントを作りつつ、state のリフトアップを行いたいので
SelectTool.jsを新たに作成しました。

import React from 'react';

class SelectTool extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      toolList: props.tools,
      selectTool: props.tools[0]
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e){
    console.log(e.target.value);
    this.setState({ selectTool: e.target.value});
  }

  render() {
    var options = this.state.toolList.map( tool =>
      <option
        value={[tool.type , tool.dia]}
      >
          {tool.type}{tool.dia}
      </option>
    );
  
    return (
      <select
        value={this.state.selectTool}
        onChange={this.onChange}>
        {options}
      </select>
    )
  }
}

export default SelectTool;

これを受け止めるため、App.jsを修正しました。

import React from 'react';
import './App.css';
import SelectTool from './components/SelectTool';

class App extends React.Component {
  constructor(){
    super()
 
    this.state = {
      toolList:[
        { type: "選択して", dia: "下さい" },
        { type: "DR", dia: 6.8 },
        { type: "TP", dia: 8.0 },
        { type: "EM", dia: 10.0 },
      ],
      selectTool: null
    }
  }

  render(){
    const tools = this.state.toolList

    return (
      <div className="App">
        <h1>Select Tool</h1>
        <SelectTool
          tools = {tools} 
        />
        <h2>{this.state.selectedValue}</h2>
      </div>
    );
  }
}

export default App;

結果

選択要素が表示されません。そりゃそれを書いていないからです・・・。
親から子には伝えられるのですが、子から親にどうやって・・・。

コンポーネント間で情報の受け渡し – React入門 - to-R Media
こちらを見ると、Ref関数を使用するやり方が記載されているのですが、
あまり推奨されていないようですし、警告も出てしまいます。
イベントもリフトアップすれば良い気もするの出すが・・・。

state のリフトアップ1

色々と眺めていて感じたことの覚書。

自分にとってはこちらが一番わかりやすかったです。
React.js チュートリアル[超入門] #01 プロジェクトの始め方｜山口 夏生｜note
#1~5までしか見ていないですが、絶対ではないものの
可能な限りコンポーネントは細かく分割すべきと解釈しました。
通常のリファクタリングかな？

こちらは公式チュートリアルに取り組まれた方の感想です。
React チュートリアルで学んだことと解答例 - ボクココ
stateのリフトアップについて言及されています。確かに
公式チュートリアルの進め方が、最初はクラスコンポーネント
で初めて、関数コンポーネント(stateが作れない)に切り替え、
もう一つ上のレベルにstateを持っていき、自身はpropsで
受け取るように変更していました。（何のことでしょうかね？）

この辺ですね。
state のリフトアップ – React
stateは可能な限り（できればトップレベルで）上流で管理すべきと
感じました。

まとめると
・可能な限り単一機能のコンポーネントにしろよ！
・コンポーネントはクラス型より関数型にしろよ！
・stateは上流で管理し、下流はpropsで受け止めろ！
かな？

リフトアップすると親の情報を子に流すのは出来るけど、
逆向きの子の状態を親に垂れ流すにはどうすれば良いの？
例えば、ComboBoxで現在選択されている要素は何か？
の取得する方法。

で、今はこちらをお勉強。
コンポーネント間で情報の受け渡し – React入門 - to-R Media
クラス型じゃないと駄目なのかな？

CodePen

会社では環境が悪くないので苦痛ではないのですが、
自宅ではReactの勉強するための状態を作るだけでも
苦痛です・・・。

Githubを利用しようにもパッケージのインストールに
時間がかかり、OneDriveでも同期に時間がかかる上、
結構HDDを圧迫。

仕方が無いため、公式のチュートリアルでも利用されていた
CodePenで練習しようかと・・・。
https://codepen.io/

他にもサービスがあるようですが、情報量はここが一番かな？

Reactチュートリアル+Material-UI

こちらの続きです。
React クラスコンポーネント propsの型指定2 - C#ATIA

こちらを取り組みました。
チュートリアル：React の導入 – React

素の状態だとチュートリアルと見た目が違う・・・。
恐らくCSSだろうとは思うのですが。(画像左)

折角なのでMaterial-UIを利用したのが右側です。

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';

function Square(props) {
  return (
    <Button
      className="square"
      variant="contained"
      color="primary"
      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
            variant="contained"
            color="secondary"
            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>
        <CssBaseline />
        <div className="game-info">
          <Card>
            <CardContent>{status}</CardContent>
          </Card>
          <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;
}

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Game} />
      </Switch>
    </Router>
  );
}

テーマの利用の仕方がイマイチわからないなぁ。

React クラスコンポーネント propsの型指定2

こちらの続きです。
React クラスコンポーネント propsの型指定 - C#ATIA
タイトルと内容が一致してないかも。

あらゆる部分の理解不足は認識しているのですが、結局reactに苦しんでいる
事に気が付き、公式のチュートリアルがかなりキッチリしていたので、
こちらをelectronでやってます。（結局コピペ）
チュートリアル：React の導入 – React

一番理解しがたいのが、propsとstate。例えば、この "props"

"お前、どこから現れたの？" と言う気がしてならないんです。

せめて、

class Square extends React.Component {
  render(props) {
    return (
・・・

なら理解しやすいけど、それだと "this" が不要だし・・・。
pythonの場合のselfに近いとは感じているのですが。
"React.Component" を理解していないからなんだろう。

後はtypescriptの地味なエラーにも苦しむ。
心の支えはこちら。
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に - エンジニアHub｜Webエンジニアのキャリアを考える！