株式会社グローバルゲート公式ブログ
急成長中の注目フレームワーク「Flutter」でスマホアプリを作ってみる
こんにちは、株式会社グローバルゲートのモーリーです。
昨日は節分ということで夕食に恵方巻を食べました。
ところで節分は2月3日では？なぜ今年だけ2月2日？と疑問に思ったので調べてみました。
節分は「立春の前日」と決まっていますが、立春は太陽の動き（黄道）に基づいて決まるため、年によって変動します。
立春は「太陽黄経が315度になる日」で決まり、通常は2月4日頃。
しかし、地球の公転周期は365.2422日（1年がぴったり365日ではない）ため、暦と実際の季節にズレが生じます。
これを調整するために、立春の日が年によって変わります。
2025年の立春は2月3日。その前日である2月2日が節分となります。
次に節分が2月2日になるのは、2029年です。その後も、地球の公転周期と暦のズレを調整するため、4年ごとに2月2日が節分となる年が続く可能性があります。
だそうです（ChatGPTの回答による）。
立春と言いながらも今冬最強の寒波が週半ばに到来とのことですので、春という感じがまったくしませんね…。
Flutterとは？
FlutterはGoogleが開発したオープンソースのアプリ開発向けフレームワークです。Dartというプログラミング言語を使用し、一度のコード記述でAndroid、iOS、ブラウザと複数のプラットフォームに対応することができます。
Material Designによる洗練されたUIがデフォルトで組み込まれており、ホットリロードに対応した効率的な開発環境も提供される点も大きな強みとなっています。
近年シェアを急速に伸ばしているフレームワークで、日本ではmixi2アプリがFlutter製であることが注目されました。
Flutterのメリット
Flutterの代表的なメリットとして以下のようなものが挙げられます。
・クロスプラットフォーム対応：1つのコードベースでAndroid・iOSだけでなく、Webやデスクトップ向けアプリも開発可能。
・高速な開発：ホットリロード機能により、コードの変更が即座に反映される。
・美しいUI：Material Designによる統一されたUIと豊富なウィジェットを活用し、洗練されたデザインを簡単に実装できる。
・パフォーマンスが高い：ネイティブに近いパフォーマンスを発揮する。
・Googleのサポート：Googleが開発・サポートしており、今後の成長も期待できる。
Flutterのデメリット
一方で、次のようなデメリットもあります。
・アプリのサイズが大きくなりがち：Flutterアプリはネイティブアプリに比べてサイズが大きくなる傾向がある。
・Dartの習得が必要：DartはFlutter専用の言語であり、他の言語に比べると知名度が低く学習コストが高い。
・一部のネイティブ機能が使いづらい：特定のネイティブAPIを使用する場合、プラグインやネイティブコードの記述が必要になることがある。
・iOS向けのサポートがAndroidよりも若干遅れることがある：Google主導のプロジェクトであるため、iOS対応に時間がかかるケースがある。
プログラミングの世界で「銀の弾丸はない」という、すべてを解決するような都合のいい手段は存在しないという意味の言葉があります。
Flutterにも一長一短があるので、作りたいアプリや開発者のスキルに合わせてどんな環境を採用するかを判断する必要があります。
…ということで、Flutterで簡単なアプリを作ってみましょう。
今回はQRコードリーダーを作ってみようと思います。
開発環境の準備
まずは開発環境を構築します。
私の開発環境は
エディタ：VSCode
OS：Windows10
スマホ：Android
で、Android端末にapkファイルを直接インストールして動くところまでをやってみます。
Android Studioのインストール
プレビューとビルドにはAndroid Studioが必要ですのでインストールします。
インストール手順は前回の記事を参照してください。
Flutter拡張機能のインストール
次にVSCodeにFlutterの拡張機能をインストールします。
1.拡張機能本体のインストール
①サイドバーの拡張機能をクリック
②検索フォームで「Flutter」を検索
③一番上の「Flutter」をインストール
2.Flutter SDKのインストール
Flutter拡張機能インストール後、Ctrl + Shift + Pを押してコマンド入力フォームを表示し、Flutter New Projectを選択します。
FlutterSDKのダウンロードを促すポップアップが表示されますので、Download SDKをクリックします。
ダウンロード先フォルダを選択するウインドウが表示されますので、好きなフォルダを選択してClone Flutterをクリックします。
（どこでもいいですが、今回はC:直下を選択しました）
ダウンロードが完了するとFlutter SDKのパスを登録するポップアップが表示されますので、Add SDK to PATHをクリックします。
これでVS Codeの準備は完了です！
なお、拡張機能やFlutter SDKのインストールは一度だけ必要な作業です。今後は次項の「プロジェクトの作成」よりはじめてください。
プロジェクトの作成
VS CodeでCtrl + Shift + Pを押し、コマンド入力フォームでFlutter New Projectを選択します。
いくつか選択肢が表示されますので、今回はApplicationを選択します。
フォルダ選択ウインドウが表示されますので、プロジェクトを格納する親となるフォルダを選択します。
（このあとで入力するプロジェクト名のフォルダがこのとき選択したフォルダの中に作成されます）
プロジェクト名を入力するフォームが表示されますので、好きな名前を英数字で入力し、Enterを押します。
今回は「qrcode」としました。
そうするとフォルダの作成と必要ファイルのダウンロードが行われ、完了するとVS Codeでプロジェクトフォルダが開かれます。
これでソースを編集して開発を進めていきます。
ホットリロードとエミュレータでのプレビュー
この時点でどのようなアプリになっているのか、エミュレーターを起動して表示させてみましょう。
lib/main.dartを開いているときに右上の▶をクリックします。
エミュレーターの選択肢が表示されます。アプリを表示させたいエミュレーターを選択してください。
※端末の選択肢でcold bootとあるものは完全に電源が切れた状態から起動するエミュレーターです。起動に時間がかかりますので通常は無記名のものでいいと思います。
しばらく待つとエミュレーターが起動し、アプリが表示されました！
このアプリは前項の「Which Flutter template?」で「Application」を選択したときに生成されるサンプルアプリで、右下の「+」をタップすると中央の数値が追加されていくものです。
ホットリロードを試す
Flutter開発環境の特徴としてホットリロードが挙げられます。
ホットリロードはアプリを再ビルドすることなく変更が反映される仕組みで、そのため僅かな修正のたびにビルドで時間を取られることがありません。
エミュレーターを表示させた状態で修正を行い、どのように反映されるのか試してみます。
タイトル部分の変更が即エミュレーターに反映されました。
これは便利です。
・
・
・
ということで、QRコードリーダーが出来上がりました。
エミュレーターでは動作していますが、果たして実機で動くのでしょうか？実機にインストールしてみたいと思います。
ビルドと実機へのインストール
ビルドはターミナルでflutter build apkと入力します。
flutter build apk
ビルドが完了すると build/app/outputs/flutter-apk 配下にapkファイルが生成されます。
これをスマホに送って開けばインストールができます。
実機でも動きました！
まとめ
ということで、今回はFlutterを使用してスマホアプリの開発に挑戦しました。
Dartに馴染むのが大変そうですが、その点はChatGPTなどのAIツールでフォローするという手段も取れそうです。
次回はReact Nativeを試してみようと思います。お楽しみに！
【関連記事】
