Chapter 01

はじめに

fastriver
fastriver
2021.02.13に更新
このチャプターの目次
  1. この書籍について
  2. Flutterとは？
  3. Flutter Web
  4. Dart
  5. Flutter Webで作られた作品の紹介

この書籍について

この書籍は、慶應義塾大学AI・高度プログラミングコンソーシアムの2020年度講義「FlutterでWebアプリ開発初級編」で使用した資料を再編したものです。

全5回、プログラミング初学者からFlutterに興味のある人を対象にしています。

2020年4月時点での内容のため、現在と多少状況が異なる場合があります。

Flutterとは？

flutter

flutter.dev

Flutterは、2015年に発表・2018年に正式版リリースされた"新しい"フレームワークです。

Googleが中心となってオープンソースで開発が続けられています。

クロスプラットフォームであるため、1つのコードで

  • Android
  • iOS
  • Web(Beta)
  • Windows(Alpha)
  • Mac(Alpha)
  • Linux(Alpha)
  • その他(Fuchsia, 組み込み, etc..)

などの様々な環境で動かすことができます！

少し古いですが、Flutterについて詳しくは「Flutter Webはいいぞ – KCS ComputerSociety」で書いていたりします。

グーグルのUIフレームワーク「Flutter」、利用広がる--新たなリリースモデルも

既に世界には200万人の開発者がいる


その勢いは同じくクロスプラットフォームフレームワークのReact Nativeをも凌ぐ

Flutter Web

Flutterは様々な場面(主にモバイル)で役立つ子ですが、今回扱うのはWeb向けの「Flutter Web」になります。Flutter Web(Flutter on the Web/Flutter for Web)は2018年12月発表・2019年12月Beta版開始のFlutterの中でもまた若いフレームワークです。モバイル向けの書き方ほぼそのままでWebアプリが作れちゃいます。

Webの世界にはRuby on Rails、PHP、React、Vue等たくさんの言語/フレームワークが存在しますが、その中でFlutter Webを選ぶメリットは

  • デザインが楽！
    • 元からGoogleのMaterial Designに沿った見た目のWidget(ボタンやカード等)が用意されているのでそれらを組み合わせるだけでかっこいいものが作れる
  • HTMLを書かなくていい
  • CSSを書かなくていい
  • JavaScriptを書かなくてい
    • Dartという素晴らしい言語で開発ができる

特に他のフレームワークでは決して逃れられないHTML/CSS/JSから完全逃避できる面が非常に大きいです。

デメリットは

  • 実行速度が遅い これを見れば分かる
  • 普通のホームページを作るには機能が貧弱
    • 元々モバイルアプリ作る用のフレームワークだからね
  • DOMによる表示ではないため、既存の資源がほとんど使えない(WebではなくDart/Flutterのエコシステムからライブラリを探すことになる)
    • まともなHTMLを作らないのでブログ等にも向かない(SEO対策できない)

現状Flutter Webはミニゲームなどの単純なページに使うのが適解だと思われます。

Dart

Dart

こちらもGoogle先生主導のオープンソースで開発されている言語です。立ち位置は

JavaScript <= Dart < Java

くらい

FlutterはDartで開発するので覚えなくてはなりません。しかし文法自体は標準的なので他の言語を触ったことのある人ならすぐに書け、初学者でも学びやすい言語だと思います。

DartはFlutterの他、AngularDartやサーバーサイドで使われることがあるが基本はFlutterとセットのものだと考えて良い

Flutter Webで作られた作品の紹介