React.js meetup #5 を開催しました - Cybozu Inside Out | サイボウズエンジニアのブログ

フロントエンドエキスパートチームの小林(@koba04)です。

2/1にReact.js meetup #5をサイボウズで開催しました。当日は雪が降っていましたが、会場がいっぱいになるほどたくさんの人に集まって頂きましてありがとうございました。

https://reactjs-meetup.connpass.com/event/76375/

Contributing React! @koba04

最初に、まず私から「Contributing to React!」というタイトルで、Reactにコントリビュートする方法を紹介しました。

Reactにコントリビュートしようと思っても、コードが複雑でどうしていいのかわからないということもあると思います。そのため、コントリビュートするための第一歩に必要な情報について紹介しました。

Reactでは、good first issueというラベル以外にも、タスクの難易度に対するDifficulty: mediumのようなラベルもあったり、誰かが取り組んでいるgood first issueはgood first issue(taken)に変わったりと、コントリビュートしやすくするための取り組みが行われています。

また、コードに対するPull Requestを送る以外にも、ドキュメントに対する修正もコントリビュートの1つです。英語で書く必要はありますが、足りないと感じたドキュメントをPull Requestすることもできます。

他にも、ドキュメントの翻訳を行うという形でのコントリビュートも可能です。 Reactのサイトでは、YarnやJestと同様にCrowdinを使った翻訳の仕組みがあることを紹介しました。

コードに対してコントリビュートしたいと思っても、Reactの複雑なコードベースをすぐに把握するのは難しいと思います。 Reactのサイトには、コントリビュートする人に対するドキュメントがあります。

これらのドキュメントを読んで、まずはgood first issueをやってみたり、不親切な警告メッセージがあればそれを修正したり、新しく警告を追加することはコードにコントリビュートする第一歩になります。

また別のトピックとして、v17で廃止されるライフサイクルメソッドと新しいContext APIについても、大きな変更であるため簡単に紹介しました。

f:id:cybozuinsideout:20180202175726j:plain

Static sites with create-react-app and Junctions @james_k_nelson

React ArmonyというReactを学ぶためのサイトを作っていたり、Junctionsというルーティングライブラリを作成されている@james_k_nelsonさんの発表は、 create-react-appから作成したアプリをJunctionsを使い、15分でブログにする内容でした。ライブコーディング中心の内容で、個人的にライブコーディング見るのが好きなのでとても楽しめました。

Panel Discussion

というメンバーでパネルディスカッションしました。多くの人がReactを使うときに悩む、サードパーティライブラリの選定やアニメーション、CSSについて、Redux、ルーティングについて話しました。他にも、Reactを教えるときに難しいところやドメインロジックの置き場についても触れました。

実際にプロダクトを開発するときに、どのように考えてどうしているのかという話がたくさん聞けて、とても勉強になりました。

f:id:cybozuinsideout:20180202175741j:plain

LT

10 min ReactDOM Codebase Overview @malloc007

Reactのコードを読んでみたという内容のLTでした。まぁ複雑ですよね...。

Redux のディレクトリ構成を考える @sottar_

Reduxを使ったアプリケーションのディレクトリ構造についてのLTでした。 Container ComponentとPresentational Componentの使いわけや、Action CreatorやReducerなどをどのように配置するのかというパターンについてのお話でした。 actionsとかreducersのような単位で分けることをRails-styleっていうんですね。