React & TypeScript初学者のすゝめ 第一章

# Reactとは
ReactとはFacebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリで近年のWebサービスのフロントエンドは概ねこれを使って使われる。
Web企業でエンジニアとして働くための必須スキルにReactが多く挙げられることから、学習必須の科目と言えるだろう。
# TypeScriptとは
TypeScriptとはJavaScriptを土台としているが、それより大規模開発ができるように設計されていて、Googleの開発で採用されるなど世界的な注目を集めているオープンソースのプログラミング言語である。

近年ReactとTypeScriptを採用の必須スキルにあげる企業が多いが、それに対してTypeScriptを使ったReact開発のサンプルはあまり多くないため今回の記事を書いた(React記事の多くはJavaScriptで書かれている)

## 基本ソース
```App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

// デフォルトコードをコメントアウト
// function App() {
//   return (
//     <div className="App">
//       <h1>Hello</h1>
//     </div>
//   );
// }
// export default App;

class App extends React.Component {
  render(){
    return (
    <div>
      <h1>Hello! World.</h1>
    </div>
    )
  }
}
export default App; //これがないと出力に支障をきたす
```
画面表示のベースとなるページは「index.tsx」だが、ページ編集は主に「App.tsx」で行う。
上のコードのようにしてComponentを継承したclassとしての出力が可能になる。

## 引数を加えてみる
```App.tsx
type Props = {
  // ?を加えないと絶対にプロパティーを加える必要がある
  text?: string;
  defaultFlg: number;
};
type State = {
  viewList: {value : string}[];
  viewText: string;
  viewFlg: number;
  viewCount: number;
};

class App extends React.Component<Props, State> {
  // (props: Props)が重要
  constructor(props: Props){
    super(props)
    this.state = { 
      viewList : [
        {value : "今日は"},
        {value : "良い"},
        {value : "天気ですね"}
        ],
      viewText : props.text,
      viewFlg: props.defaultFlg,
      viewCount: 0
    }
  }
  .....
```
JavaScriptでは不要であるが、TypeScriptにおいて、最初の型宣言は必要不可欠。慣れないうちは面倒かもしれないがコードがより読みやすくなる。
constructorはプログラム実行時に一番最初に呼び出される部分。
class内で引数(props)を使うには、引数を継承しconstructorの部分でこのclassのstateに紐ずける必要がある。
```index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App text={'真'} defaultFlg={1}/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```
取り入れたい引数は「index.tsx」のAppタグに指定する必要がある。ここで指定した値は**props.text**や**props.defaultFlg**で呼び出せる。

## イベント処理
```App.tsx
renderChange(){
    // viewFlgの状態を切替(0 <-> 1)
    let newFlg = this.state.viewFlg == 1 ? 0 : 1;
    let newCount = this.state.viewCount + 1;
    this.setState({viewFlg : newFlg, viewCount : newCount });
  }
render(){
    return (
    <div>
      <h1>Hello! World.</h1>
      <p>この命題は{this.state.viewFlg == 1 ? this.state.viewText : '偽'}です。</p>
      <p>ただいまの切替数{this.state.viewCount}回</p>
      <button onClick={()=>this.renderChange()}>切替</button>
    </div>
    )
  }
```
ReactはStateが更新されるたびに画面表示メソッドであるrender()が実行される。
メソッドの呼び出し方は上記のbuttonタグにある通り。
Stateを使えばクラス内でデータの受け渡しを簡単に行えるため、あたいの積み上げなんかにも使えたり、使いこなせば非常に便利。

## リスト表示
```App.tsx
// いちいち面倒かもしれないが、ここでも型宣言を要求される
renderList(viewList: {value : string}[]){
    return viewList.map((_list: {value : string},_key) => {
        return(
            <li key={_key}>{_list.value}</li>
        )
    })
  }
render(){
    return (
    <div>
      <h1>Hello! World.</h1>
      <ul>
        {this.renderList(this.state.viewList)}
      </ul>
    </div>
    )
  }
```
Reactにおけるリスト表示はmap関数を使う。Tableも似たようにして作れるため、このやり方は覚えておこう。ちなみにliタグを囲っているreturnを消したらエラーになる。

#### 以上が本当に基本的なReact&TypeScriptのプログラミングであるが、第二章ではフォームを活用したより応用的なアプリケーションを作っていく。

次章
[React & TypeScript初学者のすゝめ 第一章](https://qiita.com/pigretyasushi/items/c1306fc8090762d447b3)