カクカクしかじか

技術的なアレコレ

2022-01-01から1年間の記事一覧

JavaScriptで数値のフォーマットを「¥10,000」の金額表記に変換したい時のメモ

概要 毎回JSで数値を金額表記へフォーマットするやり方を忘れてググっているので、今回は忘れないためにここにメモ やり方 developer.mozilla.org const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); formatter.fo…

JavaScriptで指定したkey名にリネームした形でオブジェクトから値を取り出す方法

状況 user というオブジェクトをAPIの結果から取得したいが、後続処理でその変数名を使いたいので、user という値を tmpUser というような別の名前でAPIの結果から取り出したい 結論 const { 本来のオブジェクト名: 変更後のオブジェクト名 } = object; の形…

型定義されたnpmパッケージをインストールしてもエディタ上で型定義ファイルが読み込まれない場合の解決法と残った謎

起こったこと qrcode というnpmパッケージを型定義パッケージと一緒にインストール。 $ npm install --save @types/qrcode $ npm install --save qrcode しかし、VSCode上では import { toDataURL } from "qrcode"; の 部分のモジュールが見つからないという…

Nuxt.js 2系 (Composition API)でPropsの型に 文字列リテラル型を使いたい時のメモ

概要 Propsにプリミティブな型以外を指定したい時の方法を定期的に忘れるので今回はその備忘録です... 結論 📝 PropType型 を '@nuxtjs/composition-api' からimportして PropType<指定したい型> で定義する <script lang="ts"> import { defineComponent, PropType } from '@nux…

よく使うHTMLタグ毎の用法要領まとめ

これ何? HTML要素をセマンティックに書く際に、よく使うタグのMDNを毎回バラバラに見るのが億劫なので、それらの情報をまとめるための個人用メモです📝 developer.mozilla.org mainタグ developer.mozilla.org HTMLの <main> 要素は、文書の の主要な内容を表します</main>…

画像を一度アップロードした後はアップローダーを非表示にするUIで更新時も新規同様にファイル選択出来るようにするマークアップ方法

結論 HTMLの <label> タグとfor属性及びid属性を使います。 (初歩的な内容ですが題名の通り実装するやり方が思い付かずハマりました) 画像アップロード後に変更リンクだけ表示される場面 ※ サンプルは Vue.js ファイル選択のinput要素は画像アップロード後もDOMに</label>…

テキストエリアの可変域をCSSで制限する方法

悪い例 📝 幅をwidth の指定で無理矢理固定して、横幅は可変出来ないようにする <body> <textarea placeholder="hoge"></textarea> </body> textarea { min-width: 288px; max-width: 288px; } 良い例 📝 textarea に対して resize: vertical; を指定して縦方向のみサイズ変更出来るようにスタイルを当てる。 <body> <textarea placeholder="hoge"></textarea> </body> textar…

JavaScriptのスプレッド構文で同名プロパティは上書きされる件

概要 スプレッド構文では、同名プロパティが存在するオブジェクト内では後に書いた方でプロパティが上書きされることを知らなかったのでそれのメモ😇 実例 > const hoge = { a: 1, b: 2, c: 3 } > const fuga = { ...hoge, c: 4 } > fuga { a: 1, b: 2, c: 4 }