Flutterとの違いはあるの？
そんな風に思い悩んでいるあなたに、
- Flutter for Webとは
- Flutter for Webのメリット
- Flutter for Webの導入手順
をテーマとして、Flutter for Webを分かりやすく解説しました。本記事を読んで、ぜひFlutter for Web を楽しんでください！
また、次の記事ではFlutterの基礎知識を解説したうえで、モバイルアプリの開発手順や覚えておきたい便利機能を紹介しているので、あわせて参考にしてください。
→ 【Flutter入門】導入方法からアプリ開発の手順まで徹底解説
Flutter for Webとは
Flutterはそもそも、iOSやAndroidなどのスマートフォン向けアプリを開発するために作られたフレームワークです。フレームワークとは、よく利用される便利な機能を集めてある程度の実装規約に沿ってプログラミングを進めることで、アプリケーションを作成できるもののこと。
そのようなスマホアプリが開発できるFlutterに、今回ご紹介するWebアプリが開発できる「Flutter for Web」があります。
Flutter for Webのメリット
それでは、Flutter for Webの魅力やメリットをご紹介しましょう。
まずは、いわゆるWindowsやMac、LinuxなどのOS（Operating system）に依存しないアプリケーションを作れることがメリットの一つです。さらに、Webアプリケーションはスマホのブラウザで見ることもできるので、様々な媒体で活用できるというメリットもあります。
また、こちらもWebアプリケーションならではのメリットとなりますが、Webアプリケーションのテストやデバッグはブラウザ上で行われるため、低スペックマシンでも開発が可能です。
比較対象としてスマホのネイティブアプリの開発を例に出すと、ネイティブアプリのテストを行う際に使用するエミュレーターは動作がとても重く、ある程度のスペックがあるPCではないと、効率良くテストができないケースがよくあります。
そういった事態に陥る可能性が低いのは、Flutter for Webならではでしょう。
Flutter for Webの導入手順
ではFlutter for Webの導入手順について見ていきましょう。ここでは、以下の順番で解説していきます。
- Flutter SDKのインストール
- Flutter for Webのセットアップ
- プロジェクトを作成する
- プログラムを実行する
Flutter SDKのインストール
まずはFlutter 本体をインストールします。詳しいインストール手順は、以下の記事を参考にしてください
また、Flutter for Webを利用する為に、Webアプリのデバッグ用にChromeブラウザがご自身のPC環境にインストールされていることを確認しましょう。（Chromeが無い方はこちらからインストールしておきましょう）
Flutter for Webのセットアップ
ターミナルから以下のコマンドを実行し、Flutter SDKの最新バージョンを使用し、Webサポートを有効にします。
[result] $ flutter channel beta $ flutter upgrade $ flutter config --enable-web [/result]
上記コマンドにてWebが有効になった後に、以下のコマンドを実行して、Chromeなどの表示がされていることを確認しましょう。
[result] $ flutter devices 2 connected device: Web Server • web-server • web-javascript • Flutter Tools Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129 [/result]
プロジェクトを作成する
上記まで準備ができたら、あとは通常のFlutterのスマホアプリを開発するのと同様にプロジェクトを作成するコマンドを実行します。
[result] $ flutter create myapp $ cd myapp [/result]
実行する
そして、アプリケーションを起動するコマンドは以下の通りです。
[result] $ flutter run -d chrome [/result]
通常のFlutterでのアプリ開発の際は、flutter run だけでしたが、Flutter for Webの場合は、オプション -d chrome を付与して実行します。そして、PCのChromeブラウザにて、こちらのページ へアクセスするとアプリケーションが表示されることが確認できます。
まとめ
Flutter for Web の概要やメリット、インストールしてアプリケーションを起動するまでの方法がお分かりになりましたでしょうか？
Flutter for Webを使いこなすことで、スマホアプリとWebアプリが一つのFlutterというフレームワークでプログラミングできるようになります。次のアクションとして、あなたが実際に作りたいWebアプリをFlutter for Webで作ってみましょう。ぜひ、Flutter for Webの世界を楽しんでください。
