サーバサイドJavaのひとがReactをさわってみた

・Reactってなに？
・何がうれしいのかな？
・むむっ？ってなったこと
・まとめ

Transcript

1. サーバサイドJavaのひとが Reactをさわってみた 2018/09/22 yodai(よだい)
2. 自己紹介 • 名前：よだいよだい • Java(サーバサイド)が軸軸 – 最近のフロントエンのフロントエンドフロントエンドが軸わかりません！
3. アジェンダ • Reactってなに？ • 何がうれしいのかが軸うれしいのフロントエンドかな？ • むむっ？ってなったこと • まとめ
4. Reactってなに？ • FaceBookが軸作ったったJavaScriptライブラリ • UI部品を作るライブラを作るライブラリ作ったるライブラリライブラリ – 作った成したしたUI部品を作るライブラを作るライブラリ組み合わせてペーみ合わせてページ合わせてページわせてページ を作るライブラリ構成したするライブラリ
5. 何がうれしいのかがうれしいのかな？ • メンテナンスしやすくなる？しやすくなるライブラリ？
6. 何がうれしいのかがうれしいのかな？ <html> <head> <script lang=”text/javascript” src=”・・・/> </head> <body> ： <input type=”submit” onClick=” ” ・・・ >btn</input> ： </body> </html> ふつうのフロントエンドHTML・・・
7. 何がうれしいのかがうれしいのかな？ <html> <head> <script lang=”text/javascript” src=”・・・/> ： ： ： ： ： <input type=”submit” onClick=” ” ・・・ >btn</input> ： </body> </html> 処理の実体と実行箇の実体と実行箇所実体と実行箇所が結と実行箇所が結構実行箇所が結構離れていが結構離れている結構離れているれている
8. 何がうれしいのかがうれしいのかな？ handleOnClick() { // onClick時の処理を書くの処理を書く処理を書くを書く書くく } Render() { Return ( : <input type=”submit” onClick=”{this.handleOnClick}” value=”button” /> ); } 結構近くに書けるのでくに書けるので書けるのでけるの実体と実行箇所で メンテしやすいかも？しやすいかも？
9. 何がうれしいのかがうれしいのかな？ • 通信量が少なくなる！が軸少なくなる！なくなるライブラリ！ – Reactに限ったことではなったことではないけど！
10. 何がうれしいのかがうれしいのかな？ <html> <head> <script lang=”text/javascript” src=”・・・/> </head> <body> ： ： ： <input type=”submit” onClick=” ” ・・・ >btn</input> ： </body> </html> HTML全部送信！
11. 何がうれしいのかがうれしいのかな？ { ”name” : “yodai”, ”age” : 43, ”tel” : “111-222-3333”, ”ability” : [ “Java”, “JavaScript” ] } サーバからはこれだけからはこれだけ！ あと実行箇所が結構はJavaScriptが結構離れているなんと実行箇所が結構かする！
12. むむっ？ってなっったこと • 環境構築が難しい・・・が軸難しい・・・しい・・・ – なにを作るライブラリnpm installすればいいのフロントエンド？ – package.json,webpack.config.js？ • JavaでいうところのフロントエンドMaven
13. まとめ • Reactに限ったことではなったことではないけれど、通信通信 量が少なくなる！が軸減ったりするのでったりするライブラリのフロントエンドで、通信データがあふれが軸あふれ るライブラリ時代にマッチするかにマッチするかなーするライブラリかなー
14. ゴール • 書籍を管理したり、を作るライブラリ管理したり、読書記したり、通信読書記録をつけるみを作るライブラリつけるライブラリみ合わせてページ たいなものフロントエンドを作るライブラリ完成したするライブラリところまでか な。。
15. ご清聴清聴 ありがとうご清聴さいました！