JavaScript
どちらも動く場合などプロジェクトで若干適当に使ってしまった感があったので、確認した。 ??（Null合体演算子） 左側のオペランドが null または undefined の場合にのみ右側のオペランドを返します。 左側のオペランドが null や undefined 以外の値（たと…
jestでテストしたいときなど、firebaseには繋がず、ダミーデータが必要な場合、以下のようにtimestampデータを作成できた。 import firebase from "firebase/app"; import "firebase/firestore"; ... // 現在の日時から5分前のDateオブジェクトを作成 const …
tableのtrをクリックでイベントを実行するようにしていて、trの中のtdのspanをクリックで別のイベントを実行したかったが、trのクリックイベントも実行してしまう。 その場合、親要素のtrのイベント伝播を停止する処理についてメモ。 event.stopPropagation(…
BootStrapと、Clipboard.js を使ったサンプル ボタンをクリックしたら、「URL copied!」にツールチップの表示が変わる。 <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </meta></meta></head></html>
WEB開発のプロジェクトで、任意のポートでローカル環境で確認したい場合、プロジェクトのルートに移動し、以下を実行する。 例）localhost:3000で確認したい場合 npx http-server -p 3000 ※node.jsのインストールは事前に必要
ネストされたJSONオブジェクトの一部の値を書き換えたい場合、以下のような関数でできた。 第二引数のkeysに、objectの上から順に指定すればOK。 function updateJson(obj, keys, value) { let currentObj = obj; for (let i = 0; i < keys.length - 1; i++)…
もとのobjectは変更せずコピーして利用したい場合、JSON.parse(JSON.stringify())でうまくいった。 const obj = { a: 0 } const newObj = JSON.parse(JSON.stringify(obj)) newObj.a = 1; console.log(newObj) // {a: 1} console.log(obj) // {a: 0} ←もとの…
バッククォートで囲って複数行に渡って変数に代入できる。 テンプレートリテラル内にも変数入れられる。 const a = 1 const b = ` aは ${a} です ` console.log(b) なぜかいつも呼び方忘れるので、メモしておく。
Google chromeで、Tinderにログインして、スワイプで操作できる画面に遷移する command + option + iを押して、デベロッパーツールを開く consoleを選択し、以下のソースをコピペし、Enter setInterval(() => { const link = document.getElementsByClassNam…
settings.jsonに、以下を追記すればテストの自動実行が無効になる "jest.autoRun": "off",
拡張機能の、JavaScript and TypeScript Nightlyのバージョンがv5.0.20221116だと、うまくいかないらしいので、v5.0.20221115にダウングレードしたらなおった。 方法 設定 > 拡張機能から検索し、アンインストールの選択メニューから、別のバージョンをイン…
map, forEach, filter, find, reduceあたりを使って、配列操作をすることが多く、都度ググることが多いけど、個人的によく使うのをメモしていく。 filter 指定した値に一致するものを削除 const arr = ['a', 'b'] const deleteValue = 'a' const result = ar…
npmで、普通のfabric.jsを利用していた。 www.npmjs.com その場合、ピンチイン・ピンチアウトで、選択したオブジェクトの拡大・縮小ができなかった。 fabric-with-gesturesをインストールすれば、使えた。 www.npmjs.com TypeScriptの場合、npm install --sa…
デフォルトだと４つの角に加えて、回転用の突出したやつと、４辺の真ん中にハンドルがあり、大きさを変えたり回転したりできる。 オブジェクトとして配置したものが写真だったりした場合は縦横比変えたくない。 その場合、setControlVisibleを操作すれば、意…
以下のように単純な四角形を設置した場合、canvas要素にインラインスタイル（width: 300px; height: 150px;）が適用される。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> </html>
さくらサーバーのスタンダードプラン（https://rs.sakura.ad.jp/standard.html）で、opencv.jsを使おうとしたら、以下のエラーが出た。 opencv.js:20 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect r…
Webサイトに埋め込んだGoogleMapをデフォルトのデザインじゃなくて、そのサイト用にカスタマイズしたい場合がある。 Google Maps APIを使ってできるけど、オプションやらたくさんあって出来ることが多い。 developers.google.com 今回は、以下の簡単なカスタ…
FireStoreのTimestampはそのままだと、以下のような形式で取得できる。 Timestamp(seconds=1634252400, nanoseconds=0) Date型に変換するには、以下の2通りが考えられる。 ※timestampという変数に取得したTimestampが入っている想定 toDate()を使う console.…
以下の証明書エラーで、tesseract.jsの言語ファイルが読み込めなかった。 Uncaught (in promise) FetchError: request to https://tessdata.projectnaptha.com/4.0.0/{言語コード}.traineddata.gz failed, reason:certificate has expired tesseract.jsを使…
getElementsByNameを使うと、name属性から要素を指定出来る。 document.getElementsByName('input-name')とすると、ページ内の全てのinput-nameというname属性を持つ要素全て取得できる。 例えばformが複数ある中で、特定のformのinput-nameというname属性を…
webアプリでREST API操作する場合、大体のプロジェクトでaxiosがインストールされていて、webサイト制作だとjQueryがインストールされていて、$.ajax〜で書いていた。 Pure JS（フレームワークなし）での書き方はいつもググっていたので、メモしておく。 var…
最近、ちょっとしたGoogle Chromeのアドオンを作成・公開してみたので、その手順をメモしておく。 1.作成 manifest.jsonを作成する。 content_scriptsに、使用するcss/jsを指定する。 matchesは、特定のURLで動作させたい場合に指定する。 iconsは、16,48,12…
cssのfont-sizeの指定の仕方で、vwがある。 100vwで今の画面の横幅いっぱいのサイズを指定できて、10文字で横幅いっぱいにしたければ、font-size: 10vwを指定すれば大丈夫。 ただこれだと、「画面幅」に対して計算されるので、divの中のdivとか、「レイアウ…
JavaScriptのobjectは、順番は保障されないとのこと。 teratail.com なので、配列に変換してsortしたので、メモ。 // 並べ替えたいオブジェクト const obj = { "a": 0, "b": 3, "c": 1, "d": 2, }; const arr = []; const keys = Object.keys(obj); const va…
開発時に入れたものの、結局使わなかったpackageは、なるべく削除したい。 depcheckというコマンドで、不要なパッケージを調べてくれる。 www.npmjs.com インストールして実行の場合 インストール npm install depcheck -g 実行 depcheck インストールせずに…
フロントエンドで、文字列の中からURLの部分を検知して、自動的にaタグのリンクを生成する方法をメモ。 こちらの記事の内容で出来た。 ginpei.hatenablog.com サンプル テキストエリアに、URLを含んだ文字列を入力して送信すると、aタグに変換されたhtmlがdi…
canvasタグをJavaScriptで制御して、グラフを描画することがあるので、メモ フォームに何パーセントかを入力し、送信したらcanvasタグでそのパーセンテージを描画するサンプル <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvasで円グラフ…</meta></meta></meta></head></html>
1.AWSコンソール上で、CORSの設定をする。 以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-exa…
1.AWSコンソール上で、CORSの設定をする。 以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-exa…
vue-intersectがシンプルで便利だったので、使い方をメモ。 こちらを参考にインストール github.com NPM npm install vue-intersect --save Yarn yarn add vue-intersect 使い方 使いたいVueファイルに、importして、@enter=で表示した時に実行したいmethods…
