Webナントカ

╭( ・ㅂ・)و ̑̑ グッ !

React Native Meetup#5 に参加してきた

  • ReactNative触ったことなかったので、情報収集目的で参加した
  • あくまで、個人のメモ書きです
  • 誤字脱字、認識齟齬はご了承ください

概要

19:00    会場&受付開始
19:30-19:40 オープニング
19:40 - 20:00   Why not React Native    Pramendra Gupta
20:00 - 20:20   Our choice in ReactNative   joe_re
20:20 - 20:30   async/await 構文を使った Android とのブリッジ   nullpoo
20:30 - 20:40   Animated入門  nolick1219
20:40 - 20:50   react-navigation について   hotchpotch
20:50 - 21:00   ReactNativeで8個アプリを作って、1個リリースして、使ったおすすめツールを紹介  mat_aki
21:00 - 21:10   Web開発者がReact Nativeで開発から運用までして辛かった事 DotEarl
21:10 - 21:20   スポンサーLT
21:20 - 22:00   懇親会
22:00 - 22:30   完全撤収

所感

  • 普段RailsなどのWebを触っている人が多かった
  • Nativeのブリッジもできる
  • 少人数のWebエンジニアでネイティブアプリを書く際に使われるケースが多い
  • AndroidとiOS両方の事例が紹介されていた
  • Router周りの話多かったので、この辺りがHotそう
    • react-navigationが良さそう
  • 結局ネイティブのコードは触らざるを得なさそう

Why not React Native Pramendra Gupta

Why not React Native - EN // Speaker Deck Why not React Native - JP // Speaker Deck

  • ユーザも開発者の体験も良い
  • Micrsoftのクラッシュレポート
  • デモ
    • 物体認識アプリのreact native app
      • メガネを撮るとメガネのサジェスチョン
      • ハサミを撮ると挟むのサジェスチョン
  • Maya-kai
  • 今こそreact native!

Our choice in ReactNative joe_re

Our choice in ReactNative // Speaker Deck

  • freeeのエンジニア
    • 最近electronの本を書いた
  • 交通費の経費精算のAndroidアプリをreact nativeで実装した
  • クロスプラットフォームの話はしない
    • suica対応
    • iOSはまだNFCの読み取りAPIが開いていない
  • 3ヶ月 * 2人
  • webの知見で作れる?
    • nativeの資産を使う場合はnativeの知識が必要
    • List Viewとか
  • 効果的だった?
    • 今回の開発体制体に、正解だった
  • middleware
    • redux-promise-middleware
  • nativeアプリケーションとReduxStateとの相性は良い
  • routerはreact-native-router-flux
    • 不満はなかった
    • react-navigation良さそう
  • クラッシュレポートはCrashlytics
  • yarnによるlicensesコマンドで雛形を作ると良い
  • Railsのrails consoleのように扱えるnodeのREPLアプリケーションを作った

async/await 構文を使った Android とのブリッジ nullpoo

async / await 構文を使った Android とのブリッジ - Qiita

  • 音声入力するためにインテントを使って、処理結果を受け取りたい
  • Android側でjs側に公開するメソッド
    • @ReactMethodを付ける
  • パッケージを作成、登録
  • async awaitを使って、呼び出す
  • kotlinでもブリッジできそう?
    • アノテーション書けるからできると思う

Animated入門 nolick1219

  • 5月からreact native使い始めた
  • animatedValueを定義する
  • アニメーションのデモとAPIの解説
  • Animations

react-navigation について hotchpotch

ReactNativeで8個アプリを作って、1個リリースして、使ったおすすめツールを紹介 mat_aki

  • 1個iOSでアプリをリリースした
  • sonic gardenの人
  • ツールなどについて
  • Hot Reload
    • シミュレータでCmd+d
  • デバッガー
    • シミュレータでCmd+d
    • 実機だと振る
  • React Naative Debugger
  • Firebase
    • PUSH通知
    • 感想はもう一歩
      • 届いたかどうかの測定がいまいち?
  • CodePush
    • storeの審査なしにアプリをバージョンアップできる
  • Bugsnag
    • エラー検知
  • React Native Router Flux
  • Atom
  • eslint
  • Redux
  • Expo
  • Ducks
  • component色々
  • fastlane

Web開発者がReact Nativeで開発から運用までして辛かった事 DotEarl

  • toggetterの人
  • 辛かった点
    • 広告SDKの組み込み
      • 結局自分でBridge書いた
    • 結局ネイティブのコード触らないといけない
    • RNのアップグレード
    • 当時安定してなかった
  • 良かった点
    • Web感覚
    • 公開されてる機能で大体作れる

スポンサーLT

React反省会@Wantedlyに参加してきた

(2017/05/11追記)


  • React反省会@Wantedlyに参加したので、取り急ぎ、メモを公開します。
  • あくまで、個人のメモ書きなので、誤字脱字、認識齟齬はご了承ください。
  • 目次は敬称略ですが、ご了承ください。

React反省会@Wantedly

天野 祐介

サイボウズ株式会社 グローバル開発本部 kintone開発チームリーダー。

  • どうチームに浸透させたか
  • フロント専任はいない
  • Google Closure Tools
    • サードパーティライブラリとの相性が悪い
  • MV*ライブラリ戦争を外から眺めていた
  • 情報共有が足りなかった
  • Frontend Weekly Lunch
    • JSerInfoのazu_reさんが火曜日のお昼までにあげてくれるようにしてくれた
  • React + Redux or Flux Utils + Flow
  • 新しいパーツを作る時にReact化
  • ペアプロ
  • 新規で採用するのが一般的に
  • Fearless Changeという本を読むと良い
    Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

    Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

    • 作者: Mary Lynn Manns,Linda Rising,川口恭伸,木村卓央,高江洲睦,高橋一貴,中込大祐,安井力,山口鉄平,角征典
    • 出版社/メーカー: 丸善出版
    • 発売日: 2014/01/30
    • メディア: 単行本(ソフトカバー)
    • この商品を含むブログ (16件) を見る

石井 光次郎

株式会社マネーフォワード UIテクノロジー部。

  • プルリクエストを見直して、同じ議論をしている部分をまとめてみた
  • this.stateへ直接代入していいですか
    • ダメです!
    • 代入禁止
    • 再描画を伴わない変数変更がしたかった
      • 任意のインタンス変数を定義
  • React Lifecycle内でactionを発行していいか
    • ダメです!
    • 無限ループ
    • 無限ループしなければいいの?
      • それもダメだと思う
  • Reactを使うと何がいいのですか
  • ドキュメントを参考にしたけど、難しい
  • 宣言的、コンポーネントベースという概念を噛み砕けていなかった

鈴木 健太

株式会社クラウドワークス プロダクトDiv クライアントサポートG。

  • 非SPAなRailsアプリでレールに乗りつつReactを使う話 // Speaker Deck
  • 非SPAなRailsアプリにreactを入れた
  • Railsエンジニアの立場からフロントエンドの話し
  • coffeeが多い、一部でvue
  • 画面の一部をreactを導入
    • ユーザの更新に対して、画面を再描画したい部分に対して、部分的
  • sprockets => webpack
  • react_on_rails
  • react_rails
  • webpackで使うならばreact_on_railsが良さそう
  • react_on_railsでCSRFトークンを扱う
  • react_on_railsでi18n
  • react_on_railsでTurbolink
  • 反省点
    • reactのコンポーネントとRailsのViewを混ぜてしまった
      • DOMだけでなく、CSSなども二重管理になってしまった
    • RailsからReactへのデータの渡し方が甘かった
      • コンポーネントをSSRしつつAPIでも更新したい
      • SSR用とAPI用のロジックが二重管理になる
    • Viewをどちらでレンダリングするのか
  • 次にやるなら
    • 完全に分離したい
    • Railsは基本的にAPIにして、SPA的な作りにする

外村 和仁

株式会社クックパッド サービス開発部 兼 人事部。

  • BdashにおけるFlux設計 // Speaker Deck
  • @hokaccha
  • Bdash
    • SQL用のGUIツール
    • electronで開発
  • Domain Logic
    • 描画に関するkとお以外のすべての処理
    • DBのやりとり、APIの呼び出し
    • どこにあるべきか
      • Store? Action Creator? Middleware?
      • Bdashでは、Action Creatorに入れた
    • Domain LogicをFluxから切り離した
      • StoreとDomain Logicはテストしやすくなった
      • Action Creatorはテストしづらい
  • Storeをどう分割するか
    • facebook/fluxでは、リソース毎にStoreを分割する
    • Page単位で分けてみた
    • Pageごとに独立したStoreを持つ
    • Page感で共有するデータはDomain Logic層にストアする
  • 汎用的な設計ではない
    • 今回はLocal Storageを利用したので、APIとかになるとロスが多いかも
  • 反省点
    • 他にも独自の設計・実装がいくつかある
    • コントリビューションの敷居が高くなる
    • 設計思想を共有するのが大変
  • 良かった点
    • 個人的には、きれいに設計できて満足
    • 設計を考えるのが勉強になる
      • Reduxに納得いっていなかった部分なども実は理にかなっているのが分かったり

泉 将之

ウォンテッドリー株式会社 エンジニア(インターン)

  • Performance of rendering over 10k items using React // Speaker Deck
  • Reactで多くのコンポーネントを描画する際の注意点
  • Wantedly people for PC
  • React + ReduxのSPA
  • redux-sagaからserviceを呼ぶ
  • エンジニア一人
  • 全体的にレスポンスが遅い
    • 社長からのissue
    • 2万に以上利用者がいても大丈夫なように
  • 1万に以上つながりをもっていてもちゃんと快適に検索できる
  • レンダリング回数を減らす
  • リストやアイテムの更新回数が増えがち
  • 検索時に文字入力する度にリストアイテム全県updateしていた
  • shouldComponentUpdateを適用
  • ユーザ入力のdebounce
    • lodash.debounce
    • redux-sagaでお実装可能
    • throttleだとユーザ入力を取りこぼす
  • Immutable.js周り
    • Immutalble.is()は思い
    • コレクションにis()は使うとヤバい
  • React.PureComponentを使う
  • immutableのtoJS()は重い
  • immutableのget()やhas()はO(1)ではない
    • filterとかmapするときは気をつける
  • 画面外のものは描画しない
    • react-lazyload
      • 監視するコンポーネントが多すぎる
  • react-virtualized
    • 代わりにこちらを使った
    • スクロールを監視するのはリストの親のみ
  • 巨大なリストには、react-virtualizedが有効

森脇 健人

Wantedlyのエンジニア。

  • 導入して1年経ったので、react周りの技術スタックについて反省
  • js周りの歴史
    • jquery-ujs
    • backbone
    • angular 1
    • react
  • angularは一気に全体に導入された
    • 詳しい人ひとりだけ
  • React導入時に注意したこと
    • 各人を増やすことに尽力した
    • トイレとかでReactいいよとつぶやく
    • 一部から導入した
    • デザイナーに認めてもらう
  • 結果、各人が増えた
  • 10機能、component数300ぐらい
  • webpack
    • 独立した機能から使いだして、独立したアプリケーションがっぱいできた
    • 全体に導入する際に困っている
    • 各機能が独立しているので、一気に読み込めない
    • それぞれがstoreを作って、routingしている
    • アプリケーションは一つで、lazy loadで必要なものを読み込む
    • webpackのdynamic importでできる
  • ESLint
    • もともと使っていなかった
    • すごいペースでコードが汚くなっていく
    • 途中から導入した
    • 反省点: 初めから入れて、徹底する
  • Immutable.js
    • Immutable便利
    • どこはImmutableで、どこはPlainなのかが分からなくなってくる
    • propTypesも適当になってきた
      • anyがいっぱい
    • TSを導入?
  • Containeer
    • 状態管理を行うcomponent
    • どこからContainerで、どこからcomponent
    • porpsの受け渡しが多すぎるひどいコードが増えた
    • もっと細かくContainerを分けるべきだった
  • ES2015
    • stage-3まで使える
    • それ以下は要相談
    • 型は必要だった?
    • 最近はgo-lang書く人増えてきた
    • TSのIntelisenseがいい
    • TSにしても良かった
    • 途中で入れるのは骨が折れる
    • Flowでも可
  • テスト
    • jsの単体テストはない、Railsを含めたE2E
    • テストはかけた方がいい
    • 全部E2Eで書くのは大変
  • ディレクトリ構成
    • stateとUIを分けるべき
    • componentsとcontainerはディレクトリで分けなくても良さそう
    • components/とstate/fooapp/actions, …
  • CSS
    • 普通にcss modules使えば良かった

以下、飛び込みLT


ReactでCMSを作ったときにハマったこと

  • 管理画面(CMS)の実装
  • undoやredoを実装
  • Object.assignのshallow copy
  • immutable.jsの導入
  • しがないラジオ

React + Redux 未経験者への導入

ポートフォリオサイトを常時SSL化対応した

自分のポートフォリオサイト(kikunantoka.com)と過去に運営していたサービスの閉鎖を知らせるページ(itsunomanika.kikunantoka.com)をGitHub Pagesでホスティングしていて、カスタムドメインを使用している。

GitHubのレポジトリは下記。

GitHub Pagesでは、github.ioドメインを使っている間は、自動で常時SSL化してくれていて、最高なのだが、カスタムドメインを使用すると、常時SSL化はされていない状態となる。最近は、常時SSL化対応していないサイトに発言権がない世の中になってきているので、常時SSL化対応した。

下記を参考にCloudFlareを使う方法で対応した。

カスタムドメインの GitHub Pages で HTTPS を使う - Qiita

作業内容的にはCloudFlareの設定とお名前ドットコムの設定をいじるだけで完了した。設定の反映まで時間がかかるので、自分が設定した設定は合っていると信じて寝た方が吉。記事の最後の方に書いてあるinclude subdomainsをONにするとサブドメインも常時SSL化された。サブドメイン含めて、無料で対応できるし、あまり時間もかからなかったので、GitHub Pagesで静的サイトをホスティングしている人は早めに対応してしまった方が良いかと。

進捗どうですか

最近、飲み会のノリでPS4を買う輩がいて、うっかりR6Sをやる仲間が一人増え、5人パーティも組めるようになった。俄然R6Sをやってしまって、commit数が少ない気持ちはある。ただ、R6Sのキルレはせめて0.5に乗せたい。借金はなかなか減らない。

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

レインボーシックス シージ - PS4

レインボーシックス シージ - PS4