free 技術log

next/headersのcookies().setでcookieが書き込めない問題

Next.js
2024年10月22日(火)
こんにちはnext/headersのcookiesはサーバーサイドで用いるNext.jsのcookie用の関数で、Next.jsのサーバーサイドに含まれるリクエスト/レスポンスヘッダーのcookie読み書きが簡単にできるようになっています。公式によるとサーバーコンポーネントではcookieのread,ServerActionsとRouteHandlersではread/writeを行うことが可能です。問題点サーバーコンポーネントではcookieの書き込みができないので、サーバーコンポーネントからcookieの書き込みを行うRouteHandlersを呼び出す実装を行いました。しかしそれでもcookieが書き込めませんでした。await fetch("/api/set-cookie") // サーバーコンポーネントからcookieを書き込むRouteHandlersを呼び出す // リクエストが成功してもcookieが書き込まれない原因原因はcookieそのものの仕組みにあり、サーバーサイドからのcookieの保存はレスポンスヘッダにset-cookieを指定し、それをブラウザが受け取りcookieを保存するという流れになっています。サーバーコンポーネントでcookieの書き込みを行うRouteHandlersを呼び出してもレスポンスヘッダのset-cookieをブラウザが受け取れるわけではなく、書き込めないというわけでした。対処サーバーコンポーネントからクライアントコンポーネントにcookieに書き込みたい値を渡し、クライアント側でcookieの書き込みを行うことで無事に解決することができました。<SetCookieClientComponent name={name} value={value} />

ブログをNext14 + MicroCMSに移行しました!

Next.js,その他
2024年8月10日(土)
こんにちは当ブログは2年前にGatsby.js + Contentfulで作成しましたが、Contentfulの使い勝手が悪いのとNext14で何か作りたいという思いがあったのでこの度Next14 + MicroCMSで作り直しました。Next.jsは当ブログをGatsby.jsで作成した少し後にバージョン13がリリースされ、App Routerが導入されるなど大きな変更がありましたね。とても気になっていたのですがなかなか触る機会がなく、情報を眺めるぐらいしかできていなかったのですが、今年から参画させていただいている案件の中でNext14を使用しており、また書籍も発売されたのでかなり理解が深まっていました。Next.jsの新しい機能であるApp Routerやキャッシュ機能を用いて実装し、以前のGatsbyより綺麗にブログが作れたと思います。今回のソースコードはこちらに公開しています。ではまた

占いサロンSarey様のWebサイトを作成しました

Gatsby.js,その他
2024年3月22日(金)
こんにちは。今回は横浜市磯子区に開業された占いサロンSarey様のWebサイトを作成させていただきました。開業間もないとのことでしたのでシンプルで控えめなデザインで、実装に関してはGatsby.jsを用いてReactベースでコーディングを行い、効率的に開発することができました。私個人としては企業様の案件に参画させていただく働き方がメインで、Web制作については紹介でのみ承らせていただいています。これまで個人としての仕事について記事に書けることがあまりなかったので、今回は紹介させていただきました。

2023年を振り返って

その他
2023年12月1日(金)
久しぶりの投稿となってしまいましたが、早いものでもう12月となりました。今年一年は大きな動きはありませんでしたが、仕事面ではクラウドやセキュリティなど今まで苦手意識の強かったところも任せていただき、個人的な学習も含め、技術的な視野が広がった一年だったと思います。これからもコーディングだけではなく、クラウド、ネットワーク、セキュリティなどWeb開発における総合的な知識、技術を深めていき、よりクライアント様に貢献できるエンジニアなっていければと思います。今後ともよろしくお願いいたします。

CSSのtransformから特定のプロパティのみ取り出す

JavaScript,TypeScript
2023年4月14日(金)
こんにちは正規表現、メールアドレスやURLのvalidateなどではインターネット上に落ちているものをそのまま使ってしまったり、なかなかしっかりと理解して使えている人は意外と少ないのではないでしょうか今回は正規表現を用いて、CSSのtransformから特定のプロパティのみ取り出すソースコードを紹介します。CSSのtransformでは要素の移動、変形を指定することができます。transformで指定することができるプロパティはtranslate(移動)、rotate(回転)、scale(拡大・縮小)、skew(歪み)の4つが用意されており、実際には、transform: translate(10px,10px) rotate(10deg);のように、transform内に複数のプロパティを同時に指定する書き方になります。この際に、translateプロパティのみ取得する関数が以下になります。export const getTranslate = (transform: string) => { const translate = transform.match(/translate\(.+?\)/); return translate ? String(translate[0]).match(/-?\d+(\.\d+)?/g) : [0, 0]; };まず、 const translate = transform.match(/translate\(.+?\)/);で、transofrmからtranslateのみ取り出します。「()」は正規表現では予約語になるので、バックスラッシュを用いてエスケープします。「.」は任意の文字、「+」は1文字以上の繰り返しを表し、「?」を末尾につけることで最短マッチになります。最短マッチを用いない場合、最後方の「)」とマッチしてしまうため、translateのみでなく、他のプロパティまで取得してしまうことになります。この結果、以下が取得できます。translate(10px,10px)さらにここから数値のみ取り出すため、String(translate[0]).match(/-?(\d)+(\.\d+)?/g)とします。translateにはマイナスの値も含まれる場合があるため、「-?」と指定します。「?」は0文字以上の繰り返しの指定となるため、マイナスの指定がある場合もない場合も取得可能になりました。「\d」は数字を表すメタ文字となり、「+」をつけることで任意の桁数の取得、さらに小数点の場合も考慮し、「(\\.\d+)?」と指定しています。また、末尾の「g」は正規表現のオプションで、パターンにマッチした全てを取得します。この結果、以下が取得できました。[10,10]これでtransformからtranslateの値のみ取得することができましたね。今回の正規表現で用いた「translate」をrotateなどに書き換えることで、他のプロパティ値も取得可能になりますね。一見難しそうに見える正規表現も、あらためて勉強し直すことで苦手意識がかなり薄まりました。今後も活用していければと思います。