ローカル端末で実行中のフロントエンド/バックエンドアプリの現在日時を変更する

時系列が関係あるような機能の動作確認をする際に、現在日時を変更したくなるケースがありますが、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

Posted On :

AsanaでコードブロックをハイライトするChrome Extensionを作って公開した

残念ながらAsanaでは、コードブロックをハイライトする機能が提供されていませんので作って公開しました。 https://chrome.google.com/webstore/detail/asana-highlighter/lgofbppgpileldekmjbomfdodkhholna こんな感じで動作します。 ソースコードはこちらで公開しています。 https://github.com/rinoguchi/asana_highlighter 動機 現在所属している会社ではチケット管理にAsanaを利用しているのですが、Asanaにはコードブロックをハイライトする機能がありません。 機能開発やテックサポートなどをしていると、ソースコードをAsana上に保存しておきたいケースはそれなりにあり、ソースコードが良い感じにハイライトされてないと頭に入ってきません。とても嫌な感じです。 Asan Continue Reading

Posted On :

PrettierとESLint・Stylelintの併用

フロントエンドのアプリケーションを構築していて、リンターとフォーマッターをどのように設定するのがベストなのか自分なりに調査しました。 結論 まず最初に、自分がベストだと思う設定方針を書いておきます。 開発時 一般的なスタイルに関する問題 Prettier でフォーマットする ファイル保存時に自動フォーマットする 言語毎のコード構造に関する問題 JavaScript や TypeScript については ESLint で、CSS や SCSS については StyleLint でリント&フォーマットする Prettier と競合するルールは無効化する エディター上でリント結果のワーニングやエラーを表示する ファイル保存時に自動フォーマットする コミット時 pre-commit のタイミングでリントを実行して、エラーならコミットできないようにする Prettier + ESLint + Styl Continue Reading

Posted On :
Category:

TypeScriptのTips

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

Posted On :
Category:

Jest + TypeScriptのTips

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

Posted On :

Node.js with TypeScriptでDBアクセスするWebアプリを作る

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

Posted On :
Category:

初めてのDeno

ドキュメント 公式マニュアル ソースコード 特徴 Denoは、V8エンジンおよびRustで組まれた JavaScript と TypeScriptのランタイムで、Node.js を作成したライアン・ダール氏が、Node.js での後悔を改善する形で作成されたものらしいです。(詳しくは、こちら) 特徴としては以下が挙げられています。 セキュアである 明示的にしない限り、ファイル・ネットワーク・環境へアクセスできない 何もしなくても TypeScriptをサポートする 単一の実行ファイルをリリースする 依存関係インスペクタ(deno info)やコードフォーマッター(deno fmt)が組み込みユーティリティとして提供されている レビュー・動作確認済みの標準ライブラリが Deno Land で提供されている インストール brew install deno deno upgrade –ver Continue Reading

Posted On :

typescriptプロジェクトにreCAPTCHA v2 & v3を導入

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

Posted On :

IndexedDBをつかうならDexie.jsが便利

ブラウザでデータを保管する場合、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

Posted On :
Category:

vue+typescriptのアプリにmarkdown editorを導入

vue + typescriptで作っているフロントエンドアプリにmarkdown editorを導入したので少し紹介します。 XSS対策をちゃんとできるかという点に着目しつつ、mavonEditorとEasyMDEを試して最終的にEasyMDEの方を採用しました。 mavonEditor 2020年6月時点でstar数も3.9kあり実績十分ぽかったのでまずはこれを試しました。 導入手順 こちらをベースにやっていくわけですが、typescript+開発時はnode_modules・本番はCDNという前提で導入手順を記載しておきます。 ライブラリをインストールし、 npm install mavon-editor –save-dev mavonEditor.tsに以下のように記述します。cssはCDNから読み込む予定なのでここではimportしません。 import Vue from &# Continue Reading

Posted On :