Contenu connexe Similaire à オープンデータを使ったモバイルアプリ開発（応用編） (20) Plus de Takayuki Goto (7) 5. DECLARATIVE
5
(+ 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
6. 6
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>
https://tylermcginnis.com/imperative-vs-declarative-programming/
7. CBD: Component-based development
separation
of concerns
7
https://en.wikipedia.org/wiki/Component-based_software_engineering
https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238
•
•
•
8. REACT
8
class Welcome extends React.Component {
state = {name: 'Anzu'};
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<div>My name is {this.state.name}</div>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<Welcome name="Taro" />
<Welcome name="Hanako" />
</div>
);
}
}
View
9. 9
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Functional
•
•
•
Functional
11. LEARN ONCE, WRITE ANYWHERE
Java
Write once, run anywhere
React
iOS, android : React Native
Win, Mac React Desktop (https://reactdesktop.js.org/)
11https://reactjs.org/blog/2015/03/26/introducing-react-native.html
12. ES2015 ECMASCRIPT2015
12
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/
Expo ES6 6th Edition
13. extract(‘test.txt’, function(data1){
transform(data1, function(data2){
load(data2, function(data3){
console.log(‘done: ’, data3);
});
});
});
var promise = Promise.resolve();
promise
.then(()=> extract(‘text.txt’));
.then(data1=> transform(data1))
.then(data2=> load(data2))
.then((data3)=> console.log(‘done: , data3 ’))
async ()=>{
let data1 = await extract(‘test.txt’);
let data2 = await transform(data1);
let data3 = await load(data2);
console.log(‘done: ’, data3);
}
ES5
13
ES2015(ES6) Promise, ES2017(ES8) async/await
Expo ES8 async/await
14. JSX JAVASCRIPT XML, JAVASCRIPT SYNTAX EXTENSION
14
XML JavaScript
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
<div className="sidebar" />
React.createElement(
'div',
{className: 'sidebar'},
null
)
https://reactjs.org/docs/introducing-jsx.html
JSX React.createElement(component, props, ...children)
15. DOM
DOM ReactDOM
DOM
DOM
React DOM
15
DOM DOM
Key
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}
ID
var shortid = require('shortid');
function createNewTodo(text) {
return {
completed: false,
id: shortid.generate(),
text
}
}
ID
todoCounter = 1;
function createNewTodo(text) {
return {
completed: false,
id: todoCounter++,
text
}
}
https://reactjs.org/docs/faq-internals.html
https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
shortid
ID
17. EXPO SDK
Web
iOS, Android API
API API
17
Core Motion iOS Google Fit Android
Pedometer (Expo SDK)
API
18. 18
AR Accelerometer Admob Amplitude AppLoading ART
Asset Audio AuthSession
Web
AV BarCodeScanner BlurView
Branch Brghtness Calendar Camera Constants
ID
Contacts
DeviceMotion DocumentPicker ErrorRecovery FacebookAds Facebook
Graph API
FaceDetector
FileSystem Font GestureHandler GLView
OpenGL ES
Google
Google
Gyroscope
Haptic ImageManipulator ImagePicker IntentLauncherAndroid KeepAwake LinerGradient
Linking LocalAuthentication Localization Location Lottie Magnetometer
MailComposer MapView MediaLibrary Notifications Payments Pedometer
Permissions Print registerRootComponent ScreenOrientation SecureStore Segment
SMS Speech SplashScreen SQLite StoreReview Svg
SVG
takeSnapshotAsync Updates Video WebBrowser
20. LOCATION
20
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted’)
console.log('Permission to access location was denied');
Permissions API
let location = await Location.getCurrentPositionAsync({});
// address = await Location.reverseGeocodeAsync(loc)
// Location.watchHeadingAsync(this._getHeadingAsync)
//
//
21. PEDOMETER
Core Motion iOS Google Fit Android
21
Expo.Pedometer.isAvailableAsync()
Expo.Pedometer.getStepCountAsync(start, end)
Expo.Pedometer.watchStepCount(callback)
https://snack.expo.io/@tygoto/pedometer
22. PEDOMETER
22
componentDidMount() {
this._subscription = Pedometer.watchStepCount(result => {
this.setState({
currentStepCount: result.steps,
});
});
}
componentWillUnmount() {
this._subscription && this._subscription.remove();
this._subscription = null;
}
Pedometer.getStepCountAsync
26. OPEN DATA EXPO SDK
http://data.bodik.jp/dataset
http://data.bodik.jp/dataset/atmospheric48
http://data.bodik.jp/dataset/401000_koutsuujiko2017
Expo SDK
26
