# React
vs
Vue
## 自己紹介 ### 有限会社アップルップル
### steelydylan
# そもそも Vue とか React
って何? MVCのVつまり、Viewを作ることに特化したUIのためのライブラリ
## アジェンダ - ドキュメント・情報量 - ビルド環境 - テンプレート周り - Style周り - Flux周り - 周辺ツール - Nativeアプリへのサポート - 結論
## ドキュメント・情報量
## Vue 日本語ドキュメントの充実 [https://jp.vuejs.org/](https://jp.vuejs.org/)
## React 公式日本語ドキュメントはないが、人気なライブラリな分、情報量が多い
## React 本も出版されている
## ビルド環境
## ビルド環境 ### Vue
## bundleツールサポートの充実 全てのbundle系ツールに対応 - [rollup-plugin-vue (rollup)](https://github.com/vuejs/rollup-plugin-vue#options) - [vueify (browserify)](https://github.com/vuejs/vueify#css-extraction) - [vue-loader (webpack)](http://vue-loader.vuejs.org/en/configurations/extract-css.html)
Vueは公式でvue-cliというものを提供している ```sh # vue-cli をインストール $ npm install --global vue-cli # "webpack" ボイラープレートを使用した新しいプロジェクトを作成する $ vue init webpack my-project # 依存関係をインストールしてgo! $ cd my-project $ npm install $ npm run dev ```
## ビルド環境 ### React
## React package.json ```js "devDependencies": { "babel-cli": "^6.18.0", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.3.13", }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" } ```
## React .babelrc ```js { "presets": [ "es2015", "react" ] } ```
## React browserify ```js "scripts": { "browserify": "browserify ./test/src/index.jsx -t babelify -o ./test/dist/index.js", } ```
## React webpack.config.js ```js module: { loaders: [ { test: /\.(js|jsx)$/, loader: ['babel-loader'], exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] } ``` ```
## create react app フロントエンドの環境づくりの複雑化へのアプローチとしてFacebook社が公式で準備 中ではWebpackなどが動いている [https://github.com/facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
## テンプレート周り
### Vue HTMLそのまま。ただし、データのbindingにはVue独自の記述が必要 ```message-list.vue
{{ message.authorName }}
{{ message.timestamp | time }}
{{ message.text }}
```
### React ```js import React from 'react'; export default class EntryList extends React.Component { const message = this.props.message; render () { return (
{ message.authorName }
{ getTimeFromTimeStamp(message.timestamp) }
{ message.text }
) } } ```
## Style周り
## Vue 普段Styleを書くときと一緒 ```html
{{msg}}
```
## React ### CSS modules ```css .previewWrap{ padding: 10px; } ```
## React ### CSS modules ```js import style from './Preview.scss'; export default class Preview extends React.Component { render () { const entry = this.props.entry; return (
{entry && entry.markdown ?
: null}
) } } ```
## React ### CSS in JS ```js const styles = { button: { padding: '1em', ':hover': { border: '1px solid black' }, }, primary: { background: 'green' } }; ```
## React ### CSS in JS [https://github.com/MicheleBertoli/css-in-js](https://github.com/MicheleBertoli/css-in-js)
## Flux周り ステート管理のためのツール
## Flux周り [ vuex ] [https://github.com/vuejs/vuex](https://github.com/vuejs/vuex)
## Flux周り ### React [ Redux ] [http://redux.js.org/](http://redux.js.org/) [ Flux utils ] [https://facebook.github.io/flux/docs/flux-utils.html](https://facebook.github.io/flux/docs/flux-utils.html)
## Flux周り ### 非同期処理
### vuex ```js const mutations = { increment (state) { state.count++ }, decrement (state) { state.count-- } } ```
### vuex ```js const actions = { increment: ({ commit }) => commit('increment'), incrementAsync ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('increment') resolve() }, 1000) }) } } ```
Reduxは非同期処理を別のライブラリに頼る必要がある
### redux + redux-saga Example sagas/index.js ```js import { increment } from "../actions"; import { call, put, takeEvery, select } from 'redux-saga/effects' const incrementAsync = () => { setTimeout(() => { yield put(increment); }, 1000) } export default function* rootSaga() { yield takeEvery(types.INCREMENTASYNC, incrementAsync); } ```
### redux + redux-saga Example reducer/index.js ```js export default (state = initialState, action) => { switch (action.type) { case types.INCREMENT: return Object.assign({}, state, { count: state.count + 1 }); default: return state; } ```
## 周辺ツール
## Vue vue-devtools [https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)
## React redux-devtools [https://github.com/gaearon/redux-devtools](https://github.com/gaearon/redux-devtools) 下記の記述が必要 ```js const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) ```
## 公開されているパッケージ数
## React 27078 packages found for "react" [https://www.npmjs.com/search?q=react](https://www.npmjs.com/search?q=react)
## Vue 3525 packages found for "vue" [https://www.npmjs.com/search?q=react](https://www.npmjs.com/search?q=react)
## Nativeアプリへのサポート
## React [ReactNative](https://facebook.github.io/react-native/)
## React [https://facebook.github.io/react-native/showcase.html](https://facebook.github.io/react-native/showcase.html) Facebookアプリ、Instagramなどで使われている MicrosoftのSkypeもReact Nativeを使う予定なんだそう。
## Vue vue-nativeはでないのか? [https://github.com/vuejs/vue/issues/2119](https://github.com/vuejs/vue/issues/2119)
## 結論 - Reactを使ったほうが今後いろんなことができそう。 - 記述はVueの方が楽!
## Nagoya.jsやってます!
[https://nagoya-js.github.io/](https://nagoya-js.github.io/)
# Thank You! Twitter: @steelydylan
GitHub: steelydylan