SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flutterで始めるモバイルアプリ開発

Flutterとは何か? 使うメリットや特徴を理解する

Flutterで始めるモバイルアプリ開発 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Flutterの特徴

 これまで、Flutter以外のフレームワークを通じて、Flutterを見てきましたが、ここからはFlutterならではの特徴を紹介します。これらを見ると、ここまで紹介してきた「文化」や「アーキテクチャー」などの違いの理由を感じることができます。

Android Studioとの高い親和性

 Flutterでモバイルアプリを開発する場合には、Android StudioがおすすめのIDEになります。Android Studioを使った際の開発画面が図5です。

図5:Android Studioを使った開発環境
図5:Android Studioを使った開発環境

 Google製のフレームワークということもあり、どうしてもiOSよりもAndroidの環境の方が親和性が高いのは否めません。すでにAndroidアプリの開発をしている方ならば使い慣れている方も多いと思いますが、同じように実行やデバッグが行えます。

 そして、iOSであっても、Android端末と同じように実行やデバッグは行えます(ただし、MacOSの場合)。そのため、iOSであってもXCodeを立ち上げる必要はありません。

Hot ReloadとHot Restart

 Flutterを使って開発していると、これまでの開発と異なる点にびっくりすることがあります。それは、コードを変更しているとその変更がすぐに実機デバイスなどに反映されることです。

 その機能を「Hot Reload」と言います。「Hot Reload」を使うと、変更した部分のみをすぐに反映できるので、画面開発などをしている最中には非常に便利な機能になります。また、変更した部分がバックグラウンドでステートを維持してしまっている場合には、「Hot Reload」では変更部分の反映ができない場合があります。この場合には、「Hot Restart」を使います。どちらもストレス無く実行され、Webアプリのように「変更したら、すぐに確認」という開発スタイルがモバイルアプリ開発でもそのまま使えます。

iOSとAndroid用の豊富な標準UIセット

 Flutterでは、AndroidとiOS用に標準で多くのUIセットを提供しています。そのため、サードパーティー製のUIを探してくる必要はありません。用意されているUIはリファレンス(図6)から見ることができます。

図6:Flutterが提供しているUIセット(Widgets)のリファレンスページ
図6:Flutterが提供しているUIセット(Widgets)のリファレンスページ

 基本的なボタンなどのようなものだけではなく、モバイルアプリではよく使うものが多数用意されています。そして、リファレンスが英語ではありますが充実しています。また、UIが標準で用意されていることで、少々分からなくても、多くの開発者が同じUIを使って開発をしているので、すぐにノウハウなども共有されやすくなっています。このような点は特に初心者にとって大きな利点になるはずです。

Flutter DevTools(開発支援ツール)

 Flutter DevToolsは一言で言えば、Chrome devtoolsのFlutter版です。アプリ内のメモリ状況やパフォーマンスを調べることができるのはもちろん、実際の画面上のUI部分がどのようになっているかまで調べることができます。

 例えば、図7のようなアプリの表示部分で実際のUIの設定や状態がどうなっているのかを、画面上で実際に部品をタップして、見ることができます。

図7:Flutter Devtools
図7:Flutter Devtools

 画面からUIがはみ出してしまっている原因や、思い通りにレイアウトされない場合などこのツールを使うことで調べることが可能です。Web開発者にとってChrome devtoolsのようなUIを調べることができるツールがあることは当たり前と言えますが、アプリ開発者にとってはびっくりする方もいるのではないでしょうか。

まとめ

 Dartという言語であったり、アーキテクチャーも新しく作り直していたりと、それらの表面的な側面だけを見ると、全く新しいことを覚えるのは面倒だと感じる方もいると思います。実は、筆者もほかのモバイルフレームワークと比較したときに、最初に候補から外したのがこのFlutterでした。しかし、ほかのモバイルフレームワークを使って見て、改めてFlutterを見てみると異なる見方になっていました。

 それはiOSやAndroidというプラットフォームの違いを解決するためのソリューションではなく、モバイルアプリ開発自体のあり方を改善するためのソリューションという一面です。まだまだ、新しく情報が不足していると思う方もいると思うので、次回以降も深い情報や具体的な使い方などを紹介していきます。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12718 2020/09/02 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング