Redux

はじめまして！株式会社ハイヤールーの新谷（@s__shintani）です。 先日HireRooに新しくシステムデザイン形式の問題が追加されました。本記事ではシステムデザイン形式の問題で使用するドローイングツールの共同編集機能を実現する技術とその設計について執筆いたします。 図1: システムデザイン形式の問題回答画面。候補者はテキストやコンポーネントを自由に配置できる。 共同編集技術の歴史は古く、ユーザー間における処理の競合を解消するためにOperational Transform（OT）をはじめとする様々なアルゴリズムが考案されてきました。私たちが今回のドローイングツールを設計する際もいくつか…

概要 React+Reduxの学習で、Reactチュートリアルの三目並べにReduxを使って書き直してみました。 このシリーズではチュートリアル形式で書き方を解説していきます。 今回はその第1弾として、connect APIを使い、JavaScriptで書いてみます。 参考文献 この記事は以下の情報を参考に執筆しています。 りあクト！第3.1版 React公式チュートリアル react-redux公式チュートリアル Reactのprops drilling（バケツリレー）とhooksに我々はどう立ち向かっていけばよいのか : ビジネスとIT活用に役立つ情報 コードを書く前に｜Reduxについて…

はじめに こんにちは、スタメンでエンジニアをしている手嶋です。普段は、React+TypeScriptでフロントエンドメインで開発をしています。 弊社のプロジェクトではフロントエンドの状態管理ライブラリとしてReduxを使用していますが、直近のプロジェクトにおいてReduxのStoreに格納するデータを正規化することで多くの恩恵を得られた為、今回はそのメリット及び具体的な正規化の方法について紹介したいと思います。 ※Reduxの公式ドキュメントでもStoreの正規化が推奨されています。 正規化の概要及びメリットについて 正規化の概要 正規化されたデータがどのようなデータなのか示すために以下に例…

画面遷移しても状態保存しておこうと思い、再度reduxを見直していたが、これを見つけてちょっと感動した。 redux-toolkit.js.org reduxの構成にしたい人はこれ入れておくとよさそう。 action, reducer, selectorの記述が少ない reduxは何と言ってもコードの記述量が増えるのがめんどくさいのだが、とてもスマートに書ける。 import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { CourtDoc } from 'models/court' import type { R…

はじめに 初めまして！株式会社ハイヤールーの谷合（@posterkeisuke）です。 『HireRoo（ハイヤールー）』とは優秀なエンジニア採用に必須のコーディング試験サービスです。 そんなHireRooテックブログへの初投稿になります。よろしくお願いいたします！ 記念すべき初投稿では、今自分が主で担当開発しているフロントエンドの基盤を詳しくご紹介できればと思います。 バックエンドを含むHireRooの含む大まかな基盤に関しては、前回葛岡が投稿したブログをご参照ください。 tech.hireroo.io はじめに フロントエンドの構成詳細 全体構成 利用している技術スタック 技術選定の背景に…

はじめに 前回、Redux Tool Kitでstoreを作成したので、作成したstoreを利用したコンポーネントを作成してみる コード app/features/task/TaskItem.jsというコンポーネントを作成する。このコンポーネントは１つのタスクを表示及び削除する/完了ステータスを更新するコンポーネントにする import React from 'react' import { useSelector } from 'react-redux' import { selectTasks } from './taskSlice' import { TaskItem } from '.…

はじめに 前回、ReduxToolkitの件を簡単に調べてので今度は実際に実装してみる px-wing.hatenablog.com コード app/features/task/taskSlice.jsファイルを作成する import { createSlice } from '@reduxjs/toolkit'; export const taskSlice = createSlice({ name: 'task', initialState: { currentId: 3, tasks: [ { id: 1, title: 'タスク１', done: false }, { id: 2, t…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,562件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ （18,562件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,840 …

はじめまして！4月に新卒として入社したフロントエンド開発部の山下(yamakenji24)です。Creator's Noteには初投稿となります。 突然ですが皆さん、Reactを使用していますか？ ChatworkではjQueryのコードが部分的に動いているものの、大部分がReactで動いております。 そんなReactですが、メジャーアップデートであるv18が発表されて半年が経過し、他の依存するライブラリもReact v18に対応するものが増えてきました。 Reactの恩恵を十分に受けたいのと、追加された機能を検討していきたいというお気持ちから、Reactをv18にあげていくことになりました。…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,537件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,518件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…

前回購入したPCがサイコムのBTOだったので自分で組み立てるのはSandy Bridge(第二世代のやつ)以来。 数世代飛び越えた組みたてでちょいちょい感動したので所感をまとめます。 時々自分の構成を知りたくなるのと散財しすぎを戒めるためのメモ代わりに。 前回の構成 今回の構成 今回のケチりポイント 組み立て中のお写真 MSI MAG Z690 TOMAHAWK Core i7-12700 Noctua NH-U12S redux Samsung 980 PRO 1TB DDR5-4800 32GB[16GBx2] Corsair RM850 Gold 2021 と CoolerMaster …

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,511件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…

遅延読み込み React.lazy() React Suspenseとは？ エラー境界 Suspenseの使い方 注意点 最後に 遅延読み込み 遅延読み込みは最適化手法またはデザインパターンです。 画像、ビデオ、Webページ、音楽ファイル、またはドキュメントのいずれであっても、必要になるまで読み込みを遅らせ、貴重なデータを節約します。 デフォルトのReactはコードベース全体をバンドルし、同時にデプロイします。 Reactのシングルページアプリケーション(SPA)は非常に小さいため、通常は問題ございません。 ただし、コンテンツ管理システムなどのより複雑なアプリを使用している場合、プログラム全体…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,505件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,960 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,497件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥1,84…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,478件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…