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 :

Vue+Firebaseで作ったフロントエンドアプリのバンドルサイズを削減する

Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build(cross-env NODE_ENV=production webpack –hide-modules)で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ(244 KB)を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi Continue Reading

Posted On :

Chrome拡張+FirebaseでGoogle認証するいくつかの方法

Chrome拡張アプリを作っていて、ユーザのデータをユーザアカウント(email)単位にCloud FireStoreに保存したいと思っています。ユーザがアクセスできる情報をセキュリティルールを設定して制限したいので、Firebase AuthenticationでGoogle認証を行うことにしました。紆余曲折あり、いくつかの方法を試したので記録しておきます。 なお、単にGoogle認証したいだけなら google-api-javascript-client を使うのが一般的かもしれません。 【不採用】Firebase Authentication in ポップアップページ 公式ページで紹介されている方法を試してみました。参考にしたのは以下の二つのページです。 Chrome 拡張機能での Firebase 認証 Firebase を JavaScript プロジェクトに追加する Fireb Continue Reading

Posted On :
Category:

Vue.js+TypeScriptでフロントエンドアプリを構築時のTips

現在プライベートで作っているWEBサービスのフロントエンドを作るにあたって、Vue.js+TypeScriptを試してみることにした。 基本的には公式サイトを参照させていただいた。 作るもの メモを編集する画面を作成する。 初期表示 メモ表示欄とEDITボタンが表示されている メモ表示欄にはメモ取得APIで取得したメモの内容を表示する APIで取得する内容はこんな感じ。{ id: 123, body: "これはサンプルです"} EDITボタンクリック 表示欄+EDITボタンを非表示にし、編集欄(textarea)+SAVEボタンを表示する SAVEボタンクリック 編集欄+SAVEボタンを非表示にし、表示欄+EDITボタンを表示する メモ保存APIでメモを保存する プロジェクト作成 npmのインストール 以前記事を書いたのでこちらを参照のこと。 node.jsおよびnpm Continue Reading

Posted On :