「React」に関連する技術ブログ

企業やコミュニティが発信する「React」に関連する技術ブログの一覧です。

VSCode Dev Containerを使った開発環境構築

はじめに こんにちは。共通サービス開発グループで複数のサービスが利用する決済プラットフォームの開発チーム[^1][^2]に所属している鳥居です。 この記事をご覧の皆さんは、ローカル開発環境の構築時にこんな経験ありませんか?IDE の設定を環境構築手順書に従って構築したが動かなかったり、プロダクト毎に異なるバージョンの SDK をどちらも動く方法を調べてイン

Shinjuku.ts #1を開催しました

こんにちは。エンジニアの宮本唯です。先日、TypeScriptのLT会Shinjuku.ts#1を開催しました。 これまでフォルシアでは、rustのLTイベントShinjuku.rsを20回にわたって開催してきました。Shinjuku.rsでは多くの方にご登壇いただきrust好き同士の交流の場となってきましたが、この度新しく typeScript好きの方々に対しての活動を広げるべく Shinjuku.tsを開催する運びとなりました。 今回は

フロントエンド開発にちょっと慣れてきた方におすすめしたいPatterns.dev

みなさんこんにちは、X イノベーション 本部ソフトウェアデザインセンターの徳山です。 本記事は 電通国際情報サービス Advent Calendar 2022 12月9日の記事です。 ISID に入社して1 ヶ月ばかりですが、今まで携わってこなかった技術領域に触れる機会が増えそうなため刺激的な日々を送っております。 さて、これまでユーザーに近い領域の開発、いわゆるフロントエンドを中

フロントエンド開発にちょっと慣れてきた方におすすめしたいPatterns.dev

みなさんこんにちは、X イノベーション 本部ソフトウェアデザインセンターの徳山です。 本記事は 電通国際情報サービス Advent Calendar 2022 12月9日の記事です。 ISID に入社して1 ヶ月ばかりですが、今まで携わってこなかった技術領域に触れる機会が増えそうなため刺激的な日々を送っております。 さて、これまでユーザーに近い領域の開発、いわゆるフロントエンドを中

【Recoil】Reactの状態管理ライブラリ基礎学習 ~リファクタ編~

こんにちは、 ラク ス入社1年目の koki _matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリの Recoil部分をリファクタする とともに パフォーマンスを上げるためにどうするか についてご紹介させていただきます。 もし、前回の記事を読んでいない方は下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.c

入社1年未満メンバーだけのチームによる新システム開発をリモートモブプログラミングで成功させた話

はじめに KINTOテクノロジーズで、複数のサービスが利用する決済プラットフォームの開発チーム[^1]に所属している金谷です。 新規プロジェクトに対して、リモートでモブプログラミングを行い、オンスケジュールで開発完了させた事例を紹介します。 [^1]: 決済プラットフォームの他の取り組みは、 グローバル展開も視野に入れた決済プラットフォームにドメイン駆動設

VM2Mビジュアルパーツに Googleマップを3Dで表示してみた

aptpod Advent Calendar 2022 6日目の記事を担当する、Visual M2M グループの白金です。 弊社製品の Visual M2M Data Visualizer では、計測データを可視化するための様々なビジュアルパーツを提供しています。 その中の一つに、計測データに含まれる位置情報をもとにGoogleマップに現在位置を表示するビジュアルパーツが含まれています。 今回は、下図のように Googleマップのビジュアル

Atomic Designを導入してフロントを構成してみよう!

はじめに KINTOテクノロジーズでKINTO ONE新車サブスクリプションシステムのフロント開発を担当しているカンと申します。 現在担当している、プロジェクトから簡単にご紹介させていただきます。 KINTO ONE新車サブスクリプションシステムは新アーキテクチャの適用を順次取り込んでいます。 フロントチームはNext.jsとTypeScript、デザインパータンとしてAtomic Designを採用して

【React】useCallbackの適切な使い方とパフォーマンス

はじめに こんにちは、システムエンジニアの蛸井です。 最近は React のパフォーマンスチューニングにハマっており、どのようなコードを書くのが最適なのか気になったため色々と調べてきました。 今回の記事では、パフォーマンスチューニングの中でも React Hooks の useCallback に絞って、適切な使い方・使い時について詳しく解説します。 useCallback とは React Hooks の useCallb

BUYMAフロントエンド開発にRecoilを導入してみた話

この記事は Enigmo Advent Calendar 2022 の 5日目の記事です。 こんにちは。フロントエンドエンジニアのWooです。 エニグモ へ入社して3年目、主に BUYMA の購入者側のページをReactで構築しています。 BUYMA ではReactのグロー バルス テート管理のために主にReduxを使用していますが、今回は新しい取組としてRecoilを導入し、開発を行なってみましたので、その経験を共有しようと思

Vue 2 + TypeScript 環境に Testing Library を導入する

Vue 2 でコンポーネントテストを書くために こんにちは。プログラミングをするパンダ( @Panda_Program )です。本記事は BASE アドベントカレンダー 2022 の4日目の記事です。 本記事では Vue 2 + TypeScript 環境に Testing Library を導入する方法をご紹介します。なお、Testing Library の使い方については本記事では触れていません。当該ツールの具体的な利用方法を知りたい方は 公式ド

TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる

BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかける

【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、 Recoilの基本的な状態管理や仕組み をTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は 「Reactの状態管理ライブラリ基礎学習」の3部目 です。 「Redux編」「Redux-Toolkit編」もあるので、下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp tech-blog.rakus.co.jp Reactの状態管理ライブ

AWS Amplify + Next.js + TypeScript で作るCognitoユーザープールのアカウント管理アプリケーション

はじめに 旅行プラットフォーム部の武田です。 最近、AWS Amplifyを利用してNext.jsのアプリケーションをホスティングする機会があり、実際にアプリケーションを作りながら開発の流れについて紹介します。 Amplifyで楽をしつつ一部のAPIはNext.jsのAPI Routesを利用する、というやり方が比較的シンプルで良いと感じました。 AmplifyでAPIを構築する場合、Next.jsのAPI Routesを利用する

ミイダスのフロントエンドをNext.jsに移行した背景と課題

ミイダスのフロントエンド開発では、これまでReactとReduxを中心に、プロダクトや開発組織フェーズとその変化に対応するため技術選定を進めてきました。 そして2021年からスタートしたNext.jsへの移行計画「ミイダス2.0」プロジェクトの全貌について、フロントエンド開発を担当した後藤と松村、李に話を聞きました。 移行した背景や課題、今後の展望についてご紹介しま
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?