決済ステータス定義の最適解
ネットスーパーシステムの決済ステータス表現 (状態遷移) は複雑だ。 その理由は要求要件が多いことに起因しているが、多いことが悪いのではなく、それに応えなければシステムとして真の価値を発揮できないからで。逆に問題解決できなければ、著しく利便性を落としてしまうので、必須要件という位置付けにある。 前提文脈を汲み取りづらいモデリングなので、問題解決例を示すのはあまり見かけないが、自分が考えた決済ステータス定義の答えを示す。 この内容は過去にブログや登壇で話した内容の延長でもあるので、過去の内容も参考にすると良いかもしれません。 「E-Groceryにおけるカード決済処理の難しさと設計戦略」 「ネットスーパーの買い物体験を支える工夫と決済機能実現の過程」 前提条件 注文から支払い完了まで時間差がある注文後に注文内容の変更ができる品切れが発生するケースがある販売員が注文内容を変更できる0円での支払
GitHub - mitsuruog/clean-code-javascript: :bathtub: Clean Code concepts adapted for JavaScript
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript. Robert C. Martinの本Clean Code、ソフトウェアエンジニアリングの原則をJavaScriptに適用させたもの。 これはスタイルガイドではありません。JavaScriptで可読性が良く、再利用でき、リファクタリング可能なソフトウェアを提供するためのガイドです。 Not every principle herein has to be strictly f
“新アーキテクチャ導入”における失敗と成果 GMOは何を予測し、何を準備し、何に失敗してきたか？
スキルの習得支援に特化した「イネイブリングチーム」を結成 成瀬允宣氏：ということで、まず1つのサービスを打ち出すために、メンバーと一緒に作り始めました。まずはコンセプトの説明からですね。道は遠いです。 かつ、フレームワーク以外にさらに必要なものが何か、みなさん、思い浮かびますかね？ ここに書いたとおりですが、メンバーはRDBを使って作るシステムではなく、今まで見たことがないアーキテクチャを習得しなきゃいけません。でも、我々、組織は生きているので現業は続ける必要があります。食糧がなければ死んでしまいます。なので現業をおろそかにはできません。 結果、新しい技術をキャッチアップするために、なにかしらの施策が必要だと私は考えました。 そこで、この本ですね。チームトポロジー、イネイブリングチームという、スキルの習得支援に特化したようなチームが必要だと考えました。なので、イネイブリングチームを結成しま
仕様の複雑化、過渡期特有の難解なコード、技術スタックの老朽化… システムの健全な成長を妨げる要因に対する基本戦略
仕様の複雑化、過渡期特有の難解なコード、技術スタックの老朽化… システムの健全な成長を妨げる要因に対する基本戦略 アーキテクチャ刷新の現場：未知の技術を採用するために #1/2 アーキテクチャ刷新の現場における取り組みと成果を発表 成瀬允宣氏：みなさん、こんにちは。GMOインターネットグループでデベロッパーエキスパートとして活動しています、成瀬允宣と申します。本日はよろしくお願いします。 私、所属はGMOインターネットグループ株式会社で、システム統括本部に所属している一般のプログラマーではありますが、私からお送りするお話は、「アーキテクチャ刷新の現場」で、ここ数年……2年ほどですかね、アーキテクチャを刷新する現場で一番前を走っていたので、その現場のお話をしようかなと思っています。 非常に苦労して、やっと花開いてきたところなので、今日は、何を予測して、何を準備して、そして何を失敗したのか。そ
React Application Architecture for Production〜これ一冊で全てが網羅〜 - Qiita
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
メルカリWebのマイクロサービス化、その4年 | メルカリエンジニアリング
Author: @urahiroshi, Engineering manager of Web Platform team 2022年8月4日、メルカリで “web-2” と呼ばれるサーバがシャットダウンされました。これはメルカリWeb版の開発に携わっているチームにとって、一つの区切りとなる出来事でした。 web-2はPHPで記述されたwebサーバで、2015年から https://www.mercari.com/jp/ 配下のコンテンツを配信していましたが、現在では複数のWebマイクロサービスがその機能を担っており、 https://www.mercari.com/jp/ 配下のページは後継となるWebマイクロサービスが配信するページへリダイレクトされています。 メルカリWebのマイクロサービス化に向けた開発が始まり、最終的にweb-2がシャットダウンされるまで、実に4年以上の期間がかか
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」 - Qiita
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」設計アンチパターンReact 結論 (2023/06/03 追記) React の開発においては、 コロケーション Co-location の原則に従って、ファイルをディレクトリごとに分類しましょう。チームメイトや将来の自分にとって分かりやすいコードベースになります。 スキット「書くときは楽だけど...」 == 某日 == 太郎くんの今日のタスクは、「トーストを作る」です。 イメージ図 太郎くん 「コンポーネントを作るから..」 「ファイルの場所は components/Toast.tsxでええか。」 「useState でローカルに状態管理して、表示を切り替えればええやろ。」 太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやす
最速でフロントエンドを刷新するための開発フロー - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 フロリアの詳細については 次の記事をご覧ください。 今回は、フロリアのチームの一つで、利用者に気づかれない形で React への置き換えを行っている Mira チーム1の開発・テストフローの紹介をします。 "最速で" React に置き換えたい Mira チームはただ React に置き換えるのではなく「最速で React に置き換える」という目標があります。 フロリアの各チームはそれぞれのチームごとにオーナーシップを持っており、チームごとに意思決定を行っています。Mira チームでは「最速で置き換える」という目標に向かって、開発スピードを向上
WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行 - ZOZO TECH BLOG
はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。 なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。 リプレイス前の環境 リプレイス前の環境はオンプレミスの環境にロードバランサー、Windowsサーバー(IIS)があり、そこでVBScriptが動いています。VBScriptでテンプレートHTMLにデータを流し込み、ブラウザに表示する仕組み
kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている 現状 今後 フロントエンドが技術的にもチーム的にも分割されている モノリスな構成からの脱却 アーキテクチャとチーム（
Google純正の構成図作成ツールが登場したので早速使ってみた
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
DDDにおけるドメイン層オブジェクト設計の基本方針[ドメイン駆動設計] - little hands' lab
株式会社ログラスの松岡(@little_hand_s)です。 ドメイン層のオブジェクトを設計する際に、重要な基本方針があります。 ドメインモデルの知識を対応するオブジェクトに書く 常に正しいインスタンスしか存在させない この2つを守ると、非常に保守性の高いコードにすることができます。 以下、詳細に解説します。 ドメインモデルの知識を対応するオブジェクトに書く ドメイン知識(ルール/制約)を表現する実装を、ドメイン層のオブジェクトに寄せていきます。 この判断は、「ドメインモデル図に書かれた吹き出しの内容が、どの層で実装されているか」という基準に基づき行います。 この基準はコード設計の指針として非常に役立ちます。 設計の良し悪しというのはさまざまな基準があるため、レビューをしていてもいわゆる「俺の考えた最強の設計」同士が戦ってしまうことがあります。 しかし、「ドメイン知識はドメイン層に書く」と
![DDDにおけるドメイン層オブジェクト設計の基本方針[ドメイン駆動設計] - little hands' lab](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf7c2977c5538fe370d1ff60a78958464a9e1f3f/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fl%2Flittle_hands%2F20220125%2F20220125074432.png)
松岡@ログラス/DDD,アジャイルの質問箱です
定義する人によって異なります。 大事なのは、そのクラスの責務(それは何を表す/何をするクラスなのか)を考えることです。引数オブジェクトは責務が明確ですね。特定のメソッドの引数を表すオブジェクトですね。名前もそのままで良さそうです。 では、データ転送オブジェクト(DataTransferObjectなので変換ではなく転送ですね)は何を表す、何をするオブジェクトでしょうか？おそらく、ここが曖昧ですね。転送とは何を表すのでしょう。これは、定義しないと定まらないのです。だからこそ、プロジェクトにおいてきちんと意味を定める必要があります。 例として、あくまで私が普段使用している定義では、オニオンアーキテクチャでユースケース層からプレゼンテーション層に値を受け渡すオブジェクトにDTOという名称をつけています。 https://gyazo.com/8232196108a851d6120f8fb09921
オブジェクト詰め替えが面倒臭い？マルチカーソルを使えば10秒でできます - little hands' lab
面倒臭いオブジェクト詰め替え オニオンアーキテクチャ、クリーンアーキテクチャなどの階層化されたアーキテクチャを使用する際、レイヤーの境界でオブジェクトの値を詰め替える必要性が発生します。 オブジェクトを詰め替えることでレイヤーの依存関係を断ち切り、一度書いた後の保守性を高めることに大きく貢献するのですが、筆者の観測範囲では単調作業に感じるせいかかなり嫌われる傾向があるように感じます。 そして、そのような詰替を嫌うばかりにオブジェクト詰め替えをやめてしまうこともありますが、それは非常にもったいないことです！！ なぜなら、「初期実装の数分の重要性 <<<< その後の保守性の重要性」だからです。 なので、できればきちんと詰め替えしてレイヤーの依存関係を保って欲しい、ということで、そのために詰め替えが超簡単にできる方法をご紹介します。 まずはデモご覧ください。 class Entity( val
AWS Lambdaによる進化的アーキテクチャの構築 | Amazon Web Services
Amazon Web Services ブログ AWS Lambdaによる進化的アーキテクチャの構築 この投稿は、メディアとエンターテインメントのプリンシパルソリューションアーキテクトであるLuca Mezzaliraによって書かれました。 俊敏性により、必要に応じてワークロードを迅速に進化させ、新機能を追加したり、新しいインフラストラクチャを導入したりできます。コードベースでアジリティを実現するための主な特徴は、疎結合コンポーネントと強力なカプセル化です。 疎結合は、テストカバレッジを改善し、一貫したリファクタリングを作成するのに役立ちます。カプセル化を使用すると、実装ロジックを明らかにすることなく、サービスとのやり取りに必要なものだけを公開できます。 進化的なアーキテクチャは、設計の俊敏性を実現するのに役立ちます。「進化的アーキテクチャの構築」という本の中で、このアーキテクチャは「複数
Clean Architecture on Frontend （翻訳） - Qiita
こちらはDEV Communityに2021年9月2日に投稿され、現在反響を巻き起こしているフロントエンドにおけるクリーンアーキテクチャの実装についてのAlexさんの記事になります（原文はこちら)(twitterにて翻訳掲載許可取得済み）。 かなり大ボリュームな超大作記事となっておりますが、Reactなどを使ったフロントエンドプロジェクトのディレクトリー構成やファイルごとの責務の切り分けのベストプラクティスなどの決定版といえるものがまだまだ出てこない中で、個人的にまさに待ち侘びていたような内容の記事かと思い、是非日本のフロントエンドコミュニティでも知見が共有されればと思いました。 それでは以下、本文です。 *翻訳は大部分をDeepL翻訳によって行っていますが、適宜修正してあります。 少し前に、私はフロントエンドにおけるクリーンアーキテクチャについての講演を行いました。この記事では、その講演
[初心者向け]AWS Well-Architected ドキュメントの歩き方 | DevelopersIO
2022バージョンについて 新バージョンをリリースしています。 今後はこちらをご参照ください。 以下2021バージョン AWS認定トレーニング講師の平野@おんせん県おおいたです。 今日はWell-Architectedがテーマです。 はじめに AWS Well-Architected フレームワークとは AWSとAWSユーザの10年以上の経験からまとめられたベストプラクティクス集です。 いいかえれば、多くの失敗反省を元に作られています。 これからAWSを活用する際に、皆さんが同じ失敗をしないためのガイドラインとも言えます。 AWSを始めたら、まずは目を通してもらいたいドキュメントです。 とはいえ... とはいえ、このドキュメントなかなか読みづらいです。 私も正直最初は？？？という感じでした。 そこで、これからWell-Architected ドキュメントを読む方のサポートができないかと思い
![[初心者向け]AWS Well-Architected ドキュメントの歩き方 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/61b8033f05d1e5ba2c6b80dad8bd07c481d8078f/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F06%2FWA_guide-1.png)
Cloudcraft – Draw AWS diagrams
Automatically create AWS and Azure architecture diagrams in secondsTry Cloudcraft FreeRequest a Demo Whether you’re building a cloud architecture from scratch, documenting your current environment, or looking to optimize cloud cost, Cloudcraft allows you to visualize and communicate your architecture with ease. Build diagrams from scratchCreate a professional architecture diagram in minutes with a
経年劣化に耐える ReactComponent の書き方 - Qiita
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
