Next.jsを14系から15系に、Reactを18系から19系にアップグレードする作業をしていて感じたのが「計画的に進めないと、見通しがつけられなくてしんどいな」ということ。最初は計画もなく一気に進めようとしていましたが、状況が把握しきれなくなり、情報を整理してから別ブランチでやり直すことになりました。原因としては、色々なことを試しているうちに、何をしたからうまくいって、逆になぜうまくいかないかが把握できなくなったこと。そして、レビューに出す前の最終確認がとてもやりにくいと感じましたし、整理されていない状態だとレビュアーの負荷がかなり上がってしまいます。フレームワークのアップグ...

モチベーションAstro で Markdown に書いた  形式のローカル画像は、自動で webp に変換される。しかし私は特定のパスにある記事だけ画像に quality を指定した上で picture タグにしたかったので、今までは下記の記事を参考に、img タグを探して自力で picture タグへ変換する rehype プラグインを作成・使用していた。https://zenn.dev/pompompudding/articles/1a8d8d54fe7823しかし MDX の使用を前提とすれば、すべての img を Astro の P...

はじめに仕事の中で小さなCLIツールを作る機会がありました。スピナーや対話型UIが欲しくなり、使えそうなライブラリを探そうと思ったものの、小さなツールなのでそこまで機能性が高いものは必要なさそうでした。AIに頼ればライブラリに依存しすぎることなく、小さくシンプルに作れるのではと思い試してみました。ライブラリへの依存を減らすことで、サプライチェーン攻撃のリスクを抑えたり、ライブラリの非推奨化や破壊的アップデートの影響を抑えることで、メンテナンスの手間を抑えたいというモチベーションです。 作ったもの実験台として PokéAPI にCLIでアクセスするツールを作ってみました。h...

はじめにGitHub Actions を使っている方は多いと思います。新しいワークフローを作るとき、GitHubにpushして動作確認しなければいけなくて、手間が多いですよね。そこで、 nektos/act を使うと、自分のマシン上でワークフローを実行できます。公式サイトによれば、Fast Feedback: コミットやプッシュなしで動作確認ができるため、開発効率を向上させる。タスクランナーとして利用: make やシェルスクリプトのようなタスクランナーの代替として使うことも可能。というわけ。▶ GitHub: https://github.com/nektos...

はじめにNext.jsでStorybookを使用し、satisfiesを利用してmetaの型定義を行った際に、以下のエラーが発生しました。Expression produces a union type that is too complex to represent.このエラーが発生した状況と、その解決方法について解説します。 エラーが出た時の状況Next.jsのpage.tsxが106個を超えたあたりからエラーが発生。106個という数に特に意味はないと思われる。ページを追加するとエラーが発生する。ページを削除するとエラーが起きない。satisfiesを...

はじめにWebアプリケーションにおいて、ユーザーが重要な操作（データ削除など）を行う前に確認を取るケースがあります。この確認フローをモーダル等を使って実装すると、モーダルの開閉状態をstateで管理する必要があったりと実装が複雑になりがちです。今回は、react-callを活用することで、確認モーダルの実装を簡潔に行う方法を紹介します。 react-callとはreact-callは、Reactコンポーネントを手続き的に処理できるようにするライブラリです。react-callに関してはこちらの記事が参考になります。https://zenn.dev/ykicchan/ar...

Intro弊社で開発しているサービスの、ドメインを変更することになったときの話。すでに旧ドメインで一部顧客に利用していただいていたため、旧ドメインは破棄せずに新ドメインにリダイレクトさせるようにしました。DNSの設定やコードをいくらか修正し、リリースをしました。Webアプリを触って画像が表示されたりデータが取得更新できたりと、通常通り使えることを確認して一安心していました。 問題発生すでに使っていただいていた社外ユーザーから「画像が表示されない」と連絡がありました。スクリーンショットを見るとたしかに画像が切れてALTテキストが表示されていました。しかし同じ画面を自分のP...

はじめにこんにちは！普段はQAエンジニアとして働いているRaBitです。今回は、Roo Code、GPT-4o mini、そしてRaycastを組み合わせて、日英翻訳ツールを作った話をシェアしたいと思います。💻✨ 翻訳ツールを作るきっかけエンジニア業務だけでなく、オンラインの友人とのやり取りなどでも日本語と英語を行き来する機会が増え、ブラウザやアプリを開いてDeepLやGoogle翻訳にアクセスしてコピペする手間が地味にストレスになっていました。もっとシームレスに翻訳できないかな〜🤔と思いRoo Codeの力で自分好みの翻訳ツールを作ることにしました！ 使用技術の紹介...

はじめにnpx create-next-app@latestなどの直後にすべきおすすめの設定を紹介します。もちろん途中から導入もOKですので、気になる項目があったら試してみてください。 pnpmでscriptsを統一するpnpm とは、JavaScript パッケージマネージャです。パッケージのインストールが高速な事や、便利な機能が多数あります。その中でおすすめの機能が、Running multiple scriptsです。以下のpackage.jsonの場合pnpm lintを実行する事で、lint:から始まるscriptが実行されます。package.json{...

こんにちわ、hanetsuki です。この記事は、htmlファイルに<script />を用いてにcdnやその他ライブラリを読み込んだ際にエラーになってしまうケースがあったので、その時の解決忘備録です。npm経由ではなく、CDNで読み込まなければならない制約があるケース...ありますよね（？） やっぱりTypeScriptで書きたい私は、TypeScriptが好きなので限りなく利用したいと考えています。しかし何も対させずにVueを扱おうとするとエラーで怒られます。index.html<script src="https://unpkg.com/vue@...

はじめにこんにちは！フロントエンドエンジニアのかこなーるです！フロントエンド開発の進化とともに、ウェブサイトやアプリケーションのパフォーマンスと効率性に関する課題も増えています。特に、クライアント側のJavaScriptの負荷が増えることで、ページの表示速度が低下し、ユーザーの体験への悪影響や離脱率の増加を及ぼすことが懸念されています。Astroは、こうした課題に対応するために、静的サイト生成（SSG）をベースとした軽量なフレームワークとして人気を集めてきました。そして、最新のバージョン5.0では、新たにServer Islandsという機能が導入され、さらに高度なサーバーサイ...

まえがきかつて静的サイトジェネレータの Hugo で Tailwind CSS を使おうとするとうまくいかないことがありました。たとえば hugo server で起動中、新しいクラスを付けてホットリロードしたのに見た目が反映されない……ということが、Hugo だと容易に起こります。また、それを解決するための設定は一筋縄ではいきませんでした。しかし最近改めて調べてみたら、去年 Tailwind CSS のためだけに新機能が実装されていました。現在はそう複雑ではない設定で Tailwind CSS を快適に使うことができますので、今後 Hugo を使う方にご紹介したいと思いま...

はじめに 🚩よくある i18n ライブラリでは翻訳辞書を用意し、翻訳キーを元に翻訳対応を行いますが、Lingui では、コードベース内で実際の文言を直接記述し、それを翻訳対象として抽出できます。つまり、先に翻訳辞書を用意するか、先にコードベース内で文言を記述するかといった違いがあります。後者のこの特徴により、翻訳キーの管理が不要になるといったメリットがあります。さらに翻訳作業を効率化、自動化できる機能も提供されており、翻訳作業のコストを削減できると感じます。この記事では、このような特徴を持つ JavaScript 向けの国際化（i18n）ライブラリ Lingui を使用して...

はじめに初心者はgitでデタッチ状態を避けろと言われます。実際にデタッチ状態について調べてみると、避けるべきものとして書かれていることが圧倒的に多い気がします。そこでふと、逆に活用することはあるのかと疑問に思ったのが今回の記事のテーマです。概要をおさらいした上で、活用パターンについてはChatGPTに挙げてもらい、避けるべきと思われがちなデタッチ状態を、逆に活用する例を解説します。 デタッチ状態についてのおさらいデタッチ状態とはブランチがない状態のことです。…と記事に書かれているのを見かけますが、正確にはブランチ以外にHEAD（現在地）がある状態のことです。英語では...

Riveってなに？Riveはリアルタイムでインタラクティブなアニメーションを作成できるツールReactやFlutterといったフレームワーク向けライブラリを提供作成したアニメーションを簡単にアプリへ統合できる！https://rive.app/ Riveが使われているプロダクト ◆ Duolingoキャラクターの動きやリップシンク（音声に連動した口の動き）をリアルタイムで制御し、学習体験を豊かにしています！https://blog.duolingo.com/world-character-visemes/ ◆ NotionAIアシスタントの細かな表...

EAS HostingとはEAS Hostingとは、React Nativeの開発プラットフォームであるExpo(Expo Application Service)の提供するWebホスティングサービスです。これまでもReact NativeとExpoを使って、iOSアプリ・Androidアプリ・Webアプリを同時に開発することができましたが、Webアプリだけは公開までExpoで完結することができず、他のサービスに依存する必要がありました。2025年1月15日にEAS HostingがPublic Previewとしてリリースされたので、早速みていきます。https://ex...

先日のReact Router7のリリースに伴うRemix → RRの乗り換え作業をしていて、フラッシュメッセージ部分をリファクタリングも含めて再実装しました。https://remix.run/blog/react-router-v7実装を調べている中で、RRがクライアントの機能のみを提供していた時代のHistory APIのstateを使った方法が多かったため、今回おこなった実装を記事にします。この記事では主にフルスタックRRなプロジェクトに、アプリケーション全体でフラッシュメッセージを表示させる実装について紹介します。フラッシュメッセージとはこういうものです。 RR7...

きっかけ個人開発のプロジェクトでStorybookのVRTをやりたくなったので、Chromaticを導入しました。https://www.chromatic.com/手軽に導入でき、テストも安定していて満足していたのですが、無料枠がちょっと心許ない感じでした。5,000 free snapshots per monthhttps://www.chromatic.com/pricing有料プランは最安でも $149/ month と、個人で利用するには負担が大きい価格だったため、「それなら作っちゃおう！」と思ったのがきっかけです。 目指すものPR作成時 or PR...

概要astro-typed-links は先月 v1.0.0 がリリースされたばかりの比較的新しい Astro Integration で、型安全にリンクを書けるようになる。Astro の公式ブログ で紹介されていたので使ってみた。 環境astro: 5.1.2astro-typed-links は Astro v5 で追加されたばかりの astro:routes:resolved というフックを用いているため、Astro v5 が必須astro-typed-links: 1.1.1 使ってみたインストールについては README に従って pnpm a...

はじめに営業日計算は、納期管理やスケジュール調整で頻繁に必要になる機能です。ただ、土日や祝日を正確に考慮しようとすると、ちょっと面倒くさいところもあります。この記事では、Rubyでholidaysという便利なGemを活用し、土日や祝日を考慮した営業日計算を簡単に実現する方法をご紹介します。 holidaysとは？holidaysは、世界中の祝日データを扱うことができるライブラリです。国や地域ごとに定義された祝日データを取得し、日付操作に活用することができます。https://github.com/holidays/holidays/tree/master特徴多くの国...