概要 毎回JSで数値を金額表記へフォーマットするやり方を忘れてググっているので、今回は忘れないためにここにメモ やり方 developer.mozilla.org const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); formatter.fo…
状況 user というオブジェクトをAPIの結果から取得したいが、後続処理でその変数名を使いたいので、user という値を tmpUser というような別の名前でAPIの結果から取り出したい 結論 const { 本来のオブジェクト名: 変更後のオブジェクト名 } = object; の形…
起こったこと qrcode というnpmパッケージを型定義パッケージと一緒にインストール。 $ npm install --save @types/qrcode $ npm install --save qrcode しかし、VSCode上では import { toDataURL } from "qrcode"; の 部分のモジュールが見つからないという…
概要 Propsにプリミティブな型以外を指定したい時の方法を定期的に忘れるので今回はその備忘録です... 結論 📝 PropType型 を '@nuxtjs/composition-api' からimportして PropType<指定したい型> で定義する <script lang="ts"> import { defineComponent, PropType } from '@nux…
これ何？ HTML要素をセマンティックに書く際に、よく使うタグのMDNを毎回バラバラに見るのが億劫なので、それらの情報をまとめるための個人用メモです📝 developer.mozilla.org mainタグ developer.mozilla.org HTMLの <main> 要素は、文書の の主要な内容を表します</main>…
結論 HTMLの <label> タグとfor属性及びid属性を使います。 (初歩的な内容ですが題名の通り実装するやり方が思い付かずハマりました) 画像アップロード後に変更リンクだけ表示される場面 ※ サンプルは Vue.js ファイル選択のinput要素は画像アップロード後もDOMに</label>…
悪い例 📝 幅をwidth の指定で無理矢理固定して、横幅は可変出来ないようにする <body> <textarea placeholder="hoge"></textarea> </body> textarea { min-width: 288px; max-width: 288px; } 良い例 📝 textarea に対して resize: vertical; を指定して縦方向のみサイズ変更出来るようにスタイルを当てる。 <body> <textarea placeholder="hoge"></textarea> </body> textar…
概要 スプレッド構文では、同名プロパティが存在するオブジェクト内では後に書いた方でプロパティが上書きされることを知らなかったのでそれのメモ😇 実例 > const hoge = { a: 1, b: 2, c: 3 } > const fuga = { ...hoge, c: 4 } > fuga { a: 1, b: 2, c: 4 }
概要 Next.jsで環境変数にアクセスする際にそれ自体に命名規則があるっぽいので、今回はその備忘録です。 クライアントサイドで利用したい場合の命名 NEXT_PUBLIC_ から始まる環境変数はクライアントサイドで利用することが出来ます。 例 NEXT_PUBLIC_FUGA_U…
概要 複数のメールテンプレート内で読み込まれる部分テンプレート(partial)の内部に、一部のテンプレートから呼ばれる時だけ locals: { requested_date: @requested_date } のように渡されるローカル変数を定義すると、別の箇所ではその値を渡さないで呼び出…
概要 こちらのツイートを見て参考になったので自分用にメモを残します📝 https://twitter.com/pulpxstyle/status/1400614083729051653 HTML <h2> <span>レスポンシブでも</span> <span>見出しの改行位置を</span> <span>調整して表示できます</span> </h2> h2 span { display: inline-block; }
概要 Google翻訳でファイルをアップロード出来るのでそれでOK👌 ちなみに翻訳結果はこんな感じになりました👀 普通に読むのに困らなそうですね。
概要 Nuxt.jsで新規作成したアプリ( nuxt@2.15.4 )で Composition API を利用しようとして、 nuxt.config.js に以下のようにプラグインとして追加したところ以下のエラーが... buildModules: [ '@nuxtjs/composition-api' ], ✖ Nuxt Fatal Error │ │ │ │ Err…
はじめに 何か作る時のマークアップで迷いがないように画面全体でローディング表示するときのサンプルを自分用にメモしておきます。 サンプルコード <template> <div class="fixed top-0 left-0 z-50 w-screen h-screen flex items-center justify-center" style="background: rgba(0, 0, 0, 0.3);"> <div class="bg-white border py-6 px-12 rounded-lg flex items-center flex-col"> </div></div></template>
前提 Nuxt.js / 2.15.2 TypeScript / 4.2.3 > npm list vue nuxt-sample-app@1.0.0 /Users/fuqda/nuxt-sample-app ├─┬ @nuxtjs/composition-api@0.22.3 │ ├─┬ @nuxt/vue-app@2.15.2 │ │ ├── vue@2.6.12 deduped │ │ └─┬ vuex@3.6.2 │ │ └── vue@2.6.12 dedup…
概要 塩漬けになっていた古いVue.jsのプロジェクトをいじろうと思い、ローカルにcloneした時のこと... あれ？ npm run start を打ってもターミナルが一向に反応しないぞ？... 他のプロジェクトで同じようにコマンドを打つとすぐローカルサーバーが立ち上がっ…
背景 Jestでテストコードを書いていた際にconsole.logで値をプリントデバッグしていたのですが、正直しんどい... 何か他にいい方法あるやろ！と思ってVue.jsのテストの洋書を読んでいたら、JestでChromeデバッガーを利用したデバッグの方法が書かれていたの…
概要 JSON Serverはバックエンドの処理をモックして、フロントエンド側の処理を優先して行う時に便利じゃん！という話。 github.com 出典 ※この記事は Full Stack open 2020 Part2-c Getting data from server を参考に書かれています 使い方 # とりあえず…
概要 あとで自分で見返せるように現在公開されている範囲でソフトウェアテスト自動化カンファレンス2020のスライドをまとめておきます。 なおソフトウェアテスト自動化カンファレンス2020のイベントページはこちらです。 testautomationresearch.connpass.co…
経緯 現在関わっているサービスでユーザーから「商品のキーワード検索で想定以上の件数がヒットしてしまうので調べて欲しい」という問い合わせがありました。 問い合わせがあった箇所の検索にはElasticsearchを使っていたので、ユーザーからヒアリングした検…
概要 【オンライン開催】hey × Da Vinci Studio 〜プロダクトの成長を支えている裏側（技術と組織）〜 というイベントでLTをしました。 hey.connpass.com 経緯アレコレ 当初登壇予定だった社内メンバーの登壇が難しくなり、１ヶ月ほど前に急遽代打を頼まれて…
概要 HTML5の標準バリデーションのON / OFFをVue.jsのバインドで操作する方法が、明示的に記載されてる記事がネット上に見つからなかったのでここにメモしておきます developer.mozilla.org やりたいこと 住所1(市区町村) と 住所2(番地・建物名) それぞれの…
はじめに Vue.jsの勉強をしている時にJavaScriptで利用出来るイベントってclickイベントとかベタなやつしか知らないけど他に何があるんだろう？となったので自分用メモとしてまとめます フォーム編 focus 要素にフォーカスが入った時 blur 要素のフォーカス…
概要 自分用メモです📝 方法 Settings の Add External Scripts/Pens に Vue と入力します。 コードを貼ってみます。 <div id="app"> <label>名前： <input type="text" v-model="name" /> </label> <p>入力された値：{{upperName}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
概要 ActiveHashでもscopeが使えるの知らんかった... そういう話です🙈 例 class Band < ActiveHash::Base self.data = [ { name: 'Nirvana', category:'Grunge' }, { name: 'Dinosaur Jr.', category:'Grunge' }, { name: 'Sonic Youth', category:'Grunge' }…
教訓 掲題の通り、1つの郵便番号に異なる住所が複数紐づいていることを知らずに実装してしまうというやらかしを発生させてしまったので自戒を込めてここにメモします📝 例) 郵便番号：0040000 2つ紐づいてる🙈 ... 北海道 札幌市厚別区 北海道 札幌市清田区 参考…
経緯 とある修正の影響範囲調査で色々やっていたときの備忘録です。 やり方 たとえばこんな感じ♀️ Method#source_location を使います Faker::Name.method(:name).source_location => ["/Users/fuqda/HogeApp/vendor/bundle/ruby/2.6.5/gems/faker-2.13.0/l…
経緯 Dockerをいじっていた際に必要になったけど、度忘れしてしまったので次は忘れないようにメモ ポート番号から使用しているプログラムを表示するコマンド lsof -i:ポート番号 を実行します $ lsof -i:3000 使用中のポート一覧を表示するコマンド 一覧を…
元記事 techracho.bpsinc.jp 所感 今までは同じく ActiveSupport::Testing::TimeHelpers の travel_to などを使用していました😇 もっと早く知りたかった... 使っていこう💪 before { freeze_time }
掲題のやりたいことを実現するスクリプト ※descendantsメソッドはActiveSupportのメソッド descendantsメソッドは、そのレシーバより下位にあるすべてのクラスを返します。 Active Support コア拡張機能 - Railsガイド # Load Dir.glob('app/mailers/**/*.rb…
