フロントエンド
こんにちは。KENTEM第二開発部でフロントエンドを担当しているM・Sです。 普段の開発において、フォーマッターとリンターは開発者の強い味方ですよね。 従来のWeb開発においてはPrettierとESLintを組み合わせるのが主流でしたが、最近はBiomeというツールが…
UnsplashのPaul Skorupskasが撮影した写真 こんにちは。ReactエンジニアのT.C.です。 モードを切り替えてもフォーカスを保持し続ける入力欄を持つコンポーネントを開発していて、挙動を調査したため共有します。 フォーカスが消えるのか消えないのか 問題の…
こんにちは。フロントエンド開発を担当している Y.O. です。 現在開発中のプロダクトでは、Next.js（App Router） を採用しています。 開発を進める中で、フォームやデータを編集中にページを離脱しようとした際、警告を表示する処理を実装する必要がありま…
はじめに こんにちは。KENTEMでフロントエンドを担当しているM・Sです。 ユーザーのドラッグやタッチによって要素を移動させたいときありますよね。 基本的にはDragEventやMouseEvent, TouchEventなどを使うことが多いかと思いますが、今回はPointerEventを…
こんにちは！普段ReactとTypeScriptを使ったフロントエンド開発をしているT.C.です。 配列操作はarray.map()やarray.forEach()といった便利なメソッドを使うことも多いですが、いざfor文を書く必要が出たとき for of なのか for in のどちらを使うべきか迷っ…
こんにちは！KENTEM 第2開発部のH.Kです。 新卒エンジニアとしてReact + TypeScript を使った初めてのチーム開発に参加し、多くのことを学びました。 個人開発とは異なり、自分の作業がチーム全体にどう影響するのかを意識すること が求められます。 最初は…
目次 目次 はじめに 拡張機能の作り方 manifest.json action content_script background WXTを使った拡張機能開発 作成できる拡張機能の例 まとめ おわりに はじめに こんにちは！今年新卒で入社したK.Mです！私は昨年末に開催されたKENTEM TECH CONF 2024に…
この記事は、 KENTEM TechBlog アドベントカレンダー2024 25日目、12月25日の記事です。 はじめに メリークリスマス！今年新卒で入社したK.Mです！昨日から今日まで弊社では、開発部でテックカンファレンスが開催されていました！かくいう私も運営&登壇者と…
この記事は、 KENTEM TechBlog アドベントカレンダー2024 20日目、12月20日の記事です。 こんにちは。KENTEMフロントエンドエンジニアのM.Sです。 3Dというのは人間を惹きつけるものがありますよね。 ゲームや映画から、ソフトウェアやWebサイトまで。 Webサ…
この記事は、 KENTEM TechBlog アドベントカレンダー2024 18日目、12月18日の記事です。 こんにちは。私は、KENTEMでWEBフロントエンドエンジニアをしています。 私の所属プロジェクトでは、Reactを採用しています。開発中、リスト内のアイテム数が多くなる…
この記事は、 KENTEM TechBlog アドベントカレンダー2024 8日目、12月8日の記事です。 寒い季節になりましたね。 先月頃までは気分よく外出もできたのですが、最近は寒さに負けて家にこもりっきりの日々です。 となると家での時間が増えてきましたので、久々…
こんにちは、KENTEM第二開発部のM・Sです。 今回はgh-pagesを使ってReactを爆速でGitHub Pagesにデプロイする方法を爆速でお伝えしたいと思います！ 事前準備 gh-pagesのインストール 設定ファイルを修正 GitHub Pagesの設定 まとめ おわりに 事前準備 Vite…
こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 ESLint v9.0.0のリリースブログによるとESLint v9.0.0以降はFlat configと呼ばれる書き方がデフォルトになるようです。 そこでESLint Flat config時代における、VS Codeを使ったVite × Re…
こんにちは！KENTEM 第2開発部のフロントエンドエンジニアM・Sです。 KENTEM では、React を用いてフロントエンドを開発しています。初めのうちは React の独特な書き方に抵抗を感じていましたが、今では React なしで開発することなんて考えられません。 そ…
こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 機能が多く複雑なNext.jsではなく、Viteを用いたシンプルな構成のReactプロジェクトを立ち上げることも多いです。 そういったプロジェクトにコンポーネントテストを導入する際、環境構築…
こんにちは。KENTEM第１開発部のS.Eです。 私はクラウドサービスのフロントエンドエンジニアとしてプロジェクト業務に携わっています。 現在のプロジェクトは新規で立ち上げ、既に２年ほど経過したような状況です。 プロジェクトメンバーの入れ替えも何度か…
はじめに そこに至る経緯 違和感の正体 ファイル構成（案） ParantComponent/ChildComponent CustomHooks Store Container 運用上の注意点 結果 おわりに はじめに C++、C#、TypeScript、、、とオブジェクト指向プログラミングの道を進んできた私の次の仕事…
こんにちは。第１開発部でマネージャーをしているM.Tです。 私は現在、クラウドサービスプロジェクトの開発リーダーを務めています。 本プロジェクトでは、地図の表示とそこに線やマーカーを描画する機能を提供しています。 元々デスクトップアプリだったも…
Webアプリを作る上であるあるな話である「キャッシュ問題」 開発中やアップデート直後に何か動かなくなる時がある・・・ ファイル差し替えたのに古いものが表示されてしまう・・・ スーパーリロードやキャッシュ削除を試すと大丈夫！ →だけど面倒だしログイ…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 14日目、12月20日の記事です。 こんにちは、KENTEM のまつです。 ブラウザからAzureBlobStorageにファイルをアップロードする機会があり、azure-sdk-for-jsのstorage-blobを使用しました。 Microsoft…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 12日目、12月18日の記事です。 こんにちは、E.Kです。 Reactを学び始めてまだ2週間程度の超初心者ですが、 パフォーマンスの最適化についてご紹介させていただければと思います。 はじめに 画面更新…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 4日目、12月6日の記事です。 こんにちは。KENTEMのフロントエンド担当です。 前回、デザイン崩れを恐れずコンポーネント修正をしよう！～BackstopJS編～という記事を投稿しましたが、 新たにビジュア…
この記事は、 KENTEM TechBlog アドベントカレンダー2023 1日目、12月1日の記事です。 筆者はKENTEMでWEBフロントエンドエンジニアをしています。 TypeScriptは型を全く使わずに全てanyにすることもできる一方で、複雑な型関数を構築することもできるため、…
こんにちは、KENTEM 第２開発部のHFです。 KENTEMでは学生の方を対象に『KENTEM１Dayプログラミング体験』というイベントを毎年行っています。 今年度はMicrosoft Azureで2023年1月に一般公開された「Azure OpenAI Service」を使用したプログラムを扱ってい…
こんにちは。KENTEMのフロントエンド担当です。 現在、私たちのチームではNext.jsを用いてクラウド製品の開発を行っています。 その中で頭を悩ませているのが、 特定の画面に対応するため、コンポーネントを修正したところ、 他の画面への想定していなかった…
こんにちは！開発部エンジニアとしてフロントエンドを主に担当しています。 最近、心ときめくUIライブラリに出会いました・・・・ それは daisyUI です 今回はNext.jsでdaisyUIをさわってみた感想などをお伝えします！ daisyUIとは？ ライブラリのインストー…
