- 投稿日:2019-07-16T16:05:05+09:00
ReactNativeの開発環境を構築する話(Windows編)
はじめに
以前に書いた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-cli2. 必須モジュールインストール
ここは各プロジェクトによって内容が異なってくるかと思います。
お好きなようにアレンジしてください。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.ts3. 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.jsmodule.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.tsdeclare 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の場合と特に差異がないため問題なく動くかと思いますが、
何か記載漏れ等ありましたらご連絡ください。また、ここで記載した内容が少しでも参考になれば幸いです。
- 投稿日:2019-07-16T10:16:10+09:00
Macのネットワーク環境(プロファイル)をコマンドから切り替える
はじめに
この記事ではMacのネットワーク環境(プロファイル)をコマンドから切り替える方法を説明します。
ネットワーク環境は「システム環境設定 - ネットワーク」で表示される以下の部分の設定です。
なぜコマンドから切り替えたいのか
そもそも普通の人はネットワーク環境をいじる必要はないのですが、僕の場合会社ではProxy経由が必要でありそのためにいくつかの設定をしています。
この設定を行うと社外でネットワークを繋ぐときにある問題が生じることがわかりました。
それはWifiなどでポップアップ認証(同意ボタンを押すようなもの)が必要な場合に、ポップアップが表示されないという問題です。
# 現在JALさんのWifiに繋いでいますが、ポップアップ認証でしたそういったときは"手動で"ネットワーク環境を切り替えてるのですが、毎回手動は億劫なのでコマンドで済ましてしまおうというのが今回の趣旨です。
方法
networksetup
を使えば簡単に行なえます。ざっとコマンドから必要そうなオプションを以下に抜き出しました。
networksetup -listlocations
: ネットワーク環境リストを表示するnetworksetup -getcurrentlocation
: 現在のネットワーク環境を表示するnetworksetup -switchtolocation [location]
: ネットワーク環境を[location]
に切り替える以下が切り替えの手順になります。
# 僕の環境では「Proxy」、「NoProxy」の2つが設定されています $ networksetup -listlocations Proxy NoProxy # 現在の「Proxy」が設定されています $ networksetup -getcurrentlocation Proxy # 「NoProxy」に切り替えてみます $ networksetup -switchtolocation NoProxy found it! # きちんと切り替わりましたね $ networksetup -getcurrentlocation NoProxyおわりに
Proxy環境、非Proxy環境では環境変数の設定も書き換えないといけないことがほとんどだと思うので、今回のネットワーク環境の切り替えも含めた一連の処理をシェルスクリプトにまとめるととても便利になるかと思います。
- 投稿日:2019-07-16T01:04:18+09:00
MacBook Proがぶっ壊れたので、iPadでgot clone→編集→Pushをした話(iPhoneでも可)
大切な大切な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上でも可能です。
通勤電車などでも軽微な習性であればできてしまいますね。