Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Expoによるモバイルアプリ開発入門

36 views

Published on

第三回SOIL水曜セミナーの講義資料

Published in: Engineering
  • Be the first to comment

Expoによるモバイルアプリ開発入門

  1. 1. SOIL Expo 2018/08/01
  2. 2. • • • • CPS Cyber Physical System • • Python JavaScript • ActionScript, Objective-C, ...
  3. 3. • SRP OIL • IoT, AI, VR, AR • • ※ 10:00~18:00 • Code for Fukuoka • • • facebook Code for Fukuoka ※ facebook https://www.facebook.com/ SRPOIL/
  4. 4. • Expo • React • React SPA Single Page Application • 1. • React 2. • Code for Fukuoka
  5. 5. ✓React ✓Expo ✓
  6. 6. 1.
  7. 7. React
  8. 8. React • Declarative • • • Component-Based • UI • JavaScript JS DOM • Learn Once, Write Anywhere • JS React • Node React Native https://reactjs.org/
  9. 9. Declarative • • • • (+ 1 2 3 4 5) ;15 var sum = function(arr){ var sum=0; for(var i=0; i < arr.length; i++){ sum += arr[i]; } return sum; } var arr = [1, 2, 3, 4, 5]; console.log( sum(arr) ); // 15 sum [1,2,3,4,5] --15
  10. 10. https://tylermcginnis.com/imperative-vs-declarative-programming/ function double (arr) { let results = [] for (let i = 0; i < arr.length; i++){ results.push(arr[i] * 2) } return results } function double (arr) { return arr.map((item) => item * 2) } function add (arr) { let result = 0 for (let i = 0; i < arr.length; i++){ result += arr[i] } return result } function add (arr) { return arr.reduce((prev, current) => prev + current, 0) } $("#btn").click(function() { $(this).toggleClass("highlight") $(this).text() === 'Add Highlight' ? $(this).text('Remove Highlight') : $(this).text('Add Highlight') }) <Btn onToggleHighlight={this.handleToggleHighlight} highlight={this.state.highlight}> {this.state.buttonText} </Btn>
  11. 11. • CBD: Component-based development • separation of concerns • • • Web Web • • https://en.wikipedia.org/wiki/Component-based_software_engineering https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238
  12. 12. React class Welcome extends React.Component { state = {name: 'Anzu'}; shouldComponentUpdate(nextProps, nextState){ const {name} = nextState; return (name === 'Hina'); } handleClick = ()=>{ this.setState({name: 'Hina'}) }; render() { return ( <div> <h1>Hello, {this.props.name}</h1> <div onClick={this.handleClick}>My name is {this.state.name}</div> </div> ); } } class App extends React.Component { render() { return ( <div> <Welcome name="Taro" /> <Welcome name="Hanako" /> </div> ); } } View
  13. 13. Learn Once, Write Anywhere • Java • Write once, run anywhere • • • React • iOS, android : React Native • Win, Mac React Desktop (https://reactdesktop.js.org/) https://reactjs.org/blog/2015/03/26/introducing-react-native.html
  14. 14. ES2015 ECMAScript2015 • ES6 6th Edition • let let name = 'taro'; name = 'hanako' const const name = 'taro'; name = 'hanako'; // error class class Person {
 constructor(name){ this.name = name; } } const person = new Person('taro') const fn = (name) =>{ return console.log(name); } const arr = ['a', 'b', 'c']; const arr2 = [...arr]; console.log(arr === arr2); // false const name = 'taro'; console.log(`My name is ${name}.`); // My name is taro. https://babeljs.io/docs/en/learn/
  15. 15. JSX JavaScript XML, JavaScript Syntax Extension • XML JavaScript <MyButton color="blue" shadowSize={2}> Click Me </MyButton> React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) JSX React.createElement(component, props, ...children)
 <div className="sidebar" /> React.createElement( 'div', {className: 'sidebar'}, null ) https://reactjs.org/docs/introducing-jsx.html
  16. 16. DOM • DOM ReactDOM DOM • DOM • DOM DOM Key https://reactjs.org/docs/faq-internals.html {todos.map((todo, index) => <Todo {...todo} key={index} /> )} https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318 {todos.map((todo) => <Todo {...todo} key={todo.id} /> )} var shortid = require('shortid'); function createNewTodo(text) { return { completed: false, id: shortid.generate(), text } } ID shortid ID ID todoCounter = 1; function createNewTodo(text) { return { completed: false, id: todoCounter++, text } }
  17. 17. Functional function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } • • class Welcome extends React.Component { state = {name:'anzu'} componentDidMount() { } componentWillUnmount() { } render() { return <h1>Hello, {this.props.name}</h1>; } }
  18. 18. React ver. 16.4 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
  19. 19. Flux • Facebook • • • https://github.com/facebook/flux/tree/master/examples/flux-concepts React
  20. 20. Parent Component class ChildComponent extends React.Component { render() { const { onClick } = this.props; return ( <div> <div onClick={onClick}>Click here!</div> </div> ); } } class ParentComponent extends React.Component { handleClick = (e)=>{ console.log('Click!'); }; render() { return ( <div> <ChildComponent onClick={this.handleClick} /> </div> ); } } ChildComponent
  21. 21. MVC • UI • Model • • View • View • Model • Controller • Model https://ja.wikipedia.org/wiki/Model_View_Controller
  22. 22. React Native • JavaScript React • HTML5 https://facebook.github.io/react-native/docs/tutorial https://facebook.github.io/react-native/ import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default class HelloWorldApp extends Component { render() { return ( <View> <Text>Hello world!</Text> </View> ); } }
  23. 23. • React Native • Expo SDK, Expo XDE 

  24. 24. hello, world • https://expo.io/ • Expo
  25. 25. 2. 

  26. 26. Code for Fukuoka • • 2018 3 3 • SRP • • •
  27. 27.
  28. 28.

×