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

はじめにLINEリッチメニューとは、LINEのトーク画面下部に固定表示されるメニューです。このメニューには、クーポンやショップカードなどのLINE公式アカウントの機能に加え、ECサイトや予約サイトなどの外部サイトへのリンクを設定できます。https://campus.line.biz/line-official-account/courses/features/lessons/richmenuMessaging APIを使ってリッチメニューを設定する際、タップ可能な領域はboundsオブジェクトで定義する必要があります。あらかじめテンプレートを用意する方法では、用途に応じてテ...

ちょっと株式会社のKindBurgerです！本記事ではNext.jsの機能を使って、お手軽にOGP設定する実装を紹介します！ やってみたこと🐧架空のサイト「ペンギンブログ」にて、2つのOGP設定をやってみました！ ◆ 汎用的なOGPトップページやカテゴリページなど、どの画面でも共通して使用できるOGP画像を設定https://penguin-ogp-work.vercel.app/ ◆ 記事詳細で使える動的なOGP記事ごとの画像やタイトルを組み込んだOGP画像を生成https://penguin-ogp-work.vercel.app/articles/uj8ls...

Comlink とはhttps://github.com/GoogleChromeLabs/comlinkComlink は、Web Worker などの異なるコンテキスト間での通信を簡単にするためのライブラリです。公式では、Web Worker を enjoyable なものにするためのライブラリと紹介されています。Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessa...

ちょっと株式会社、フロントエンドエンジニアのn13uです.Next.js 10.2.3を扱っていた際に特定のバージョンの@types/reactを入れると、next build側から@types/reactの不足が原因でビルドに失敗する問題があり、解決した話と詳しい症状、依存解決の話の一部分を備忘録的にまとめています. 結論@type/reactのpackage.json内部のexportsに書かれた Subpath exportsの記述が不足しており、Next.js 10.2.3系の依存解決の方式に合っていなかった依存環境は追加されているのに認識されておらず、環境を追加...

モチベーションStorybook は大変素晴らしいツールで非常にお世話になっているが、v6 時代に依存関係で多少面倒だった覚えがある。[1]そこで今後また Storybook 自体の更新の遅さが負債になるケースを想定し、代替ツールを調べてみて最初に見つけたのが Ladle だったので、これに移行できそうか調べてみた。https://ladle.dev/Ladle の依存関係については、React にしか対応しないという潔さもあってか Storybook よりはシンプルである。webpack は使用しておらず、Vite を採用している。 Ladle を試してみる私のユー...

はじめにAWSの動作検証などを行いたい時に、アカウントや支払い情報の準備が少し億劫だったりすると思いますが、LocalStackを使えば簡単にローカル環境で検証が出来ます。そこで、本記事では一緒にTerraformも使って、LocalStackとTerraformによるお手軽IaCを試してみようと思います。 LocalStackとはLocalStackは、AWSの主要なサービス（S3,Lambdaなど）をローカル環境でエミュレートできるツールです。有償プランがあり、データの永続化やよりよい機能の利用にはそれぞれのプランへのサブスクリプションが必要です。本記事では、commu...

ZodとはZod は、TypeScript ファーストのスキーマ宣言および検証ライブラリです。ここでは、スキーマという用語を、単純なものから複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指すために使用しています。https://github.com/colinhacks/zod?tab=readme-ov-file#introductionZodのREADMEには、上記のような記載があります。私はanyやunknownのobjectに対して、バリデーションや型付けをする際に使用する事が多いです。その使用方法をサンプルコードと合わせて説明します。本記事は、"z...

先日、業務で開発しているmonorepoのESLintをv9にアップデートして設定ファイルをFlat Configに変更しました。自分自身はmonorepoにFlat Configを導入するのが初めてでした。色々調べた結果、学びがあったりきれいにまとまった設定ファイルが作れたと感じたので共有します。Flat Config自体は目新しいものではなくなってきているので、細かい使い方は他の記事や公式ドキュメントを御覧ください。 設定ファイル完成形my-monorepoは各自のプロジェクト名に、some-workspaceは個別のワークスペース名に置き換えてください。eslint....

この記事について上記の画像はこの現象について詳しく記載されているMartijn HolsさんのブログをGoogle翻訳したものになります。https://martijnhols.nl/gists/everything-about-google-translate-crashing-reactこのブログが現状の解答だと思っているので自分からは結論と経緯（思い出）しか書かないようにしてMartijn Holsさんのブログを見るようにしてください。 結論Virtual DOM内でstateをTextNodeとして反映している場合は翻訳かますことで発生しうる解消策...

はじめに現代のウェブの世界では暗号化はgoodではなくmustになっています。ブラウザではhttpsではなくhttpのサイトの場合はセキュリティ保護なしと警告をしてくるようになっています。開発する際は気にしていない方も多くいるかと思いますが、本番と同じ環境で開発するためにもローカル環境もhttpsで開発しましょう https化する方法よく利用するのは以下の2つになります。ngrokを利用するLet's Encryptで発行して利用する ngrokを利用するngrokはlocalhostをtunnelして外部に公開することでhttps化します。外部に公開して...

TypeScriptで関数を書く際に、気をつけていることを記載しました。BMIを計算する処理を例にして説明いたします。 引数をobject形式にする引数をobject形式にする事で名前付き引数に近い形式になり、順不同になります。引数の順番に意味が無い関数でも、使用時にどの順番で引数を渡すか迷う事がありません。const calculateBMI = (p: { height: number; weight: number }) => { // BMIの計算処理};calculateBMI({ height: 170, weight: 60 });calcula...

はじめに今自分の担当しているプロジェクトは Vue@2 + Vuetify@2 から Vue@3 + Vuetify@3 へのリプレイスを行っています。キャッチアップしながら実装しているのですが、各コンポーネント、地味に差分があるので毎度調べながら再現できるよう開発を進めています。今回は、v-overlay を使ったローディングコンポーネントを作っていた際に対応した内容をメモとして書き残しておきます。 起きていた現象ローディングフラグが ON になると v-overlay で囲われた UI が画面全面に表示されます。そのうち、Vuetify@2 では起きなかったので...

Next.jsのsearchParamsの型問題Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。export default async function Page({ searchParams,}: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>;}) { const filters = (await searchParams).filters;}各パラメータ...

表示速度の高速化を考える時に最優先になるのが画像の最適化。ある記事によると、ページ全体の約44%を画像が占めているそうなので、その重要性がわかります。画像の最適化には次のような方法があると考えています。適切な画像形式を使う画像のファイルサイズを削減する過不足のない画像サイズで表示する遅延読み込みで必要なタイミングで読み込ませるこの記事では「過不足のない画像サイズで表示する」方法に関する内容をまとめています。 言葉の定義この記事では次のように表現します。表示領域：ブラウザ上で画像が表示される時のサイズ例：この画像はモバイルでは100px × 100px、デス...

2024 年 11 月 14 日に Framer Motion の作者である、Matt Perry さんが作成した、Motion One と Framer Motion が統合され、Motion という名前になりました。統合されたことにより、実質 Framer Motion が Vanilla JS や Vue などのフレームワークに依存しないライブラリとして使えるようになりました。https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion!名前の変更に伴い、npm install fra...

はじめにWebページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう！ 1行の省略表示CSSでテキ...

Reactでコンポーネントやhooksを実装する際に、ドメインモデル貧血症にしない方法について記載しました。ドメインモデル貧血症とは？ドメイン駆動設計ドメインモデルが持つべき情報がドメインモデルの外に書かれており、業務知識が漏れ出している状態を、「ドメインモデル貧血症」と呼ぶことがある。上記のような記載があります。ビジネスロジックの実装はフロントエンドにもあります。どのように実装するか悩ましい所です。UIとロジックが密結合になるフロントエンドの実装でも、コンポーネントにロジックを流出をさせない事がベストだと考えています。以下に会員向けの機能の実装して説明いたします。...

２つのJSON文字列の差分をシンタックスハイライト付きで表示したいケースがありました。Zennでも同じ差分かつシンタックスハイライトができますね。下のようなコードブロックがそうです。 example.json{- "name": "Bob",+ "name": "Alice", "age": 20}Zennでは行頭に+や-をつけることで差分としてハイライトされるようになっています。このようなシンタックスハイライトかつ差分ハイライトを、2つのJSON文字列の差分に対して行いたいと思いました。つまり、差分を表示したい箇所に明示的かつ静的にマークしていくのではなく、...

国立国会図書館サーチのAPIとは？国立国会図書館と全国の図書館の蔵書情報にアクセスできるAPIです。主に3つのAPIが提供されています。検索用APIハーベスト用API書影API今回は検索用APIと書影APIを使ってみたので、その知見を共有します。 利用申請についてと、その前に簡単に利用申請について触れておきます。非営利利用の場合は申請不要ですが、営利利用の場合は利用申請が必要な場合があります。営利利用の判断基準については以下の通りです。データを利用することにより、なんらかの収益を得る場合（例：サイトの運営による広告収入等）は、営利目的にあたるため、利用...