Reactの魅力

freeeのインターン生でReactのハンズオンをやることになりReactの魅力について語ったので掲載。初心者なりにまとめた&かなりふざけた内容なのでご容赦を。

## 参考
- https://qiita.com/risagon/items/019942c60e9c3e6c05a5
- https://speakerdeck.com/sonatard/xuan-yan-de-ui
- https://qiita.com/naruto/items/fdb61bc743395f8d8faf

グラフはここから：https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d

Transcript

1. Reactの魅力
 @_mooriii

2. 自己紹介 名前：森 拓人（性別：男 性格：女） 所属：電通大 修士１年 エンジニア歴：２年くらい 趣味：カメラ　ギター　バレー　IoT Like：React, TypeScript 経験：Ts, Js, Kotlin, Golang, C#, Java, Dart(Flutter), Ruby(Rails), PHP(Laravel), Unity, Nim, Python 特徴：病みやすい。慣れるとボケが止まらなくなる。
3. 本題 ~ main subject ~
4. Reactってなぁに？
5. What's React？ Facebook製のJavaScriptライブラリ。Webアプリケーションのユーザー インターフェースを効率的に構築することを目的としており、主にView部 分を実装する。大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレ ンダリング機構がそなわっており、Webページの表示を従来のフレーム ワークと比較すると大幅に向上させることが可能になっている。JSXとい う独自の記法を用いて記述していくが、変数の値に応じて　宣言的な記 述が可能なため値に変更があると自動で再レンダリングされる。そのた め、DOMを操作する記述が必要がなく、HTMLの更新を意識しなくてい い。また、コンポーネントベースの手法を用いているため一度作ったコン ポーネントを再利用でき効率的なプログラミングができる。
6. ふぁ？
7. What's React？ 処理が早くて効率的なJSフレームワーク
8. なにがいいの？
9. なにがいいの？ • Virtual DOM(仮想DOM)で処理が速い • 宣言的な記述でHTMLの更新を意識しない • コンポーネントベースで効率的なプログラミング
10. なにがいいの？ • Virtual DOM(仮想DOM)で処理が速い • 宣言的な記述でHTMLの更新を意識しない • コンポーネントベースで効率的なプログラミング • モダンでかっこいい＆圧倒的採用率
11. Virtual DOM(仮想DOM)
12. Document Object Model (DOM) HTML や XML 文書のため のプログラミングインターフェ イス。 ウェブページの内容を変更す るためにはDOMをプログラム で操作する。 DOMツリー（イメージ）
13. 今まで 表示する内容を変更するにはjQueryなどを使ってDOMを直 接操作する必要があり、変更を反映するにはDOMを再構築 する必要があった。 DOM再構築 変更
14. Reactだと？ 実DOMの前に仮想DOMを作成し、仮想DOMの差分を見て実 DOMに変更を加えるため処理が速い。 仮想 DOM 変更 差分 差分だけ DOM 再構築 差分 参考：VirtualDOMの仕事ってなに？(Reactの表示速度がはやい理由 )
15. 宣言的な記述
16. 宣言的UI？ 参考：宣言的UI 前回の状態に依存されず、どういう状態になっているかを記 述する手法。対義語←→命令的。
17. ふぇ？
18. 命令的UI 参考：宣言的UI View部分だけ見てもUIがどう変化するのかわからない
19. 宣言的UI View部分を見るだけで何が表示されるのかわかる 参考：宣言的UI
20. 今までは ページに項目を追加したりするにはjQueryのメソッドなどを使 用して命令的にDOMを操作する必要があった。 $.getJSON('/api/items').then(data => { const ul = $('ul.item-list').empty(); data.items.forEach(item => { const li = $('<li>').addClass('item').appendTo(ul); if (item.stock === 0) li.addClass('soldout'); $('<div>').addClass('item-name').text(item.name).appendTo(li); $('<div>').addClass('item-price').text(item.price).appendTo(li); }); });
21. Reactだと？ JSXで宣言的に記述するので変数の値に応じて自動で再レン ダリングされる。 参考：Reactを使うとなぜjQueryが要らなくなるのか
22. Reactだと？ JSXで宣言的に記述するので変数の値に応じて自動で再レン ダリングされる。 参考：Reactを使うとなぜjQueryが要らなくなるのか なまら楽
23. さらに
24. ViewとLogicの分離 React16.8でのReactHooksの登場によってViewとロジック の記述の完全分離が可能になったゾ。可読性保守性⤴⤴
25. コンポーネント指向
26. コンポーネント指向 Reactはコンポーネントと呼ばれる部品を組み合わせてDOM を作成していく。コンポーネントは１度作れば再利用できるので 効率的で保守性が高い。
27. モダンでかっこいい
28. 圧倒的シェア 注) 60,000件の求人割合 Angular 21.0% Vue 0.8% React 78.1%
29. だから私は
30. React
31. あなたはどれを選ぶ？