2026-01-19 奥山様 フレームワーク比較レビュー

日時

2026年1月19日（月）10:00～11:00

場所

Google Meet: https://meet.google.com/fkz-optp-ozk

参加者

• 日本コンピューター: 櫻井、桐明、青木、加藤
• 奥山様（minop1205）

背景

• 母子手帳アプリ「Tomoni」の開発を徳山様に作業委託していた
• 社内事情により「脳活ラボ」（認知症予防アプリ）の開発・運用にリソースがシフト
• 母子手帳アプリの開発は現時点で一旦ストップ中
• 今後の協力体制・契約面について相談

議題

1. フレームワーク比較・サンプル画面のレビュー（技術共有）
2. パフォーマンス計測の進捗・方針
3. 今後の作業内容・契約面の相談（エンジニア退出後）

議事内容

1. フレームワーク比較・サンプル画面レビュー

徳山様が作成したフロントエンドフレームワークのリポジトリについて報告を受ける。

対象フレームワーク

• TanStack
• Next.js (SSR)
• Next.js (CSR)
• Remix (React Router v7) (SSR)
• Remix (React Router v7) (CSR)

実装内容

• 基本的な画面遷移（一覧→詳細）のサンプル画面

備考

• TanStack、Remixは徳山様が業務で使用経験がなく、勉強しながらの作業だったため時間を要した

2. パフォーマンス計測

• これからパフォーマンス計測を実施予定
• 1月中にレポート提出予定

3. 今後の契約・作業について

（エンジニアメンバー退出後に協議）

現状の整理

• 現タスク（フレームワーク比較・パフォーマンス計測）で一区切り
• 今後どのような作業をお願いするか検討
• 契約面の相談

今後の作業案

タスク1: LINE公的個人認証調査・PoC実装

• スコープ: 技術調査 + PoC実装まで
• 実装場所: Tomoni（母子手帳アプリ）のコードベース内
• 活用先: Tomoni および 脳活ラボ（共通機能として）
• 優先度: 高（他チームメンバーとの調整不要で進めやすい）
• 緊急度: 低（具体的な提供先は未定）
• 開始時期: すぐに開始可能

タスク2: 脳活ラボ管理サイトUIブラッシュアップ

• スコープ: 現状分析 → デザインシステム策定 → 実装まで
• 内容:
  • 徳山様の観点でのUI改善点レビュー
  • デザインシステムの言語化（色・タイポグラフィ・コンポーネント規約）
  • 実際のUI改修
• 優先度: 中（4月リリース後に着手）
• 制約: 現在チームメンバーが開発中のため、4月以前は進めづらい
• 開始時期: 4月以降

進め方の想定

1. 【即時】LINE公的個人認証の調査・PoC実装を開始
2. 【4月〜】脳活ラボUIブラッシュアップに着手

契約形態

• 未定（本日の協議で決定予定）

決定事項

-　脳活ラボのFlutterの置き換え（初回画面のみなど）

• LINE JPKIのPoC
• 脳活ラボ管理サイトのUIブラッシュアップ

アクションアイテム

• LINE JPKI問い合わせ

次回予定

• 日時:
• 議題:

議事録

サマリー

櫻井勇輝は、奥山実が関与した母子手帳アプリ「Tomoni」の開発背景と、加藤岳大、桐明裕一が「ウェルキッズ」に集中し、「Tomoni」が一時停止している現状を説明しました。奥山実は、LIFF上で動かすアプリケーションの検証として、「TanStack」「Next.js」（CSR/SSR）、「Remix」（CSR/SSR）の5つのバージョンでパフォーマンス比較を進めていると報告し、Remixは仕様変更のリスクから採用を避けるべきという個人的見解を述べ、加藤岳大はバンドルサイズによるパフォーマンス差は小さいという見解を示しました。今後のタスクとして、櫻井勇輝は奥山実に「脳活ラボ」のUIブラッシュアップとデザインシステムの整備、そして公的個人認証サービスのPoCを提案し、奥山実は年度内の業務継続に前向きな姿勢を示しました。

詳細

プロジェクトの背景と開発状況

櫻井勇輝（さくらいゆうき）は、奥山実（おくやまみのる）が関与した母子手帳アプリ「Tomoni」の開発背景について説明しました (00:00:00)。会社の状況変化により、加藤岳大（かとうたけひろ）と桐明裕一（きりあけゆういち）は子育て系システム「ウェルキッズ」の開発に集中しており、青木は既存の母子手帳の保守を担当しています。櫻井自身も認知症予防アプリの開発に注力しているため、「Tomoni」のプロジェクトは現在、他の自治体への展開判断のため一時的にストップしている状態ですが、プロジェクト自体は閉じられていません (00:02:03)。

母子手帳アプリの技術的課題

櫻井勇輝は、「Tomoni」の開発において、LIFF（LINE Front-end Framework）上で動作するようにするフィージビリティ検証を奥山実に依頼していたことを確認しました。また、櫻井勇輝は、開発中の認知症予防アプリ「脳活ラボ」もLIFF上で動作しており、足立区でリリース・運用中であると説明しました (00:03:01)。この「脳活ラボ」はFlutterで開発されているため、WebビルドされたLIFFアプリの初回起動が重いという課題を抱えています (00:04:12)。

LIFF上でのアプリケーション開発の検証方針

奥山実は、LIFFで動かす際のパフォーマンスを含めたサンプル構成の検証に取り組んでいると報告しました。検証対象として、フレームワークを使用しない「TanStack」バージョンと、「Next.js」のクライアントサイドレンダリング（CSR）およびサーバーサイドレンダリング（SSR）バージョン、そして「Remix」のCSRおよびSSRの計5つのバージョンで比較を行う計画を共有しました (00:05:13)。これらの検証にあたっては、データフェッチングにはGraphQL、コンポーネントライブラリーにはBase UIを使用し、その他の変数となる部分を固定することで、フレームワーク以外の影響を排除する構成を採ったと説明しました (00:06:40)。

検証対象画面と計測方法

奥山実は、検証の最も基本的なパターンとして、イベントの一覧ページから詳細ページへの遷移（コレクションからシングルへのパターン）をテスト対象のページとして作成したことを示しました (00:08:14)。これらのページは、クライアントサイドレンダリングで最初に描画し、その後GraphQLのエンドポイントからデータを取得して描画する仕組みになっています (00:09:36)。パフォーマンス計測には、LINEのドキュメントで推奨されている「Lighthouse」を使用し、特にパフォーマンススコアを重視して平均値を算出する予定だと説明しました (00:11:02)。

Lighthouseによる計測とRemixの評価

櫻井勇輝がLighthouseについて質問したのに対し、奥山実はGoogleの検証ツールであり、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOの4つの指標でスコアを出すことができると説明しました (00:12:37)。フレームワーク選定について、奥山実はNext.jsとRemixの3つを検討していましたが、Remixに関してはバージョンアップのたびに仕様がドラスティックに変更されるリスクが高く、将来的に資産が使えなくなる危険性があるため、採用は避けるべきだと個人的な見解を述べました (00:14:00) (00:24:25)。

Next.js SSRとCSR/TanStackのコストおよびパフォーマンスの検討

奥山実は、Next.jsのSSRを採用する場合、FirebaseのApp Hostingを使用することになり、無料枠では制限がありコストが発生する可能性があると指摘しました。一方、TanStackとNext.jsのCSRバージョンは、単純にHTML、CSS、JavaScriptをサーバーに置くだけでよいため、コスト面では優位であると説明しました。ただし、ファーストビューの表示速度など、実際のパフォーマンスはこれから計測を行う必要があると補足しました (00:17:13)。

初回起動時のパフォーマンスとバンドルサイズに関する懸念

加藤岳大は、アプリケーションのバンドルサイズが大きくなるイメージがないため、フレームワークの違いによるパフォーマンスの差はあまり出ないのではないかという疑問を呈しました (00:18:37)。櫻井勇輝は、ネットワーク環境が悪いイベント会場などで、初回画面の表示を迅速に行いたいという要件があるため、CSRの場合にルーティングが多いと初回で全てダウンロードされてしまうのか、SSRのように対象画面のバンドルだけを最初に持ってくることができるのかを懸念していると述べました (00:21:09)。加藤岳大は、TanStackにもページ単位の遅延ロード機能があるため、SSRとCSR/TanStackで初期のバンドルサイズに大きな差はないだろうという見解を示しました (00:23:28)。

フレームワーク選定における開発のしやすさの重要性

奥山実は、パフォーマンス以外に、開発のしやすさも重要な選定ポイントであると述べました。奥山実は、Next.jsは「too much」（過剰）な感じがすることや、サーバーコンポーネントなどに苦手意識があるため、今回初めて使ったTanStackの方がすんなり書けるかもしれないという個人的な感想を共有しました (00:25:46)。

今後の開発タスクに関する検討

櫻井勇輝は、1月から3月にかけての今後のタスクとして、「Tomoni」の開発の継続か、「脳活ラボ」への参画、またはその両方を考えていると述べました。奥山実が「脳活ラボ」での具体的な支援内容を尋ねたところ、櫻井勇輝は主にUIのブラッシュアップとデザインシステムの整備を希望しました (00:26:59)。現状、脳活ラボの管理サイトはバイブコーディングで必要な機能が作られているものの、デザインシステムが定義されていないため、見た目の改善とリファクタリングに取り組んでほしい意向を伝えました (00:28:17)。

「脳活ラボ」管理サイトの技術スタックと開発体制

「脳活ラボ」の管理サイトは、「Tomoni」とほぼ同じ技術スタックで、バックエンドはApollo Serverで立てたGraphQL、クライアント側はReact（TanStackを使用）でFirebase Hostingにデプロイされている構成であると櫻井勇輝は説明しました (00:29:34)。管理サイトは、自治体職員が利用し、LINEの友だち登録をした利用者の情報などを確認するシステムです (00:33:15)。また、開発においてはAIツール（Claude）を活用し、ルールの配下にあるUIコンポーネントを基に画面生成を依頼しており、デザインの統一性やリファクタリングを促進するために、これらのルールの整理とメンテナンスも必要だと櫻井勇輝は強調しました (00:34:44) (00:41:54)。

管理サイトのメニュー構成の見直しと開発のバッティング

櫻井勇輝は、管理サイトのメニュー構成は自身で考えたものであり、動線的に見直す余地は十分にあると述べました (00:38:12)。奥山実は、メニュー構成の見直しは、管理したいエンティティやオブジェクトを整理した上で行う必要があるとしつつも、既に運用に乗っている場合は変更が難しい場合もあると指摘しました (00:39:34)。現状、他のメンバーが画面の開発を進めているため、奥山実のUIブラッシュアップ作業がバッティングしないよう、4月以降の計画を立てながら進める必要があるという認識を共有しました (00:40:48)。

LIFFアプリ側のフレームワークと公的個人認証の検討

櫻井勇輝は、「脳活ラボ」のLIFFアプリ側はFlutterで作成されており、費用対効果の観点からフレームワークをガラッと変えることは難しい状況であると説明しました。ただし、パフォーマンス測定の結果次第では、部分的な置き換えを検討したい意向を示しました (00:43:03)。また、セキュリティ上の課題として、現状の4情報（氏名、生年月日、性別、住所）による住民基本台帳連携ではなりすましのリスクがあるため、唯一の遠隔での本人確認手段であるマイナンバーカードによる公的個人認証サービス（LINE JPKIサービス）の実装をPoCとして検討したいと提案しました (00:46:16)。

今後のタスクの確認

櫻井勇輝は、今後の大きなタスクとして、UIブラッシュアップ（管理画面）、LIFFアプリ側の公的個人認証のPoC、そしてFlutterからReactへの置き換え（優先度は低いが検討）の3つを挙げました。奥山実は、LINEの公的個人認証サービスについて、開発者サイト等で調査を開始することを確認しました (00:49:36)。また、櫻井勇輝は、認知症予防アプリ「脳活ラボ」が高齢者をターゲットにしており、LINEを介したサービスであることの背景を奥山実に共有しました (00:51:12)。

サービス展開とターゲット層

櫻井勇輝は、サービスを4月にリリースし、今年の4月以降には花巻市、東京都の稲城市、港区などの自治体へ展開する予定であることを説明しました。このサービスの主なターゲットは65歳以上の人々であり (00:57:16)、高齢者の方々が利用しやすいようにLINEを使用していると奥山実へ伝えました (00:58:41)。櫻井勇輝は、将来的には40歳や子供世代にも広げ、高齢者を取り巻く人々への認知症理解を促したいと考えていることも付け加えました (00:57:16)。

公的個人認証と「xID」の利用

奥山実が個人認証に関するドキュメントの場所を尋ねたことに応じ、櫻井勇輝は、練馬区のアプリではマイナンバー認証に「xID」を使用していると説明しました (00:58:41)。公的個人認証を自社で実装する際のハードルが高いこと（総務省の認定や多額の費用など）に言及し (01:00:04)、「xID」はマイナンバーカードからのデータ抽出をSaaSとして提供し、API呼び出しだけで認証を可能にするサービスであることを奥山実に説明しました。奥山実は、この説明からLINEを使った公的個人認証サービスについてもイメージを得ることができました (01:01:07)。

ドキュメントアクセスと今後の作業優先順位

奥山実は、個人レベルで認証ドキュメントにアクセスできるか懸念を示し、櫻井勇輝は、自身が日本コンピューター名義で問い合わせを行い、ドキュメント一式やSDKについて確認することを約束しました (01:02:23)。櫻井勇輝は、公的個人認証（JPKI）の部分が最も進めやすいとし、これを優先的に進めるよう提案し、並行して管理サイトの管理画面UIを見て課題感をまとめてもらうことも奥山実に依頼しました。櫻井勇輝はまた、奥山実に対してリポジトリへのアクセス権を付与することも伝えました (01:03:49)。

標準化作業の状況と契約について

奥山実は、日産側で「標準化」の仕事が手一杯であるという話に言及し、櫻井勇輝はアプリ開発チームが標準化チームの支援を行っているが、標準化作業は今年度中は落ち着かない見込みだと説明しました。標準化の作業は2段階に分かれており、今年度末までに主要な政令市（川崎市など）を動かす第一段階、その後、特別区の23区が次の2年間で進められる予定であることも伝えました (01:05:35)。奥山実は、ローカルでリポジトリをクローンして作業しても、データが書き換わることはないことを櫻井勇輝から確認しました (01:07:41)。契約については、櫻井勇輝は1月から3月分の契約をそのまま継続したいと考えており、来年度以降も奥山実に協力をお願いしたい意向を示し、奥山実は年度内の業務継続に前向きな姿勢を示しました (01:07:41)。

推奨される次のステップ

• 奥山実は、LIFF上で動かす際のフレームワーク選定について、パフォーマンス計測の結果と考察を含めたレポートを今週または来週中に櫻井勇輝へ共有する
• 奥山実は、脳活ラボの管理サイトのUIブラッシュアップ、デザインシステムの整理、およびリファクタリングに関する改善提案と実装に取り組む
• 奥山実は、母子手帳アプリ（Tomoni）側で、セキュリティ強化のためLINEの公的個人認証サービスを利用した本人認証の仕組みを実験的に実装する
• 櫻井勇輝は、日本コンピューター名義で公的個人認証に関する問い合わせを行い、ドキュメント一式やSDKなどの情報を取得する
• 奥山実は、JPKI（LINEの個人認証）の検証を進めて区切りまで持っていき、並行して管理サイトを見て課題感をまとめる
• 櫻井勇輝は、奥山実にリポジトリのアクセス権を付与する