react-native meetup#3 勉強会に参加した

# 勉強会の基本情報

* 【日　時】2016年10月28日 19:00~22:00
* 【会　場】リレーションズ株式会社
* 【参加費】無料
* 【主　催】kazunari.NAKATA
* 【申し込み】http://react-native-meetup.connpass.com/event/40745/

# 概要
* About Test
    * @janus_wel
* マルチプラットフォーム時代のReact, React Native Universal JS
    * @shinout
* LT:TexInputと戦う話
    * @YutamaKotaro
* LT:ReactNativefor...
    * @besutome

# 内容
## About Test
### 株式会社キュア・アップの技術について
* 言語
    * server: node.js
    * web: React.js
    * mobile: React Native
    * desktop: Electron
* common tools
    * Babel
    * ESLint
    * browserify
    * webpack
    * mocha
    * flowtype
    * npm
    * documentationjs

### 補足
* 発表内容が多いが、気になることをここに記述した


## マルチプラットフォーム時代のReact, React Native Universal JS
### React Nativeって何？
* クロスプラットフォームアプリ開発用フレームワーク
* iOS, Android対応
* MacOSやWindowsに対応したプラグインもある
* Bridgeという死喰いでネイティブコードを呼び出す(HTML5アプリじゃない)

### Learn once, write anywhere
* 覚えるのは１回でいい
* プラットフォーム間のコードの共有は、できるか？
* Universal Javascriptを理解することができれば。

### Universal Javascriptとは？
* javascriptの言語仕様(ECMAScript)のみに依存したコード
* プラットフォームAPIに依存しないので環境を問わず利用できる
* commonjs/ESModulesのコード呼び出し部は、bundlerによって非node環境で実現される

### 言語仕様とそうでないものを知る
* Universal
    * RegExp, Array, Date, Object.freeze(), setTimeout(), Promise
* 実質Universal
    * console.log()
* その以外
    * fs, http, process.exit(), window, webAudio, XMLHttpRequest

### 実質Universalだけで、アプリケーしょんの何ができるか
* UI Layer
    * なし
* App Layer
    * React, flux(Redux)
* Domain Layer
    * ビジネスロジック（プラットフォームに依存しない)
* Infra Layer
    * インターフェイスを同じすればいい
* 結論： UI以外は共有可能


## LT:TexInputと戦う話
* 問題
    * TextInputとキーボードがかぶっていて何を入力している分からない
* Swiftだとどうなの？
    * Swiftエンジニアに聞いたところ
    * Swiftでも対策が必要らしい
    * React Native特有の問題ではない
* 経過
    * react-native-keyboard-spacer
        * https://github.com/Andr3wHur5t/react-native-keyboard-spacer
        * 単一かつflexレイアウトの時に有効
        * 自動で動作してとても便利
    * react-native-keyboard-aware-scroll-view
        * https://github.com/APSL/react-native-keyboard-aware-scroll-view
        * Scroll Viewの時に有効
        * 複数入力フォームがあっても問題なし
        * 手動でbindingする
    * 不満
        * 複数フォームがあっても大丈夫にしたい
        * flexでやりたい
* 自作
    * react-native-flex-keyboard-spacer
    * https://github.com/YutamaKotaro/react-native-flex-keyboard-spacer
    * 複数項目とflex両方に対応できる

## React Native for...
* React Native for Web
    * https://github.com/necolas/react-native-web
    * star数： 3264
    * React NativeのコンポーネントとAPIをwebでも使えるようにした
* React Web
    * https://github.com/taobaofed/react-web
    * star数： 2030
    * タオバオの二人がメインで開発
* React Native for macOS
    * https://github.com/ptmt/react-native-macos
    * star数： 7952
* React Desktop
    * https://github.com/gabrielbull/react-desktop
    * star数： 5267
    * React UI ComponentsがmacOS Sierraとwindows10で働く
    * node-webkitかElectron.jsで働かす
* A framework for building native apps with React. http://facebook.github.io/react-native/
    * https://github.com/ReactWindows/react-native-windows
    * star数： 1134
    * FacebookとWindows公認
* React VR
    * https://developer.oculus.com/webvr/
    * 開発中





# 感想
* React Native, Reactが初耳じゃないが、React Native勉強会に参加することが初めてである
* いろいろな会社は、React Nativeを使ってモバイルアプリを開発している。開発者は、一つの言語を把握して、サーバー側やクライアント側も作れることが素晴らしい
* ReactとReact Nativeは、共通できるかどうかことがわかっている。今後は、Learn once write anywhereできれば、開発効率が高くなれるね
* 今回は、用事があるので、懇親会に参加できなかったことが残念