実践『実践Expo』 〜第二章 かんそうと知識整理〜
Snackを触る。
中心になるjsファイルの名前はApp.jsっぽい。main.jsとかApp.jsとかindex.jsとかどれが何だよ、何が違うんだよみたいなのがまだあるがとりあえずReact NativeだとApp.jsになるということで覚えた。
他には、react-native-paperがある。これはpackage.jsonで読み込まれていて、なんだという話としては、 Google’s Material Design guidelinesに基づいたReact Native用のコンポーネント集（公式より）。
ブラウザ上で動作させたい場合はこれに登録したほうがよさげ。登録した。
styled-componentsに関しての記事はこれをみた。JSでstyleを指定するようにできるライブラリと捉えた。
const tagName = style(View) `
text-align: center;
`;
みたいな感じに書く。この変数名のtagNameが、Componentの要素に対応する形になる。
謎が出た。AppクラスまでExportしてる。どこに…？多分見えないけどどこかにmain.jsやindex.jsがあって、そこでApp.jsをインポートしているんだろう。これは不明。
renderメソッドはComponentの描画に必要、つまり必須のメソッドになる。これがないとComponentが描画されない、つまり画面に反映されない。
stateはComponentが状態を持つときには必須だと思われるが、状態を持たないときは必要ない。とはいいつつも、実際になにかApplicationを作成する場合に状態がないなんてことはないと思うので、実質必須となる。Reduxを採用しない場合、書くComponentにstateをもつことになる。しかしながらこれは中規模以上のアプリになると苦しくなってくるらしい。Reduxは、アプリのすべての状態をrootStateオブジェクトというもので管理しているらしい。で、Reduxを採用する場合は、Reduxを介してしか状態の変更ができないようになる。もう少し細かくいえば、Reducer関数だけしか更新できない。Stateの値を直接変更しようとしても、変更できないとのこと。しっかりしている。
あとはdipatchだのなんだのある。ruducerとStoreだけじゃだめなのか。というかrootStateとStoreの違いは…？getStateの解説に「StoreからrootStateを取得する」とあるから、StoreはrootStateを含む他のなにかを包摂なんでそんなに変更を検知したりeventを送るメソッドや関数が必要なのかよくわからない。これは再度下記の記事とかで学習し直す。
Reducerはもとの値とActionを引数に受け取り、増加・減少されるなどした新しい更新された値を返す。action.typeごとに処理を条件分岐するとのことなので、これはtypeはなんの処理をするかの識別子的な捉え方を一旦しておく。
rootStateが大きくなってくるとReducerもそれに伴い大きくなってくることの対策は、rootStateのプロパティごとにReducerを切り分けるということだが、どのようになるのかは気になる…。プロパティごとというのは例えばとある状態「foo」を操作する関数はひとまとめにする、ということだろうか。カウントだったら増減でひとまとめ、みたいな。
counterのサンプルコードをGitHubからcloneしてきてExpoアプリで表示しようとしたがクラッシュした。理由はわからないが、Expoのバージョン等をあわせていないので、そこらへんが悪いと思う。ここは実行できなくても致命的ではないのでソースだけ読んでつぎへ。
3/23追記
Snackはちょっとしたコードを試すのにちょうどいいもので、実際に開発するのは向いてないのではないかと思った。自分は実際の開発はVSCodeで行う。
