Node.js向けのTypescriptのボイラープレートを作った
Typescript書いてますか?
TypescriptでNode.jsのスクリプトをサクッと書きたいが環境を作るの面倒。
なので、オレオレTypescriptボイラープレートを作った。
特徴
- Typescript3.1
- TSLint AirBnBのコンフィグを使用。MSとかFacebookのconfigはキツすぎてダルい。
- ts-nodeを使い、JSに変換せずに実行
- nodemonでコード編集を検出して、再実行
- デバッグはchromeでchrome://inspect/#devicesにアクセスすれば出来る
- TestフレームワークはJest
使い方
git clone https://github.com/aknow2/tsnode-typescript-boilerplate.git cd tsnode-typescript-boilerplate npm install or yarn install
npm start
- 実行する。サンプルでは5秒毎に1インクリメントするプログラムが動く
npm run build
- JSにコンパイル
npm test
- XXX.test.tのファイルのテストを実行
prettierを入れ忘れたので入れておきたい。
関連:
「デバッグ編」nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせて、デバッグ。 - aknow2
nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。 - aknow2
大さじ?g サポートページ
大さじ、小さじや1カップをグラムへ一発変換
料理向けの計量をグラムへ変換するアプリです。
計量器具を使わず、グラムで料理をする方ぜひお使いください。
特徴
・材料を選択すると1杯辺りのグラムを一発表示
・大さじや小さじの杯数の変更も可能
・グラム側を入力する事でグラムから計量器具への変換も可能
ご要望やご意見はコメント欄へお願い致します。
【react-native・Android】React-native-admobを入れてアプリを起動すると停止し続ける。
react-natvie-admob(ver 2以降)を入れて、アプリを起動しようとすると「繰り返し停止しています」エラーで落ちる現象に遭遇。。。
調べてみるとadmobのSDKが10月2日に更新され、古いAPIと互換性が無く落ちる模様。
回避策としては、/node_modules/react-native-admob/androidにあるbuild.gradleでsdkのバージョンを15に固定して再ビルドすれば良い。
dependencies { compile 'com.facebook.react:react-native:+' // compile 'com.google.android.gms:play-services-ads:+' // 15に固定 compile 'com.google.android.gms:play-services-ads:15.0.0' }
参考:
App keeps stopping on Android. · Issue #368 · sbugert/react-native-admob · GitHub
React-native ver.0.57.2で起動出来ない
追記:0.57.3がリリースされています。そっちでは問題が起きないので, 出来るならアップデートする方が良いと思います。
ReactNative 0.57.2でデバッグが起動できない現象が発生します。
iOS、Android両方とも起きます。
エラー内容
Error: Unable to resolve module ./../react-transform-hmr/lib/index.js
回避方法
// キャッシュのクリア rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all // 実行 npm start --reset-cache // 別のterminalでプロジェクトを起動 react-native run-ios // or react-native run-android
react-native-router-fluxで現在表示しているシーン名を取得等
基本、Actionsに色んなものが入っている。
表示中のシーンや一つ前に表示していたシーン等色々入っているのでチェックしてみると良い
import { Actions } from 'react-native-router-flux'; Actions.currentScene; // 現在表示してるシーン Actions. prevScene// 一つ前に表示してるシーン
場所:
https://github.com/RNRF/react-native-router-flux/blob/master/src/navigationStore.js
create-react-native-appを使ってReactNative+Typescriptの環境を一瞬で作る方法
create-react-native-appを使うとReactNative+Typescriptの環境も一瞬で出来るのでサクッと紹介します。
方法
まずはインストール
npm -g install typescript create-react-native-app
次に以下のコマンドを打てば、my-appフォルダ内にTypescriptでReactNativeな環境が出来上がります。
恐ろしく簡単!
create-react-native-app my-app --scripts-version=react-native-scripts-ts
次にExpoを使ってアプリを起動してみましょう。
まずはお手元のスマホにExpoをインストールしてください。
https://play.google.com/store/apps/details?id=host.exp.exponent&hl=ja
次にreact-nativeを起動します。
cd my-app npm start
QRコードが生成されるのでExpoで読み込めばアプリが起動します。
注意!スマホとQRコードを生成したPCは同じローカルネットワークに属する必要があります。
ブラウザやタブを閉じた時にindexedDBに何か保存したい。save on exit
Webアプリでブラウザやタブを閉じた時に、今表示している内容をIndexedDBに保存したい場合ってありますよね。 ブラウザやタブが閉じる時の発火するイベントbeforeunloadを使えば上手く行きそうですが、、、。例えばこんな風に、、、
window.addEventListener('beforeunload', () => { saveToIndexedDB({data}); });
結論
この方法では出来ません
理由
indexedDBの保存処理は非同期のためです。 保存が終わる前に落ちてしまい保存できないです。 逆に言うとbeforeunload内は同期処理しか上手く動かないという事。
回避策
localstorageを使う。
localStorageは同期処理で保存が出来る。なので、ウィンドウが閉じた時は一旦LocalStorageに保存してから次にアプリが起動した時にindexedDBに移動させるというやり方。
// 終了時の処理 window.addEventListener('beforeunload', () => { localStorage.setItem('unsavedData', {key: '123', data: 'hogehoge'}); }); // 起動時の処理 const unsavedData = localStorage.getItem('unsavedData'); if (unsavedData) { saveToIndexedDb(unsavedData); localStorage.removeItem('unsavedData'); }
気持ち悪い方法ですが、とりあえずこれで回避は出来ます。
もう一つ試した方法はServiceWorkerですが、デスクトップでブラウザを閉じると保存されず断念しました。