モバイルアプリとWebアプリが同時開発可能な「Flutter Web」について解説
今回はモバイルアプリとWebアプリの開発を一つのコードベースで行える、Flutterの進化版とも言えるフレームワークの「Flutter Web」についての解説です。
Flutterについての基礎知識を知りたい方は、過去のflutterについての記事もあわせて読んでいただくとより理解が深まるかと思います。ぜひご覧ください。
Flutter Webとは
「Flutter Web」は「Flutter for Web」や「Flutter on the Web」とも呼ばれ、2019年に発表されたばかりの新しいフレームワークで、現在も開発が進行中です。近年その、開発効率の良さや開発コストを抑えられるという魅力的な点から、開発者をはじめ注目を集めて、Flutterで作られたアプリが増えてきています。
まずFlutterとは、Googleが開発した1つのベースコードで複数のプラットフォームのアプリ開発が可能なクロスプラットフォームのモバイルアプリケーション開発フレームワークです。そしてFlutter Webは、名前にWebが付いている通り、モバイルアプリケーションのみならず、Webアプリケーションも同時開発が可能になったフレームワークです。つまり、同じコードベースを使用して、モバイル、Web、デスクトップ向けのアプリケーションを開発できるのです。
特徴、メリット
モバイルアプリとWebアプリのそれぞれの良さを生かし、1つのコードで効率よく開発できるのがFlutter Webの特徴です。開発効率の向上やコスト削減、ユーザー体験の向上などの面で優れた選択肢となっています。Flutterの特徴やメリット、それらに加えてFlutte Webならではの特徴を以下にまとめていきます。
Flutter
・開発チームの一体化で人件費、開発時間、運用コストの削減
1つのコードベースで複数のプラットフォームをカバーできるため、開発チームを統合し、それぞれの費用と時間を削減できる。
・プロジェクトの一貫性
プラットフォーム間で一貫性のあるUIを提供し、ユーザー体験やブランドイメージの一貫性を実現する。
・モダンなUIフレームワークや充実した開発ツール
豊富な開発ツールやライブラリが用意されており、モダンで柔軟なUIの構築が可能。
・ホットリロード機能
開発中のコードをリアルタイムで反映し、確認しながらの開発が可能なため、素早い開発とデバッグを実現。
▼上記に加え、Flutter Webの特徴とメリットは下記の通りです。
Flutter Web
・１つのコードでWebアプリケーションもカバーできる
モバイル、Web、デスクトップ向けのアプリケーションを1つのコードでカバーできるというのがFlutter Webの最大のメリット。従来２倍、３倍で行っていた作業量を一つに抑え効率よいアプリ開発を実現する。
・Webアプリケーション特有のテストやデバッグのスムーズさ
クロスプラットフォームではコードが統一されているため、アップデートや仕様変更への対応やバグの発見、修正といったデバッグ対策がスムーズに行える。保守運用・サポートの面において、大きなメリットである。
・ネイティブに近いパフォーマンスの実現
Flutter自体が滑らかなアニメーションに重点を置いているため、モバイルアプリケーション同様の高品質なUIやアニメーションをWebアプリケーションにも実現することができる。
・テストのしやすさ
ウェブアプリケーションはモバイルアプリケーションのxCodeやエミュレーターに比べて動作がスムーズなため、テストしやすい。
・優れたカスタマイズ性
Flutter Webではウィジェットと呼ばれるUI要素を利用してアプリを構築するため、UIのカスタマイズや再利用が柔軟かつ、独自のデザインやアニメーションの実現が可能。またレスポンシブデザインがサポートされているため、異なる画面サイズやデバイスにUIが自動的に対応される。また、プラットフォームのデザインパーツを使って、誰でも気軽に整ったUIが簡単に作ることができる。
Widget（ウィジェット）とは
システム画面などに小さく表示される単機能のアプリケーションソフト。また、コンピュータの操作画面（GUI）を構成する、何らかの機能を持った表示・操作要素。前者は「ガジェット」（gadget）とも呼ばれる。
導入手順
ここでFlutter Webの導入手順を紹介します。
Flutter SDKのインストール
Flutterの公式ホームページから「Flutter SDK」をダウンロードする。この際、正しいバージョンをインストールする注意が必要。
▼
プロジェクトの作成
Flutter SDKがインストールされたら、ターミナルを開き、新しいFlutterプロジェクトを作成するためにコマンドを入力する。
flutter create koko_ni_app_no_namae
この ”koko_ni_app_no_namae”という箇所に入力
cd koko_ni_app_no_namaeflutter config --enable-web
これでkoko_ni_app_no_namaeプロジェクトでFlutter Webを使用する準備が完了。
▼
Webアプリのビルドと実行
以下のコマンドでアプリケーションを起動。
flutter run -d chrome
上記のコマンドではGoogle Chromeブラウザで実行されるが、他のブラウザでも実行可能。これでFlutter Webでアプリケーションを開発する準備が完了。
こうしてモバイルアプリとWebアプリが全て１つのコードで開発可能になります。
Flutter Webの現状と将来性
Flutter Webはベータ版のため、一部機能が制限されている可能性があり、開発者は最新情報やアップデートについて細心の注意を払う必要があります。また、Flutter Webは新しい技術のため、扱える開発者が少なかったり、Webインスペクターでエラーの発見や修正が出来なかったりと、まだ改善点も残っています。
Webインスペクターとは
Webブラウザなどの開発者向け機能の一つで、表示中のWebページを構成するファイルや、HTMLやCSS、JavaScriptなどのソースコード、各要素のスタイルや属性などの詳細を表示するツールをWebインスペクタあるいは単にインスペクタという。
上記の様な課題についても、FlutterはGoogleによって開発され、幅広いサポートとコミュニティが充実しているという点から、これからどんどんと改善していくと考えられます。
また、新しい技術と組み合わさることで、さらなるパフォーマンス向上も期待出来ます。例えば仮想現実（AR）機能の実装について、現在はarkit_flutter_pluginやARCoreなどのパッケージやプラグインを通して提供されています。しかし、AR技術は急速に進化しているため、FlutterはARに対応する機能をどんどん強化していくと考えられます。現在はプラットフォーム固有の技術に依存しているため、AR機能を実装するには１つのコードではなくそれぞれのプラットフォーム向けに実装する必要がありますが、１つのコードで同時開発が出来るFlutterとして、この点を改善し、Fluttter ARの実現に向けて開発が行われています。
JIITAKでも様々なプロダクト開発においてFlutterを採用し、現在ではFlutterアプリ開発/Flutter Web開発がJIITAKの強みの一つになっています！
モバイルアプリやWebアプリ開発でお困りのことがありましたら、ぜひJIITAKにご相談ください！
