弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
Design Systemへの取り組み 〜Frontend編〜 | メルカリエンジニアリング
この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。 現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。 MercariにおけるDesign System Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design
React Storybookを使用したVisual regression testingの導入
全体の流れ まず、今回使用するメインツールであるLOKIとREG-SUITの紹介をします。 次に目指す全体像を共有し、最後にそれを実現するための方法を説明します。 利用技術の説明 LOKI Visualized Testを実施するためにはStorybookのページにアクセスし、キャプチャする仕組みが必要です。 この機能を持ったツールがLOKIです。 上記に Visual Regression Testing for Storybook とある通り、LOKIはリグレッションテストまで実施することのできるツールです。 しかし、以下の理由から差分比較部分は別のツールを使うことにしています。 画像をGitにコミットしなくてはいけない 出力結果が画像のみのため結果が一目で分からない 差分の表示方法が好みではない REG-SUIT CUIでVisual regression testingを実施するツ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Guide to Component Driven Development (CDD)
