フロントエンド
結論 未認証時にログインページに飛ばしたい時など、 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属性をつけると年を入力完了したら自動で月にタブ移動してくれるようになる
概要 Nuxt.jsでmiddlewareディレクトリ配下に authenticated.ts のようなファイルを配置してそれをテンプレートから呼び出す方法はサンプルが沢山あるものの、 インラインでmiddlewareを書くサンプルがないなと思い、書き方に若干迷ってしまったので未来の自…
背景 Options APIでAPIを叩いている箇所はそのままで、setup関数内のプロパティにそのAPIの戻り値をセットしたい状況がありました。 setupとOptions APIでデータをやり取り出来たはずだけど、どうすればよかったっけ？... と悩んでしまったので、本稿はその…
結論 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タ…
結論 スクロールが発生する要素に 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…
結論 <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
結論 switch文の中で const { hoge, fuga } = event.payload.hogeFuga; のように分割代入をするとESLintで「Unexpected lexical declaration in case block」のエラーになるので、case 〇〇: { 処理 } という形式で書いてあげると怒られなくなります。 switc…
結論 📝 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…
概要 毎回JSで数値を金額表記へフォーマットするやり方を忘れてググっているので、今回は忘れないためにここにメモ やり方 developer.mozilla.org const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); formatter.fo…
状況 user というオブジェクトをAPIの結果から取得したいが、後続処理でその変数名を使いたいので、user という値を tmpUser というような別の名前でAPIの結果から取り出したい 結論 const { 本来のオブジェクト名: 変更後のオブジェクト名 } = object; の形…
概要 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…
概要 Next.jsで環境変数にアクセスする際にそれ自体に命名規則があるっぽいので、今回はその備忘録です。 クライアントサイドで利用したい場合の命名 NEXT_PUBLIC_ から始まる環境変数はクライアントサイドで利用することが出来ます。 例 NEXT_PUBLIC_FUGA_U…
概要 こちらのツイートを見て参考になったので自分用にメモを残します📝 https://twitter.com/pulpxstyle/status/1400614083729051653 HTML <h2> <span>レスポンシブでも</span> <span>見出しの改行位置を</span> <span>調整して表示できます</span> </h2> h2 span { display: inline-block; }
概要 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>
