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
130
バックエンドエンジニアから見たReact #react_fukuoka
バックエンドエンジニアがReactに入門する際に敷居を下げるための発表資料
Transnano
June 05, 2019
Tweet
Share
More Decks by Transnano
See All by Transnano
ヤフーのデータ入出稿を支えるSRE
transnano
0
630
2019/07/11 ふくばねてす node-2 コンテナ移行におけるアレコレと使えるアレコレ(仮)
transnano
0
420
Consulって何だろう
transnano
0
120
PrometheusExporterを作ってみた+α
transnano
0
260
Other Decks in Technology
See All in Technology
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
2.5k
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
400
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
3
110
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
130
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
630
Backlog AI アシスタントが切り開く未来
vvatanabe
1
160
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
0
290
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
2
1.4k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
文字列の並び順 / String Collation
tmtms
1
100
Serverless Meetup #21
yoshidashingo
1
130
開発 × 生成AI × コミュニケーション:GENDAの開発現場で感じたコミュニケーションの変化 / GENDA Tech Talk #1
genda
0
290
Featured
See All Featured
Building an army of robots
kneath
306
45k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Speed Design
sergeychernyshev
32
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Done Done
chrislema
185
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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を噛ったことあるバックエンドエンジニアでも抵抗感少なく触れた