はじめに

以前に書いたReactNativeの開発環境を構築する話(Mac編)のWindows版です。

前提

・AndroidStudio
React NativeでAndroidアプリ @ Windows 備忘録
・Node.js
[Node.js] Node.js の導入(Windows編)
・VSCode
Visual Studio Code (Windows版) のインストール

各種設定・インストール

1. yarnとreact-native-cliインストール

npm install -g yarn
yarn -g add react-native-cli

2. 必須モジュールインストール

ここは各プロジェクトによって内容が異なってくるかと思います。
お好きなようにアレンジしてください。

react-native init【プロジェクト名】 —version 0.59.9
cd【プロジェクト名】
yarn add —dev typescript
yarn add —dev react-native-typescript-transformer
yarn add —dev @types/react @types/react-native
yarn tsc —init —pretty —jsx react
mkdir src
move App.js src/App.tsx
copy nul  rn-cli.config.js
yarn add —dev prettier
yarn add —dev tslint tslint-react
yarn add prettier —dev tslint-config-prettier tslint-plugin-prettier
copy nul tslint.json
copy nul  images.d.ts

3. tsconfig.jsonを修正

下記の値を追加・修正します。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015"],
    "allowSyntheticDefaultImports": true,
  },
  "exclude": [
    "node_modules"
  ]
}

4. index.jsのApp参照先を修正

App.jsをsrcに動かしたのでindex.jsを修正します。

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
// import App from './App';  // del
import App from './src/App'; // add
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

5. rn-cli.config.jsとpackage.jsonを修正

※0.57以降ではrn-cli.config.jsは不要と聞いたこともあります。

rn-cli.config.js

module.exports = {
    getTransformModulePath() {
        return require.resolve("react-native-typescript-transformer");
    },
    getSourceExts(){
        return["ts","tsx"];
    }
}

package.jsonは以下を追加

package.json

  "scripts": {
    "run-ios": "react-native run-ios",
    "run-android": "react-native run-android"
  },

6. tslint.jsonとimages.d.tsを修正

tslin設定も正直お好みです。

tslint.json

{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "rules": {
        "jsx-no-lambda": false,
        "member-access": false,
        "interface-name": false,
        "prefer-for-of": false,
        "ordered-imports": false,
        "object-literal-sort-keys": false,
        "no-console": false
    },
    "linterOptions": {
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.js",
            "coverage/lcov-report/*.js"
        ]
    }

}

images.d.ts

declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

7.実行

Androidエミュレータを起動した状態で下記コマンドを実行

yarn run-android

感想

Macの場合と特に差異がないため問題なく動くかと思いますが、
何か記載漏れ等ありましたらご連絡ください。

また、ここで記載した内容が少しでも参考になれば幸いです。

はじめに

この記事ではMacのネットワーク環境（プロファイル）をコマンドから切り替える方法を説明します。

ネットワーク環境は「システム環境設定 - ネットワーク」で表示される以下の部分の設定です。

なぜコマンドから切り替えたいのか

そもそも普通の人はネットワーク環境をいじる必要はないのですが、僕の場合会社ではProxy経由が必要でありそのためにいくつかの設定をしています。

この設定を行うと社外でネットワークを繋ぐときにある問題が生じることがわかりました。
それはWifiなどでポップアップ認証（同意ボタンを押すようなもの）が必要な場合に、ポップアップが表示されないという問題です。
# 現在JALさんのWifiに繋いでいますが、ポップアップ認証でした

そういったときは"手動で"ネットワーク環境を切り替えてるのですが、毎回手動は億劫なのでコマンドで済ましてしまおうというのが今回の趣旨です。

方法

networksetupを使えば簡単に行なえます。

ざっとコマンドから必要そうなオプションを以下に抜き出しました。

• networksetup -listlocations: ネットワーク環境リストを表示する
• networksetup -getcurrentlocation: 現在のネットワーク環境を表示する
• networksetup -switchtolocation [location]: ネットワーク環境を[location]に切り替える

以下が切り替えの手順になります。

# 僕の環境では「Proxy」、「NoProxy」の２つが設定されています
$ networksetup -listlocations           
Proxy
NoProxy
# 現在の「Proxy」が設定されています
$ networksetup -getcurrentlocation                                                                                
Proxy
# 「NoProxy」に切り替えてみます
$ networksetup -switchtolocation NoProxy
found it!
# きちんと切り替わりましたね
$ networksetup -getcurrentlocation      
NoProxy

おわりに

Proxy環境、非Proxy環境では環境変数の設定も書き換えないといけないことがほとんどだと思うので、今回のネットワーク環境の切り替えも含めた一連の処理をシェルスクリプトにまとめるととても便利になるかと思います。

大切な大切なMacbook proがぶっ壊れました、、、、、、、、、、

自覚はないのですが、ー何かの拍子に中の液晶が割れてこんな状態に

皆さん、液晶保護シートやケースなどでの保護。また、故障の場合に備えて常日頃のバックアップは忘れずにしましょう。(今回の画面の故障ではデータは消えませんでした)

Macbook proはApple Storeへ行き、修理に出してきました。画面だけですと、Apple careへ入っていない場合でもおよそ52000円＋消費税で修理をしてくれます。

この値段は他の非正規の修理業者とほぼ同じか安い値段だったので、画面の故障の場合はAppleの正規の修理センターで直してもらうことをお勧めします。

そんなこんなで現在Macbook proを修理に出してしまっているので、プログラミングができない。。
しかし、どうしてもgithubにあげたコードを編集したい。。

そう思っていたところ、色々ググってみるとiPad Proでgithubからcloneして編集→Pushまでができるということを知り、試してみることにしました。

今回使用したアプリ

https://apps.apple.com/jp/app/working-copy/id896694807

というわけでcloneから編集、Pushまでをやってみる

1.まずはgithubアカウントとの連携を済ましてください。
2.Reoisitories右上の＋ボタンをクリックして、「Clone repository」を選択します。
3.Githubのアカウントに紐づくrepositoryが一覧表示されます。

（ここからは画像付きで説明します。）

3.cloneするレポジトリを選択して右上「clone」を押してください。

4.cloneしたファイルを自由に編集します。（自分の場合は.gitignoreを追加しました。）

5.編集した後ファイル階層の上にある「Repository Status and Configuration」クリックします。
6.編集したファイルをcommitしたい場合は「commit changes」をクリック

7.コメントを記載して、右上「Commit」をクリックします。（同時にPushも行いたい場合は隣のPushを有効にしてください。）
8.remote上masterにPushしたい場合は、10日間のFree Trialへ申し込むとPushが可能です。（用が終わったら購読をキャンセルするのを忘れずに！）

以上になります。

iPhoneでも全く同じことができます。

ちなみにこのアプリはiPhone用もあるので、上記の操作がiPhone上でも可能です。
通勤電車などでも軽微な習性であればできてしまいますね。