こんにちは、Webエンジニアの浅井です。

2024年10月からFLATの1ヶ月の活動をご紹介する月次レポートお送りします！
FLATの活動や日常をぎゅっとまとめてご紹介するので、ぜひお楽しみください🐈

コーポレートサイトをリプレイスしました🎉

FLATのコーポレートサイトを従来のWordPressからヘッドレスCMSに移行し、モダンな技術スタックを活用してリプレイスしました🙌

TypeScript、React、Next.js、microCMS、Cloudflareといった最新技術を採用し、より高速で安定したパフォーマンスを実現しています。

ヘッドレスCMS化によって、バックエンドとフロントエンドを独立させることができるため、ページのロード時間が大幅に短縮され、ユーザーにとってスムーズで快適な体験を提供できるようになりました。

また、管理画面からのコンテンツ更新も容易になり、日々の運用や改善がスピーディーに行える点も大きなメリットです。これにより、より効率的にサイトの情報発信を行えるようになりました。

さらに、制作実績の紹介ページも「より見やすく」「より分かりやすい」デザインに一新し、ユーザーがFLATの制作実績を理解しやすいよう工夫を凝らしています。

制作実績は今後も随時更新し、増やしていく予定ですので、ぜひご期待ください！

▼FLATの制作実績を見る▼

制作実績 | 株式会社FLAT - 東京のフロントエンド専門のWeb制作会社

東京渋谷のフロントエンド専門プロダクションFLATのサイト。Webアプリケーション,Webサイト,各種CMS実装（ヘッドレスCMS,WordPressなど）実装全般が得意なエンジニアチームです。

https://wd-flat.com/works/all/1

第3回読書会を実施しました📖

FLATのCXチームでは月1で読書会を実施しています。

読書会では前月に読む本を決め、次月の末にプレゼン形式で発表会を行ないます。

今月は『プロセス・オブ・UI/UX［UXデザイン編］』がテーマです。

今回はリサーチや企画立案に焦点を当て、さらに効果的に行うための手法を深掘りしてまとめました。
また、実際の案件でユーザビリティテストを実施した経験を活かし、改善プロセスについても詳しく取り上げ、盛り上がりました。

次月は『プロセス・オブ・UI/UX［UIデザイン編］』を予定しています。

プロセス・オブ・UI/UX［UXデザイン編］ 実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで

Amazonで桂 信, 株式会社エクストーンのプロセス・オブ・UI/UX［UXデザイン編］ 実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで。アマゾンならポイント還元本が多数。桂 信, 株式会社エクストーン作品ほか、お急ぎ便対象商品は当日お届けも可能。またプロセス・オブ・UI/UX［UXデザイン編］ ...

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E3%83%BB%E3%82%AA%E3%83%96%E3%83%BBUI-UX%EF%BC%BBUX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%B7%A8%EF%BC%BD-%E5%AE%9F%E8%B7%B5%E5%BD%A2%E5%BC%8F%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%81%E3%81%8B%E3%82%89%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%AA%BF%E6%9F%BB%E3%83%BB%E4%BC%81%E7%94%BB%E3%83%BB%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%83%BB%E6%94%B9%E5%96%84%E3%81%BE%E3%81%A7-%E6%A1%82-%E4%BF%A1/dp/479818151X

プロセス・オブ・UI/UX［UIデザイン編］ 実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで

Amazonで桂 信, 株式会社エクストーンのプロセス・オブ・UI/UX［UIデザイン編］ 実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで。アマゾンならポイント還元本が多数。桂 信, 株式会社エクストーン作品ほか、お急ぎ便対象商品は当日お届けも可能。またプロセス・オブ・UI/UX［UIデザイン編］ ...

https://amzn.asia/d/7QGNKdG

10月に書いた技術記事🖋️

TanStack Queryで条件付きフェッチ（山村）

TanStack Queryで条件付きフェッチ

ユーザーの入力に応じてデータを取得したいときなど、条件付きで useQuery や useSuspenseQuery を使いたい場面があります。この記事では ディスカッション 上で紹介されていた方法をまとめます。 useSuspenseQuery を使う場合は2通りの方法があります。 Suspenseではデータ取得が成功していることが期待されるため、条件によるレンダリングやエラーハンドリングは親コンポーネントで行います。 条件を満たすまでの間、queryFnでnullを返すという方法もあります。この場合は

https://zenn.dev/frontendflat/articles/66c937a443521d

【React Hook Form】フォーム内のフィールドを共通化する（山村）

【React Hook Form】フォーム内のフィールドを共通化する

フォームを作成していると、その一部をコンポーネントとして切り出したいときがあります。React Hook FormとZodでフォームバリデーションを実装していたのですが、型の持たせ方に工夫が必要だったので記事にまとめます。 ここではサンプルとして、レシピを入力するフォームを想定します。 赤枠で囲んだ部分が複数のフォームで共通化したい部分です。 ...

https://zenn.dev/frontendflat/articles/5c6e02e50c3caf

おわりに

FLATの活動や近況をお届けする月次レポート10月号でした。

気づけば今年も残り2ヶ月となりましたね。
11月も業務にしっかり取り組むのはもちろん、FLATの事業に関する活動など、チーム一丸となって楽しみながら進めていきたいと思っています。