【ツール】PC移行用メモ書き
Chrome
https://www.google.co.jp/chrome/browser/desktop/index.html
Cyberduck
https://cyberduck.io/
Sequel Pro
https://www.sequelpro.com/
Table Plus
Source Tree
https://ja.atlassian.com/software/sourcetree
Visual Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Postman
https://www.getpostman.com/
Chatwork
https://go.chatwork.com/ja/download/
zoom
https://zoom.us/jp-jp/meetings.html
microsoft teams
https://www.microsoft.com/ja-jp/microsoft-365/microsoft-teams/group-chat-software
Apowermirror
============================================
macの設定
mac のバーを移動する
「システム環境設定」 > 「Dockとメニューバー」
「画面上の位置」
【React Native】まとめ
（参考）
■ 型
any ：「型チェックしない」ことを示す
void ：「他のどの方でもない」ことを示す
tuple ：組み合わせ
（例）
var tuple: [number, string] = [1, ‘a’]
■ interface
新しい型を作成したいとき
■ プロパティの末尾に、?
→指定が任意であることを指示するための書き方
■ 拡張子
.ts ファイル
TypeScriptファイルを示す
.tsx ファイル
TypeScriptファイル、かつ、JSX含む
■ Homebrew
brew —version
■ yarn（ヤーン）のインストール
brew install yarn
→ yarnは、npmと比較して高速に動作するパッケージマネージャ
■ watchman：ReactNative動作するための監視ツール
brew install watchman
watchman —version
■ CocoaPods：Swift・Objective-C のパッケージマネージャ
（ReactNavieは、iOSにおいてはネイティブコードをCocoaPodsで管理する。Rubyで書かれてるためgemコマンド）
sudo gem install cocoapods
pod —version
■ Metro Bundler：アプリを起動する際に、同時に起動され、サーバとして動作する
■ キャッシュクリアしたいとき（ディレクトリー名の変更 or ソースファイルの移動が反映されない場合）
npx react-natvie start —reset-cache
npx react-native start ：Metro Bundlerを起動するためのコマンド
—reset-cache ：キャッシュを消去するオプション
■ Viewコンポーネント
divにあたる。何にも表示しない。
「親」として使うことが多い。必要のないところで使うと、メモリが無駄
■ Textコンポーネント
Textのみの入れ子で、スタイルのカスケードが可能
※カスケード
CSS（Cascading Style Sheets）のCascadingとは
「階段状の滝のような」「連鎖的に伝わる」という意味
（参考）
http://www.htmq.com/csskihon/006.shtml
■ flexDirection：配置
column ：上から下へ配置 デフォルト値
row ：左から右へ配置
■ justifyContent：配置ルール（flexDirection方向）
flex-start ：始端側に詰める。デフォルト値
flex-end ：終端側に詰める
center ：中央寄せ
space-between：最初を始端、最後は終端、残りは等間隔
space-around：コンポーネントの周りのスペースを全て等しく
space-evenly：スペースを全て等間隔
■ alignItems：配置ルール（flexDirectionと直角方向）
flex-start ：始端側に詰める。デフォルト値
flex-end ：終端側に詰める
center ：中央寄せ
stretch：スペースいっぱいに子コンポーネントを引き伸ばす
baseline：ベースラインにそろえる
■ props：コンポーネントの入力（外部から渡される）
親 → 子へデータを渡す
■ state：コンポーネントそのものが持つデータ
stateを使うためには、useStateを用いる
※props もしくは state の内容が変更されると再描画
■ useEffect：非同期させたいとき（副作用）
（引数）
第１引数：指定した関数を実行
第２引数：変数（この変数が変更されたタイミングで、第１引数の関数が実行される）配列で複数指定可能。指定しないことも可能（初期表示時のみ動作するイメージ）
（イメージ）
useEffect フックを
「componentDidMount と componentDidUpdate と componentWillUnmount がまとまったもの」と考えてOK
（参考）
https://ja.reactjs.org/docs/hooks-effect.html
■ Context：全コンポーネントからアクセス可能なグローバル変数..というイメージ
ユーザの属性値などを保持するイメージ（頻繁に変わる変数ではなく）
■ ref：コンポーネントの描画結果を変数に格納。アクセス可能とする。
reference の略。描画済みコンポーネントへの参照を与える
（例）
コンポーネントが持つメソッドを呼び出したい場合
■ サフィックス（なし・@2x・@3x）
画面の表示密度によって
実際に読み込まれるファイルが異なる
（表示密度に近いサフィックスを持つものが使用される）
サフィックスなし ： 等倍 ： logo.png
サフィックス@2x ： 2倍 ： logo@2x.png
サフィックス@3x ： 3倍 ： logo@3x.png
■ 表示密度
論理的なピクセル１つが物理的なピクセルいくつ分に相当するか表した数字
（PixelRatio.get関数で確認可）
■ 画像管理（iOS・Android）
iOS：Asset Catalog
→ Xcodeの Images.xcassets
Android：drawable
→ android/app/src/main/resディレクトリ
以下のディレクトリ名
drawable-mdpi ：100%「大きさ」
drawable-hdpi ：150%
drawable-xhdpi ：200%
drawable-xxhdpi ：300%
drawable-xxxhdpi：400%
「大きさ」は、画像ファイルの大きさをどの程度拡大すればよいのかを示す
ファイル名は、すべて同一とする
■ 画像
uriにネットワーク上の画像（URL）の指定可
画像はキャッシュされ、次回から高速に表示される
■ 画像の使い分け
UI に必要な画像・・・JavaScript層で管理
コンテンツ画像・・・ネットワーク経由
（メリット / デメリット）
JavaScript層で管理：大きな画像だと、アプリサイズが肥大。インストール時にユーザーに不利益
ネットワーク経由：初回表示に時間がかかる。ユーザが操作に困る
■ resizeMode
Imageコンポーネントで、リサイズ必要な場合
（resizeModeで指定可能な値）
cover：余白ができないよう画像を拡大/縮小。アスペクト比を保持。
contain：画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持。
stretch：画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持しない。
repeat：拡大縮小せず、左上から右上へ画像を敷き詰める。
center：拡大縮小せず、表示領域の中心を画像の中心とする。
※アスペクト比とは、画面や画像の縦と横の長さ（画素数）の比
（表示サイズのパターン）
1 width：400 height：300
2 width：200 height：100
3 width：400 height：50
4 width：50 height：400
■ ScrollViewコンポーネント
スクロール可。
■ FlatList
配列を表示する際に便利
FlatListには、以下２つのpropsが必須
data：表示すべき配列
renderItem：配列内の各データをどのように描画するか
■ renderItem関連：指定する関数の引数
item：配列内の各データ →普段は、こちらのみ
index：配列の何番目にあるかのインデックス
separators：各データの間に表示する区切りを操作するための関数群
■ renderItem関連：ヘッダー・フッター
ListHeaderCompornent：ヘッダー
ListFooterComponent：フッター
■ SectionList
いくつかのグループに分かれているデータを表示するのに便利
（データ構造の指定が必要）
■ FlatList のkey
データに一意な識別子を指定する必要がある
id
key
keyExtractor
■ horizontal
FlatList で横スクロールしたい場合
■ numColomns：複数列の表示を指定できる
※horizontal と同時に指定することができない
■ refreshing：現在データの更新中かどうか示すboolean値
onRefresh に、ユーザがリストを下に引っ張ってデータ更新した場合の
コールバック関数を指定
※ Pull To Refresh = 下に引っ張って更新
■ onEndReached：データ最後のアイテムが表示された場合
■ Touchable 系コンポーネント
（ボタンのコンポーネント）
TouchableWithoutFeedback：押下した際、見た目が変化しない
TouchableNativeFeedback：（Androidのみ）リップル効果を付与できる
TouchableOpacity：押下した際、透過度が変動
TouchableHightLight：押下した際、背景色が変動
（コールバック関数）
onPress
（非活性）
disabled
■ Button コンポーネント
簡易なボタン
■ TextInputコンポーネント
文字入力を受け取るコンポーネント。
value：入力欄に表示すべき値
onChangeText：入力が変更された場合に呼ばれるコールバック関数
（TextInput のprops）
multiLine：改行を許可するかどうか
placeholder：プレースホルダー
returnKeyType：完了ボタンのラベル
secureTextEntry：非表示化
editable：編集可否
keyboardType：表示するキーボード
autoCapitalize：文字を自動的に、大文字に変換
autoCompleteType：補完時の文脈を与える
autoCorrect：自動補完の有効にするかどうか
maxLength：最大入力長
■ StatusBarコンポーネント
ステータスバーの見た目
■ ActivityIndicatorコンポーネント
何か処理している最中であることを示す（検索中みたいな場合）
■ Switchコンポーネント
on/off を示すUI
■ AppState ユーティリティ：現在のアプリの状態、変更した際の処理
（アプリが取り得る状態）
active ：前面
inactive ：起動アプリ一覧画面、backgroundへ移行する間（iOSのみ）
background：ホーム画面 or 他アプリが前面にある
■ Dimensions ユーティリティ
デバイスサイズの取得 or 向きが変わった場合の処理
■ Linking ユーティリティ
URLを開く
■ PermissionsAndroid ユーティリティ
Androidのみ。アプリに許可する機能：都度ユーザにモーダルダイアログで確認してもらう
（参考）
カメラの使用したい場合は以下に追加
android/app/src/main/AndroidManifest.xml
<uses-permission android:name=“android.permission.CAMERA” />
============================================
パフォーマンス最適化
（参考）
（上記より抜粋）
■メインスレッド（Native）側 = UI
・useNativeDriver
→Animated.timing してる場合にtrueとすると改善するかも
■JavaScriptスレッド（ビジネスロジック）側 = ビジネスロジック
レンダリング
※レンダリング回数 = state更新回数 × 更新対象のコンポーネント数
state更新
・useRef（画面描画と関係ない変数はuseRef）
・そもそも更新を減らす
更新対象のコンポーネント
・memo化（もしくは、pureComponent）：propsに変化ない（=浅い比較）場合、再レンダリングしない
※ツール
why-did-you-renderでチェックできる
【アプリ】ビルド（Android）
[ビルド手順]
■Android Studioを起動
Build > Build Bundle(s) / APK(s) > Build APK(s)
※Duplicate resourcesエラーとなった場合
node_modules/react-native/react.gradle l.48
下記リンクの doLast の処理を追加する必要があります。
https://github.com/facebook/react-native/issues/22234#issuecomment-476596833
■ビルドを行う際に、変更が反映されない場合のコマンド
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
■その他不具合が起きた際などで使うコマンド
cd android
./gradlew cleanBuildCache
cd ..
react-native start --reset-cache
■Build > Generate Signed Bundle / APK...
■APK > Next
keyAlias （作成時に入力した値）
keyPassword （作成時に入力した値）
storePassword （作成時に入力した値）
release > Finish
■apkファイルが作成されます
（例）
（プロジェクトフォルダ）/android/app/release/app-release.apk
※ apkファイルは、Firebase Console のApp Distributionから配信できます
[事象]
AndroidStudioでビルド
→ビルド終わらない
minify Release WithR8 Expiring Daemon because JVM heap space is exhausted
[対応]
gradle.properties に以下を記述
（参考）
https://stackoverrun.com/ja/q/12934780
【React Native】エラー対応
■エラー
"IPA processing failed” in Xcode 12.4 with MAC M1
M1 Macでアーカイブでエラー
（対応）
■アプリケーション > Xcode.app
情報を見る
「Rosetta を使用して開く」をチェック
■アプリケーション > ユーティリティ > ターミナル.app
情報を見る
「Rosetta を使用して開く」をチェック
（参考）
■エラー
console.error "React Native version mismatch.
JavaScript version: 0.61.5
Natvie version: 0.63.3
[対応]
watchman watch-del-all && react-native start —reset-cache
■エラー
error listen EADDRINUSE: address already in use :::8081
ポートの衝突
[対応]
一度使用しているポート8081を消去してから、再度立ち上げる
//ポートのPIDを特定する
lsof -i :8081
//消去
kill -9 PID
（参考）
https://qiita.com/shumatsukishu/items/68755725a9370c119c8c
■エラー
error Could not find the following native modules: react-native-camera. Did you forget to run "pod install" ?
（対応）
cd ios
pod install --repo-update
（参考）
pod repo update を実行することで、任意のタイミングでキャッシュを更新することが出来る。
リリース済みのバージョンであるにもかかわらず、Podfile 上で指定されたバージョンのライブラリが見つからない、もしくは最新のバージョンが入らない（Podfile 上でバージョンの指定がない場合には、そのライブラリの最新バージョンが取得される）場合には、これによって対処できるかもしれない。
https://qiita.com/msh5/items/c35717b27975c9e48d15
■エラー
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-camera (to unlink run: "react-native unlink react-native-camera")
（対応）
react-native unlink react-native-camera
■エラー
ExceptionsManager.js:179 Error:
`createStackNavigator()` has been moved to `react-navigation-stack`.
See https://reactnavigation.org/docs/stack-navigator.html for more details.
（対応）
https://www.366service.com/jp/qa/a78df5ad655f7b59b58259d70bd13c9d
以下のコマンドで追加
react-native install react-navigation-stack save
■エラー
ExceptionsManager.js:179 Error:
undefined Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedViewNative.js`: @react-native-community/masked-view could not be found within the project.
（対応）
yarn add @react-native-community/masked-view
もしくは
npm install --save @react-native-community/masked-view
（参考）
https://qiita.com/kum44/items/982086c79a09b14e7afc
キャッシュのクリア
lsof -n -P -i :8081 -t | xargs kill
rm -rf ios/build
rm -rf android/app/build
rm -rf node_modules
yarn
（起動）
yarn react-native run-ios
■エラー
Unable to resolve module react-native install react-natvie-safe-area-context save
（対応）
npm i react-native-safe-area-context
（参考）
https://www.npmjs.com/package/react-native-safe-area-context
■エラー
Unable to resolve module react-native-screens
（対応）
npm install --save react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
（参考）
https://dev-yakuza.posstree.com/react-native/react-navigation/
■エラー
ExceptionsManager.js:179 Error:
`createBottomTabNavigator()` has been moved to `react-navigation-tabs`.
See https://reactnavigation.org/docs/bottom-tab-navigator.html for more details.
（対応）
npm install --save react-navigation-tabs
■エラー
Could not find store in the context of Connect(Home) Either wrap the root component in a Provider
（対応）
おそらく、、、書き方が変わったのかも
React Redux 7.1.0からフック(Hook)が備わりました
昔
import { connect } from 'react-redux'
今
import { useSelector, useDispatch } from 'react-redux';
（参考）
http://www.fumiononaka.com/Business/html5/FN2004004.html
■エラー
シミュレータ起動時に
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
[対応]
x-codeで起動すると解決したりする
https://www.haneca.net/react-native-cfbundleidentifier-error/
【React Native】環境構築・コマンド
新しいプロジェクト作成
npx react-native init MyApp
依存パッケージをインストール
cd MyApp
yarn
ネィティブ層における依存パッケージをインストール
cd ios
pod install —repo-update
必要なツールがインストールされているかチェック
npx react-native doctor
バージョン確認
react-native info
起動（いろいろある）
yarn react-native run-ios
react-native run-ios --simulator "iPhone 11"
npx react-native run-ios
（参考）npx の良いところ
github gistにあげているパッケージがあるとして、以下のコマンドを打つと、インストールなしで実行できる
以下は非推奨かもしれない（react-native-cli）
npm install -g react-native-cli
アンインストールする場合
npm uninstall -g react-native-cli
Androidエミュレータ確認（もしくは、Android端末を直接USB接続できてるか確認）
adb devices
※Android端末を直接USB接続して認識されてる場合は
Android Studioからインストール可能
（キャッシュのクリア関連）
# watchmanのキャッシュを削除
watchman watch-del-all
# iosのビルドファイルを削除
rm -rf ios/build
# androidのビルドファイルを削除
rm -rf android/app/build
# node_modulesを削除
rm -rf node_modules
# Xcodeのキャッシュを削除
rm -rf ~/Library/Developer/Xcode/DerivedData
# yarnをインストール
yarn install
# podをインストール
cd ios
pod install
# androidのビルド環境をクリア
cd ../android
./gradlew clean cleanBuildCache
# metro bundlerを再起動
cd ..
yarn start -- --reset-cache
# metro bunlderが起動したらControl + Cでmetro bundlerを落とす
（参考）
Metro Bundler
（ツール）
ターミナル上で動作する
アプリを起動する際、同時に起動されサーバとして動作
すべてのファイルを１つにまとめて返却（１つのJavaScriptファイルにまとめることをバンドルと呼ぶ）
Metro Bundlerの注意点
キャッシュ古いままで更新されない場合あり
（対応）
Metro Bundlerを終了
以下を実行
npx react-native start —reset-cache
（参考）
キャッシュクリア
lsof -n -P -i :8081 -t | xargs kill
rm -rf ios/build
rm -rf android/app/build
rm -rf node_modules
yarn
