【12/8】技術アンロック：React開発者のモバイル開発
はじめに
お疲れ様です。ジェリックと申します。出身はフィリピンです。11月にMarvelに入社しました。
ReactJS、NextJS、React Native、ピアノ作曲および日本語の学習を継続的にやっています。
このブログのテーマにReact Nativeを選んだ理由はReact・React NativeとNextJSへの愛情に加えて、
人々の生活に役に立つと信じているモバイルアプリを作ることができると考えたからです。
私は自身が情熱を持てる物事に対してもくもくと学習したくなるタイプです。また今回はReact・React Nativeのトピックに加え、私自身がこれらを学習する際に使っている思考方法"マインドマップ"について共有させていただきたいと思います。
宜しくお願い致します。
1. ReactとReact Nativeのスキルの移転性
ReactとReact NativeはどちらもReactエコシステムに属し、多くの共通点があるため、
一方を習得した開発者は比較的簡単にもう一方に移行できます。React（Webアプリケーション開発のライブラリ）で得たスキルは、React Native（iOSおよびAndroidアプリの開発フレームワーク）にも
高い移行可能性があります。
以下はReactとReact Nativeのスキル移行について、具体的な例を交えて説明します。
1.1 ReactとReact Nativeの共通の基本概念
ReactとReact Nativeは、両方ともコンポーネントベースのアーキテクチャを採用しており
この設計思想は両方のプラットフォームに共通しています。このため、Reactを使った経験があれば、React Nativeの開発にも簡単に移行できます。
1.1.1 コンポーネントベースのアーキテクチャ
React: アプリケーションを再利用可能なコンポーネントで構築します。各コンポーネントは独自の状態と動作を管理し、アプリケーションをモジュール化して保守性を向上させます。
React Native: 同様にコンポーネントベースのアーキテクチャを採用しており、UIを構築するためのコンポーネントが提供されています。Webアプリのコンポーネントの考え方をそのままモバイルアプリにも適用できます。
例:
Reactでのボタンコンポーネント：
React Nativeでのボタンコンポーネント：
移行可能なスキル: 再利用可能なコンポーネントの作成方法は、ReactとReact Nativeで共通しており、このスキルはそのまま移行できます。
1.1.2 JSX（JavaScript XML）
React: UIコンポーネントをJSXという構文で記述します。JSXはHTMLとJavaScriptを組み合わせた構文で、コードを簡潔で読みやすくします。
React Native: JSXは使われますが、WebのHTML要素の代わりに、ネイティブのモバイル UIコンポーネント（例：<View>, <Text>, <Image>）を使用します。
例:
Reactでのコンポーネント：
React Nativeでのコンポーネント：
移行可能なスキル: JSX構文の使い方は、ReactでもReact Nativeでも共通しているため、JSXに慣れていればそのまま移行できます。
1.1.3 ステート管理
React: ステート管理は主にuseStateフックや、より複雑な状態管理のためのライブラリ（ReduxやContext APIなど）を使用します。
React Native: useStateやuseReducer、そしてReduxやContext APIなどの外部ライブラリを使って状態を管理します。ReactとReact Nativeのステート管理の方法はほぼ同じです。
例:
Reactでのカウンターコンポーネント：
React Nativeでのカウンターコンポーネント：
移行可能なスキル: useStateやuseReducerを使った状態管理は、ReactとReact Native両方で共通して使用されるため、同じ方法で移行可能です。
1.2. イベントハンドリングとユーザーインタラクション
React: onClick, onChange, onSubmitなどのイベントハンドラを使って、
ユーザーのインタラクションを処理します。
React Native: 同様のイベント処理方法を使いますが、React NativeのUIコンポーネント（TouchableOpacity, TextInput, ScrollViewなど）に適用されます。
例:
Reactでのフォーム送信処理：
React Nativeでのフォーム送信処理：
移行可能なスキル: イベントハンドリング（onClick, onChange, onSubmitなど）はReactでもReact Nativeでも似たような方法で扱えるため、ユーザーインタラクションの管理方法はそのまま移行できます。
1.3. ライフサイクルとフックの使用
React: ライフサイクルメソッド（componentDidMountなど）や、関数コンポーネントで使うフック（useEffect）を使って副作用を管理します。
React Native: 同様にuseEffectフックを使って副作用を処理します。
例:
Reactでの副作用処理：
React Nativeでの副作用処理：
移行可能なスキル: ライフサイクル管理やフック（useEffectなど）の使い方はReactでもReact Nativeでも共通しているため、知識をそのまま移行できます。
1.4. ナビゲーションの違い
React: ウェブアプリケーションには主に React Router を使用します。ルートを定義し、コンポーネント間のリンクを管理することで、通常は <Route> や <Link> を使ってナビゲーションを行います。
React Native: 画面遷移を管理するために React Navigation や React Native Navigation などのライブラリを使用します。これらはスタックナビゲーション、タブナビゲーション、ドロワーナビゲーションなどの画面遷移を提供します。
例:
React (React Router):
React Native (React Navigation):
移行可能なスキル: React Router の構造に慣れてしまえば、React Navigation に移行するのは比較的簡単です。どちらも、ルートやスクリーンを定義する方法、データを渡す方法、異なるビュー間で状態（ナビゲーションの状態など）を管理する方法を理解する必要があります。
React での 動的ルーティングの管理（ユーザーデータに基づく条件付きルートなど）に関するスキルは、React Native にも直接適用できます。
2. React Nativeポートフォリオの作成に機能を適用するため使えるサービス
2.1 Cloudinary（無料プランあり）- https://cloudinary.com/
クラウディナリーは画像や動画の取り扱いに特化した、メディア管理サービスの包括的なスイートを提供するクラウドベースのプラットフォームです。これにより、開発者、マーケター、企業は、ウェブサイトやモバイルアプリを通じてメディアコンテンツを効率的に保存、操作、配信することができます。
Cloudinaryの主な機能は以下の通りです：
・メディアストレージ: 画像、動画、その他のメディアファイルを保存するための安全でスケーラブルなクラウドストレージを提供します。
・メディア変換: Cloudinaryは、メディアのリサイズ、トリミング、回転、フィルターの適用など、オン・ザ・フライでの変換を可能にします。これにより、同じファイルの複数のバージョンを作成・保存する必要がなくなります。動画についても、トリミング、フォーマット変換などをサポートしています。
・コンテンツ配信: Cloudinaryは、コンテンツ配信ネットワーク（CDN）を使用して、最適化された画像や動画を迅速にユーザーに配信し、グローバルにロード時間とパフォーマンスを改善します。
・自動化と最適化: Cloudinaryは、さまざまなデバイス、解像度、フォーマットに合わせてメディアを自動的に最適化します。これにより、ファイルサイズの削減とロード時間の短縮が実現し、品質を損なうことなく改善されます。
・APIと統合: Cloudinaryは、ウェブサイトやアプリへの簡単な統合のためのAPIを提供し、開発者がメディア処理のタスクを自動化しやすくします。また、CMS（コンテンツ管理システム）やeコマースプラットフォームなど、他のプラットフォームとの統合も提供しています。
・メディア分析: Cloudinaryは、メディアの使用状況に関する分析機能を提供し、企業がメディアのパフォーマンスを追跡できるようにします。
2.2 Appwrite（無料プランあり）- https://appwrite.io/
開発者にウェブおよびモバイルアプリケーションを構築・スケールするための包括的なツールセットを提供するオープンソースのバックエンド・サービス（BaaS）プラットフォームです。React Nativeの文脈では、Appwriteを使用することで、カスタムバックエンドを管理することなく、認証、データベース、ファイルストレージ、リアルタイム機能など、モバイルアプリのバックエンドインフラを簡素化することができます。
React NativeにおけるAppwriteの主な機能:
・認証: Appwriteは組み込みの認証システムを提供しており、メール/パスワードでのログイン、OAuth（Google、GitHubなど）、匿名ログイン、カスタムJWT（JSON Web Tokens）をサポートしています。React Nativeアプリでは、これによりユーザーのサインアップやログインが簡素化されます。
・データベース: Appwriteは、データの保存と取得を行うための柔軟なNoSQLデータベースを提供します。CRUD（作成、読み取り、更新、削除）操作を実行でき、React Nativeアプリ内でユーザー情報やアプリデータなどを簡単に保存できます。
・ファイルストレージ: Appwriteはファイルのアップロード、管理、ダウンロードを可能にし、ユーザー生成コンテンツ（画像や文書など）を扱うアプリにとって必須の機能です。これをReact Nativeと統合することで、ファイルのアップロードやダウンロードが可能になります。
・リアルタイム機能: Appwriteは、データベース内のデータが更新されたときなど、リアルタイムでデータ変更を購読する機能をサポートしています。これにより、React Nativeでチャットアプリやライブ通知、コラボレーションアプリを構築する際に役立ちます。
・クラウドファンクション: Appwriteは、アプリ内のイベント（例：新しいユーザーのサインアップやファイルのアップロードなど）に基づいてサーバーサイドコードを実行できる機能を提供します。これらのファンクションはJavaScriptで記述でき、React Nativeアプリに統合してカスタムバックエンドロジックを実行できます。
・プッシュ通知: Appwriteはユーザーにプッシュ通知を送信することもできます。これにより、React Nativeアプリで新しいメッセージやアプリの更新など、特定のイベントに基づいて通知を送ることができます。
・セキュリティとアクセス許可: Appwriteには、組み込みのセキュリティ機能と役割ベースのアクセス制御（RBAC）があり、アプリ内で誰がどのデータや機能にアクセスできるかを定義できます。これにより、React Nativeアプリ内で厳格なセキュリティやプライバシー対策を実装できます。
・SDKとAPI: Appwriteは公式のSDKを提供しており、これをReact Nativeプロジェクトに統合することができます。SDKを使用することで、認証、データベース、ストレージなどのAppwriteサービスと簡単にAPIを通じてやり取りできます。
2.3 RevenueCat - https://www.revenuecat.com/jp/
モバイルアプリ（React Nativeで作成されたアプリを含む）のインアプリ購読および購入を管理するための強力なプラットフォームです。インアプリ購入（IAP）や購読の実装、追跡、管理プロセスを簡素化し、開発者が決済システム、製品提供、プラットフォーム特有の要件に対処する代わりに、優れたアプリ体験の作成に集中できるようにします。
RevenueCatは、React Nativeとシームレスに連携するバックエンドサービスを提供し、購読ライフサイクル管理、領収書の検証、クロスプラットフォームの同期など、インアプリ購入に関する複雑な処理を全て対応します。
React NativeにおけるRevenueCatの主な機能:
・インアプリ購入（IAP）の管理:
RevenueCatは、iOSおよびAndroidアプリのインアプリ購入や購読を管理します。
インアプリ購入の統合が簡素化され、一回限りの購入や定期購読などの製品の管理が容易になります。
・クロスプラットフォーム同期:
RevenueCatはiOSとAndroid両方で動作し、インアプリ購入がプラットフォーム間で同期されることを
保証します。つまり、ユーザーがあるプラットフォーム（例：iOS）で購入した場合、その購入を別のプラットフォーム（例：Android）でも問題なく利用できるようになります。
・購読ライフサイクルの管理:
RevenueCatは購読のライフサイクルを管理し、トライアル、更新、キャンセル、
アップグレードなどを含みます。購読が適切に処理され、ユーザーが購読を開始、更新、
キャンセルした際にリアルタイムでその状態を追跡できるようになります。
・領収書の検証:
RevenueCatは、iOSおよびAndroidの購入に対して領収書を自動的に検証し、取引が正当であり、適切に処理されていることを確認します。これにより、開発者が複雑な領収書の検証を手動で行う必要がなくなります。
・権利管理:
RevenueCatは、購入または購読によってアンロックされる機能やコンテンツである「権利」の管理を簡単に行う方法を提供します。権利はRevenueCatのバックエンドで管理され、アプリから問い合わせることで、ユーザーがアクセスすべきコンテンツを確認できます。
・分析とレポート:
RevenueCatは、アプリの収益、購読者の維持、購入行動に関する詳細な分析と洞察を提供します。これにより、開発者はデータに基づいてアプリの収益化を最適化するための意思決定を行うことができます。
・Webhookと統合:
RevenueCatは、重要なイベント（例：購入成功や購読更新）が発生した際にバックエンドに通知するWebhookをサポートします。これにより、サーバーサイドでの処理や、イベントに基づく他のワークフローをトリガーすることができます。RevenueCatは、Firebase、Amplitude、Mixpanelなどの人気の分析ツールやサービスと
統合できます。
・React Nativeとの簡単な統合:
RevenueCatは公式のReact Native SDKを提供しており、React Nativeアプリとの統合を簡素化します。このSDKは、プラットフォーム固有のコードを処理し、購入や購読状態の確認のための統一APIを提供します。
このSDKを使用して、インアプリ購入や購読を実装でき、トライアル期間の提供、決済処理、ユーザー権利の確認などの機能も扱えます。
3. React Nativeは世界中の人々の生活をより良くする可能性があること
React Nativeは、モバイルアプリ開発の未来を切り開くフレームワークの一つであり、その背後には熱心な開発者たちの情熱と革新が息づいています。React Native開発者は、単にコードを書くだけでなく、アプリが世界中のユーザーに与える影響を深く意識しています。
3.1 React Nativeのグローバルな影響力
React Native開発者は、世界中の人々の生活をより良くする可能性を秘めたツールを手にしています。たとえば、医療、教育、金融、交通など、さまざまな業界においてReact Nativeを活用したアプリケーションが役立っています。React Nativeによって開発されたアプリは、ユーザーに価値ある情報やサービスを提供し、より便利で効率的な日常生活を実現します。
メンタルヘルスケア分野： セラピーやカウンセリングアプリ、瞑想ツール、メンタルウェルネス追跡アプリなどのメンタルヘルスサポートアプリケーションの開発に利用されており、ユーザーがストレス、不安、その他のメンタルヘルスに関する問題を効果的に管理する手助けをしています。
医療分野： 健康管理アプリ、リモート診療、医療情報の管理など、React Nativeを活用することで医療アクセスが向上し、患者の生活が改善されています。
教育分野： React Nativeを使用した教育アプリは、世界中の学生にアクセス可能な学習ツールを提供し、教育の機会均等化を推進しています。
金融分野： モバイルバンキングや送金アプリケーションなど、React Nativeを使用して迅速かつ安全な取引が可能になり、経済活動の効率化が進んでいます。
交通分野： 交通管理やライドシェアリングのアプリケーションにより、移動がよりスムーズで便利になり、ユーザーの時間を節約します。
4. 独学用マインドマッピング方法
4.1 説明
マインドマッピングを組織化のツールとしてマインドマッピングは、思考やアイデアを
非線形かつ視覚的に整理するための効果的なツールです。この技法は、複雑な情報を消化しやすい
チャンクに分解し、概念やトピック間の関係を理解しやすくします。マインドマッピングの
主要な視覚的要素は、中央のアイデアから全方向に枝分かれする形で、脳が情報を自然に処理する方法を
模倣しています。
4.2 創造性と問題解決の促進
マインドマッピングは創造性を刺激し、特定の問題に対する異なる解決策や視点を探ることを可能に
します。アイデアを視覚的にマッピングすることにより、パターンを識別したり、つながりを見つけたり、
新しい洞察を生み出すことが容易になります。これは特にブレインストーミング、戦略的計画、
創造的な障害を克服するために役立ちます。
4.3 マインドマップの作成方法
4.3.1 中央アイデアから始める
マインドマップを作成する最初のステップは、中央のアイデアや主要なトピックを定義することです。
これがマインドマップの中心となり、すべての他のアイデアがそこから放射されます。
中央のアイデアをページの中心に書きます（またはデジタルツールを使用している場合はキャンバスの中央）。
アイデアに関連するシンボルや画像を描くことも視覚的に魅力的にするために有効です。
例：「React JS」についてブレインストーミングをしている場合、中央のアイデアは「Redux Toolkit」と書かれたものです。
4.3.2 主要なテーマやカテゴリーで枝分かれする
中央のアイデアから外向きに枝を描きます。各枝は中央のアイデアに関連する主要なテーマやカテゴリーを
表します。これらのテーマは、トピックの主要な領域、概念、または重要な要素です。
各枝にそのカテゴリーの本質を捉えたキーワードやフレーズをラベル付けします。
例：「React JS」では、「Hooks」「Components」「State Management」などの枝が考えられます。
4.3.3 詳細なアイデアを持つサブブランチを追加する
各主要なテーマから、アイデアをさらに細かく分解するサブブランチを作成します。これらのサブブランチは、
メインテーマに関連するより具体的な詳細、サブトピック、またはアイデアを表します。
地図が明確で簡潔であることを維持するために、キーワードや短いフレーズを使用します。
例：「ユーザーエクスペリエンス」のテーマの下に、「ナビゲーション」「アクセシビリティ」「モバイルフレンドリー」「インタラクティブ要素」などのサブブランチがあります。
4.3.4 キーワード、画像、シンボルを使用する
キーワードはマインドマッピングにおいて重要です。各枝とサブブランチは、全文を使用せずに
短いフレーズやキーワードで簡潔に保つと、地図が明確で追いやすくなります。また、アイデアや概念を
表現するために、画像、シンボル、アイコンを使うこともできます。視覚的な要素は記憶の定着を助け、
地図をより魅力的で創造的にすることができます。
例：「モバイルフレンドリー」の下に小さな電話アイコンを使用したり、「革新的な特徴」に
関連するアイデアの横に電球のシンボルを使ったりすることができます。
4.3.5 色と線を使ってつながりを強調する
色を使うことで、カテゴリーや概念を区別でき、マインドマップがより整理され、視覚的に魅力的になります。
また、異なるアイデア間のつながりを示すために、線や矢印を使うこともできます。これらのつながりは、関係性、依存関係、または因果関係を表すことができます。
例：テーマごとに色分けした枝（例：「Hooks」には青、「Components」には緑、「State Management」には赤）を使用し、繋がっていることがある場合、矢印でつないで関係性を示すことができます。
4.3.6 追加の詳細を加える
マインドマップが進行するにつれて、各アイデアをさらに拡充していきましょう。必要に応じて、
トピックを完全に探求するためにサブブランチを追加し続けます。「完璧」にすることを心配せず、
重要なアイデアや概念を視覚的に捉え、思考を明確で創造的にするためのものだという目的に焦点を
当てます。
4.3.7 マップを見直し、洗練する
マインドマップを作成した後、一歩引いてそれを見直しましょう。洗練できる部分やさらに
展開できる部分を探してください。すべてが論理的に接続されているか、重要なアイデアやつながりを
見落としていないかを確認します。必要に応じて、マップの枝を整理し直して流れを
改善することもできます。
4.3.8 マインドマップを行動または反省に活用する
マインドマップは積極的に使用すると最も役立ちます。
計画の場合：プロジェクトの次のステップを特定するためにマップを使用する。
ブレインストーミングの場合は新しいアイデアや解決策を生み出す。
学習の場合：重要な情報や概念を整理する。
自分が書いたマインドマップサンプル：
Next JS:
React JS:
Udemy Mind Mapping Course:
最後に
勉強する時情報を保持することに役立つと言われているこのチャンネルの音楽を聴いています。
Marvelでは今年も『Marvelアドベントカレンダー2024』をやります🎄🎅Marvelのエンジニアがクリスマスまで記事のバトンを繋ぎます🦌🛷
是非毎日のお楽しみとしてご覧ください🎁
★Marvelのアドベントカレンダーはこちら
https://note.com/marvel_engineer/m/ma7e8d8ae4288
Marvelが少しでも気になった方は是非Wantedlyもご覧ください🙌