Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドで自動テスト始めました 僕は自動テストのないPJで苦しんだ経験から、自分が担当するPJではテストを必ず書くようにしました。 というのも最近の数ヶ月ことなので、テストを書く上で気をつけていることをざっとメモっていこうと思います。 環境 フレームワーク React 18系 NextJS 14系 テストライブラリ JEST 29系 TestingLibrary 16系 静的解析 TypeScript 5系 ESLint 8系 どうしてテストがないときついか? そもそもテストを書くモチベがないとテスト書かないですよね...? 僕が

はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること

はじめに 以前、自分が書いたVueのコードで奇妙な現象を目の当たりにしました。 ブラウザバックを高速連打すると、連打した分だけデータが追加されるような現象です。 個人的に結構衝撃的で、vueの特性やテストの方法が甘かったと痛感する出来事だったので記事としてまとめようと思います。 問題となった事象 実際のコードは載せられないので、それっぽい事象が起こるサンプルを用意しました。 検索画面を想定しており one→two→three の順番で検索し、 通信環境の良くない状態で、ブラウザバックを連打すると連打した回数分データがアイテムリストに追加されます😰 検索用コンポーネント <template> <div class="about"> <h1>This is an about page</h1> <div> <div> <input type="text" v-model="searchQue

初めに Github Copilot や Amazon Codewhisperer 自動でコード生成するAIとしてどちらを使った方がより快適な コーディングライフが送れるのでしょうか？ 簡単なTaskのCRUDを作成する中で どちらが良くて、どう使えば効率的にコーディングできるのかを探ってみます。 導入方法 AIの導入方法は以下の記事をご参照ください。 詳細が丁寧に説明されていました m(__)m Github Copilot 【GitHub Copilot】登録方法の解説と試してみた Amazon Codewhisperer 無料で始めるAmazon CodeWhisperer on VSCode（Github Copilotと同等の性能？） 試した環境 Ruby 3.1.0 Rails 7.0.4 Visual Studio Code 1.7.7 結論 Github Copilot を