バックエンドエンジニアから見たReact #react_fukuoka

バックエンドエンジニアがReactに入門する際に敷居を下げるための発表資料

Transcript

1. バックエンドエンジニアか ら見たReact Ryota Suginaga
2. Agenda • Self-introduction • Back-end engineer worries • Want to create a small web-app • My understanding of React • React beyond my understanding • Work efficiency tool • Summary 話さないこと • 他ライブラリやフレームワークとの比較 • Reactの機能詳細
3. Self-introduction 杉永良太（@transnano） ヤフー株式会社 バックエンドエンジニア（SRE） YAML > Shell > (超えられない壁) > TypeScript > Ruby, Python, Perl, Java 以前：業務システム・アプリ、Java > C# > JavaScript 興味：クラウドネイティブ、Go > React （Reactについての理解が間違っていたら優しく教えてください）
4. Anai OMG!!
5. Back-end engineer worries CLIとかWebAPI、監視は得意 CUI(CLI)でもいいけど、GUI(Web)の方がやっぱり便利！ ⇒Webアプリならインストールも要らないしね ⇒Push->デプロイの自動化・運用は任せて〜
6. Want to create a small web-app バックエンドAPIは秒で作るから、結果を表示する部分だけ作れれば。。。 ⇒そう、Reactならね
7. Try to start sample react-app $ npm i -g create-react-app $ create-react-app myapp $ cd myapp $ yarn start
8. My understanding of React • React = Viewライブラリ ◦ 見た目の部分がやりたいから、今回の要件に合いそう • component = class、state = instance variable、property = initialize value ◦ Java脳には理解しやすく、書きやすかった（後述） • Component Life-cycle ◦ これのおかげでビューの扱いが超絶簡単になっている（後述） • Styled component ◦ デザインとロジックをまとめられる、部品化しやすい、変数化されていたりもして改造できる ◦ Material-UIがあればコピペでビューができる
9. Compare React and Java class Parent extends React.Component { static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.int.isRequired, }; // コンストラクタで初期値をセット constructor(props) { super(props); // stateの初期値を設定 this.state = { name: this.props.name, age: this.props.age, }; } } class Human { String name; int age; // コンストラクタで初期値をセット Human(String name, int age) { super(); // クラス変数の初期値を設定 this.name = name; this.age = age; } }
10. Component life-cycle • componentDidMount() ◦ DOM構築後に走るイベントなので、ここで初回の API通信したり • componentDidUpdate(prevProps, prevState, snapshot) ◦ propertyまたはstateが変わった時なので、 2回目以降のAPI通信したり ◦ prevPropsが前回の値でthis.propsが現在の値として比較可能 • componentWillUnmount() ◦ コンポーネントが使われなくなる時なので、終了処理したり • shouldComponentUpdate(nextProps, nextState) ◦ コンポーネントを再描画すべきかどうかの判定処理を入れたり
11. Next challenges • TypeScript（TSX） ◦ TSXだとProperty以外も型までしっかりと書けるため • SSR ◦ サーバサイドでもReactが使える嬉しい機能。 BFFやる時までには習得したい • Hooks ◦ Reactの新しい概念・機能で、簡潔に書ける /テストしやすくなるため
12. Work efficiency tool ＜画像を貼る＞ 1. 左テキストエリアのstateが変わったら APIにその内容を送信 2. レスポンスを右テキストエリアに表示 3. コピー！ で終わって、社内用ドキュメントに貼り付ける
13. Summary • ちょっと作るくらいならcreate-react-appで8割終わる ◦ 余談：裏がGoならgo-staikとかでReactの静的ファイル固めれば 1バイナリで配布できる • Java脳からはcomponent, state, propertyは理解しやすい • propertyは型があって良い ◦ TSXはもっと良さそう • Styled componentだと1ファイルで済むから楽ちん（JSONで書けるし） Javaを噛ったことあるバックエンドエンジニアでも抵抗感少なく触れた