React 周辺のエコシステムで体験する再利用プログラミング(MANABIYA プログラミングセッション)

プログラマなら誰でも再利用性の高いプログラムを書きたいと思うでしょう。近年は、 UX やアジャイルなど、ユーザーが求めるものを「速く」「正確に」作ることが求められていると感じます。React 周辺のエコシステムはとてもパワフルで、それらの要望に対する１つの答えかもしれません。本セッションでは React 周辺技術を業務で扱ってきたエンジニアが、「何なら再利用できるのか」「何を再利用するのは無理なのか」「再利用するなら、どういう形がいいのか」など、再利用プログラミングについての考察を深めていきます。

Transcript

1. React 周辺のエコシステムで体験する 再利用プログラミング 2018/03/24 MANABIYA プログラミング言語セッション ランサーズ株式会社 沼野剛志
2. 自己紹介
3. 沼野剛志 1990年生まれ 出身高専　 ：神戸高専専攻科（~2012）：ロボット制御 出身大学院 ：JAIST（~2014）：VRの研究、出会いの研究で修論 現在はランサーズ株式会社でフロントエンドエンジニアとして 働いています。主に React を利用。 週末フリーランサーとして React の環境構築やテスト導入などでも活動中。 自己紹介 @numanomanu
4. 本日のアジェンダ（MANABIYA -programing- ） - なぜ再利用が必要か - React は１つの成功例（？） - そもそも React とは何か？ - どんな再利用ができる？ - 実際のプロダクト開発でも再利用した例 - 再利用できたもの、できなかったもの - なぜ React が再利用できるのか？ - なぜ React なのか - まとめ
5. なぜ再利用が必要か
6. - Facebook や Instagram などのアプリユーザー体験が当たり前の世の中 - ユーザー体験をよくするために、イテレーションを回すのが大事 - いい感じに使い回してさっさと実装できることが重要 プログラマやエンジニアに求められる技術も、「速く」「正確」に実装する技術が求められ ている。エンジニアの本質は、プログラミングではなく問題解決 なぜ再利用プログラミングが必要とされているか
7. - Facebook や Instagram などのアプリユーザー体験が当たり前の世の中 - ユーザー体験をよくするために、イテレーションを回すのが大事 - いい感じに使い回してさっさと実装できることが重要 プログラマやエンジニアに求められる技術も、「速く」「正確」に実装する技術が求められ ている。エンジニアの本質は、プログラミングではなく問題解決 なぜ再利用プログラミングが必要とされているか 実はサボりたいだけ。裏テーマ「 React周辺のエコシステムに依存するサボりプログラミング」
8. React は１つの成功例（？）
9. https://stateofjs.com/2017/front-end/results/
10. Front-end Frameworks – Worldwide Usage 各国で差はあるものの、ほとんどの国で React が使われている
11. Front-end Frameworks – Worldwide Usage 各国で差はあるものの、ほとんどの国で React が使われている 唯一中国だけが Vue.js が多い理由は Evan You 氏が中国系アメリカ人であったり ReactNative の Vue 版とも呼べる weex はアリババグループが作っているため。 人口統計上、世界の 4人に1人は中国人なので、この数は侮れないかもしれません。 参考 https://www.quora.com/Why-is-Vue-js-trending-more-in-China
12. React を利用している企業やアプリ - facebook - instagram - Netflix - Uber - Airbnb - New York Times - twitter Mobile - Ameba Mobile https://github.com/facebook/react/wiki/Sites-Using-React
13. そもそも React とは何か？
14. Facebook が開発した UI ライブラリ - 旧来の DOM 操作による状態管理を props や state で抽象化 - UI パーツをコンポーネントごとに管理するのが得意
15. 知られざる React 誕生の歴史 - XHP という facebook が開発していた PHP のエクステンション - 主に Cross Site Scripting を防ぐための仕組み - React.js は XHP をブラウザ側で処理できるように js にしたもの - (XHP はサーバー側とのラウンドトリップが多く発生する問題があったため) 個人的な考察ですが、仮想DOMの出発点が XSS 防止にあったと考えると、開発者が ユーザーの DOM へのアクセスを防ぐために、Javasciript で DOM を作ればいいじゃな いかという発想は、面白いと思う。 https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/
16. どんな再利用ができる？
17. UIパーツの再利用 (Component の再利用) - Component をレゴブロックのように再利用できる - Material-ui など、 WEB でよく使う UI のキットなどもある
19. 実際の利用シーン - import してレゴブロックのように組み合わせるだけ import Button from 'material-ui/Button'; … render() { return ( <Button color="primary"> Primary </Button> ) }
20. レゴブロックのように組み合わせる例 - props と state 、ライフサイクルさえ押さえておけば直感でわかる import Dialog from 'material-ui/Dialog'; import Button from 'material-ui/Button'; class SimpleDialogDemo extends React.Component { state = { open: false }; handleClickOpen = () => { this.setState({ open: true }); }; render() { return ( <div> <Button onClick={this.handleClickOpen}>Open simple dialog</Button> <Dialog open={this.state.open} /> </div> ); }
21. インターフェースの統一により直感でわかる - props と state 、ライフサイクルさえ押さえておけば直感でわかる import Dialog from 'material-ui/Dialog'; import Button from 'material-ui/Button'; class SimpleDialogDemo extends React.Component { state = { open: false }; handleClickOpen = () => { this.setState({ open: true }); }; render() { return ( <div> <Button onClick={this.handleClickOpen}>Open simple dialog</Button> <Dialog open={this.state.open} /> </div> ); } Component State - ダイアログの状態 Property - ボタンなら押す。 - ダイアログなら開く。
22. デザイン手法との親和性 - Component 単位で作らざるを得ないので Atomic Design との親和性が高い
23. WEB だけにとどまらない再利用 - スマホアプリには -> react native - VRには -> react vr - windows アプリには -> react-native-windows - mac アプリには -> react-native-macos - Electron では -> reactotron
24. React Native 基本的な view の構成法、状態管理は同じ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center'}, });
25. よくある実装はすでにライブラリ化されている - react-native-swiper の例 import Swiper from 'react-native-swiper'; import { Text, View } from 'react-native'; ... return ( <Swiper showsButtons={false} dotColor="#FFFFFF55" activeDotColor="#FFFFFFFF" > <View> <Text>Hello Swiper</Text> </View> <View> <Text>Beautiful</Text> </View> </Swiper> )
26. Node.js をインストールしている mac 前提。 $ npm install -g create-react-native-app $ create-react-native-app ReactNativeProject $ cd ReactNativeProject $ npm start // i を押せばして iphoneSimulator が起動してすぐに開発できる アプリの環境構築も簡単
27. react-native-web で native -> WEB もある - 元 twitter のエンジニアであるニコラス・ギャラガーのOSS - もはや react とはなんなのか。。。
28. React VR
29. import React from 'react'; import { AppRegistry, asset, Pano, Text, View } from 'react-vr'; export default class HelloWorldReactVR extends React.Component { render() { return ( <View> <Pano source={asset('chess-world.jpg')}/> <Text style={{ backgroundColor: 'red', fontSize: 0.8, layoutOrigin: [0.5, 0.5], transform: [{translate: [0, this.state.posY, -this.state.posZ]}], }}> hello world </Text> </View> } }; AppRegistry.registerComponent('HelloWorldReactVR', () => HelloWorldReactVR);
30. export default class HelloWorldReactVR extends React.Component { constructor(props) { super(props); this.state = { posY: 0, posZ: 3, }; setInterval(() => { if (this.state.posY > 3) { this.setState({ posY: 0 }) this.setState({ posZ: 3 }) } this.setState({ posY: this.state.posY + 0.05 }) this.setState({ posZ: this.state.posZ + 0.05 }) }, 100); } render() { ….
31. VR の環境構築も簡単 Node.js をインストールしている前提 $ npm install -g react-vr-cli $ react-vr init HelloWorldReactVR $ cd HelloWorldReactVR $ npm start // localhost:8081/vr/ にブラウザでアクセスするだけ
32. “ learn once write anywhere “ - React
33. 実際のプロダクト開発でも再利用した例 その１ Component の再利用と HOCパターン
34. material-ui でローディングなどを使い回す - ローディングで使うコンポーネントは別サービスでも material-ui を利用 - import CircularProgress from 'material-ui/CircularProgress';
35. ボタンの種類を管理して使い回す 通常サイズ 画面の半分サイズや色違い フルサイズ、角四角のボタン - ベースとなるコンポーネントを拡張して使い回したい
36. HOC を利用してコンポーネントの種類を管理 import React, { Component } from 'react'; import RaisedButton from 'material-ui/RaisedButton'; function createPrimaryButton(WrappedComponent) { return class designedButtonComponent extends Component { render() { return (<WrappedComponent {...this.props} primary={true} />); } } } export const PrimaryButton = createPrimaryButton(RaisedButton); - HOC(Higher-order-components) はコンポーネントを合成する仕組み - コンポーネントに関数を適応し、機能が合成されたコンポーネントを返す - propsを新しく加えたり、ライフサイクルメソッドを追加することも可能
37. HOC のイメージ図 コンポーネントに機能を加えて、 新たなコンポーネントを返す関数 Enhancer 機能追加したいコンポーネント MyComponent return Enhance(MyComponent) Reactのコンポーネントが引数 合成されたコンポーネント (Higher-Order Components) data data
38. import React, { Component }from 'react'; import RaisedButton from 'material-ui/RaisedButton'; import { buttonColor, buttonSize, buttonShape } from './button_styles'; function createButton(WrappedComponent, color, size, shape) { return class designedButtonComponent extends Component { render() { return (<WrappedComponent {...this.props} {...buttonColor[color]} {...buttonSize[size]} {...buttonShape[shape]} />); } } } export const PrimaryButtonFullWidth = createButton(RaisedButton, 'primary', 'fullWidth', 'square'); export const SecondaryButtonRounded = createButton(RaisedButton, 'secondary', 'original', 'round'); export const AccentButtonHalfWidth = createButton(RaisedButton, 'accent', 'halfWidth', 'original');
39. import { PrimaryButtonFullWidth, AccentButtonHalfWidth, NSecondaryButtonRounded } from './buttons'; const renderSomePageWithButton = buttonAction => <div> <PrimaryButtonFullWidth label={'プライマリボタン幅MAX'} /> <SecondaryButtonRounded label={'角丸セカンダリボタン'} /> <AccentButtonHalfWidth label={'アクセントボタン幅半分'} /> </div>
40. - コンポーネントに新たな機能を追加して使い回し安くできる - material-ui などすでに作成されたコンポーネントにも柔軟に適応可能 - HOC自体を他のコンポーネントにも使いまわせる（ログイン必須コンポーネントな ど） HOC パターンが再利用に及ぼすメリット
41. 実際のプロダクト開発でも再利用した例 その２ WEB からアプリへ
42. - フロントエンドのコードをほぼ使い回す。 WEBサイトを Cordova でアプリにしてリリース
43. 前提として、サーバー側は完全に API 化 S3 CloudFront EC2 gzip API Server GET: /services/1 ...etc web 版 アプリ 版
44. - 画面の大きさ(PC と スマホ) - アプリは SEO や URL が不要なので、戻るボタンなどが必要。 - 画像のアップロードの仕組み - PUSH 通知の実装 ユーザー体験で異なる部分は、使い回せないので、再実装が必要 アプリとWEBで大きく異なるところ
45. - 同じページでもヘッダー部分を WEB と アプリだけ分ける - それ以外の変わらない部分は基本的に同じ React Component を使える コンポーネントを使い回し、必要なところだけ分離
46. コンポーネント再利用のコツ - Atomic Design のように、コンポーネントの粒度を小さくしておく - コンポーネント同士の依存を少なくすることに徹する 新しいページができたとき、以前作ったものが使いまわせると快感！
47. WEB -> React Native で view 以外の部分を使い回す - WEB 版メッセージ機能 -> アプリ版への移植してリリース - Redux などフロントエンドの哲学や state の形部分は流用可能 - 実際にはほとんど書き直している・・・が、素早くリリースできた
48. Redux などの状態管理システムは再利用できた http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/27 - WEB とアプリで state はほぼ共通 Reduxとは？SPAなどの複雑化する React のステート（状態）管理を、 ルール（哲学）に従って書かせること で、フロントエンドの動きを人間に とって追いやすくするためのライブラ リ
49. 再利用できたもの、できなかったもの
50. 再利用できたもの - npm パッケージで配布されているライブラリ郡 - React で UI を構築する手法 - Redux などのフロントエンドの哲学（状態管理システムやモデル部分）
51. 再利用できなかったもの - 異なるサービスごとの UI の使い回し - 同じサービスでも生み出されてしまう新たな UI たち - アプリや WEB など「体験」として異なるもの
52. 良さそうな話ばかりしましたが・・・実際は？ - story book などがのコンポーネントのカタログが作れるがメンテできない => 運用でカバー。画面から DOM をみて、 class 名で grep。 - コンポーネントの粒度で悩む => PR のレビューや、ワークショップなどの啓蒙が必要 - Redux 記述量が多くてつらい - エコシステムに頼った結果、アップデートで動かなくなる 結局、全てが React で解決するわけではない。
53. なぜ React が再利用できるのか？
54. 完璧なフレームワークではない。UIに徹している。 - そもそも React はフレームワークではなく UI ライブラリ 状態管理や API の通信方法などは開発者に任されている - 逆に、UI であれば応用ができる。
55. “Do one thing and do it well” - Unix philosophy
56. from 概論：再利用のためのメカニズム 再利用は継承ではなく合成の方がうまくいく - HOC はまさに合成(コンポジション)のパターン - A という機能を B,C,D という別コンポーネントにそれぞれ適応する時に便利 ”クラス継承よりも オブジェクトコンポジションを多用すること”
57. 合成パターンはライブラリが書きやすい HOC の実装で実現されているライブラリや関数 - redux-form - radium - material-ui の muiThemable - react-router の withRouter など 使うときは、component をラップするだけ。
58. - json で利用するライブラリを管理できる - npm i のコマンド1回で簡単にライブラリを導入可能 ライブラリは npm ですぐに公開できる
59. - 難しい実装なども React のコミュニティライブラリで解決 - 利用したい機能を検索すると、ライブラリ化されていたりする - 例： redux で store の state を永続化させたいなぁ やりたいことを探せば、ライブラリが見つかる https://github.com/rt2zz/redux-persist
60. なぜ React なのか？
61. Angular や Vue があるじゃない？ - Vue はそもそもなかった。Angular:2010, React:2013, Vue:2014, - 下位互換のないAngular 2 をリリースした時に、React へ移る人が増えた - つまり、タイミングがよかった https://www.quora.com/Why-is-ReactJS-so-popular/answer/Aran%C4%91el-%C5%A0arenac
62. 強力なコミュニティ - Facebook という大企業の後ろ盾（ライセンスの問題もあるが） - Airbnb Netflix twitter など - コミッターがアメリカ以外のヨーロッパ圏にも多い - 冒頭の Vue が中国で人気という理由も、出身などによる - ReactEurope という大きなコミュニティ https://www.react-europe.org/
63. コミュニティメンバーがとても熱心(Dan Abramov)
64. まとめ
65. React 周辺のエコシステム - 継承より合成や、UI に徹した哲学 - ライブラリが書きやすいので書きたくなる - ライブラリの配布、再利用がしやすい - 使いまわせて開発が楽しい - コミュニティが大きくなる - 熱心な人が増える - その口コミでユーザー (ファン)が増える
66. まとめ 再利用プログラミングに重要なこと より高度な仕組みや体験が求められていて、手軽に使い回したい気持ちから - UI に徹する(1つのことをうまくやる) - npm で手軽に配布、再利用できる - 継承よりも合成(HOC) - 時流に乗った - コミュニテが活発 - 結果: ライブラリとエコシステムが手厚い 依存して中毒にならないように注意しましょう。
67. ご静聴ありがとうございました
68. アプリ登録 React