Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
バックエンドエンジニアから見たReact #react_fukuoka
Search
Transnano
June 05, 2019
Technology
2
110
バックエンドエンジニアから見たReact #react_fukuoka
バックエンドエンジニアがReactに入門する際に敷居を下げるための発表資料
Transnano
June 05, 2019
Tweet
Share
More Decks by Transnano
See All by Transnano
ヤフーのデータ入出稿を支えるSRE
transnano
0
520
2019/07/11 ふくばねてす node-2 コンテナ移行におけるアレコレと使えるアレコレ(仮)
transnano
0
320
Consulって何だろう
transnano
0
100
PrometheusExporterを作ってみた+α
transnano
0
210
Other Decks in Technology
See All in Technology
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
330
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
GraphQLに入門してみた
chiroruxx
2
110
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5k
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
160
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
KTC_DBRE.pdf
_awache
0
290
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
830
Navigating Team Friction
lara
177
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
GraphQLとの向き合い方2022年版
quramy
28
12k
Agile that works and the tools we love
rasmusluckow
323
20k
GitHub's CSS Performance
jonrohan
1023
450k
Teambox: Starting and Learning
jrom
126
8.4k
Unsuck your backbone
ammeep
660
56k
Six Lessons from altMBA
skipperchong
19
2.9k
Web Components: a chance to create the future
zenorocha
304
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Transcript
バックエンドエンジニアか ら見たReact Ryota Suginaga
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の機能詳細
Self-introduction 杉永良太(@transnano) ヤフー株式会社 バックエンドエンジニア(SRE) YAML > Shell > (超えられない壁) >
TypeScript > Ruby, Python, Perl, Java 以前:業務システム・アプリ、Java > C# > JavaScript 興味:クラウドネイティブ、Go > React (Reactについての理解が間違っていたら優しく教えてください)
Anai OMG!!
Back-end engineer worries CLIとかWebAPI、監視は得意 CUI(CLI)でもいいけど、GUI(Web)の方がやっぱり便利! ⇒Webアプリならインストールも要らないしね ⇒Push->デプロイの自動化・運用は任せて〜
Want to create a small web-app バックエンドAPIは秒で作るから、結果を表示する部分だけ作れれば。。。 ⇒そう、Reactならね
Try to start sample react-app $ npm i -g create-react-app
$ create-react-app myapp $ cd myapp $ yarn start
My understanding of React • React = Viewライブラリ ◦ 見た目の部分がやりたいから、今回の要件に合いそう
• component = class、state = instance variable、property = initialize value ◦ Java脳には理解しやすく、書きやすかった(後述) • Component Life-cycle ◦ これのおかげでビューの扱いが超絶簡単になっている(後述) • Styled component ◦ デザインとロジックをまとめられる、部品化しやすい、変数化されていたりもして改造できる ◦ Material-UIがあればコピペでビューができる
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; } }
Component life-cycle • componentDidMount() ◦ DOM構築後に走るイベントなので、ここで初回の API通信したり • componentDidUpdate(prevProps, prevState,
snapshot) ◦ propertyまたはstateが変わった時なので、 2回目以降のAPI通信したり ◦ prevPropsが前回の値でthis.propsが現在の値として比較可能 • componentWillUnmount() ◦ コンポーネントが使われなくなる時なので、終了処理したり • shouldComponentUpdate(nextProps, nextState) ◦ コンポーネントを再描画すべきかどうかの判定処理を入れたり
Next challenges • TypeScript(TSX) ◦ TSXだとProperty以外も型までしっかりと書けるため • SSR ◦ サーバサイドでもReactが使える嬉しい機能。
BFFやる時までには習得したい • Hooks ◦ Reactの新しい概念・機能で、簡潔に書ける /テストしやすくなるため
Work efficiency tool <画像を貼る> 1. 左テキストエリアのstateが変わったら APIにその内容を送信 2. レスポンスを右テキストエリアに表示 3.
コピー! で終わって、社内用ドキュメントに貼り付ける
Summary • ちょっと作るくらいならcreate-react-appで8割終わる ◦ 余談:裏がGoならgo-staikとかでReactの静的ファイル固めれば 1バイナリで配布できる • Java脳からはcomponent, state, propertyは理解しやすい
• propertyは型があって良い ◦ TSXはもっと良さそう • Styled componentだと1ファイルで済むから楽ちん(JSONで書けるし) Javaを噛ったことあるバックエンドエンジニアでも抵抗感少なく触れた