プログラミングをあまりしたことない人が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
• class
• アロー関数 / function
• import/export
• promise
• async / await

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

React / ReactNative

Reactとは?

コンポーネントという部品を組み立てて　画面をつくることができるやつ
出来る限り短く説明するReact.js入門 - Qiita

ReactNativeとは

reactでネイティブアプリをつくるやつ

追記： 2018-07-13

reactnativeexpress が一通りまとまっていてすごくいい
http://www.reactnativeexpress.com/

一度盲目的にチュートリアルをやってみる。
Learn the Basics · React Native
qiitaにも勉強してみた的な記事がたくさんあるので読んでみる。やってみる。

参考：デバッグツールの使い方

(iOS)
メニュー:コマンド + D
リロード:コマンド + R

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

component

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

基本的な構成

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
  • stateかpropsが更新されたタイミングで呼ばれる。自動的に。
    • 逆にいうとstateを更新するとrenderが走ってしまう。
• stylesheet
  • CSSのようなもの
• state
  • コンポーネントの中の状態管理
• props
  • コンポーネントの外から渡されるデータやコールバック。
  • コンポーネントが関数だとすると引数みたいなイメージ
• life cycle イベント
  • React.jsのComponent Lifecycle - Qiita

サードパーティのライブラリを使う

例)
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年の人が全力で答えてみる | ヨッセンス

参考：教養として、、なぜjavascriptのフレームワークが必要なのか

第5章 クライアントサイドの変遷 - 惑星を動かすプログラム - Qiita

NextStep

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

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

余談

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

2016年にJavaScriptを学ぶとこんな感じ – Medium Japan – Medium

サーバーサイドJavaScript(Node.js) - HTTP/1.1 200 OK - Qiita

仮想DOMかっこいい
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita