JavaScript
reactnative

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

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

この資料について

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

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

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

プログラミング基本/教養として

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

Javascript(ES6)

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

※ 一歩踏み込めるのであれば、コールバック地獄や、スコープ汚染、プロトタイプ汚染など(昔の?)JSの課題だったところもさらっておく。
https://qiita.com/kenju/items/c7fad62a12cc2809b507

React / ReactNative

Reactとは?

コンポーネントという部品を組み立てて 画面をつくることができるやつ
https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

ReactNativeとは

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

一度盲目的にチュートリアルをやってみる。
https://facebook.github.io/react-native/docs/tutorial.html
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をかける
    • https://qiita.com/koba04/items/039b9c974df284766f64
    • stateかpropsが更新されたタイミングで呼ばれる。自動的に。
      • 逆にいうとstateを更新するとrenderが走ってしまう。
  • stylesheet
    • CSSのようなもの
  • state
    • コンポーネントの中の状態管理
  • props
    • コンポーネントの外から渡されるデータやコールバック。
    • コンポーネントが関数だとすると引数みたいなイメージ
  • life cycle イベント

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

例)
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

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

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への理解は進むかも
でもネイティブへの理解増やすのが実務的には一番いいのかも

余談

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

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

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かっこいい
https://qiita.com/mizchi/items/4d25bc26def1719d52e6