RDS（MySQL） から BigQuery へ1日1回データを同期して、データ分析やレポート系の処理で利用することになりました。 構成 以下の構成でデータを同期することにしました。 要件1: データの断面は合わせたい 元々はEmblukを使って直接同期しようと考えていたが、Embulkだとテーブル毎にデータを同期することになり、テーブルによってデータの断面が微妙にずれるため断念 CSV 形式でダンプして、Embulk で同期することもできそうだが、元々自動でスナップショットが取られているのでそれを利用することにした => スナップショットを parquet 形式で S3 にエクスポートすれば、BigQuery Data Transfer Service を使って BigQuery に取り込むことができるので、採用 要件2: コストを抑えたい 定額利用料がかかるサービスは使うことはで Continue Reading
時系列が関係あるような機能の動作確認をする際に、現在日時を変更したくなるケースがありますが、OSの時間を変更するとちょっと怖いです。 ローカル端末上で実行中のアプリだけに日時を変更する方法を記載します。 フロントエンド React.jsやVue.jsなどで作っているWebアプリケーションの日時を変更したいです。 new Date() した際の日時を変更する mockdate というライブラリを使います。 まずは、ライプラリをインストールします。 npm install -D mockdate # or yarn add -D mockdate あとは、main.tsなど、アプリを起動する処理の直前に以下を指定します。 import MockDate from "mockdate"; MockDate.set("2022-06-29 19:30:00" Continue Reading
残念ながらAsanaでは、コードブロックをハイライトする機能が提供されていませんので作って公開しました。 https://chrome.google.com/webstore/detail/asana-highlighter/lgofbppgpileldekmjbomfdodkhholna こんな感じで動作します。 ソースコードはこちらで公開しています。 https://github.com/rinoguchi/asana_highlighter 動機 現在所属している会社ではチケット管理にAsanaを利用しているのですが、Asanaにはコードブロックをハイライトする機能がありません。 機能開発やテックサポートなどをしていると、ソースコードをAsana上に保存しておきたいケースはそれなりにあり、ソースコードが良い感じにハイライトされてないと頭に入ってきません。とても嫌な感じです。 Asan Continue Reading
フロントエンドのアプリケーションを構築していて、リンターとフォーマッターをどのように設定するのがベストなのか自分なりに調査しました。 結論 まず最初に、自分がベストだと思う設定方針を書いておきます。 開発時 一般的なスタイルに関する問題 Prettier でフォーマットする ファイル保存時に自動フォーマットする 言語毎のコード構造に関する問題 JavaScript や TypeScript については ESLint で、CSS や SCSS については StyleLint でリント＆フォーマットする Prettier と競合するルールは無効化する エディター上でリント結果のワーニングやエラーを表示する ファイル保存時に自動フォーマットする コミット時 pre-commit のタイミングでリントを実行して、エラーならコミットできないようにする Prettier + ESLint + Styl Continue Reading
TypeScript に関する Tips をメモっていきます。 クラス名の取得方法 取得方法 クラス内から取得する場合 static method 内: this.name instance method 内: this.constructor.name クラス外で取得する場合 クラス名.name インスタンス.constructor.name テストコード 以下のテストコードで検証しました。 継承してても問題なくクラス名を取得できました。 class Parent { constructor(public name: string) {} static classNameInStaticMethod(): string { return this.name; } classNameInInstanceMethod(): string { return this.constructor.n Continue Reading
Jest + TypeScript でテストを書くことが増えてきたので、この辺でTipsを記載しておこうと思います。今後も何かあれば追記します。 インストール こちら を参考にしました。 まず、必要なライブラリを追加します。 yarn init yarn add jest @types/jest ts-jest –dev jest.config.jsをプロジェクト直下に作成します。 module.exports = { "testMatch": [ "**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)" ], "transform": { "^.+\\.(ts|tsx)$": "ts-jest&q Continue Reading
TypeScript を使って、 Node.js で DB アクセスするシンプルな Web アプリケーションを作ってみようと思います。 Node.js: v14.17.0 npm: 6.14.13 TypeScript: 4.3.2 express: 4.17.1 MariaDB: 10.5.10 事前準備 Node.js インストールと package.json 作成 以下のいずれかの方法で Node.js をインストールします。 公式サイト からインストーラーをダウンロードしてインストール nodebrew を使ってインストール（こちら を参考にさせていただくといいと思います） 次に、package.jsonを作成します。 npm init TypeScript インストールと tsconfig.json 作成 npm を使用して、TypeScript をインストールします。 npm Continue Reading
ドキュメント 公式マニュアル ソースコード 特徴 Denoは、V8エンジンおよびRustで組まれた JavaScript と TypeScriptのランタイムで、Node.js を作成したライアン・ダール氏が、Node.js での後悔を改善する形で作成されたものらしいです。（詳しくは、こちら） 特徴としては以下が挙げられています。 セキュアである 明示的にしない限り、ファイル・ネットワーク・環境へアクセスできない 何もしなくても TypeScriptをサポートする 単一の実行ファイルをリリースする 依存関係インスペクタ（deno info）やコードフォーマッター（deno fmt）が組み込みユーティリティとして提供されている レビュー・動作確認済みの標準ライブラリが Deno Land で提供されている インストール brew install deno deno upgrade –ver Continue Reading
reCAPTCHAはスパムやBOTなどからサイトを保護するためのもので、v2とv3があります。今回は自分がtypescriptで作っているフロントエンドアプリ（Chrome拡張）をBOTアクセスから保護する目的でreCAPTCHAのv2とv3の両方を同じ画面に導入しました。 v2とv3 v2はWEBサイトでみかけるやつで「この中から車が写っている画像を選んでください」みたいな感じで、ユーザ操作の結果でBOTアクセスなのかどうか（True/False）を返してくれます。 v3は、ユーザフリクション（本来の目的を妨げるような事象。）は一切なく、スコア（1が正常で、0.0に近づくほどBOTの可能性が高い）を返してくれます。 処理の流れ DBにアクセスする3つのアクション（Chrome拡張起動、保存ボタン、削除ボタン）の際にv3を使ってスコアを計算する フロントエンド（Chrome拡張のポップアッ Continue Reading
ブラウザでデータを保管する場合、Web Storage（sessionStorageやlocalStorage ）を使うことが多かったと思いますが、IndexedDBが登場したことであえてWeb Storageを使う理由がなくなりました。 IndexedDBを使う場合、Dexie.jsを使用することでだいぶ実装がスッキリするので、使い方を紹介したいと思います。 Web StorageとIndexedDBの違い そもそも本当にIndexedDBを使うのが良いのか、という疑問があるので念のため、Web Storageと IndexedDBの違いを調べてみました。調べた全ての点でIndexedDBの方が良いので、やはりIndexedDB一択ですね。 項目 Web Storage IndexedDB 型 文字列のみ boolean、数値、文字列、dateなど色々 RDBのテーブル なし。key-v Continue Reading
