dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

HTML5とか勉強会 - React最新情報　に行ってきた

勉強会 Frontend

行ってきました。

React現状確認

@koba04 さん。
一人React.js Advent Calendar 2014 - Qiita にはお世話になりました。

React のこれまでの歴史と最新情報のまとめ。

const Item = ({item}) => (
  <div>
    ...
  </div>
);
  • state やライフサイクルメソッドは持たせることができないので ES2015 のクラスを使う
  • パフォーマンス最適化が将来導入される...？
  • ES2015 の Class 記法によるコンポーネント
    • Mixins は死んだ
    • React.createClass も outdated な感じ
  • React.PureComponent なるものの導入が議論されてるらしい。詳しくは React の Issue #6914 を。
  • React のパフォーマンス測定には react-addons-perf が使える。詳しくは
  • PropTypes はレガシー
    • Flow や TypeScript を使おう
  • Ref と DOM
    • String Ref（<input ref="title"> みたいなの）はレガシー。callback Ref を使おう
    • findDOMNodes はあんまり使うことない
  • テスト
    • airbnb/enzyme というテストユーティリティがいいらしい
      • 何ができるようになるかは調べる
  • ESLint
    • eslint-plugin-react、eslint-plugin-jsx-a11y
  • その他
感想

内容たっぷり。かつもう少し勉強してからでないとピンと来ない部分もあってまだまだ勉強が足りないなと反省。
今使ってる機能が一部 legacy という扱いになってたり（太字部分）してびっくりです。


なぜReduxを使うのか

@kuy さん。
Redux 関係の Qiita 記事、参考にさせていただいてます。

  • Redux 人気は右肩上がり
  • Flux が解決したもの：React 単体のつらみ
    • 階層が深くなったときのバケツリレー問題を回避
    • コンポーネント間のデータの融通が不要になった
    • デバッグが容易になった
      • redux-logger だけでだいたい原因特定できる
    • テストが容易になった
  • Redux のいいところ
    • Single Store, Single State
    • 状態管理に特化
    • Store の役割を分割して名前をつけた（Reducer, Middleware など）
  • Reduxは状態管理に特化したライブラリなので、素の状態のまま使うのはおすすめできない。必要なMiddlewareを入れよう
reducer で他の reducer が担当する State が欲しくなったらどうするの？
  • 分割単位に問題がないか考えてみる
  • Middleware で情報を補完する
    • Action には View が持ってる最小限の情報を持たせる
    • Middleware でその Action をひろって改変する
非同期処理との戦い
  • componentDidMount で初期データを読み込むのは絶対 NG
  • redux-thunk 使ってもイマイチ...
    • Action Creator に複雑な処理を全部押し込んでるけどいいの？
    • テストどうするの？
  • そこで、redux-saga
    • 非同期処理を yield で同期処理っぽく書ける？
function* runRequestPosts() {
  const { date, error } = yield call(
    callAPI, 'http://localhost:8080/posts/'
  );
  if (data && !error) {
    yield put(successPosts({ data });
  } else {
    yield put(failurePosts({ data });
  }
}

function* handleRequestPosts() {
  yield* takeEvery(REQUEST_POSTS, runRequestPosts);
}
まとめ
  • 背景にあるアイディアや何を解決しようとしているのかを理解して、ライブラリの流行り廃りに振り回されないようにしよう
  • Reducer の分割は一筋縄ではいかないのでしっかり悩もう
  • Redux には適切な Middleware を導入しよう
感想

「素の Redux でがんばるのってつらくない？Middleware 入れるの前提になってるの？」とか
「Redux で非同期処理するのに redux-thunk 導入してみたけど Action Creators がごちゃごちゃしてきて、果たしてこれでいいのかという気持ちになる」とか
Redux をちょっと触ったばかりで個人的に思っていた疑問に答えていただけて、ありがたかったです。
やっぱり非同期処理は redux-saga かなー。


Relay

@hokaccha さん

Relay というフレームワークについてのお話。

  • Relay
    • フルスタックなフレームワーク
    • フロントエンドに react, サーバーサイドに GraphQL を使用し、両者をつなぐもの（であってる？）
  • GraphQL
    • クエリ言語
    • クライアント／サーバー間のやり取り
    • REST とかと同じレイヤー
  • Relay
    • 特徴
      • Declarative
        • React だけ使った場合よりも、より宣言的に書ける
      • Colocation
      • Mutations
あわせて読みたい

GraphQL が気になったらこれ読むと良さそう
Basics | Let’s Learn GraphQL | Learn GraphQL

感想

Relay、全く知らなかったんですがコンセプトとかサンプルコード見せていただいてだいぶイメージ湧きました。
印象としては、おもしろそー＆便利そう　が２割で、色々つらそう＆今は手を出すべきじゃなさそう　が８割。

Getting Started 読むのも React / Redux をもう少し勉強してからでいいかな。


How to style React components

スライド：How to style React components

@Quramy さん

  • CSS のGlobal性とどう戦うか

今日は下2つの話。

CSS in JS
CSS Modules
  • CSS in JS より新しい
  • CSS を JS に import する
/* src/Card.jsx */
import React from "react";
import * as st from "./Card.css"; // .cssからimport

export class Card extends React.Component {
  render() {
    const {title, children} = this.props;
    return (
      <div className={st.root} > {/* class名がexportされている */}
         <header className={st.title}>{title}</header>
         <div>{children}</div>
      </div>
    );
  }
}
  • webpack の場合は css-loader から利用可能
  • composes キーワードで CSS の合成が可能
  • @value で値を定義できる
あわせて読みたい

Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | プログラミング | POSTD

感想

CSS in JS と CSS Modules、どちらも聞いたことある程度だったけど両者の違いが非常にわかりやすかったです。
sass とか less とか使ってる人には CSS Modules の方がいいのかな。
私も CSS Modules の方が覚えること少ないし良さそうという印象を持ちました。


Atomic Design powered by React

五藤 佑典 さん

新サービスで Atomic Design という考え方を取り入れた話。

あわせて読みたい

Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.com

感想

Atomic Design は初めて聞きました。
React にしてもそうですが、こういった中〜大規模な成功事例を聞くのはすごく勉強になりますね。

Atomic Design がすごいのではなくて、これを取り入れた上で
「何が Atoms で、何が Molecules で、何が Organisms なのか」というコンポーネントの粒度に対して
チームでの共通認識を形成した開発チームがすごいのだろうなあ、と勝手に思いました。


おわりに

というわけで非常に盛りだくさんでした。
私のような React 初学者でも理解できる＆実用的な内容と、実務でバリバリ使ってる人にも知見となる内容のバランスがよかった気がします。

9/3 に HTML5 Conference が開催されるそうなので楽しみ。