日本国内でよく使われている Flutter 製アプリ

Flutter は日本国内でも様々な有名サービスの公式アプリに採用されています。特に以下のような高いダウンロード数・ユーザー数を持つアプリが Flutter で開発されています。

以上のように、日本国内でもユニクロや NTT ドコモ、リクルート、メルカリといった大企業が Flutter を採用し、数百万規模のユーザーに利用されるアプリを提供しています。Flutter の高速な UI 描画と安定した動作により、大量のユーザーアクセスにも耐える高品質なサービスが実現されています。

海外で人気の Flutter 製アプリ

海外に目を向けると、Flutter はグローバルで数千万規模のユーザーを持つ人気アプリにも採用されています。代表的な例をいくつか挙げます。

以上のように、Google、Alibaba、Tencent、BMW、eBayなど世界的企業が Flutter を採用し、数千万規模のユーザーにサービス提供しています。特に金融（Google Pay や Nubank）、EC・マーケットプレイス（Alibaba Xianyu や Kijiji）、IoT/自動車（BMW）といった幅広い分野で Flutter アプリが成功を収めています。これは Flutter の信頼性とスケーラビリティがグローバル水準で証明されていることを示しています (Flutter 2025: Definition, Key Trends, and Statistics) (Flutter Showcase |Google Pay)。

Flutter と React Native の今後の勢い比較

次に、クロスプラットフォーム開発の代表的技術であるFlutter と React Nativeについて、以下の視点で現在の状況と将来の勢いを比較します。各項目について最新のデータや傾向を踏まえ、どちらが今後より成長しそうか予測します。

企業の採用動向

Flutter 採用の拡大: Flutter は 2018 年の正式リリース以降、新規プロジェクトを中心に企業導入が急増しています。先述のように Google や Alibaba をはじめ、金融・旅行・通販など様々な業界の大手が Flutter によるアプリ開発に成功しています。日本国内でもリクルート（スタディサプリ）や DMM.com など既存ネイティブアプリを Flutter に全面移行した例も出始めています (Flutter アプリの国内事例 12 選！大手の Flutter 移行も紹介 | 東京のアプリ開発会社)。クロスプラットフォームの効率性と Flutter の表現力に魅力を感じ、新規サービスで Flutter を選定する企業が今後も増えると見られます。

React Native の状況: React Native（RN）は 2015 年に Facebook が公開して以降、多くの企業で採用されてきました。Facebook 本体や Instagram で部分採用されたほか、米国ではWalmartやBloomberg、日本でもメルカリ（初期の一部機能）や楽天などが一時期導入していた例があります。しかし近年、Airbnb や Dropbox が RN から撤退したように、ネイティブへの回帰や他フレームワークへの移行もみられます。一方でMeta 社（旧 Facebook）は現在も React Native を社内主要アプリに活用し続けており、Microsoft も React Native for Windows を開発するなど支援しています。既存の React Native 資産を持つ企業は引き続き RN をメンテナンスしつつ、新規機能では Flutter を試験採用するケースも出ています。総じて、新規採用という観点では Flutter の方が勢いが強く、RN は既存ユーザー企業による支えが中心になりつつあります。

市場シェア

開発者利用シェア: 世界全体のデベロッパー動向を見ると、Flutter が React Native を上回るシェアを占めています。Statista や JetBrains の調査によれば2022 ～ 2023 年時点でクロスプラットフォーム開発フレームワーク利用率は Flutter が約 46%、React Native が約 32 ～ 35%となっており、Flutter が最も人気のフレームワークです (Flutter & React Native Compared | Best Framework for your Project?) (React Native vs Flutter · GitHub)。これは数年前まで先行していた React Native を Flutter が追い抜いたことを示しています。この傾向は 2024 年以降も続いており、Stack Overflow 開発者調査 2023 でもFlutter 利用率 9.1% vs RN 8.4%と Flutter が僅かながら上回っています (React Native vs Flutter · GitHub)。また Google Trends の検索人気でも Flutter への関心度が RN を大きく上回っており (Popularity of Flutter vs. React Native in 2025 – Flatirons)、コミュニティの盛り上がりは Flutter が優勢です。

エコシステム規模: GitHub 上のスター数でも Flutter は約 15.2 万、React Native は約 10.9 万と差がついています (Popularity of Flutter vs. React Native in 2025 – Flatirons)。Flutter 関連の Stack Overflow 質問件数も RN より多く、開発者コミュニティの活動量が高いことが伺えます (Popularity of Flutter vs. React Native in 2025 – Flatirons)。もっとも React Native も依然多くの開発者に使われており、モバイルクロスプラットフォーム分野では Flutter と RN の二強状態が続いています。市場シェアの観点ではFlutter がこのままリードを広げていく可能性が高いでしょう。

技術的な優位性

Flutter の技術特性: Flutter は Dart 言語で実装され、ネイティブアプリにAhead-of-Time（AOT）コンパイルされるため、ランタイムに仮想マシンやブリッジを必要としません (Flutter vs React Native in 2025 – Springs)。これにより描画パフォーマンスが高く、60fps 以上のスムーズな UI 描画やアニメーションが可能です。また、Flutter は Skia エンジン上に独自 UI を描画する仕組みで、デザインの自由度が非常に高いです。プラットフォーム間で UI の再現性が統一され、Android と iOS で全く同じ見た目・挙動を実現できます。加えて、モバイル以外に Web やデスクトップ、組み込み（Embedded）まで単一コードでターゲットにできる点も技術的優位とされています。

React Native の技術特性: React Native は JavaScript（または TypeScript）と React を用いて記述し、各プラットフォームのネイティブ UI コンポーネントを橋渡し（ブリッジ）する形で描画します。メリットは Web フロントエンド技術（JSX+CSS）がそのままモバイル開発に応用でき、Web エンジニアが参入しやすいことです。ネイティブコンポーネントを使うため iOS/Android 各プラットフォームの標準的な UI を自動で取得でき、見た目が「ネイティブらしい」挙動になります。しかし欠点として、JavaScript からネイティブへのブリッジによるオーバーヘッドがあり、複雑な画面でパフォーマンスが低下しやすい点が挙げられます (Flutter vs React Native in 2025 – Springs)（Meta は新アーキテクチャでこの問題の改善に取り組んでいますが依然 Flutter の直接ネイティブ実行に分があります）。また、開発には Node.js 環境や Gradle 設定など多くのツールチェーンを統合する必要があり、セットアップやビルドがやや複雑です。総じて技術面では、パフォーマンスと一貫性で Flutter が優れ、Web 技術資産の再利用性で React Native が優れると言えます。

開発者の支持率

開発者コミュニティの支持: 開発者からの人気・支持という面でも両者に差が出つつあります。Stack Overflow の開発者調査「最も愛されるフレームワーク」部門では、Flutter は68%前後の開発者から「好き」と評価されており、React Native の約 55 ～ 58%を上回っています (React Native vs Flutter · GitHub)。これは Flutter 開発者の多くがその経験に満足していることを示します。一方、React Native は Flutter に比べやや満足度で劣り、「どちらかといえば敬遠される」層も一定数います。ただしJavaScript/React 経験者の圧倒的な母数があるため、依然として学習コストの低さから React Native を選ぶ開発者も少なくありません。GitHub のコントリビューションを見ると、Flutter リポジトリのコミット数が RN より多く活発に開発が進められている一方で、RN は未マージのプルリクエスト件数が Flutter より多く、オープンソース貢献の受け皿としても機能しています (Popularity of Flutter vs. React Native in 2025 – Flatirons)。今後もFlutter は Google 主導の安定したアップデートが続く見込みで、開発者コミュニティの勢いは Flutter が優位でしょう。

パフォーマンス比較

速度・効率: パフォーマンス面では、総合すると Flutter が有利と考えられます。Flutter はネイティブコードに直接コンパイルされるため、スクロールやアニメーションの滑らかさ、描画フレームレートで高い水準を示します (Flutter vs React Native in 2025 – Springs)。事例でも、Flutter 製アプリがしばしば「ネイティブと遜色ない」「カクつきが減った」と評価されます。React Native も日常的な CRUD アプリ程度であれば実用十分な速度がありますが、JS とネイティブ間通信がボトルネックになる処理（大量の一覧描画や同期的な複雑演算など）では Flutter との差が現れます。もっとも、React Native 側も近年「Fabric」という新レンダリングエンジンや Turbo Modules により、ブリッジのオーバーヘッド削減を進めています。軽量な UI や一部ネイティブモジュールの組み合わせ次第では RN でもほぼネイティブ並みの体感速度を実現できます。一般論としては UI 表現力とピーク性能で Flutter が上回り、RN は十分実用的だが極限では Flutter に一歩譲るという状況です (Flutter vs React Native in 2025 – Springs)。

将来の成長予測

以上を踏まえ、今後より成長する可能性が高いのは Flutterだと予測します。理由は以下の通りです。

総合すると、React Native も依然有力なクロスプラットフォーム手段ではありますが、今後数年の成長率や新規プロジェクト採用においては Flutter が React Native を上回る可能性が高いです (Flutter & React Native Compared | Best Framework for your Project?)。もっとも各技術には得意分野があるため、Web 資産を流用したいケースでは引き続き React Native が選ばれるなど、両者が共存しつつも Flutter が主導権を握る形で市場が推移していくと考えられます。

参考資料:

The post Flutter 製アプリの事例と Flutter vs React Native の将来展望 first appeared on AichiLog.

はじめに

Flutterアプリ開発において、APIキーやデータベースパスワードなどの機密情報を安全に管理することは非常に重要です。本記事では、enviedパッケージを使用して環境変数を安全に管理する方法を解説します。

1. enviedのインストール

まず、Flutterプロジェクトにenviedパッケージを追加します。

flutter pub add envied
flutter pub add --dev build_runner envied_generator

enviedは環境変数を安全に管理するためのパッケージで、build_runnerとenvied_generatorを利用してコードを自動生成します。

2. .envファイルの作成

環境変数を定義するために、.envファイルをプロジェクトのルートディレクトリに作成し、以下のように記述します。

DB_PASSWORD=1234567890
DB_PORT=3000

このファイルには機密情報を含むため、.gitignoreに追加してバージョン管理から除外してください。

echo ".env" >> .gitignore
echo "env.g.dart" >> .gitignore  # のちに生成されるファイル

3. 環境変数を管理するファイルを作成

次に、lib/env.dartというファイルを作成し、以下のコードを記述します。

import 'package:envied/envied.dart';
part 'env.g.dart';
// requireEnvFileがtrueの場合、.envファイルがないとエラーが出る
@Envied(requireEnvFile: true, path: '.env')
final class Env {
  @EnviedField(varName: 'DB_PASSWORD')
  static const String dbPassword = _Env.dbPassword;
  @EnviedField(varName: 'DB_PORT')
  static const String dbPort = _Env.dbPort;
}

このファイルでは、@Enviedアノテーションを使用して.envファイルから環境変数を読み込むように設定します。

4. env.g.dartの生成

環境変数を自動生成するために、以下のコマンドを実行します。

flutter pub run build_runner build --delete-conflicting-outputs

このコマンドを実行すると、env.g.dartというファイルが自動生成されます。

生成されるenv.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'env.dart';
// ************************************************************************
// EnviedGenerator
// **********************************************************************

// coverage:ignore-file
// ignore_for_file: type=lint
// generated_from: .env
final class _Env {
  static const String dbPassword = '1234567890'; // envの中身がここにくる
  static const String dbPort = '3000';
}

rm .env

import 'env.dart';
void main() {
  print(Env.dbPassword);
  print(Env.dbPort);
}

import 'package:envied/envied.dart';
part 'env.g.dart';
@Envied(requireEnvFile: true, path: '.env')
final class Env {
  // 暗号化する場合は、obfuscate: trueを追加
  @EnviedField(varName: 'DB_PASSWORD', obfuscate: true)
  static String dbPassword = _Env.dbPassword;
  @EnviedField(varName: 'DB_PORT')
  static String dbPort = _Env.dbPort;
}

// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'env.dart';
// **********************************************************************
// EnviedGenerator
// ************************************************************************
// coverage:ignore-file
// ignore_for_file: type=lint
// generated_from: .env
final class _Env {
  static const List _enviedkeydbPassword = [
    3175743209,
    3642003943,
    2774983698,
    2234134847,
    776266119,
    3460629094,
    2118227522,
    209157887,
    2325619839,
    559751284,
  ];
static const List _envieddatadbPassword = [
    3175743192,
    3642003925,
    2774983713,
    2234134795,
    776266162,
    3460629072,
    2118227573,
    209157831,
    2325619782,
    559751236,
  ];
static final String dbPassword = String.fromCharCodes(List.generate(
    _envieddatadbPassword.length,
    (int i) => i,
    growable: false,
  ).map((int i) => _envieddatadbPassword[i] ^ _enviedkeydbPassword[i]));
  static const String dbPort = '3000';
}

まとめ

• enviedを利用することで、安全に環境変数を管理できる。
• .envファイルはバージョン管理から除外する。
• env.g.dartも.gitignoreに追加する。
• build_runnerを使用してenv.g.dartを自動生成する。
• 生成されたenv.g.dartを使用して環境変数を取得する。

この方法を活用することで、Flutterアプリのセキュリティを向上させることができます。ぜひ、試してみてください！

The post enviedパッケージを使用して、環境変数をより安全に管理する first appeared on AichiLog.