こんにちは。今年ももう少しで終わりですねフリーランスとして独立した当初は先が全く見えず不安も大きかったのですが、無事3年続けることができ大変感謝しております。今年は責任の大きな仕事を無事終えることができ自信に繋がったのと同時に、技術的な部分での未熟さを実感させられた年でもありました。現状の自分に満足せず、今はフルスタックエンジニアを目指して頑張っていきたい気持ちです。これまでフロントエンドメインでやってきたので、来年はバックエンドやインフラ面の学習を頑張りたいと思います。また、今月は少しお休みさせていただく期間となりました。ここまで目の前のお仕事を必死に頑張ってきたので、リラックスして過ごせたらと思っています。来年もどうかよろしくお願いします。

おはようございます。投稿したい記事があったのですが、このブログはweb系についてのみ投稿するようにしたいのでQiitaに投稿してみました。https://qiita.com/chinoshuta/items/ffc665a37a757ad66d5dブログとは違いQiitaではより多くの人の目に見てもらえることになると思うので、大丈夫かな？と不安でしたが、エンジニアとしてこうやってアウトプットしていくのは大事ですね。これからもweb系以外の記事や、より多くの人に見てもらいたい場合はQiitaにも投稿していければと思います。ではまた

こんにちは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} />

こんにちは当ブログは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を用いてReactベースでコーディングを行い、効率的に開発することができました。私個人としては企業様の案件に参画させていただく働き方がメインで、Web制作については紹介でのみ承らせていただいています。これまで個人としての仕事について記事に書けることがあまりなかったので、今回は紹介させていただきました。