Flutter for Web で実際にサンプルプログラムを動かしてみる！

Flutter とは？

Flutter とは、Dart という Google が開発している言語でアプリを開発し、1つのコードで、Android と iOS の両方で動作するネイティブアプリが作成できるという特徴を持っていました。

モバイル向けのクロスプラットフォーム開発ツールとして、「Xamarin」「Cordova」「React Native」 などと比較されることが多いです。

また、2019/5/7「Google I/O 2019」にて Flutter Web が発表されました！

Flutter はさらに野心的に、 Windows、Mac、Fuchsia ( Google が開発中の OS )、Raspberry Pi でも動作するように開発が進められ、さらに今回の発表で Web のサポートも加わりました。

つまり、Flutter はモバイル、Web、組み込み、そしてデスクトップとマルチプラットフォーム対応のUIフレームワークになりつつあります。

ミツオカ

Flutterについてもっと詳しく知りたい方は下の記事をお読みください！

にゃんこ師匠

Flutter(フラッター)の紹介から環境構築まで

Flutter for Webとは？

Flutter for Web は、 HTML、CSS、JavaScript といった標準的なWeb技術を利用して、Flutter をレンダリングする実装です。

Flutter for Web を利用することで、Dart で書かれた既存の Flutter コードを、任意のWebサーバーで配信して、クライアントで実行できます。

Flutter は、現在テクニカルプレビューとして、GitHub リポジトリ (flutter/flutter_web)が提供されています。

Flutter for Webで実現しようとしていること

1. インタラクティブグラフィックのための 60 FPS で動作
2. ほかの Flutter プラットフォームと一貫した動作とビジュアル
3. 既存の開発パターンと統合する高生産性の開発者向けツールの提供
4. すべてのモダンブラウザのコアWeb機能のサポート

Flutter Web のアーキテクチャ

Flutter Web のアーキテクチャは、上の図のようになっています。

緑のエリアが Flutter 、黄色が Web 技術です。

緑の領域は Flutter が受け持っているためモバイルとWebで共有可能となります。

DOM、Canvas、CSS を組み合わせることで Flutter を描画し、高品質・高機能なユーザーエクスペリエンスを実現します。

Flutter for Web を実現するために、コア描画レイヤを Dart で実装されました。

そして、Flutter コアと Flutter のアプリケーションコードが Dart の JavaScript コンパイラによって、JavaScript にコンパイルされます。

生成したJavaScript は minifiled された1つのコードとして提供されます。

あくまでテクニカルプレビュー

Flutter for Web が発表されたとはいえ、あくまでテクニカルプレビューです。

性能評価としては利用可能かもしれませんが、今後も大幅に変更が予想され、本番環境に導入するのは危険が伴うでしょう。

公式からアナウンスされている注意点

1. Flutter for Web は Flutter リポジトリからフォークした状態で開発されています。
2. 順次、web code は Flutter のコアリポジトリに取り込まれつつあります。
3. Flutter widget API はモバイル版と同じですが、パッケージは一時的に分割して提供されます
4. 既存の Flutter アプリケーションを Web プレビュー向けに再パッケージは可能ですが、いくつか注意点があり、GitHub リポジトリで詳細を確認できます。

GitHubで注意書き

1. plugin システムが動作しません
2. Flutter for Web はすべての Flutter API のすべてをまだ実装できていません
3. パフォーマンス調整がまだできてません。速度が遅かったりジャンクコードを生成します。
4. まだデスクトップ UI にはまだ最適化されていないため、Flutter for Web はモバイルアプリの UI のように感じることがあります。
5. 開発ワークフローは現時点では、Chromeと連携するように設計されています。

これを見る限りだと、まだまだ開発途中であることが伺えます。

実際の動作確認

Flutter for Web で作成されたサンプルアプリが以下のサイトで公開されています。

Flutter for web samples

やや動作にカクツキを感じたり、デスクトップで開くとモバイルUIのように感じたりと、まだまだな印象があります。

ですが、モバイル端末で開いたとき、Web サイトでありながらまるでネイティブのモバイルUIのように感じる動作は将来性を感じさせます。

サンプルプログラムを動かしてみる

あくまでテクニカルプレビューであるということを踏まえて、サンプルコードを動かしてみましょう。

サンプルコード

Flutter WEB のサンプルコードは、こちらで公開されています。

flutter/flutter_web

Flutter SDK を導入してください。

Flutter SDK のインストールは別記事で取り上げています。

flutter docktor が実行できるところまで設定できていたら大丈夫です。

クローンしたら、リポジトリの中に入ります。

実際に動かしてみる

今回は Hello World を表示させます。

Flutter Web のビルドツールである webdev パッケージをインストールします。

実行したら以下のような警告が表示されました。

警告にしたがって .bash_profile にパスを追記します。

記述内容は各自の環境にあわせて変更してください。

追記したら、設定を読み込み有効にします。

次に、examples/hello_world に必要なパッケージをインストールします。

そして以下のコマンドを入力して開発サーバーを立ち上げます。

しばらくすると、localhost:8080 に開発サーバーが立ち上がるはずです。

Hello World

Flutter for Web では、サーバーへデプロイするためのビルドコマンドが用意されています。

ビルド結果は build フォルダに出力されます。これをWebサーバーにアップロードするとFlutter WEBアプリケーションとして配信できます。

gallery が楽しい

Flutter のサンプルコードの /example/galleryをビルドすると、どのような Flutter for Web でどのような Widget が用意されているのか確認できます。

Hello World をビルドした手順でぜひビルドして、内容を確認してください。

「ビルドが面倒！」という方は、Flutter web gallery にアクセスするだけで Flutter の Widget を確認できます。

まとめ

新たに発表された Flutter for Web について紹介していきました。

現在、開発中とはいえ、1つのコードでモバイル、デスクトップ、Web とアプリケーション開発が可能になるのは凄く魅力的です。

安定版がリリースされることを見越して、今から Flutter 技術をキャッチアップしておくのも良いでしょう。

参考

1. Flutter
2. Flutter for web
3. Bringing Flutter to the Web
4. flutter/flutter_web

一緒に働いてくれる仲間を募集中！

ライトコードでは、仲間を募集しております！

ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。

どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず！また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。

あなたからのご応募をお待ちしております！

ライトコードでは一緒に働いていただける方を募集しております！
お気軽にご応募ください。

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部

「好きなことを仕事にするエンジニア集団」の（株）ライトコードのメディア編集部が書いている記事です。

最新の投稿

• IT技術2019.06.19GraphQL とは？REST API の代替になる？
• IT技術2019.06.14MacでDockerでUbuntu環境を構築する
• IT技術2019.06.14【後編】自作の誤差逆伝播学習法で手書き数字を認識させてみよう！【機械学習】
• IT技術2019.06.11【前編】自作の誤差逆伝播学習法で手書き数字を認識させてみよう！【機械学習】

• 投稿者: ライトコードメディア編集部
• IT技術

• 【2019年前期版】優秀なレスポン...
• 給料が高いプログラミング言語10選...