FigmaオフィシャルのDev Mode MCP ServerとClaude Sonnet 4を組み合わせた革新的なデザイン-to-コード自動生成ワークフロー。オープンベータ版として提供開始された安全なSSE接続による高精度なHTMLマークアップ自動生成を実現。フロントエンドエンジニアの作業効率を劇的に向上させる最新手法を詳しく解説。
投稿数 94 件(1 ~ 10件目)

フロントエンドの開発現場では、人手不足の中で単純なHTMLマークアップ作業を自動化し、人間はより創造的な作業に集中した いというニーズが高まっています。近年の生成AI(Generative AI)の進化により、コーディングの反復的な部分を自動化し、開発者がクリエイティブな作業に専念できる環境が整いつつあります。本記事では、デザインからのマークアップ生成にAIを活用する試行錯誤の過程を振り返り、最終的に導入したLocofy.AIに焦点を当てて、その導入効果と課題について紹介します。

Vue2のNuxtからReactベースのNext.jsへリプレイスした実体験をもとに、技術的負債の解消や機能一覧の洗い出し、テストコードの導入などを通じてフロントエンド開発を成功に導く施策を詳しく解説します。

次のプロジェクトでHTTPSを簡単に有効化しませんか?Next.jsでの設定方法や、独自ドメイン用の証明書作成手順をわかりやすく紹介します。安全な開発環境を手に入れたい方必見!

VSCodeでchezmoiのシェルテンプレートファイルを編集する際に、拡張子が`.sh.tmpl`のファイルを`shellscript`に関連付ける方法を紹介します。

ウェブサイトだけでなく、iPhone内のアプリに勝手に表示される広告はうるさいですよね。AdGuard Homeを使用すれば簡単に解決できます。Raspberry Piにインストールして、家のルーターのデフォルトDNSサーバーをAdGuard Homeに設定するのが1つの方法ですが、外出先では広告のブロックが効かなくなります。外でも広告のない生活を送りたいので、VPSにAdGuard Homeをインストールして設定してみました。

ライブラリをパブリッシュする際に、CommonJS(cjs)とECMAScript Module(esm)を両方サポートするように設定するのが一般的です。サイズの小さい、tree-shakingしやすいesmを優先するのが今のトレンドでしょう。以前は理解が曖昧でしたが、最近になってようやくコツをつかみましたので、その設定方法を共有したいと思います。

SPAの認可なら、リフレッシュトークンを使いましょう。その上に、セキュリティのリスクを軽減するために、リフレッシュトークンのローテーションを有効にしましょう。その理由を説明します。

Auth0をカスタマイズしたら、設定がうまくできるかどうか自動テストで確認したいでしょう。ログイン関連がデグレしたらインパクトがデカいからです。MFA(Multi-factor Authentication:多要素認証)のワンタイムパスワード(OTP)を有効にしたら、E2Eテストのハードルがぐんと上がるイメージがありますが、実はそんなに難しいことではありません。今回はPlaywrightでMFA(OTP)有効のログインテストの方法を紹介したいと思います。

Valibotが最近Builder.io(Qwik)の紹介で話題に上がっているスキーマベースのバリデーションライブラリとなります。一番注目されているのはバンドルサイズの部分だと思います。Zodと比較すると、98%のバンドルサイズの削減ができると言われています。さらに、モジュール化されていて、非常にtree-shakingしやすく、確かにバンドルサイズが大幅に減少できるでしょう。早速使ってみた感想をシェアしようと思います。