【Flutter for Web】メリットや導入方法をわかりやすく解説

Flutter for Web って何ができるの?
Flutterとの違いはあるの?

そんな風に思い悩んでいるあなたに、

  • Flutter for Webとは
  • Flutter for Webのメリット
  • Flutter for Webの導入手順

をテーマとして、Flutter for Webを分かりやすく解説しました。本記事を読んで、ぜひFlutter for Web を楽しんでください!

Flutter for Webとは

開発風景

Flutter for Webとは?

Flutterはそもそも、iOSやAndroidなどのスマートフォン向けアプリを開発するために作られたフレームワークです。フレームワークとは、よく利用される便利な機能を集めてある程度の実装規約に沿ってプログラミングを進めることで、アプリケーションを作成できるもののこと。

そのようなスマホアプリが開発できるFlutterに、今回ご紹介するWebアプリが開発できる「Flutter for Web」があります。そもそもFlutterとは何かについて、詳細を確認したい方は以下の記事を参考にしてください。

Flutterとは?始める前にこれだけは押さえておきたい必須知識を解説
更新日 : 2020年10月19日

Flutter for Webのメリット

FAB

Flutter for Webの魅力とは?

それでは、Flutter for Webの魅力やメリットをご紹介しましょう。

まずは、いわゆるWindowsやMac、LinuxなどのOS(Operating system)に依存しないアプリケーションを作れることがメリットの一つです。さらに、Webアプリケーションはスマホのブラウザで見ることもできるので、様々な媒体で活用できるというメリットもあります。

また、こちらもWebアプリケーションならではのメリットとなりますが、Webアプリケーションのテストやデバッグはブラウザ上で行われるため、低スペックマシンでも開発が可能です。

比較対象としてスマホのネイティブアプリの開発を例に出すと、ネイティブアプリのテストを行う際に使用するエミュレーターは動作がとても重く、ある程度のスペックがあるPCではないと、効率良くテストができないケースがよくあります。

そういった事態に陥る可能性が低いのは、Flutter for Webならではでしょう。ローカル環境の開発環境の準備や上記のエミュレーターについて詳しく知りたい方は、以下の解説記事を参考にしてください。

Flutterのインストールを分かりやすく解説 | Mac & Windows
更新日 : 2020年9月3日

Flutter for Webの導入手順

ではFlutter for Webの導入手順について見ていきましょう。ここでは、以下の順番で解説していきます。

  • Flutter SDKのインストール
  • Flutter for Webのセットアップ
  • プロジェクトを作成する
  • プログラムを実行する

Flutter SDKのインストール

まずはFlutter 本体をインストールします。詳しいインストール手順は、以下の記事を参考にしてください

Flutterのインストールを分かりやすく解説 | Mac & Windows
更新日 : 2020年9月3日

また、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 demo Home Page http://localhost:8080

まとめ

Flutter for Web の概要やメリット、インストールしてアプリケーションを起動するまでの方法がお分かりになりましたでしょうか?

Flutter for Webを使いこなすことで、スマホアプリとWebアプリが一つのFlutterというフレームワークでプログラミングできるようになります。次のアクションとして、あなたが実際に作りたいWebアプリをFlutter for Webで作ってみましょう。ぜひ、Flutter for Webの世界を楽しんでください。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー