「Forefront JavaScript ! 急成長中のサービスの技術達！」に参加してきました

• 2018/2/26
• https://air-closet.connpass.com/event/78099/

CTO対談

• 是澤さん(メルカリ)
• 鈴木さん(スペースマーケット)
• 辻さん(エアークローゼット)

エアークローゼット

• 全部jsで統一
• バックフロント区別せずみんな全部

airClosetのアーキテクチャと今後の展望

• osamu38
• 荒田修さん
• フリーランス
• エアークローゼットと仕事してる
• https://speakerdeck.com/osamu38/airclosetfalsehurontoakitekutiyafalseli-shi-tose

かつて

• rails
  • レガシーなコード
  • セキュリティ脆弱性
• モダンな設計へ
  • Reactへ
• 更に汎用的に
  • SSR

ReactでSSR

• react-helmet
• react-cookie

ReactのCSS

• CSS Modules
• styled-components

成功した話

• 頻繁にnpm-check-updates
  • 一気にアップデートすると死ぬ
  • こまめに上げておくと良い
• Next.jsいい

失敗した話

• RefluxJSを入れてしまった
  • Redux - Reducerって感じ
  • メンテされなくなった
• CSS Spriteを使ったこと
  • 画像をなるべく一枚にする
  • HTTP2だと早くならない
    • 1枚あたりのサイズ小さくした方がいい

SSR用に作ったFW

• https://github.com/osamu38/universal-investigation/

スペースマーケットを支える技術

• hmatsuda
• https://speakerdeck.com/hmatsuda/supesumaketutofalseakitekutiyabian-qian-2

スペースマーケットの技術スタック

• Rails
• React
• Swift
• Kotlin
• ReactNative
  • ホスト向けだけ
• GraphQL

ローンチ初期

• Rails
• ES5
• jQuery

React × Rails時代

• react-railsのgemを使った
  • グローバル変数をさわらなくなった
  • SSR

FWを統一

• React、ReactNative
  • ユニバーサルなコンポーネント作れる
• REST API -> GraphQL(参照系のみ)

GraphQL

• graphdoc
  • コマンド一発でAPIドキュメント
• GraphiQL
  • クエリ実行環境
• Apollo
  • GraphQLにクライアント

アーキテクチャと反省と改善

• @YutamaKotaro
• https://speakerdeck.com/yutamakotaro/akitekutiyatofan-sheng-togai-shan

技術を統一して学習コスト下げる

• 全部JSで
• プラットフォームの違いがあっても共通の処理は共有
  • Webもiosもandroidも
• Lerna
  • monorepo実現のためのツール
  • webとnativeで処理を共通化
  • Storeがとてもきれいになる
• Flow
  • nullチェックしてないとことか警告してくれる
  • model作ると相性良い

Flow

• config分かりづらい
  • 慣れで
• エラー分かりづらい
  • 慣れで
• VUPですぐエラー出る

Formik

• formのライブラリ
• webとnativeでバリデーションを共有できる

アプリエンジニアが感じたReactNative導入の良し悪し

• @imuuzak
• https://speakerdeck.com/imuuzak/apurienziniagagan-zitareactnativedao-ru-falseliang-sie-si

従来

• iosとandroid別のコードベースで作ってると
• バグ改修もアップデートも2倍

RNを検討

• 不安なことが多い
• プロトタイプの作成にはよさそう

fastifyはいいぞ

• @ykmikan(エアークローゼット)
• https://speakerdeck.com/ykmikan/fastifyhaiizo

fastify

• web framework
• オーバーヘッドが小さい
• expressっぽい
• validationをjsで書ける
  • swaggerっぽいことできる
• ペイロードが小さいほど速い

これからのReactのスタイリングにはStyled Componentsが最高かもしれない

• @h.arata(スペースマーケット)
• https://speakerdeck.com/8zk/korekarafalsesutairinguhastyled-conmponentsde

styled-components

• Reactのコンポーネントでcssを作れる
• スコープがコンポーネントに閉じる

storybook

• コンポーネントのカタログ

Nuxt.jsでいい感じにGraphQLを扱いたい話

• @takanorip
• https://speakerdeck.com/takanorip/use-graphql-nicely-with-nuxt-dot-js

なぜGraphQL

• サーバ側のステークホルダー多かった
• GraphQLなら１つのエンドポイントでやりとりできる

Nuxt.jsでどう使うか

• apollo-module

メルカリNOWを2ヶ月半でリリースした話し

• @sottar
• https://speakerdeck.com/sottar/2keyue-ban-desabisuworirisusitahua-si

webpack4について

• @mki_skt
• https://speakerdeck.com/mukai21/webpack-v4nituite

v4リリース

• BigChangeが大量
• 設定ファイルなくても動くように

jsのnumber

• brn0227
• https://speakerdeck.com/brn/numbers-in-javascript-2

ES2018とかのnumber

• 整数
• 少数
• 8進数
  • 0oからはじめると8進数
• 2進数
  • obからはじまると2進数
• BigInt
  • まだStage3
  • 64bit以上
  • BigInt以外との演算できない
• Separator
  • まだStage3
  • 数字の間に_書けるようになる