Flutterとは何か?モバイルアプリケーションフレームワークを利用するメリットと学習方法について解説

2020年12月24日

Flutterとは?

Flutterとは、2018年12月にGoogleがリリースした、フリーかつオープンソースのモバイルアプリケーションフレームワークです。iOSやAndroidなどモバイル向けのアプリケーション開発に用いられます。
Googleが開発中のオペレーティングシステムであるFuchsiaでも、フレームワークにはFlutterが用いられています。
では、このFlutterと他のフレームワークでは何が違うのでしょうか?今回はFlutterのメリットと学習方法について解説していきます。

Flutterの特徴

ここからはFlutterの特徴であるモバイルアプリケーションフレームワーククロスプラットフォーム開発Dart言語について解説していきます。

モバイルアプリケーションフレームワーク

Flutterはモバイルアプリケーションフレームワークです。その名のとおり、スマートフォンやタブレット用のアプリケーション開発に特化したフレームワークです。
モバイルに必須な地図、カメラ、アドレス帳を扱うなどの機能がまとまって提供されており、開発効率の向上に非常に重要な役割を担います。

クロスプラットフォーム開発

モバイルアプリケーションの開発は、iOSとAndroidといったプラットフォームの違いにより、それぞれに開発コストがかかります。しかし、そういったプラットフォームの違いを吸収してくれるフレームワークも登場しています。その1つがFlutterです。

モバイルのネイティブアプリケーションを開発する際、iOSアプリの場合はSwiftとXcode、Androidアプリの場合はJava、KotlinとAndroid Studioを使用しなければなりません。このような開発言語、開発環境の違いを吸収して、同一の言語、環境で開発することをクロスプラットフォーム開発と言います。
Flutterではクロスプラットフォーム開発が可能であり、iOS、Androidを同一の開発スキル(Dart言語)で行うことができます。

Dart言語

FlutterではDart言語が使われています。
Dart言語とは、Flutterを使用したモバイルアプリケーション開発で用いられるプログラミング言語です。GoogleによってJavaScriptの欠点を補う目的で開発されました。2018年もっとも学ぶ価値のないプログラミング言語で不名誉な1位でしたが、Flutterの登場により俄然注目されるようになりました。
JavaScriptを元に開発されているだけあり、文法もJavaScriptに近くC#やJavaからも影響を受けています。JavaScriptやJavaの経験があれば、学習コストはあまりかからないでしょう。

Flutterがなぜ必要なのか?メリットを解説

ここからはFlutterを使うメリットを詳しく解説していきます。

クロスプラットフォーム開発でiOS、Android、Webに対応

すでにお話ししたように、Flutterではクロスプラットフォーム開発により、WebアプリやiOSアプリ、Androidアプリを同時に開発できることが最大のメリットです。
Flutterの他にもアプリ開発に使えるフレームワークは数多くあります。しかし、その多くは「iOSアプリには対応しているけれどもAndroidには対応していない」「Webアプリのみ」というように、デバイスを限定していることがほとんどです。そのため、iOSのみに対応したフレームワークでアプリをリリースすると、いざAndroidに向けてもリリースしようということになった場合、再度開発が必要になってしまいます。
その点、FlutterはiOSにもAndroidにも対応しているため、二重で開発する手間がなくなります。Flutterを採用することでリリースまでの期間を短縮でき、開発のコストが削減され、ひいては保守と運用コストの削減にも繋がります。
Webアプリも同時に開発することができるのもFlutterの大きなメリットです。Webアプリでは、Flutterで使用する開発言語DartをJavaScriptに変換させることによって、動かすことができます。

ホットリロードができる

Flutterではホットリロードができるのもポイントです。ソースコードを書き終わったのちに、即時にアプリに変更点を反映させることができる機能のことをホットリロードと言います。ホットリロードができないフレームワークで開発すると、プログラミングの内容を実際にアプリにするビルドという作業をしなければなりません。往々にしてこのビルドには時間がかかり、プログラマーのストレスになりがちです。
Flutterのホットリロードの機能で、ビルドの待ち時間を大幅に短縮することができ、開発をする際のストレスが軽減されます。

共通したUIデザイン(マテリアルデザイン)を使用できる

Material Design.svg
マテリアルデザインのスマートフォンアプリ(画像はWikiより)

Flutterではマテリアルデザインを使用し、プラットフォームに依存しない共通のUIデザインとして開発できます。
マテリアルデザインとは、ユーザーがアプリ上のアイコンなどをみて、直感的に理解し操作することができるデザインのことを言います。Googleが発案したもので、Googleが提供するWebアプリの多くでこのマテリアルデザインが採用されています。
FlutterにはすでにマテリアルデザインのUIパーツが用意されており、iOSとAndroid両方に対応できますので、デザインの面からみても迅速に開発が進みます。

学習のために用意すべき環境

はじめに、Flutterのソフトウェア開発キット(SDK)をダウンロードする必要があります。SDKとはその名のとおり、Flutterを使えるようにする道具一式です。
FlutterのSDKは下記ページからダウンロードできます。

また、プログラミングをするテキストエディターが必要です。
おすすめは、「Android Studio」もしくは「Visual Studio Code」です。対応OSは、macOS、Windows、Linux、ChromeOSですが、iOSアプリを作りたい際には、macOSが必要です。
テキストエディターについては、下記の記事をご参照ください。

Flutterのおすすめの学習方法と教材

ここからはFlutterのおすすめの学習方法と教材を紹介していきます。
Flutterを学習する上で重要なのは、開発言語であるDartを学ぶことです。このDartはJavaScriptに似た言語です。
開発キットがあると言ってもプログラミングは書かないといけないので、全くのプログラミング初心者という場合であれば、いきなりDartから入るのではなく、JavaScriptやそれを用いたWebサイトの勉強から始めたほうがよいかもしれません。

プログラミングにある程度慣れているのであれば、Webサイトで学んでいくことをおすすめします。
Flutterが学べるプログラミング・スクールや書籍なども少なからずありますが、Flutterの仕様が変更になると、講義の内容や本に書かれている方法では対応できなくなるということもあるので、公式のドキュメントやWebサイトの最新情報で学ぶのが、費用対効果としてよいでしょう。

ここからはFlutter学習におすすめのWebサイトを紹介していきます。

Flutterで始めるアプリ開発

「Flutterで始めるアプリ開発」ではFlutterのインストールから簡単なアプリケーション開発までを細かく解説しています。
Macを前提にしているものの、無料のコンテンツとは思えない充実度ですので、はじめはここからスタートしてもよいでしょう。

FlutterでWebアプリ開発入門

「FlutterでWebアプリ開発入門」も無料で閲覧でき、簡単なボードゲームの開発の流れが学べます。

Flutterの公式サイト

Flutterの公式サイトはプログラミングの開発に慣れている中上級者におすすめです。このサイトは英語で書かれていますが、ブラウザの自動翻訳でも十分内容がわかります。開発をしていてどのように作ったら良いかわからなくなったら、この公式サイトを見てみてください。多くの場合、解決方法が載ってあります。

英語に担当であればUdemyの公式動画もおすすめ

“The Complete 2021 Flutter Development Bootcamp with Dart"はGoogleのFlutterチームと共同で作成されたUdemyの動画コンテンツです。
評判も5評価中4.6の高評価です(2022年8月5日現在)。ただし、コンテンツが英語ですので、英語でも理解できる方におすすめです。Flutterの基本から応用まで学習することができます。

その他のモバイルアプリケーションフレームワーク

今回はFlutterの特徴とメリット、学習方法について解説してきました。
Flutterの他にもモバイルアプリケーションフレームワークは存在します。それぞれの特徴を踏まえて、適切なプロジェクトにあったフレームワークを採用しましょう。
最後にFlutter以外のフレームワークを紹介していきます。

Apache Cordova

HTML、CSS、JavaScriptなどのWebアプリケーション開発の技術を用いて、モバイルアプリケーションの開発を行うことができるのが特徴のフレームワークです。モバイルアプリケーションの中でWebブラウザが動作しているようなイメージです。

React Native

Facebook社が開発したフレームワークです。同じくFacebook社が開発したJavaScriptライブラリのReact.jsを活用しています。
Apache Cordovaと同じくJavaScriptを用いて開発しますが、異なる点はApache CordovaがWebブラウザエンジン上で動作しているのに対して、React Nativeはネイティブ環境で動作します。

Xamarin

クロスプラットフォームという点では、Apache CordovaやReact Nativeと同様ですが、Apache CordovaやReact NativeがWebアプリに近い思想を元に作られているのに対して、Xamarinはネイティブアプリ開発を同一のコードで行うことを目的に作られています。
開発にはC#、Visual Studioを使用します。

Unity

ゲーム開発をする場合は、Unityが選択肢にあげられます。3Dゲーム開発はもちろん2Dにも対応しています。開発にはC#を使用しますが、細部にこだわらなければプログラミング不要で開発ができます。
Unityもまたクロスプラットフォーム開発に対応しています。

参考

技術

Posted by promapedia