Honmushi blog
2019/03/15

【実践技術書】Flutter入門

クロスプラットフォームアプリケーションをつくることができる言語「Flutter」に関する本です。 タイトルの通り入門書となっており、Fluttrを使ったことが無い人向けの内容になっています。

全くのプログラミング初心者ではなく、他言語でプログラミング経験があるレベルの人が対象です。

以下の記事で以前紹介している「React Native」と立ち位置的にはにています。使用する言語や仕組みが違いますが、どちらもクロスプラットフォームのスマホアプリをつくることができます。
【実践技術書】React Native 入門

利用する環境

インストールの方法も丁寧に書かれているので、それに従って進めれば問題ありません。Windowsとmacの手順が記載されています。

  • Flutter SDK
    Flutterでの開発に必要なものが大体ここに入っています。利用するDartという言語や他もろもろです。

  • Android studioまたはVisual Studio CodeまたはXcode
    環境と好みによって好きなものを使えます。プラグインなどの設定方法も書かれていました。
    基本的にはAndroid Studioがおすすめされています。軽快さを求めるならVisual Studio Codeです。 FlutterSDKを導入すれば、これらのIDEを使わなくとも開発可能で、例えばテキストエディタでの開発も可能です。

    仮想デバイスでの確認の設定のために、AndroidStudioでの設定が必要になります。

  • Flutter Studio
    ブラウザ上で利用できるUIデザインツールです。簡単に画面のデザインができて、そのソースコードをコピペすれば手元の開発環境で利用できます。

Flutterの特長

プロジェクト内にはテストコード用のプログラムも生成されており、ユニットテストのことも意識しながら開発ができます。 非同期処理もそこに含まれており、さまざまな基本的な処理をすぐに体験することができます。

React NativeではWebと似たようなJSXやstyleの 開発ができましたが、Flutterではそういうわけではありませんでした。 そのかわりブラウザ上で利用できるFlutter Studioを利用することで、簡単にマテリアルデザインのUIが作れてコード化もできます。使い方は独特ですが、一度使ってみるとおもしろいです。

サンプルで作ったもの

一通りのウィジェットの解説と、グラフィック描写、複雑なUIの実装をやってから、ファイルやデータへのアクセス等を経験できます。 それらが終わったら以下のサンプルアプリを作ります。

  • RSSリーダー
    WEB上のサイトからRSSを受け取り、更新や内容をチェックできます。WEBでのリクエストやその返り値の処理を行います。
  • お絵かきカメラ
    カメラで写真を取り、そこにタップでお絵描きして、保存します。カメラへのアクセスやcanvasでの描画。編集などを行います。

結構複雑そうに見えますが、ソースコードはシンプルでわかりやすいです。FlutterでつくるとUIはスッキリわかりやすく、ソースコードもシンプルになると感じました。

おわりに

Flutterは1つのソースコードでiOSとAndroidの両方のプログラムがかけるのでとても便利です。開発はGoogleが進めているので、これからの発展にも大いに期待できます。スマホアプリ以外の分野でも利用できるようになると思います。

React Nativeと比較すると、使い勝手や使えるモジュールなどに差があります。必要な仕様や要件によって選ぶべきです。
ただ「React Native」にはExpoを利用することで開発・ビルドがとても簡単になるので、私個人的にはそちらのほうがオススメです。最初はさくっとアプリを作って慣れてきたらFlutterにも手を出して、比較してみるのがいいかなあと思います。

  • このエントリーをはてなブックマークに追加
HOMEPROFILEPRIVACY POLICY