2024.10.16

Next.js + Capacitorによるクロスプラットフォームアプリの紹介 – ①技術スタック

はじめに

以下の主な機能をもつウェブとモバイルのクロスプラットフォームアプリを紹介します。

"next": "14.1.3", 
"react": "^18.2.0", 
"react-dom": "^18.2.0"

React ベースのフレームワークである Next.js を使ってアプリが構築されており、フロントエンドは React で構成されています。Next.js は SSR（サーバーサイドレンダリング）や静的サイト生成が可能なため、パフォーマンスや SEO に優れたアプリです。

"@capacitor/android": "^5.7.3", 
"@capacitor/ios": "^5.7.3", 
"@capacitor/core": "^5.7.3",

Capacitor は、モバイルデバイス（Android、iOS）向けの機能を提供するライブラリです。これにより、Web アプリがネイティブアプリとして Android や iOS でも動作するようになります。このアプリは、モバイルアプリとしてもデプロイできることがわかります。

"tailwindcss": "^3.4.1"

Tailwind CSS を使用して、効率的なユーティリティファーストのスタイリングが適用されています。アプリケーションのデザインは Tailwind を用いてカスタマイズされています。

"react-hook-form": "^7.51.1"

React Hook Form が使われており、フォームの入力やバリデーションが行われることがわかります。患者のライフログに関連したデータを入力するフォーム機能が存在することが予想されます。

"@radix-ui/react-checkbox": "^1.0.4", 
"@radix-ui/react-dialog": "^1.0.5",

Radix UI のコンポーネントが使用されているため、ユーザーインターフェースがモダンでアクセス可能なコンポーネントで構成されていると考えられます。

"@tanstack/react-query": "^5.28.4"

React Query によって、データフェッチやキャッシュ管理が行われています。おそらく患者データやライフログに関連するデータが、API を介して非同期に取得・更新されているはずです。

"@zoom/meetingsdk": "^3.5.1", 
"@zoom/videosdk": "^1.10.8",

Zoom のミーティングやビデオに関連する機能が統合されています。患者や医師とのビデオ会議機能が存在する可能性があります。

json "storybook": "^7.6.17",

UI コンポーネントの開発とテストに Storybook が使用されています。これにより、UI コンポーネントのビジュアルテストやドキュメンテーションが可能です。

"@auth0/auth0-react": "^2.2.4"

@auth0/auth0-react を使うと、React アプリ内で簡単に Auth0 を統合できます。例えば、Auth0Provider コンポーネントを使ってアプリ全体に認証機能を適用し、ログインやユーザー情報を取得することができます。