プログラミングをあまりしたことない人がReactNativeを始めるときに知っておきたいことや参考資料のまとめ

おって書き足していきますmm

# この資料について
ReactNativeで開発をはじめるために知っておいた方がいいことまとめ
新人が入った時とかの参考資料に。

想定読者レベル：
 - js以外の他の言語を、研修/もしくは授業等で習った経験があるくらいで、実務経験はなし

※可能限りわかりやすいように、正確性よりは雰囲気重視

## プログラミング基本/教養として
※ 本を読む
* リーダブルコード
* (プログラムはなぜ動くのか)
* (オブジェクト指向でなぜつくるのか) // immutable.jsとか関数型とか、いろいろ出てくる前にまずオブジェクト指向についてしっておく。JAVAとかを授業で習った前提ではあるが。

## Javascript(ES6)
※ javascriptにはes6という新しい規格の記法があり、基本はes6やそれより新しいの記法を使うのがベター

#### 追記： 2018-07-13
jsに関しては下記がよかった
★ ECMAScript 2018時代のJavaScript入門書
https://asciidwango.github.io/js-primer/ 

* let / const
* 関数やらオブジェクトやら
    * [[JavaScript] オブジェクトの基礎 - Qiita](https://qiita.com/yoshi389111/items/245df2d642e49d2acf3a)
* class
* アロー関数 / function
* import/export
* promise
* async / await

※ 一歩踏み込めるのであれば、コールバック地獄や、スコープ汚染、プロトタイプ汚染など（昔の？）JSの課題だったところもさらっておく。
[中上級者になるためのJavaScript【知識編】 - Qiita](https://qiita.com/kenju/items/c7fad62a12cc2809b507)

## React / ReactNative
### Reactとは?
コンポーネントという部品を組み立てて　画面をつくることができるやつ
[出来る限り短く説明するReact.js入門 - Qiita](https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19)

### ReactNativeとは
reactでネイティブアプリをつくるやつ

#### 追記： 2018-07-13
reactnativeexpress が一通りまとまっていてすごくいい
http://www.reactnativeexpress.com/

一度盲目的にチュートリアルをやってみる。
[Learn the Basics · React Native](https://facebook.github.io/react-native/docs/tutorial.html)
qiitaにも勉強してみた的な記事がたくさんあるので読んでみる。やってみる。

### 参考：デバッグツールの使い方
(iOS)
メニュー:<kbd>コマンド + D</kbd>
リロード:<kbd>コマンド + R</kbd>

(Android)
メニュー:<kbd>コマンド + M</kbd>
リロード:大文字のRを二回押す

### component
* componentとは
    * View(見た目)を構成するパーツのようなもの
    * React-native で実装してくときに一番触ることが多い(たぶん

基本的な構成

```jsx
import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native' //ReactNativeのコンポネント。使うものをimportする

class App extends Component { //ReactのComponentを継承して、コンポネントを作っていく
  constructor(props) {
    super(props)
    this.state = { count: 0 } //コンポネント内での状態を管理するにはstateを使う。stateが更新されると、renderが呼ばれてviewが更新される
  }

  componentDidMount() { //lifecycleイベント。コンポネントがmountしたときなどのイベントに処理を書く時に。
  }

  onPress = () => { 
    this.setState({
      count: this.state.count+1
    })
  }

 render() { //Viewの描画の本体的な場所。returnでjsxを返す。
   return (
     <View style={styles.container}> //このViewもComponent(react-nativeの) styleなどのpropsを渡していく
       <TouchableOpacity
         style={styles.button} 
         onPress={this.onPress} //propsにはfunctionも渡せる
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
       <View style={[styles.countContainer]}>
         <Text style={[styles.countText]}>
            { this.state.count !== 0 ? this.state.count: null} // {}で囲った中にjsもかける
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({ //CSS的な感じでスタイルを書いていく
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 10
  },
  countText: {
    color: '#FF00FF'
  }
})

AppRegistry.registerComponent('App', () => App) //アプリのエンドポイント

```

* renderメソッド/jsxとは
    * 出力するViewのテンプレートみたいなもの
    * htmlみたいな感じでviewをかける
    * [React.jsのJSXを使ってみる - Qiita](https://qiita.com/koba04/items/039b9c974df284766f64)
    * stateかpropsが更新されたタイミングで呼ばれる。自動的に。
        * 逆にいうとstateを更新するとrenderが走ってしまう。
* stylesheet
    * CSSのようなもの
* state
    * コンポーネントの中の状態管理
* props
    * コンポーネントの外から渡されるデータやコールバック。
    * コンポーネントが関数だとすると引数みたいなイメージ
* life cycle イベント
    * [React.jsのComponent Lifecycle - Qiita](https://qiita.com/koba04/items/66e9c5be8f2e31f28461)

### サードパーティのライブラリを使う 
例) 
https://github.com/oblador/react-native-vector-icons

やること (各ライブラリのinstallationを見てください。以下、よくある例）
 - npm もしくは yarnでパッケージのインストール
 - react-native link

#### react-native linkって？？
ネイティブ(objectice-c / java)のライブラリをネイティブのプロジェクトに読み込ませる。
※ ここ、結構ハマりがちなポイント。ネイティブの知識がないと辛いことが多々あるので、xcodeやandroid studioの基本操作〜デバッグ方法は知っておくとベター

### React-native run-ios / run-androidをしたときにおきていること
* ネイティブのソースコードをビルドする
* JSのソースコードをトランスコンパイルする(動くようにJSのコードをごにょごにょする)
* packager/serverが立ち上がる
* シミュレーターが立ち上がる
* シミュレータがserverからjsのコードをロードする
* 動く


### navigation (react-navigation)
画面を遷移させるもの

### redux
stateをcomponentを横断して管理できるもの
※ なんでreduxのようなものが必要とされているのかを理解しておく

## ネイティブでのアプリ開発の基礎知識
 iOS

 - 簡単な本を読むのがいいのでは？
 - ライブラリの追加はよくやる＆よくエラーが起きるのでそれは知っておく
  - xcodeでのライブラリの追加方法
  - xcodeでのcocoa podを使ったライブラリの追加方法

android

  - こちらも簡単な本を読んでおく。activity/intent/みたいなところがなんとなく分かっていればok
  - android studioでのライブラリの追加方法も知っておく。
  - ビルド関係の設定も雰囲気知っておく


## 参考：html/css
* react-nativeのjsxやstylesheetはhtml/cssみたいな感じでviewをつくるもの
* [[初心者]CSSってなに?という質問にWEB歴10年の人が全力で答えてみる | ヨッセンス](https://yossense.com/about-css/)

## 参考：教養として、、なぜjavascriptのフレームワークが必要なのか
[第5章 クライアントサイドの変遷 - 惑星を動かすプログラム - Qiita](https://qiita.com/katanov/items/56b74817e4187893d7c8#%E7%AC%AC5%E7%AB%A0-%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E3%81%AE%E5%A4%89%E9%81%B7)

## NextStep
ネイティブとのブリッジ
パフォーマンス
設計パターン(まだデファクトスタンダードはない印象ですが）
ネイティブ側の知識を増やす
などなど

あとは教養として、なんでMVVM的なJSフレームワークが出てきたかの歴史を知っておくとReactへの理解は進むかも
でもネイティブへの理解増やすのが実務的には一番いいのかも

## 余談
いろいろ出てきて面倒だけれども、大丈夫。みんな混乱しているので。

[2016年にJavaScriptを学ぶとこんな感じ – Medium Japan – Medium](https://medium.com/japan/2016%E5%B9%B4%E3%81%ABjavascript%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98-b969f5767d7c)

[サーバーサイドJavaScript(Node.js) - HTTP/1.1 200 OK - Qiita](https://qiita.com/katanov/items/1d99d27844392e380ec7#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89javascriptnodejs)

仮想DOMかっこいい
[なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita](https://qiita.com/mizchi/items/4d25bc26def1719d52e6)