フロントエンド
Webアプリを作る上であるあるな話である「キャッシュ問題」 開発中やアップデート直後に何か動かなくなる時がある・・・ ファイル差し替えたのに古いものが表示されてしまう・・・ スーパーリロードやキャッシュ削除を試すと大丈夫！ →だけど面倒だしログイ…
この記事は、 テックブログ強化月間 リレーブログ企画2026 参加の記事です。 2年ほど前、社内のデザインシステムを基にフロントエンド向けのコンポーネントライブラリを実装することになり、スタイリングライブラリとして最終的にPanda CSSを採用しました 本…
こんにちは。フロントエンド開発を担当している Y.O. です。 現在開発中のプロダクトでは、Next.js（App Router） を採用しています。 開発を進める中で、フォームやデータを編集中にページを離脱しようとした際、警告を表示する処理を実装する必要がありま…
この記事は、 テックブログ強化月間 リレーブログ企画2026 参加の記事です。 先日Panda CSSでデザインシステムのコンポーネントライブラリを作成した際の記事を投稿させていただきました。 そこでちょっと触れた、ランタイムで動作するCSS-in-JSはRSCとの噛…
こんにちは！開発部エンジニアとしてフロントエンドを主に担当しています。 最近、心ときめくUIライブラリに出会いました・・・・ それは daisyUI です 今回はNext.jsでdaisyUIをさわってみた感想などをお伝えします！ daisyUIとは？ ライブラリのインストー…
この記事は、 KENTEM TechBlog アドベントカレンダー2025 8日目、12月8日の記事です。 こんにちは。2年目フロントエンドエンジニアのM.Hです。 皆さん、cssで要素を重ねるとき、どのようなプロパティを設定しますか？ すぐに思いつくのはposition:absoluteで…
こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 機能が多く複雑なNext.jsではなく、Viteを用いたシンプルな構成のReactプロジェクトを立ち上げることも多いです。 そういったプロジェクトにコンポーネントテストを導入する際、環境構築…
UnsplashのYannik Zimmermannが撮影した写真 こんにちは。フロントエンドエンジニアのT.C.です。私はITエンジニア未経験でKENTEMにキャリア入社し、React歴も4年目になりました。 どのくらいのスキル感で入社して、各年次ごとにざっくりどの程度のスキルを持…
はじめに 前提条件 開発環境の準備 MCPサーバーの実装 サーバーの基本構成とツールの定義 動作確認 まとめ 終わりに はじめに こんにちは！フロントエンドエンジニアのH.Rです。 4月で早くも3年目。エンジニアとしての視座が変わってくる時期ですが、本当に…
はじめに なぜテキストファイル読み込みは遅い？ 検証 環境 準備 読み込み処理 計測 結果 まとめ 補足として おわりに はじめに こんにちは。 快測Scanという製品の開発に携わってるプログラマです。 快測Scanは、手軽に点群データを取得、確認ができるモバ…
この記事は、 KENTEM TechBlog アドベントカレンダー2025 16日目、12月16日の記事です。 こんにちは、フロントエンド開発のY.O.です。 フロントエンドの業務に携わるようになって4年目になりますが、なんとなくの理解で日々の開発をやり過ごしているものの一…
この記事は、 KENTEM TechBlog アドベントカレンダー2025 24日目、12月24日の記事です。 こんにちは！フロントエンドエンジニアのY.Kです！ 前回までにuseQueryとuseMutationを組み合わせた非同期通信と状態更新を最適化する手法についてご紹介しました。ま…
この記事は、 テックブログ強化月間 リレーブログ企画2026 参加の記事です。 こんにちは！フロントエンドエンジニアのY.Kです！ 今回はTanStack Query v5で使っている、「安全性を少し高めるための小ネタ」を2つ紹介します。 どれも今のコードを大きく変えず…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 1日目、12月1日の記事です。 筆者はKENTEMでWEBフロントエンドエンジニアをしています。 TypeScriptは型を全く使わずに全てanyにすることもできる一方で、複雑な型関数を構築することもできるため、…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 12日目、12月18日の記事です。 こんにちは、E.Kです。 Reactを学び始めてまだ2週間程度の超初心者ですが、 パフォーマンスの最適化についてご紹介させていただければと思います。 はじめに 画面更新…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 14日目、12月20日の記事です。 こんにちは、KENTEM のまつです。 ブラウザからAzureBlobStorageにファイルをアップロードする機会があり、azure-sdk-for-jsのstorage-blobを使用しました。 Microsoft…
こんにちは、KENTEM第二開発部のM・Sです。 今回はgh-pagesを使ってReactを爆速でGitHub Pagesにデプロイする方法を爆速でお伝えしたいと思います！ 事前準備 gh-pagesのインストール 設定ファイルを修正 GitHub Pagesの設定 まとめ おわりに 事前準備 Vite…
この記事は、 KENTEM TechBlog アドベントカレンダー2024 8日目、12月8日の記事です。 寒い季節になりましたね。 先月頃までは気分よく外出もできたのですが、最近は寒さに負けて家にこもりっきりの日々です。 となると家での時間が増えてきましたので、久々…
こんにちは！普段ReactとTypeScriptを使ったフロントエンド開発をしているT.C.です。 配列操作はarray.map()やarray.forEach()といった便利なメソッドを使うことも多いですが、いざfor文を書く必要が出たとき for of なのか for in のどちらを使うべきか迷っ…
こんにちは！フロントエンジニアのH.Rです。TypeScriptで型を定義するときに、「一部だけ取り出したい」「全部をオプショナルにしたい」といった場面がよくあります。 そんなときに役立つのがユーティリティ型（Utility Types）です。 この記事では代表的な…
こんにちは、相も変わらずスポーツカーの動画を見ているフロントエンドエンジニアのY.Kです！ 前回は、TanStack Queryの useQuery を使った状態管理についてご紹介しました。まだご覧になっていない方は、まずはこちらの記事をご一読ください。 さて今回は、…
こんにちは、Reactを中心にフロントエンド開発をしているエンジニアです。 AIコーディングエージェントが普及し始めてしばらく経ちますが、みなさんの現場ではどうでしょうか。私もGitHub Copilotを活用して半年が経ちました。 半年経った今、設計について考…
こんにちはフロントエンド担当のH.Rです！ 4月になり新入社員が入ってくる時期だと思います。 これからフロントエンド開発に携わる方が、まず最初にぶつかりやすい壁のひとつが「API（バックエンド）との通信」です。画面にデータを表示したり、入力されたデ…
この記事は、 テックブログ強化月間 リレーブログ企画2026 参加の記事です。 フロントエンドの開発中、原因不明のバグに時間を費やした経験は誰しもあるのではないでしょうか。 console.log を仕込んでは確認し、また仕込んでは確認し……そんなループを繰り返…
こんにちは！フロントエンドエンジニアのY.Kです。 新卒で入社してから早くも1年が経ち、少し驚いています。 私はこの約半年間、AIエージェント（特にClaude）を活用してきました。その中で、フロントエンドの設計に特化したSkillを作成するうえで気づいたこ…
こんにちは 新卒フロントエンドのK.Sです。 前回はPhotonの概要とAppIDの作成まで行いました。今回は、簡易的に複数人でマッチングが行えるwebアプリを作成していこうと思います。 開発環境 SDKの準備 Photon Cloudに接続する プレイヤーやルームなどの情報…
今回の内容は 後編です。 前編：Firebaseを使った簡単なアプリの作成 後編：Firebase Studioを活用したノーコードアプリ開発 前編を見ていなくても楽しめます！ぜひ最後までご覧ください！ Firebase Studioとは？ 実際に使ってみる まとめ おわりに Firebase…
先日Firebaseを使う機会があったので、その概要をまとめました。 今回の内容は 前編・後編の2部構成です。 前編：Firebaseを使った簡単なアプリの作成 後編：Firebase Studioを活用したノーコードアプリ開発 ぜひ最後までご覧ください！ Firebaseとは? 機能…
こんにちは！新卒フロントエンドエンジニアのK.Sです。皆さんは既にこちらの記事をご覧になりましたか？ tech.kentem.jp この記事で紹介されているユーティリティ型だけでも十分役に立ちますが、別のテクニックと組み合わせることでさらに柔軟な型の定義が可…
この記事は、 KENTEM TechBlog アドベントカレンダー2025 13日目、12月13日の記事です。 こんにちは、 React を中心にフロントエンド開発をしているエンジニア T・M です。 タッチデバイス向けのUIを作っていて、 「onPointerMoveでpreventDefault()してるの…
