フロントエンド
GPT-4にバグ修正のコミットメッセージを分析させてみました
FigmaをVS Codeで閲覧できる「Figma for VS Code」について主な機能や使い方のポイント、copilotとの併用時の注意点等について動画や画像でご紹介。
この記事では、Next.js で、next-themes と Tailwind CSS を使ってダークモード対応する例を紹介しています。
この記事では、Radix Primitives と Tailwind CSS を使って、React コンポーネントを作成する方法を紹介しています。
この記事では、Class Variance Authority (CVA) というライブラリを使って、Tailwind CSS を使ったコンポーネントの className を管理する方法まとめています。
Reactのreact-dropzoneを活用したシンプルにファイルのドラッグ＆ドロップをサクッと使える実装機能サンプルです。ライブラリ選定やコード説明、実際に操作できるデモを交えてご紹介して行きます。
エンジニアの osumi です。最近は手挽きのコーヒーにハマっております。 前回から随分と時間が空いてしまったのですが、今回はReact Testing Library入門シリーズの第3弾として「Recoilを使ったテスト」についてご紹介できればと思います。 React Component…
この記事は Goodpatch Advent Calendar 9日目の記事です。アドベントカレンダー２つ目の記事をなんとか書くことができた大角です。 今回はインタラクティブなUIコンポーネントの状態変化において、一貫性を持ちながら、効率よく実装するために「Interaction …
この記事はGoodpatch Advent Calendar 2022 の5日目の記事です。 こんにちは！エンジニアの藤井（@touyou_dev）です。先日宣言型UIフレームワークを比較してみたという記事を出したばかりですが、今年も昨年のアドベントカレンダー同様、2日目と5日目の二日…
この記事はGoodpatch Advent Calendar 2022の2日目の記事です。 こんにちは！エンジニアの藤井（@touyou_dev）です。今年もアドベントカレンダーの季節がやってきましたね 今年は特に気温が極端かつ変則的で、季節感が迷子な一年でしたが、それに負けず劣ら…
ソフトウェアエンジニアの池澤です。 Node.js v19.0.0が2022/10/18にリリースされました。 v19にはwatchモードがexperimental（実験的）版として備わっています。watchモードというのは開発中のディレクトリ内のファイルに変更があったら、自動でNode.jsを再…
適切な数字入力とは? 2022/7/25 更新 ・ 論点を明確にするために、この記事で扱う郵便番号の仕様を、7桁の数字 => 3桁 + 4桁の数字 に変更しました。 Design Div 所属フロントエンドエンジニアの上垣です。 Webサービスを作成するにあたり、フォーム周りのユ…
先日、同僚と京都にワーケーションに行きまして、京都の良さを改めて感じている大角です。 goodpatch-tech.hatenablog.com 前回はReact Componentのテストについて書きましたが、今回はカスタムフックのテストについて書きたいと思います。 React Component…
最近、韓国ドラマと個人開発に勤しんでいる大角です。 Webサービスを提供する上でテストを自動化するケースも多いと思いますが、今回はReact Testing Libraryを使った基本的なテストの書き方についてご紹介したいと思います。これからReactでユニットテスト…
タグ入力UIについて、パターンをまとめ、それぞれのメリット・デメリットについての考察
この記事は Goodpatch Advent Calendar 2021 4日目の記事です。 フロントエンドの池澤です。 今日は12月最初の土曜日、早いもので後4週間程で新年となりますが皆様いかがお過ごしでしょうか。 さて、今回は普段よく見るテック系サイトと題して、ITニュースや…
Goodpatchでフロントエンドエンジニアをしている池澤です。 この記事はGoodpatchが提供しているオンラインホワイトボードStrap について、Chrome機能拡張でカスタマイズしたお話です。 Strap はその直感的に分かる操作性と学習コストなく馴染めるUXが特徴の…
