フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
I've hired a lot of developers over the years. More than a few of them have come in with a strong belief that our code needed heavy refactoring. But here's the thing: in almost every case, their newly refactored code was found by the other developers to be harder to understand and maintain. It also was generally slower and buggier too. Now, don't get me wrong. Refactoring isn't inherently bad. It'
はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを作成する日記① Tailwindを導入できた ComponentにPropsを渡せた Componentの中でPropsを使用できた Componentをループを使って表示できた React Iconsを導入できた Next.jsでTODOアプリを作成する日
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
【海外記事紹介】フロントエンドの状態管理ライブラリを比較する ー Redux/MobX/NgRx/Pinia/Recoil/Jotai
2月3日、LogRocketが「TypeScriptの状態管理ソリューションを比較する」と題した記事を公開しました。この記事は海外で非常に好評を博しており、日本のエンジニアにも有益な情報となると考え、概要を紹介します。 2月3日、LogRocketが「TypeScriptの状態管理ソリューションを比較する」（Comparing TypeScript state management solutions）と題した記事を公開しました。 この記事は海外で非常に好評を博しており、日本のエンジニアにも有益な情報となると考え、概要を紹介します（詳しくは元記事をご覧ください）。 この記事では、フロントエンド開発における状態管理に焦点を当て、特にReact、React Native、Vue、およびAngularなどと合わせて使用するTypeScriptライブラリについて詳しく紹介されています。 Redux
This major release: Converts the codebase to TypeScript Updates the packaging for better ESM/CJS compatibility and modernizes the build output Requires that action.type must be a string Continues to mark createStore as deprecated Deprecates the AnyAction type in favor of an UnknownAction type that is used everywhere Removes the PreloadedState type in favor of a new generic argument for the Reducer
JSer.info #711 - Deno v2.0.0がリリースされました。 Announcing Deno 2 Deno 2.0 Release Candidate Node.jsとの互換性の改善、JSRのサポート改善、Workspaceのサポートなどが行われています。 Deno 1.xから2.xへのマイグレーションガイドも公開されています。 Deno 1.x to 2.x Migration Guide TypeScript 5.7 Betaがリリースされました Announcing TypeScript 5.7 Beta - TypeScript 初期化されてない変数のチェック、相対パスの.tsを出力時に.jsへと書き換える--rewriteRelativeImportExtensionsフラグの追加されています。 また、--target es2024のサポート、Node.js 2
はじめに React Developer Roadmap 2024 を眺めつつ筆者の独り言を書く記事です。筆者の React 歴は 3 年ちょっとです。 Visit JavaScript Roadmap React のロードマップは JavaScript の勉強が最初。Promise を基本とした非同期処理やクロージャ周りを理解しておくと、React への理解も更に深まった記憶がある。 非同期周りはこの本に助けられた。 CLI Tools Vite Create React App 新規に CSR の SPA を作る場合 Vite 一択だと思う。理由は、設定簡単 + 早い + 拡張性 ◎ + エコシステムが大きい。Vite は SSR もできるがライブラリ作者向け。 (宣伝) Vite を使用した環境構築方法は先日記事にしました。 なぜ Create React App が使われなくなりつ
JSer.info #672 - Redux Toolkit v2.0.0に関連してRedux 5.0.0がリリースされました。 Release v5.0.0 · reduxjs/redux Redux 5.0.0では、TypeScriptへの書き換え、CJS/ESMのdual packageに変更、ES2020形式で出力するように変更。 また、createStoreを非推奨として、Redux Toolkitへの移行を推奨しています。 Release v2.0.0 · reduxjs/redux-toolkit 同時にリリースされたRedux Toolkit v2.0.0では、Redux v5/Reselect 5.0へのアップデート、createReducer/createSliceのextraReducersにおけるオブジェクト構文のサポートの削除などが行わています。 その他にも、mi
この記事は Panda株式会社 Advent Calendar 2023 18日目の記事です。 Panda株式会社は東京大学松尾研究室・香川高専発のスタートアップで、AR技術とAI技術を駆使したシステム開発と研究に取り組んでいます。 このアドベントカレンダーでは、スタートアップとしての知見、AI・AR技術、バックエンドなど、さまざまな領域の記事を公開していきます。 自己紹介 筑波大学修士1年の山浦です。普段はWeb3のベンチャー企業でエンジニアをしながらHCI系の研究室で力覚ディスプレイの研究をしています。Panda株式会社には、Webフロントエンド開発のお手伝いという形で関わらせていただいています。 この記事は、そのフロントエンド開発のお話です。 背景・課題意識 背景 ~高度なGUI操作を行うSPA開発~ 今回、テキスト入力、クリック、ダブルクリック、ドラッグアンドドロップなどのGUI操
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @snamiki1212 です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「CANARY」: BtoC のお部屋探しポータル（アプリ/Web） 「CANARY Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のアプリで利用している技術スタックについてまとめています。 （この記事は自分含めてアプリの開発をメインで行っていたエンジニア @yoshi-jr / @centerfield77 と共同で執筆しています） この記事を読んでわかること CANARY のアプリについて技術スタックの全体像・概要が理解できる 話すこと CANARY のアプリのアーキテクチャ C
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good Refactoring vs Bad Refactoring
Next.jsでTrello風タスク管理アプリを作成する日記⑤ - Qiita
Release v5.0.0 · reduxjs/redux
2024-10-16のJS: Deno v2、TypeScript 5.7 Beta、ES2025に入る5つのProposal
React Developer Roadmap 2024 を眺める
2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0
SPA を 軽量DDD と redux-saga で書いてみたら実装・保守が楽になった
2024年｜CANARY アプリの技術スタック