Feature-Sliced Designというフロントエンドアーキテクチャ設計方法論をプロジェクトに導入してみたところ、 個人的には良いと感じているので、どのような設計方法論なのか、具体的にどのような部分が良いと感じたかを紹介していきたいと思います。 Feature-Sliced Designとは？ Feature-Sliced Designは、フロントエンドアプリケーションを対象としたアーキテクチャ設計方法論です。公式サイトでは、「コードを整理するためのルールと規約の集大成」と記載されています。 Feature-Sliced Designの設計方法論 Feature-Sliced Designでは、プロジェクトはLayerで構成され、各LayerはSliceで構成され、各SliceはSegmentで構成されます。 Layer Feature-Sliced Designの第一階層をLay

そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという

こんにちは！ 私はしばもと（@handle-name silverbirder）と申します。株式会社マネーフォワードでWebフロントエンド開発を担当しています。最近、ChatGPTの進化に驚くばかりですね。このブログ記事は、ChatGPTの力を借りて執筆しています。 今回、私が3ヶ月間取り組んできたWebフロントエンドのレイヤードアーキテクチャを用いたリアーキテクチャについてお話ししたいと思います。Webフロントエンド分野は他の分野に比べて変化が激しいため、適切なコードベース設計がなされないと、保守性がすぐに低下してしまいます。 次のような苦労をされた経験がある方々に、ぜひこの記事を読んで頂きたいです。 「どこからコードを読んだら良いか、書いたら良いか悩む」 「何かを変更すると、関係ない部分も変更してしまう」 「無駄にGraphQLのデータを参照している」 今回お話する設計題材となる対象プ

この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され

この記事は、マネフォアドベントカレンダー2022 14日目の投稿です。 13日目は 廣瀬 さんで「チーム運営の仮説検証サイクルを高速化させるために、新卒スクラムマスターが取り組んだこと」でした。 本日は 岐阜在住で名古屋開発拠点のsainu が「マネーフォワードで実践したマイクロフロントエンド」について書きたいと思います。 はじめに マイクロフロントエンドは、2022年10月にBuilding Micro-Frontends（Luca Mezzalira 著）の翻訳版がオライリーから出版されて少し話題になってました。ThroughWorks Technology Radarには2016年から登場して、2019年にAdoptになっています。 私は今年の年初にマイクロフロントエンドという言葉を初めて知りました。今年、名古屋拠点で開発しているマネーフォワードクラウドの業務基盤システムでマイクロフ

この記事は Money Forward Engineering 1 Advent Calendar 2022 11 日目の投稿です 🎄 昨日 10 日目は cabossoldir さんによる 『コードレビューのとき、私は何をレビューしているのか？』 でした。 🙈 TL;DR Fragment Colocation とは、コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) すること Fragment Colocation を導入することで、「Query や Mutation を実行するコンポーネント」と、「それらの結果を必要とするコンポーネント」との関心の分離ができる Query, Mutation, Fragment はそれを実行するあるいは必要とするコンポーネントと同じファイル内に宣言すると依存関係が見やすく、変更が