結論 未認証時にログインページに飛ばしたい時など、 redirectする際はreturnしないと後続処理に進んでしまうので注意しましょうという話。 Railsでも以下のようにreturnとredirect処理はセットだったので、よくよく考えればそう...(うっかりしがち) def sho…

結論 表題の通り、inputタグのdate属性にはmax="9999-12-31"を指定した方がメリットが大きいという話。 <label for="start">Start date:</label> <input type="date" id="start" name="trip-start" value="" max="9999-12-31" /> 嬉しいポイント 年に4桁以上入力させられなくなる max属性をつけると年を入力完了したら自動で月にタブ移動してくれるようになる

結論 文字列であればなんでもいい場合は、 expect.any(String) を使うのが便利。 test('〇〇の引数に文字列がセットされていること', () => { expect(mock).toHaveBeenCalledWith(expect.any(String)); });

概要 デバッグの時に使いたくなる実行オプションをちょこちょこ忘れるのでメモしておく。 実行オプションまとめ カバレッジOFFの場合 $ npm test -- fuga.spec.ts --coverage=false warningもOFFにしたい場合 $ npm test -- fuga.spec.ts --coverage=false -…

結論 縦型の名刺 or ショップカードを標準解像度の「350dpi」で作成する場合は、幅：841px x 高さ：1387px のフレームで作成すると良いです！ さらにフチから3mmに相当する41pxを空白にしておくことで印刷ズレがなくなります。 ハマった落とし穴 「Figma 名…

概要 Nuxt.jsでmiddlewareディレクトリ配下に authenticated.ts のようなファイルを配置してそれをテンプレートから呼び出す方法はサンプルが沢山あるものの、 インラインでmiddlewareを書くサンプルがないなと思い、書き方に若干迷ってしまったので未来の自…

Vue Fes Japan 2023 vuefes.jp 先日のVue Fes Japan 2023にてLT枠で登壇させて頂きました。 ボランティアスタッフもさせて頂けて、沢山の方とお友達になれて最高の経験が出来ました。 今回は5分のLT枠でしたが、次回は30分の枠で登壇出来るように頑張りたい…

背景 Options APIでAPIを叩いている箇所はそのままで、setup関数内のプロパティにそのAPIの戻り値をセットしたい状況がありました。 setupとOptions APIでデータをやり取り出来たはずだけど、どうすればよかったっけ？... と悩んでしまったので、本稿はその…

経緯 該当の関数を jest.mocked(useStore) のようにモックしているのに、戻り値をモックしようとすると mockreturnvalueonce is not a function のエラーが出てしまいました... 関数だけモックしてもモジュール全体をパス指定してモックしないとダメなことが…

結論 npmスクリプトの実行時にオプションを渡したい場合は、オプションの前に「--」とスペースを入れると動く！ うまくいかない例 $ npm run test --coverage=false うまくいく例 $ npm run test -- --coverage=false

結論 script setupを使ってコンポーネント名を定義することが出来ないので、もう一つscriptタグを書いてそこで export default する Sample.vue <script> export default { name: 'Sample', } </script> <script setup lang="ts"> ・・・ </script> <template> <div> ・・・ </div> </template>

結論 Date型として変換したいString型のプロパティに format: date-time を指定する deleted_at: type: string description: 削除日時 format: date-time # YYYY-MM-DDTHH:MM:SSZ example: '2022-12-27T09:37:26.000+09:00'

概要 定期的に一からファイルアップロード機能を実装するたびにref周りで凡ミスしている気がするので、Nuxt.js(Vue.js)でファイルアップロードを実装する時にアレコレを備忘録としてまとめます。 やること input タグに ref="fileInput" のような形でinputタ…

事象 解決法 子コンポーネントをcmd + opt + Gでグループ化すると表示された よくわからなかったこと コンポーネント化した親コンポーネント(♦️ダイヤのマークの要素)はフレームじゃなくても、プレビューに表示されていたのがよく分からなかった😇...

困っていること 親コンポーネントを「opt + shift + ドラッグ操作」で複製した際に子コンポーネントのタイトルが左にズレてしまった。 解決法 子コンポーネントのテキストのレイアウト設定が「中央寄せ」になっていたので、「左寄せ」に変更する 対応後

結論 スクロールが発生する要素に scroll-behavior: smooth; を付けるとスクロールが滑らかになるという話。 html, body { scroll-behavior: smooth; } developer.mozilla.org

概要 本稿ではアクセシビリティをチェックするaxe-linterで「Ensures buttons have discernible text svg button」というエラーが出た時の対処法をまとめます。 結論 <button>保存</button> のようにテキストのラベルをつけられないハンバーガーメニューのようなアイコンのみ…

結論 任意のラベルで新しい色の定義を追加したい場合は、tailwind.config.jsのextendsの中にcolorsの定義を追加しないと、指定した色以外の色が使えなくなってしまうので注意 ダメな例 theme直下に定義するとその色しか使えないことになってしまう... /** @t…

概要 現場でOpenAPIスキーマをいじっていて、ファイル内に出てくる ~1 って何の記法だ？ってなってしまったので、 ChatGPTに尋ねてみたところ、それっぽい回答が得られたのでそれをメモします。 ※以下は、例です。 /orders/settle: $ref: ./resources/orders…

結論 <textarea> タグに対して、 resize: none; を指定するとリサイズ可能な表示が出なくなります。 textarea { resize: none; } 参考 developer.mozilla.org</textarea>

結論 jest.useFakeTimers で止めて、 jest.useRealTimers() で戻します。 beforeEach(() => { jest.useFakeTimers({ now: new Date("2023/01/01") }); }); afterEach(() => { jest.useRealTimers(); }); jestjs.io jestjs.io

結論 branches: '**' の形式で指定すると全てのブランチのプッシュとプルリクエスト作成時にワークフローが実行されるようになります。 name: ci on: push: branches: - '**' # matches every branch pull_request: branches: - '**' # matches every branch…

結論 switch文の中で const { hoge, fuga } = event.payload.hogeFuga; のように分割代入をするとESLintで「Unexpected lexical declaration in case block」のエラーになるので、case 〇〇: { 処理 } という形式で書いてあげると怒られなくなります。 switc…

結論 git push origin ローカル:リモート の形式でpushすればOKです👌 $ git push --force-with-lease origin local-dev:remote-dev

結論 📝 shallowMount(mount) のプロパティの mocks の中に $nuxt -> context -> mockしたいコンテキスト の順番で定義すれば良い describe("Component", () => { let localVue: typeof Vue; let wrapper: ReturnType<typeof shallowMount<Vue>>; beforeEach(() => { localVue = createL</typeof>…

結論 プロジェクト直下に SVGファイルをテスト実行時にパースするファイル (svgTransform.js) を定義して、Jestでそれを読み込むようにする github.com 各パッケージのバージョン nuxt@2.15.8 vue@2.6.14 @vue/test-utils@1.3.3 @vue/vue2-jest@29.2.0 jest@…

結論 npm install -g npm する $ npm -v 8.11.0 $ npm install -g npm npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. removed 8 packages, changed 84 packages, and audited 231 packages in 1s 14 pack…

執筆背景 たまにimportした外部の関数と自前で実装したい関数名が被ってしまうものの、 その度に回避方法をド忘れしてググってしまうので、本稿はそのための備忘録です。 結論 as を使います。 import dayjs from "dayjs"; import { isHoliday as isJapanese…

概要 Nuxt.jsの2系でモーダルを実装する際にモーダルの開閉フラグをv-modelで管理する際のイベント発火させる動作がややこしかったので今回はそれをまとめます。 結論 inputイベントでなくても v-model を使う場合は、 親コンポーネントで指定した v-model="…

概要 ESLintとPrettierの必要なパッケージのインストールコマンドや設定のアレコレをプロジェクトを新規作成するたびにググっていて進歩がないので、本稿はその手順をメモするための記事です。 必要なもの ESLint eslint-config-prettier ESLintとPrettier…