Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

numanomanu

March 24, 2018
Tweet

More Decks by numanomanu

Other Decks in Technology

Transcript

  1. 本日のアジェンダ(MANABIYA -programing- ) - なぜ再利用が必要か - React は1つの成功例(?) - そもそも

    React とは何か? - どんな再利用ができる? - 実際のプロダクト開発でも再利用した例 - 再利用できたもの、できなかったもの - なぜ React が再利用できるのか? - なぜ React なのか - まとめ
  2. - Facebook や Instagram などのアプリユーザー体験が当たり前の世の中 - ユーザー体験をよくするために、イテレーションを回すのが大事 - いい感じに使い回してさっさと実装できることが重要 プログラマやエンジニアに求められる技術も、「速く」「正確」に実装する技術が求められ

    ている。エンジニアの本質は、プログラミングではなく問題解決 なぜ再利用プログラミングが必要とされているか 実はサボりたいだけ。裏テーマ「 React周辺のエコシステムに依存するサボりプログラミング」
  3. 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
  4. React を利用している企業やアプリ - facebook - instagram - Netflix - Uber

    - Airbnb - New York Times - twitter Mobile - Ameba Mobile https://github.com/facebook/react/wiki/Sites-Using-React
  5. Facebook が開発した UI ライブラリ - 旧来の DOM 操作による状態管理を props や

    state で抽象化 - UI パーツをコンポーネントごとに管理するのが得意
  6. 知られざる 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/
  7. レゴブロックのように組み合わせる例 - 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> ); }
  8. インターフェースの統一により直感でわかる - 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 - ボタンなら押す。 - ダイアログなら開く。
  9. WEB だけにとどまらない再利用 - スマホアプリには -> react native - VRには ->

    react vr - windows アプリには -> react-native-windows - mac アプリには -> react-native-macos - Electron では -> reactotron
  10. 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'}, });
  11. よくある実装はすでにライブラリ化されている - 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> )
  12. Node.js をインストールしている mac 前提。 $ npm install -g create-react-native-app $

    create-react-native-app ReactNativeProject $ cd ReactNativeProject $ npm start // i を押せばして iphoneSimulator が起動してすぐに開発できる アプリの環境構築も簡単
  13. 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);
  14. 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() { ….
  15. VR の環境構築も簡単 Node.js をインストールしている前提 $ npm install -g react-vr-cli $

    react-vr init HelloWorldReactVR $ cd HelloWorldReactVR $ npm start // localhost:8081/vr/ にブラウザでアクセスするだけ
  16. 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を新しく加えたり、ライフサイクルメソッドを追加することも可能
  17. 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');
  18. import { PrimaryButtonFullWidth, AccentButtonHalfWidth, NSecondaryButtonRounded } from './buttons'; const renderSomePageWithButton

    = buttonAction => <div> <PrimaryButtonFullWidth label={'プライマリボタン幅MAX'} /> <SecondaryButtonRounded label={'角丸セカンダリボタン'} /> <AccentButtonHalfWidth label={'アクセントボタン幅半分'} /> </div>
  19. - 画面の大きさ(PC と スマホ) - アプリは SEO や URL が不要なので、戻るボタンなどが必要。

    - 画像のアップロードの仕組み - PUSH 通知の実装 ユーザー体験で異なる部分は、使い回せないので、再実装が必要 アプリとWEBで大きく異なるところ
  20. WEB -> React Native で view 以外の部分を使い回す - WEB 版メッセージ機能

    -> アプリ版への移植してリリース - Redux などフロントエンドの哲学や state の形部分は流用可能 - 実際にはほとんど書き直している・・・が、素早くリリースできた
  21. Redux などの状態管理システムは再利用できた http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/27 - WEB とアプリで state はほぼ共通 Reduxとは?SPAなどの複雑化する React

    のステート(状態)管理を、 ルール(哲学)に従って書かせること で、フロントエンドの動きを人間に とって追いやすくするためのライブラ リ
  22. 再利用できたもの - npm パッケージで配布されているライブラリ郡 - React で UI を構築する手法 -

    Redux などのフロントエンドの哲学(状態管理システムやモデル部分)
  23. 良さそうな話ばかりしましたが・・・実際は? - story book などがのコンポーネントのカタログが作れるがメンテできない => 運用でカバー。画面から DOM をみて、 class

    名で grep。 - コンポーネントの粒度で悩む => PR のレビューや、ワークショップなどの啓蒙が必要 - Redux 記述量が多くてつらい - エコシステムに頼った結果、アップデートで動かなくなる 結局、全てが React で解決するわけではない。
  24. from 概論:再利用のためのメカニズム 再利用は継承ではなく合成の方がうまくいく - HOC はまさに合成(コンポジション)のパターン - A という機能を B,C,D

    という別コンポーネントにそれぞれ適応する時に便利 ”クラス継承よりも オブジェクトコンポジションを多用すること”
  25. 合成パターンはライブラリが書きやすい HOC の実装で実現されているライブラリや関数 - redux-form - radium - material-ui の

    muiThemable - react-router の withRouter など 使うときは、component をラップするだけ。
  26. - 難しい実装なども React のコミュニティライブラリで解決 - 利用したい機能を検索すると、ライブラリ化されていたりする - 例: redux で

    store の state を永続化させたいなぁ やりたいことを探せば、ライブラリが見つかる https://github.com/rt2zz/redux-persist
  27. 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
  28. 強力なコミュニティ - Facebook という大企業の後ろ盾(ライセンスの問題もあるが) - Airbnb Netflix twitter など -

    コミッターがアメリカ以外のヨーロッパ圏にも多い - 冒頭の Vue が中国で人気という理由も、出身などによる - ReactEurope という大きなコミュニティ https://www.react-europe.org/
  29. React 周辺のエコシステム - 継承より合成や、UI に徹した哲学 - ライブラリが書きやすいので書きたくなる - ライブラリの配布、再利用がしやすい -

    使いまわせて開発が楽しい - コミュニティが大きくなる - 熱心な人が増える - その口コミでユーザー (ファン)が増える
  30. まとめ 再利用プログラミングに重要なこと より高度な仕組みや体験が求められていて、手軽に使い回したい気持ちから - UI に徹する(1つのことをうまくやる) - npm で手軽に配布、再利用できる -

    継承よりも合成(HOC) - 時流に乗った - コミュニテが活発 - 結果: ライブラリとエコシステムが手厚い 依存して中毒にならないように注意しましょう。