.svg)
みなさん「Flutter Web」という言葉を聞いたことがありますか？
Flutterの進化版とも言えるフレームワークで、モバイルアプリとWebアプリのアプリ開発を一つのコードベースで行えるため、開発者の中でも注目を集めています。
今回は、そんな注目を集めている「Flutter Web」について、なぜFlutter Webが注目されているのか？基本的な解説から開発手順、そして今後の展望まで詳しく解説していきます。
また、Flutterについての基礎知識を知りたい方は、『Flutterとは何か？クロスプラットフォーム開発の魅力に迫る』もあわせて読んでいただくとより理解が深まるかと思います。ぜひご覧ください。
「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アプリケーションにも実現することができる。
・テストのしやすさ
WebアプリケーションはモバイルアプリケーションのxCodeやエミュレーターに比べて動作がスムーズなため、テストしやすい。
・優れたカスタマイズ性
Flutter Webではウィジェット（※1）と呼ばれるUI要素を利用してアプリを構築するため、UIのカスタマイズや再利用が柔軟かつ、独自のデザインやアニメーションの実現が可能。またレスポンシブデザインがサポートされているため、異なる画面サイズやデバイスにUIが自動的に対応される。また、プラットフォームのデザインパーツを使って、誰でも気軽に整ったUIを簡単に作ることができる。
※1：Widget（ウィジェット）とは
システム画面などに小さく表示される単機能のアプリケーションソフト。また、コンピュータの操作画面（GUI）を構成する、何らかの機能を持った表示・操作要素。前者は「ガジェット」（gadget）とも呼ばれる。（出典：IT用語辞典）
Flutterでは、Dart（ダート）という簡単で使いやすい言語が使用されます。2011年に発表されたDartはGoogleが開発したオブジェクト指向（※2）のプログラミング言語で、豊富なライブラリとツールを提供し、柔軟かつ効率的なコード記述が可能で、パフォーマンスと効率性を向上させる役割を果たしています。
※2：オブジェクト指向
コンピュータプログラムの設計や実装についての考え方の1つで、互いに密接に関連するデータと手続き（処理手順）を「オブジェクト」（object）と呼ばれる1つのまとまりとして定義し、様々なオブジェクトを組み合わせてプログラム全体を構築していく手法。（出典：IT用語辞典）
また、FlutterはDartを使用した宣言型UIフレームワークによって、ウィジェットの階層構造やプロパティを指定することで、UIのレイアウトやデザインといった見た目や動作を定義することができます。複雑なUIデザインの構築は、FlutterのUIを構築しているデザインパーツである様々なウィジェット（画像、アニメーション、テキストなど）を組み合わせることで思い描いたデザイン簡単に作成することが可能となっています。
ここで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は新しい技術のため、扱える開発者が少なかったり、Webインスペクター（※3）でエラーの発見や修正が出来なかったりと、まだ改善点も残っています。
※3 Webインスペクター
Webブラウザなどの開発者向け機能の一つで、表示中のWebページを構成するファイルや、HTMLやCSS、JavaScriptなどのソースコード、各要素のスタイルや属性などの詳細を表示するツールをWebインスペクタあるいは単にインスペクタという。（出典：IT用語辞典）
上記の様な課題についても、FlutterはGoogleによって開発され、幅広いサポートとコミュニティが充実しているという点から、これからどんどんと改善していくと考えられます。また、新しい技術と組み合わさることで、さらなるパフォーマンス向上も期待出来ます。例えば仮想現実（AR）機能の実装について、現在はパッケージやプラグインを通して提供されています。しかし、AR技術は急速に進化しているため、FlutterはARに対応する機能をどんどん強化していくと考えられます。現在はプラットフォーム固有の技術に依存しているため、AR機能を実装するには１つのコードではなくそれぞれのプラットフォーム向けに実装する必要がありますが、１つのコードで同時開発が出来るFlutterとして、この点を改善し、Fluttter ARの実現に向けて開発が行われています。
複数のプラットフォームに対応できるFlutterで作られたアプリの中でも、今回は2つ紹介します。
・BMW
ドイツのミュンヘンに拠点を置く自動車メーカーのBMWは、車両位置の特定やドアの施錠・開錠など、BMWの車に乗車するにあたって利便性を向上させる「My BMW」というアプリを提供しています。このサービスもFlutterによって開発されました。
BMWでは300名ものエンジニアがFlutterでの開発を行っているということで、これはGoogleに次いで世界最大規模のFlutter開発チームです。
・Grab
マレーシアを拠点にサービスをスタートさせ、現在東南アジアを中心にサービスを急拡大させているGrabは、フードデリバリーや配車、支払などの金融といったサービスを展開しています。このうち、商品の提供をしたいレストラン向けの「Grab Merchat」というアプリと、ドライバー希望の人向けの「Grab Driver」というアプリが、Flutterで開発されました。Andoid向けとiOS向けの2種類があり、合計で２億回以上ダウンロードされています。
新機能の追加やテスト、リリースなどの開発の一連の流れにかかる時間のうち、少なくとも1/3の時間短縮が実現できたとのことです。
ここまで、FlutterWebの基本的な知識と、実際の導入手順や将来性について解説してきました。Flutterで作られたアプリは年々増加しており、既存のアプリをFlutterで書き換えているケースも出てきています。モバイルアプリとWebアプリのアプリ開発を1つのコードベースで行えるという、アプリ開発にとって魅力的なフレームワークのFlutterWebに今後も注目が集まり続けると予想ができます。
JIITAKでも様々なプロダクト開発を行う中で、Flutterを採用し、現在ではFlutterアプリ開発/Flutter Web開発がJIITAKの強みの一つになっています。Flutterを中心としたフロントエンド開発から、Node.js、Python、PHP、GO、Java、などのバックエンドまで多様な技術を組み合わせて、柔軟な開発チームを構築しています。それにより、ビジネスの要件や目的、予算に合わせた最適なソリューションを提供することが可能です。モバイルアプリやWebアプリ開発でお困りのことがありましたら、ぜひJIITAKにご相談ください。
