【Typescrit】 map objectのkeyのtypeを生成したい。

例えばこんなオブジェクトがあるとする。 const person = { name: 'hoge', age: 4, } このオブジェクトのkeyのtypeを作りたい。こんな感じ type PersonKeys = 'name'|'age'; 単純にkeyofをpersonオブジェクトに当てると,,, export type PersonKeys = keyof …

2020-02-03

コロナウイルスの感染者の推移を確認出来るマップを作成した（している

↓から見れます。 SITUATION of Coronavirus(2019-nCoV) 情報元はWHOのSituation Reportです。１日ごとにどんな状況になっているのかまとめてくれており、どんな感じに感染者が推移しているのか気になって作ってみた。なので、最新の情報ではなく１日遅れの…

2019-07-20

A56 サポートページ

スピード、UNO、スロットの要素を組み合わせた新感覚ソリティアゲーム。目指せ、世界最速！ UNOの様に同じマーク、スピードの様に前後のアルファベットを場に出していき全56枚のカードを全て出し切ればクリアです！マークやアルファベットを揃えてボーナス…

2019-06-20

「Flutter Android」TextFieldにフォーカスをあててもキーボードが表示されない

Flutterでアプリ開発中にTextFieldにフォーカスを合わせてもキーボードが表示されない現象に出くわしました。原因はFlutterのIntegration Test toolであるTest Driveを有効にしていた事でした。 test driveを有効にしてFlutterプロジェクトを作成した場合 …

2019-05-28

Dartのリスト操作

開発メモメモ。。フィルタリング処理 ['a', 'b', 'c'].where((word) => word == 'a'); // ['a'] ['a', 'b', 'c'].removeWhere((word) => word == 'a'); // ['b', 'c'] N個のリストを作りたい final lenOfList = 10; List.generate(lenOfList, (index) => in…

2019-03-26

【typescriptで関数型】fp-tsのOption型を使ってundefinedと戦う

この記事はOOP思考でずっとやってきた人が、どうにかFPの流れにのっていくために足掻いている記事です。なので、随所にOOPの場合はこんなイメージだよねというのを書いてます。関数型の知識的にはすごいH本を斜め読み、Elmのtutorialをやってみた程度です。…

2019-03-20

【Elm0.19】Union typeのexportする方法

Elmと言うか関数型言語で強力なパターンマッチングや型を定義する際に便利なUnion Type こんなやつです。 type Animal = Cat|Dog これをモジュールからExportしてImportするにはどう書けばいいのか迷ったのでメモ。まずはExport側 module Submodule exposin…

2019-03-13

【Elm】HTMLタグの標準のプロパティではなく独自のプロパティを設定方法

最近、関数型の勉強も兼ねてElmをいじっています。 HTMLのタグを使っていて独自のタグを設定する方法が分からなかったので調べました。例えば素のHTMLだと、、、 <span target-data="hogehoge"> fuga </span> target-dataがHTML標準には存在せず、独自に定義した箇所になります。これを静的型付…

2019-01-27

Dockerでnode.jsの開発環境でnode_moudlesが見えなくて困ってどうしたか

docker及びdocker-composeでnodejsの開発環境を構築しました。最初はdockerfileでyarn installする構成で考えてました。 dockerfile及びcomposeはこんな感じ。 FROM node:10.14.2-alpine WORKDIR /app COPY package.json ./ COPY yarn.lock ./ RUN yarn ins…

2018-11-21

TypescriptのInterfaceにはinstanceofは使えない。

Typescriptには、JavaやC＃と同じ様にinterfaceがあります。が、JavaやC#と同じ様に扱うと怪我をします。 instanceofでinterfaceは使えない。最初に私がビックリした事です。JavaやC#では'instanceof 'で型をチェックしたり、条件分岐で使えたりします。が…

2018-11-14

Typescript ブラケット記法(Object[key])でno index signatureエラーをtype safeに解決したい。

TypescriptでObjectに対して[文字列]でアクセスするブラケット記法を用いると発生するエラー。例えば、この様に書くとエラーが出てきてコンパイルが通りません。 interface ISomeObject { firstKey: string; secondKey: string; } const obj = { firstKey: …

2018-11-08

【React Native(RN)】RNのプロジェクトフォルダ内に、別のNode.jsプロジェクトを作るとRNのビルドエラーになる

どんな時に発生するか React Nativeのプロジェクトフォルダ内に、別のNodejsプロジェクトを作った場合に発生します。私の場合、Node.js for MobileというスマホアプリからNode.jsが実行できるモジュールを使った際に発生しました。現象以下のエラーログが…

2018-11-06

Logcatを使って実機Androidのデバッグログをウォッチする

CordovaやReactNativeなどXプラットフォームな開発をしていてシミュレータでは大丈夫だったのに実機にインストールして起動すると何も言わずにアプリが落ちた！そんな時はlogcatを使ってログを見てみると解決する糸口が見つかったりします。 logcatを実行…

2018-10-31

ReactNativeで簡単なアプリを作ってExpoとReactNativeCLIの比較をしてみた

作ったもの食材毎に大さじとか小さじをグラムに変換するアプリ既に似たような物が出ているけど、家族からの要望で作ることにした。折角なので、前から気になっていたReactNativeで作ってみる事にした。ちなみにReactjsは使ったことはありますが、ReactNa…

2018-10-26

Create-react-native-app(CRNA)が開発中止(アーカイブ)になっている件

ふと、CRNAのGithubのページを見ると、、、アーカイブされとるやんけ！ reade meを見てみると真ん中ぐらいに、、、 Note: Create React Native App has been merged with Expo CLI You can now use expo init to create your project. See Quick Start in t…

2018-10-24

CordovaでiOS版を作ってみた。（青空速読）

青空速読tomoaki kanayamaEducationFree 今までAndroid版しか作ってなかったけど、中古でiMacを安く買えたので、せっかくのクロスプラットフォーム開発環境なのだからという事でiOS版も作ってみた。 UIはAndroidから変更なし、機能的にもintent機能を除き移…

2018-10-23

Node.js向けのTypescriptのボイラープレートを作った

Typescript書いてますか？ TypescriptでNode.jsのスクリプトをサクッと書きたいが環境を作るの面倒。なので、オレオレTypescriptボイラープレートを作った。特徴 Typescript3.1 TSLint AirBnBのコンフィグを使用。MSとかFacebookのconfigはキツすぎてダル…

2018-10-17

大さじ？ｇ　サポートページ

大さじ、小さじや１カップをグラムへ一発変換料理向けの計量をグラムへ変換するアプリです。計量器具を使わず、グラムで料理をする方ぜひお使いください。特徴・材料を選択すると１杯辺りのグラムを一発表示・大さじや小さじの杯数の変更も可能・グラ…

2018-10-12

【react-native・Android】React-native-admobを入れてアプリを起動すると停止し続ける。

react-natvie-admob(ver 2以降)を入れて、アプリを起動しようとすると「繰り返し停止しています」エラーで落ちる現象に遭遇。。。調べてみるとadmobのSDKが10月2日に更新され、古いAPIと互換性が無く落ちる模様。回避策としては、/node_modules/react-nati…

2018-10-10

React-native ver.0.57.2で起動出来ない

追記：0.57.3がリリースされています。そっちでは問題が起きないので, 出来るならアップデートする方が良いと思います。 ReactNative 0.57.2でデバッグが起動できない現象が発生します。 iOS、Android両方とも起きます。エラー内容 iOS Android共に下記の様…

2018-10-08

react-native-router-fluxで現在表示しているシーン名を取得等

基本、Actionsに色んなものが入っている。表示中のシーンや一つ前に表示していたシーン等色々入っているのでチェックしてみると良い import { Actions } from 'react-native-router-flux'; Actions.currentScene; // 現在表示してるシーン Actions. prevSce…

2018-09-18

create-react-native-appを使ってReactNative+Typescriptの環境を一瞬で作る方法

create-react-native-appを使うとReactNative＋Typescriptの環境も一瞬で出来るのでサクッと紹介します。方法まずはインストール npm -g install typescript create-react-native-app 次に以下のコマンドを打てば、my-appフォルダ内にTypescriptでReactNat…

2018-09-13

ブラウザやタブを閉じた時にindexedDBに何か保存したい。save on exit

Webアプリでブラウザやタブを閉じた時に、今表示している内容をIndexedDBに保存したい場合ってありますよね。ブラウザやタブが閉じる時の発火するイベントbeforeunloadを使えば上手く行きそうですが、、、。例えばこんな風に、、、 window.addEventListener…

2018-09-11

Google Cloud Functionsでcorsを有効にする。

Cloud Functions特有なところも無く一般的なクロスドメインの話ですが、忘れないようにメモしときます。環境 Google Cloud Functions Node.js 6 / 8 メモリー128MB クライアント Chrome 有効する方法サーバーサイドでレスポンスのヘッダーに'Access-Contro…

2018-09-10

【ASO・Android】自分のアプリがPlayストアどんな検索ワードで調べられているか知る方法

ASOが重要な事は言わずもがなですが、自分のPlayStoreのページにユーザがどの様に検索して辿り着いたか気になるところです。実はplay consoleで自分のアプリのページがどんな検索キーワードでたどり着いたを知る事が出来ます。どの様に検索されているか知…

2018-09-03

「デバッグ編」nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせて、デバッグ。

nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。 - aknow2 上記リンク先の記事の続きです。先にこちらを御覧ください前回の方法でTypescriptを編集した際に自動リロードする事が出来ました。次にデバッ…

2018-05-11

React Router(v4)でcomponentクラス外から手動でページ遷移を行う。

まずReact Router v4 基本的なページ遷移の方法からです。やり方は以下で出来ます。 // タグで指定する class Hoge extends React.component { render (): JSX.Element { return <Link to='/my/link'>Link</Link>; } } // historyを利用する class Hoge2 extends React.component { han…