Zenn
💌

Flutterを大好きになってしまうカラクリ

2020/09/30に公開
Flutter
flutterholic
tech

この記事はポエムっぽいタイトルですし、書いている本人もほとんどポエムの気持ちで書いています。そのままだとポエム枠に入れるようなものなのですが、そこはエンジニアとして、内容は Flutter を始めてみようと思う方が Flutter に楽しく取り組めるよう、良コンテンツの紹介も交えながら、学習ロードマップ導入編になればなぁと思って書いています。どうぞお付き合いください。

この記事ははじめてプログラムを書くよ！という方には説明がすっ飛んでいるところがあると思います。多少なり他のプログラミング言語を使って、小さいアプリを作ったことがある程度の知識を想定しています。ご容赦ください。

Flutter ってなに

Flutter という言葉を聞いたことがない、またはなんとなく Twitter で流れてきたことがあるけどなぁ、という方もいらっしゃるかもしれませんので、かんたんに紹介させていただきたいと思います。

Flutter は Google が開発するオープンソースのフレームワークです。もともと iOS と Android のモバイルプラットフォーム向けアプリケーションを開発するためのフレームワークとしてスタートしました。最近は Web 方面やなんとなんと Windows デスクトップにまでその裾野を広げている、とてもワクワクするフレームワークです。

Flutter 公式

Flutter は β 版は少し前からありましたが、正式版 Ver.1.0 は 2018 年末にリリースされたので、この記事を書いている時点でも、まだ 2 歳に満たないフレームワークです。ちなみに、私の娘は Flutter 正式版 Ver.1.0 と数日違いの誕生日です。
Google Developers Blog: Flutter 1.0 Google's Portable UI Toolkit

Flutter についてはこの動画がとてもかっこよく、ワクワクします。

Flutter ってどんなことができるの

Flutter は iOS や Android で動くアプリケーションを作ることができます。作ったアプリは AppStore や GooglePlay にリリースして、スマートフォンにインストールすることが目標です。

さて、Flutter は他のフレームワークとどんなところが違うのでしょうか。本題に入る前に、ひとつお願いがあります。 フレームワークということばの定義はとてもややこしく難しいので、以後は単にツールと表現させてください。 うまく使い分ける自信がありません。٩( ᐛ )و いぇい

スマートフォンアプリを作る方法は多岐にわたります。昔は Java + Eclipse, Objective-C + Xcode だったので、いい時代になったなぁとつくづく感じています。ざっと書き並べてみます。興味があればぜひそれぞれ調べてみてください。

  • Swift
  • Java, Kotlin
  • React Native
  • Xamarin
  • Flutter
  • Unity

他にも Cocos とか Cordova とかいろいろありますね。この中では Swift は iOS ネイティブ、Java、Kotlin は Android ネイティブですが、その他はいわゆるクロスプラットフォーム対応です。クロスプラットフォームに対応しているということは、ほとんど共通のソースコード資産から複数のプラットフォームに対応したアプリケーションを開発することができるので、 開発リソースを抑えながらアプリケーションをリリースできる という素晴らしいメリットがあります。

では、Flutter は何が素晴らしいのでしょうか？私は React Native も Xamarin も浅いですが経験があります。その立場から言わせていただきます。

みんな違って、みんな良い

クロスプラットフォーム作ってくださっている超有能エンジニアの神々のおかげで簡単にアプリケーションが作れるという事自体が素晴らしいことです。あとは使いこなせるかどうかです。

さて、そんな信仰じみたことはおいておいて、 私の思う Flutter の素ﾝ晴らしいポイントについて考えてみました。いろいろ良い点ありますが次の一言に込めたいと思います。

無事に一言にまとめることができましたが、やはりより具体的な表現もすべきだろうと考えを改め、以下のポイントを挙げたいと思います。

  1. ホットリロード、ホットリスタートが快適すぎる
  2. 美しすぎる、クロスプラットフォームで一貫した UI
  3. 公式の YouTube がためになりすぎる
  4. 公式のドキュメントが親切すぎる
  5. Flutter 好きの諸先輩方が SNS で有益な情報を発信しまくっている

次章以降はこれらについての紹介と、これらを挙げた理由について、具体的に Flutter の説明を交えながら紹介します。
(message 表記の使い方間違えた気がする・・・でも目立つからこれが良いの・・・)

Flutter の素晴らしさは、まず UI 構築で味わおう

Flutter はなんといっても 美しいユーザーインターフェイスがかんたんに組めてしまう ということが素晴らしいです。ホットリロードの度にアドレナリンがどばどば出ます。

このホットリロードですが、先に上げた通り、Flutter の素晴らしいポイントの 1 つです。 Flutter にはホットリロードという仕組みがあります。これは、実装をすすめながら、随時変更点をリロードし、すぐさま変更を確認できるというものです。ホットリスタートも似たようなものですが、少し違います。ここで説明するのはやめますが、理解をしておいたほうがいいものです。

ソフトウェア開発はなんといってもデバッグができるようになることがスタートラインです。そして Flutter はこのデバッグが素ﾝ晴らしいのです。

とくに UI の構築においては大活躍です。私のような非デザイナー個人開発サンデープログラマーは、デザイン仕様を Adobe XD や Figma でガッツリ仕上げてから実装するということは、早々しません。（もしそこまでされている方がいるなら超尊敬）

そんな私は、大まかな UI をワイヤーフレームでざっと検討したら、すぐに実装に取り掛かります。実装しながら微調整をします。

ちょっとアイコン変えてみよう

フォント変えたほうが良いかなぁ

どっちのレイアウトのほうが快適かなぁ

こういう検証をサクサクとすすめることができます。 Flutter Official: Hot Reload

さて、Flutter ではどんな UI が構築できるのでしょう。そう思ったあなた、ぜひこの動画を見てみてください。この動画の中でもホットリロードが大活躍しているので、その快適さを垣間見ることができます。

超かっこいいですよね！一昔前の開発環境では、こういうかっこいい UI を組もうと思うと、なかなか骨の折れる作業でした。Flutter では個人開発でもちょっと頑張ればこのようなかっこいい UI を組めるのです。しかも、ほとんど Flutter 公式純正のライブラリだけを使って 、です。これはどういうことかと言うと、ただでさえ説明が丁寧な公式ドキュメントがほとんどのコンポーネントに対して利用できるということです。 感動的ですよね。

これが先に上げた素ﾝ晴らしいポイントの、公式 YouTube や公式ドキュメントです。以降ちょくちょくリンクを貼ります。

Flutter UI 構築デモ

ではそろそろ実装っぽいことをやってみましょう。Flutter ですが、開発環境の構築がとても簡単です。ホットリロードを味わおうと思うと開発環境構築からやりたいところなのですが、ここでは記事に埋め込めるというメリットを活かして、 Codepen を使おうと思います。

CodePen Flutter Project

CodePen: Flutter デモ
この CodePen の Flutter プロジェクトを使えば、開発環境を構築しなくても Flutter の UI 構築を体験できます。

いい時代だなぁ・・・　 ٩( ᐛ )و いぇい

UI 構築に関してはノーコードで組める Flutter Studio というものもありますが、使ったことがないので今回は CodePen を使います。

上に記載した CodePen のリンクを踏んで頂くと、Flutter の HelloWord プロジェクトが用意されていると思います。以下のとおりです。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Build some widgets!',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

上の方から見ていきましょう。

material.dart

コードの最初にある import 文ですが、これは Flutter の SDK に含まれる material.dart ファイルに記述されているプログラムを参照して使うよ、というものです。

import 'package:flutter/material.dart';

Material ですが、これは Google が進めているデザインガイドラインです。material.dart ファイルには、 Material Design 公式 に準拠した数多くのコンポーネントが実装されており、私たちはそれをありがた〜いことに、使わせていただけるのです。この時点である程度の美しさが担保されていると言っても過言ではありません。 しかもこの美しさは iOS でビルドしても、Android でビルドしても、ほとんど見た目に違いはありません。 一貫性のある UI になるのです。
これが先に挙げた素ﾝ晴らしいポイントの 2 つ目にある、美しく一貫した UI が実現できるカラクリです。これについては以降で体験していきましょう。

尚、この奇跡の一行については、Flutter およびそれを開発してくれている Google の Flutter Team に対する敬意をもって、コピペではなく手打ち実装することをここに誓います。

Widget

さて、その次ですが、

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

これがプログラムのエントリポイントです。main から、というお作法はどこも同じですね。わかりやすくていいです。さて、ここには 1 つクラスが定義されています。 MyWidget ですね。これは、 extends StatelessWidget という継承がされています。

extends はクラスの継承です
オブジェクト指向というやつですね。オブジェクト指向についてはこの Qiita 記事が究極系だと思っています。オススメです。Qiita: オブジェクト指向と 10 年戦ってわかったこと

いったんここでは Stateless については触れません Widget について触れます。 Flutter を語る上で Widget（ウィジェット）は避けては通れません。Flutter アプリケーションを構成する上でもっとも頻繁に出会う単位です。

Widget ですが、これは正しく理解しようとするとなかなか深い話になるので、私もまだ完全には理解していません。理解する日は来ないと思います。 ダニング=グルーガーのアレ、ですね。
Flutter において実装者が主に記述するものは Widget です。Widget が Widget を呼び出し、その Widget がまた次の Widget を呼び出し・・・と、子孫繁栄のごとく続いていきます。これを Widget ツリー といいます。

上の例では、

MaterialApp
-> MyWidget
-> Scaffold
-> Center
-> Text

といった呼び出しが起きていることが見て取れると思います。コード中のどの部分が Widget なのかをまだ説明していないので、だいたいこんな感じかな〜と思っていただければ幸いです。

Widget は

  • UI に表示する部品そのものであったり
  • 部品のレイアウトを調整するためのものであったり
  • データを流すためのものであったり

役割は違いますが、それぞれツリー構造にしてあげることで、親子の関係を作り出し、デザインからロジックの実装までを一貫して行うことができます。

上の例にある Widget からいくつか紹介しようと思います

MaterialApp

MaterialApp ウィジェットは、配下のツリーに Material Design を持ち込むためのウィジェットです。公式ドキュメントを見てみましょう。Flutter 公式: MaterialApp
Flutter のドキュメントは日本語の情報がとても少ないです。最近は諸先輩方のおかげで随分と日本語の情報が増えてきてはいますが、現時点では公式ドキュメントを直接理解することが最短ルートだと思います。

英語ができるかたはぜひ、苦手な方もこれをきっかけに英語に取り組むことをオススメします。エンジニアとしてやっていくなら、英語に慣れておくのは重要だと思っています。クラス名や変数名の英語がおかしい人、結構いますからね。英語ができなくてもプログラマーにはなれる という記事をたまに見かけます。正しいと思います。でも、英語ができる人の書いたコードのほうが読みやすいのは私の経験上、事実です。

さて、少しそれましたが、公式ドキュメントの読み方を確認しておきましょう。 Widget といいつつもこれはただのクラスです。つまり、プロパティとメソッドがあります。また、Widget ツリーで使われる Widget はコンストラクターでどのようなオプションを設定できるのかが重要です。このことから、UI を構築していくなら、 コンストラクター の部分に着目することをオススメしています。

さきほどのソースコードを見てみましょう。

  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );

MaterialApp に対して、home だけが指定されていますね。コンストラクターでこの型が確認できますね。確認すると、home は Widgetだということがわかります。Flutter では、ほとんどすべての Widget は子 Widget を持つことができます。つまり、MaterialApp の子 Widget は home で受け渡すということになります。同様のことを Scaffold や Center などに対して見てあげると、コンストラクターに指定された Widget は child になっていると思います。Flutter の Widget はほとんどがこちらです。 MaterialApp はアプリの一番外側で定義されることが多いので、ここはあえて home となっています。

Center

次は Center ウィジェットについて説明します。これは、さきほどあげたウィジェットの役割のうち、レイアウトを司るものです。その名の通り、ど真ん中に子 Widget を配置するぞ! というものです。Flutter では頻出のレイアウトウィジェットというものがいくつかありますので、後ほど紹介します。

参考

Flutter の Widget については、私が（勝手に）崇拝する Flutter エンジニア、 mono さんの記事が最高に良いです。ここでは触れなかった、Element との関係について説明されていて、とてもわかりやすいです。
Medium: Flutter の Widget ツリーの裏側で起こっていること

Flutter の素晴らしい点、その 5 に登場した SNS で有益な情報を発信してくださっている尊敬すべき先輩の 1 人です。是非フォローしましょう。٩( ᐛ )و いぇい

レイアウトを変えてみよう

Flutter では UI に表示する情報のレイアウトをコントロールするウィジェットがあります。その代表が先に登場した Center です。このような頻出レイアウトウィジェットをいくつかピックアップしてみました。

  • Padding
  • Align
  • Stack
  • Row
  • Column

このあたりが頻出だと思います。もちろん、他にもたくさんのウィジェットがあります。ここで CodePen を使って、ちょっとだけ動かしてみましょう。

CodePen ですが、Flutter ボタンを押せば Dart のコードを見ることができます。倍率を下げると見やすいかもしれません。

はい、いろいろ実装してみました。といっても、まだ先に上げたウィジェットは使っていません。新しく Container ウィジェットと Center ウィジェットを追加しました。 Container ウィジェットは縦横のサイズと色を指定してあげることで、シンプルなカードになります。ウィジェットの動作をテストするのにうってつけです。

では、この Container をつかって、Stack と Align を見てみます。

こんな感じでいろいろなもののレイアウトを組むことができます。さて、これを実際のアプリに適用するとどうなるのか。

Flutter 公式: Layouts in FLutter
こんな感じです。

私はこのページをみて、「あ〜〜〜〜なるほど・・・・・夢があるな！！」となりました。

もっと夢を膨らまそう

そろそろ「Flutter は他にどんな UI が組めるんだろう？」とソワソワしてきませんか？そんなあなたに、公式 YouTube をオススメします。これが私の思う Flutter 最高ゥ!! の起爆剤です。

その名も、 Widget of the Week です。

Flutter の公式チャンネルには他にもたくさんの解説動画が上がっているのですが、** Flutter ってどんなことができるんだろう？を知るにはこのシリーズが一番いい** と思います。1 本あたり 1~2 分と短いので、いつでもスキマ時間に見ることができます。ぜひ面白そうだな〜というものを 2~3 個選んで見てみてください。

もし、Widget of the Week をみて、

「あ、Flutter でなにか作ってみようかな」

と思ったら、ぜひ作ってみてください。手を動かせば動かすほど、その魅力にどんどん取りつかれていくことでしょう。

深い技術的な話ができているわけではありませんが、Flutter でアプリを 1 本つくってみようかなと思ってくださる方が 1 人でもいらっしゃれば、Flutter の発展に貢献できたのかな、と大変うれしく思います。

お付き合いいただきましてありがとうございました。

すぎっと ٩( ᐛ )و

GitHubで編集を提案

Discussion