システムで扱うステータスの分解と変換
初めに レバテック開発部の今井です。 ソフトウェア開発において、データの状態管理は非常に重要です。注文の状態、ユーザーの認証状態、プロジェクトの進行状態など、多岐にわたる状況で、適切な状態管理が求められます。しかし、ビジネス要件の変化や新機能の追加に伴い、状態管理が複雑化し、保守が難しくなることがあります。 この記事では、データの状態管理を簡単にするためにMECEを初めとした方法で分析を提案します。これによって、柔軟で効率的なシステム設計が可能になることを目指します。 TL;DR MECEの原則を使ってenum型ステータスを分解する方法を解説する MECEによる分解から一次情報と二次情報という区分を提案し、分析の高度化を目指す 一次情報と二次情報の区分とシステム間のデータ連係の関係性について考察する 対象読者 システムの保守性・拡張性に興味関心のあるエンジニア enumをMECEに分解する
目次 目次 はじめに 企画LPの儚さ 企画LPをアーカイブする！ 仕様 開発について 技術選定 ちょっと技術の話 スクラム開発 ユーザーの反応 おわりに はじめに こんにちは！ ZOZOTOWN企画開発部・企画フロントエンド1ブロックの秋山です。ZOZOTOWNトップでは、セール訴求や新作アイテム訴求、未出店ブランドの期間限定ポップアップ、著名人コラボなどの企画イベントが毎日何かしら打ち出されています。私はそのプラットフォームとなる企画LPをメインに実装するチームに在籍しています。 チーム特性としては以下のようなものがあります！ クリエイティブコーディング寄りの実装をする機会に恵まれやすい 普段のLP案件内では、エンジニアよりも他職種（デザイナー、PM、ビジネス職）と連携することが多い 企画LPの儚さ 定常的なページと違って、開催期間が定まっている企画LPの命は儚いものです。月に20本ほど
フロントエンドの状態管理ツールの１つである Recoil。状態管理したい変数を atom や selector に定義し、get や set、reset で、取得、更新、初期化する、というのが基本的な使い方なんだと理解しました。ただ、Recoil 初心者としては、useRecoilState や useRecoilValue などの React hooks との違いがいまいちピンと来なかったので、整理しました。 Recoil とは Recoil は React のための状態管理ライブラリで、コンポーネント間での状態共有を簡単にすることを目的としています。Recoil では、Atom と Selector、そしてそれらを利用するためのいくつかの hooks が提供されています。 Atom と Selector Atom: Recoil の状態管理の基礎となる概念で、管理したい変数の状態を定義
はじめに こんにちは、デジタルエンジニアリング部の島田です。 今回はフロントエンドエンジニアにとって基礎的でありながらもはっきりとした正解のない「CSS設計」について、記事を書きました。 私が長らく試行錯誤し落ち着いた、主流の設計手法の（主観的ですが）良いとこどりをしたものをご紹介したいと思います。 CSS設計を考える理由 CSSに触れたことがある人であれば分かるかと思いますが、CSSはLP1ページであろうと数百行の記述になりがちです。 また、サイトの規模が大きくなればなるほど、CSSを1ファイルで保守をしていくのは難しくなっていきます。 そのために考えられたのが「CSS設計」というものであり、内容としては主にクラスの命名規則やファイル構成をルール化したものになります。 どんな基準で作られているか 皆さんは「よいCSS」とはどんなものだと思いますか？ 「よいCSS」には有名な4つの定義があ
実務でAmazon EKSを設計するタスクを任されたため、そもそもKubernetesがよくわかっていないのでそれぞれコンポーネントなどを理解するために本記事を執筆します。 前提としてコンテナとは何か？ということはお話しません。 Kubernetes is 何 すごく簡単にいうと複数コンテナを作って、監視して、何か障害が発生したら自動でコンテナを停止させて、新しいコンテナを作って運用されるため、運用を自動化してくれるという優れものです。 Kubernetesは「宣言型」と言われるツールでmanifestファイルと呼ばれるjsonまたはyml形式でコードを記述することで望ましい状態を定義することができます。 望ましい状態を定義することで、指定した数のコンテナ数を維持することができたり、ネットワークの設定を行ったりすることができます。 宣言型と手続き型の違い Kubernetesは宣言型のツー
【Flutter】数万行のリファクタリングをしている話
Lintを強くする Flutterの標準のプロジェクトでは、flutter_lints/flutter.yamlが使用されます。ここに、freezedなどの自動生成のファイルを除く設定だけを入れていました。 しかしながら、これがawaitのつけ忘れ(discard_futures, unawaited_futuresで改善)やソースコードの読みにくさ(require_trailing_commasで改善)に繋がってしまっていたため、 Lintを強く設定し、さらに後述の目的でriverpod_lintも導入しました。（なおすのがたいへん〜〜〜） これ、あとからやるのはものすごく大変なので、もしも今からFlutterの新規のプロジェクトを作ろうとしている方がいれば、最初から入れられるものは入れてあげてください ソースコードの修正量の多い大半の理由は実はprefer_double_quotesと
はじめに 本記事では、Next.jsでNextAuth.js（auth.js）を使ってサインアップ画面を作っていきます。 Next.jsはSSR（Server-side Rendering, or Dynamic Rendering）が基本だと思っているのですが、フォームを扱う場合にはCSR（Client-side Rendering）で行う必要があります。Next.jsでユーザーのインタラクティブな操作を伴う場合、どうしてもサーバー側でのレンダリングではなく、クライアントサイドでのレンダリングが必要なためです。 Cognitoでメールログインを扱う場合、メールとパスワードを入力する画面・メールを認証する確認コードを入力する画面・登録完了画面・エラー画面など扱うべき状態があります。useContextやjotai、Reduxでも状態そのものの管理はできるのですが、状態遷移を含めた管理は結局
【Flutter】AsyncValueを楽に扱う方法
RiverpodのAsyncValueを使うことで、開発者は非同期処理を簡単に管理できます。しかし、現状として開発者がAsyncValueの扱い方に悩んでしまったり、手を焼いてしまっているケースも少なくありません。 この記事では、AsyncValueの取り扱いをシンプルにする方法を紹介し、開発者がAsyncValueを使用する際に抱えてしまいがちな冗長性や複雑性を解消することを目指します。 AsyncValueを管理する共通Widgetを作る loadingとerrorの時に返すWidgetが大体同じ場合、それらをデフォルトで返すWidgetを用意して、AsyncValue.dataの時のWidgetのみを必要とする構造を持つWidgetを用意した方が楽に済みます。 他にもloadingからdataに移った時のフェードなど、状態管理と連動する細かい表示の設定も、この共通Widgetの内部に
はじめに React19で新たに追加されたuseActionStateは、非同期アクションの状態管理を簡素化し、エラーハンドリングや状態管理を容易にします 本記事では、useActionStateの使い方とその利便性について解説していきます useActionState関数とは useActionStateは非同期アクションの実行状態、成功時の状態、エラー時の状態を一元管理できるフックです これにより、非同期アクションの実装が簡潔になり、コードの可読性が向上します React 19の実装例: useActionStateの使用 import { useActionState } from 'react'; const [error, submitAction, isPending] = useActionState( async (previousState, newName) => {
詳細ガイド：ReactでWebSocketを扱う
Apidogは、WebSocketの検証とデバッグに完全無料なツールとして、WebSocketサーバーへの接続確認やメッセージ送受信のテストなどがGUIベースで簡単に行えるため、開発効率の向上が期待できます。 ApidogはWebSokcetの動作を正確に確保することができますので、下記のボタンから完全無料で利用を始めましょう👇👇👇 buttonWebSocketとはWebSocketは、クライアントとサーバー間で実時間の双方向通信を実現するためのWeb通信技術です。これまでWebアプリケーションでは、AJAXなどの通信方式ではリアルタイム性に限界がありました。 WebSocketを使うことで、サーバーからクライアントへのデータのプッシュ送信が容易に実現できるため、チャットや cdata変更通知などの実時間性が必要な用途に向いています。 また、HTTPベースの通信と比べて接続オーバー
めでた！の技術構成
はじめに こんにちは！Altive株式会社のリードエンジニアの小林遼太（@naipaka）です🦙 リリースしてから少し時間が経ってしまいましたが、4月に弊社でリリースした「めでた！」という家庭菜園をサポートするアプリの技術構成についてまとめました。 アプリ概要 「めでた！」は、気軽に家庭菜園を始めて、楽しく続けられることを目指したアプリです。 現在のアプリの機能は以下の通りです。 家庭菜園のようすを撮影し、手軽に日記を書き残す 他ユーザーの日記をみて、他の人の育て方を学んだり、成長の喜びを共有する 複数枚の画像からタイムラプス動画を作成する 弊社ではFlutterでのアプリ開発をメインに行っていますが、よりスピーディーな開発を目指してサーバーサイドも自前で実装していく方針になりました。 今回のアプリがそれを実践した初めてのプロジェクトとなります！ 詳しい背景は以下の記事をご覧ください。
はじめに React19では、新たに<form action={非同期関数}>の形式で、フォームアクションが追加されました これにより、フォームの送信時に非同期関数を直接呼び出せるようになり、よりシンプルなコードが書けるようになります 本記事では、この新機能の使い方とその利便性について詳しく解説します また、この新機能useFormStatusというフォームの送信中の状態を取得するフックも追加されてより利便性が向上しました formアクションの使用 以下の例では、フォーム送信時にhandleSubmit関数が非同期に呼び出されます React19の実装例 import { useState } from 'react'; import { useFormStatus } from 'react-dom'; async function handleSubmit(formData) { co
Appleは現地時間6月25日、「AirPods」シリーズとBeatsの一部イヤホンに“なりすまし攻撃”される不具合があるとして、セキュリティアップデートを提供開始した。 AirPods Pro(第2世代) Appleが公開したサポートページによると、イヤホンやヘッドホンが以前にペアリングしたことのあるデバイスに接続を要求しているときに、Bluetoothの範囲内にいる攻撃者が“意図したソースデバイスになりすまし”、対象のイヤホン/ヘッドホンにアクセスできるという不具合があるとのこと。今回のアップデートを適用すると、状態管理が改善され、認証の問題が解決するという。 対象機種の最新ファームウェアバージョンは以下の通り。 AirPods Pro(第2世代)：6F8 AirPods Pro(第1世代)：6A326 AirPods(第2世代以降)：6A326 AirPods Max：6A326 P
Flutter実践開発 ─ iPhone／Android両対応アプリ開発のテクニックに参加してきた - 天の月
forkwell.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。 会の概要 会の様子 講演〜FlutterビギナーのためのWidget完全攻略〜 Flutterとは？ 環境構築の要点 Widget前編 Widget後編 書籍のポイント Q&A ネイティブでできることはFlutterですべてできるか？ riverPodを利用する際、MVVMで開発するとriverPodとViewModelとComsumerStatefulWidgetの3つで状態管理することになる。riverPodはグローバルなアプリ全体を通した状態管理をしてViewModelはページ専用の状態を監視するものだと思うが、StatefulWidgetにもページ独自の定義を書いてしまい、何が正しいのかわからない DateSource層やRepository層で取得するデータを
FlutterNinjas 2024 に参加してきました🥷✨
こんにちは！ こんにちは！kuno です！ 2024/6/13-14に docomo R&D OPEN LAB ODAIBA で開催された FlutterNinjas Tokyo 2024 に参加してきました！ とっっっっても最高なイベントだったので，セッションの概要や感想を書いていきます💓 セッション White labeling at scale using CI/CD Speaker: Kevin Suhajda codemagic の方による発表でした！ホワイトラベルのアプリを構築して公開する手順についての発表で，codemagic の公式サイトにもホワイトラベルの公開手順について載っています． ホワイトラベル化とは，ある企業が独自で開発した製品やサービスを他の会社が自分のブランドとして販売できる権利のことです．（A社が開発したアプリを，B社が自社のロゴやデザインを追加してあたか
継承と委譲の使い分けと、インターフェースの重要性について
この記事は、「継承と委譲はどういった性質の違いがあり、どういった基準で使い分けているか？」「インターフェースは何が嬉しいのか？」といった点に関して自分なりに言語化を試みたものです。 TL;DR 継承は子が親と同じ能力や責務を獲得する。委譲は子が親を単なるツールとして所有するだけで、能力や責務は同じにはならない。 子にとって親は単なるツールである場合は委譲を使うのが良い。継承してしまうと子が複数の責務を負うことになり、そのことによる不都合が生じる。 逆に、子が親と同じ責務を持つべき場合には継承を使う。委譲を使うと、子が親と同じ能力を持っていないことによる不都合が生じる。 インターフェースを使うことで責務の分離を強制することができる。インターフェースを適切に設計することができれば、改修時の影響範囲が最低限に留まるなどシステムの保守性や堅牢性が向上し、テストの容易性も得られる。 継承と委譲の違い
useRefを使った値管理ガイド
概要 useRef は DOM にアクセスするために使用できますが、コンポーネント内に値を保持するためにも使えます。 この記事では useState と useRef の違いを見ながら、どのようなユースケースで useRef が有効かをサンプルを見ながら解説します。 しかしながら useRef() は ref 属性で使うだけではなく、より便利に使えます。これはクラスでインスタンス変数を使うのと同様にして、あらゆる書き換え可能な値を保持しておくのに便利です。 はじめに DOM やコンポーネントインスタンスの参照を得る以外に useRef を使用する機会はそこまで多くありません。大抵の場合 useState やライブラリによる状態管理で事足りるからです。 ですが特定のケースにおいて ref を使用するとパフォーマンスに優れ、シンプルな実装にできることがあります。useRef が有効なケースを知
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ZOZOTOWNの企画LPをアーカイブする！ - ZOZO TECH BLOG
Recoil get/setとuseRecoilStateの使い分け
CSS設計を数年試行錯誤して辿り着いた一つの答え（2024年版）
Kubernetes is 何 - Qiita
【NextAuth.js/認証】Cognitoのサインアップの状態遷移をXStateで楽に管理する
React19にuseActionStateが導入されて非同期処理がシンプルになった - Qiita
React19のformアクション機能の魅力 - Qiita
AirPodsやBeatsイヤホンに“なりすまし攻撃”される不具合、修正アップデート