ウィリアムのいたずらの、まちあるき、たべあるき

10月１９日
【FinTech勉強会】Reactの紹介と学び方（資産運用イノベーション協会）
https://finance.doorkeeper.jp/events/65965
に行ってきた！ので内容をメモメモ

---

■資産運用イノベーション協会とは何か？
・動画
・平和不動産
　東京証券取引所　戦後すぐにできた
　紙でエアシューターで送っていた証券会社のこっている
　茅場町にはエンジニアリングが足りない
・今回はReact
　Reactで納品すること増えた。金融機関に広めたい

■Reactの紹介
・自己紹介
　Reactの本書きました
・私とReactとの出会い
　２万行のJQueryベースのコードをReactへ移行
・JavaScriptの歴史
　昔：プログラマ、デザイナーの世界
　今：Javascript→フロントエンドエンジニア
　　　　→デザイナーもバックエンドもフロントやる
　Javascript：古い　暗黒期→カムバック Gmailなど２０００年から Ajax
　現在 Node.js：非同期I/O　
・モダンJS(ES6)
　バックエンドの人：JSは怪しいというイメージ→安定してきた。
　２０１５年にＥＳ６
　　ES5：プロトタイプ型がったので、なぞな書き方でクラス
　　ＥＳ６：ふるうにクラス
　ＥＳ６（正式にはＥＳ２０１５）
　　現時点ではブラウザーのサポートは完全ではない
　　babel：ＥＳ５にする
　CoffeScript忘れましょう
　typescript:anglarで、MSが押し
・ＳＰＡ
　ＭＶＣのどかな時代→リアルタイムでできないのは・・
　Ajaxシンプル
　Ajax複雑
　ＳＰＡ
　　サーバーはモデルとコントローラー
　　クライアント側でＭＶＣ
　　　→スマートフォン、スマホファーストと同じ
　　デメリット
　　　検索エンジン対策（ＳＥＯ）
　　　ＩＥ６を切り捨てないと・・
　　ライブラリ、フレームワーク
　　　Backbone
　　　Angular：双方向バインディング
　　　　→パフォーマンスの問題、バージョン2(4)は非互換
　　　Embar
　　　Vue：新時代のJQuery？

・Reactの紹介
　Facebookが開発
　Facebookが実際に使っている実績
　ライセンス問題→解決（ＭＩＴ）
　Ｒｅａｃｔ：
　　シンプルなプログラミングモデル
　　コンポーネント指向
　　充実した生態系（豊富なコンポーネント）
　全画面表示
　イベントでのデータ書き換え→全画面処理が動く(reactがやる）
　 　→Virtual DOM:フツウのアプリでは問題ない速さ
　コンポーネント指向
　確実に使われつつある

・Reactデモ
　node.jsで動いている
　ライブラリインストール：案外難しい

・モダンJS開発環境
　開発者若い、すごい勢い
　突然の開発停滞
　　最近はWebpack
　npm：ライブラリ管理（yarn)
　Babel
　ESLint：文法チェック
・ＪＳＸ
　コードの中にＨＴＭＬを書く
　今までの言語はテンプレートが分かれていたが、Reactは一緒に書く
　画面のどこが書き換わったかは気にしなくていい
・Material-UI

・情報源
　本家：Reactは落ち着いているけど・・・
　　https://reactjs.org
　　日本語：参考にはしても、最終的には・・

　欠点
　　ほかのライブラリを使う場合、うまくいかないことも
　　アニメーション苦手
　　バージョンアップでＡＰＩが変わる
　Redux(Flux)：表示のみのライブラリ
　　→モデル、コントロール要素がなくなる
　　→コード増えるイケてない部分も

・ReactNative
　ネイティブＵＩを使って、Android,iosアプリを作る
　タグがＨＴＭＬでなく、ios用

・Electron
　Windowsアプリ、iphone
　→HTMLが動いている
　slackは、これで書かれている

・Reactの学び方
　「結論から学ぶReact入門」
　「EY-Office」
　英語ＯＫなら
　　https://reactjs.org/tutorial/tutorial.html

　学び方
　　前提のクリア
　　　ＨＴＭＬ，ＣＳＳ，プログラミング入門（ヘルプしてもらえる言語）
　　環境構築
　　　案外難しい。ネット情報は注意（古いの見ちゃダメ）
　　ＪＳ（ＥＳ６）を学ぶ
　　ＪＳＸ
　　　テンプレートとは違う、条件や繰り返し
　　コンポーネント
　　　関数型コンポーネント、クラスコンポーネント

・Ｑ＆Ａ
　JQueryの問題
　　いろんなところに書ける→どこに書き換えている人がいるんだ！
　　いろいろなところに手を入れないと
　　ブログに書いてある
　　　　まず、ＵＩテストから書く
　　　　テストが通るかどうか
　デザイナーとの協業
　　ＪＳＸまで見てもらえるか
　　→コードを書くような流れになっている
　　　デザイナーとプログラマーを分けられない
　Electron
　　ネットのチュートリアルみて
　　Reactのある本の中に少し記述がある

■今後のとりくみ
・スクレイピング　次回
・ＡＩスピーカー　ロボット投信