入門記事のブログです。日々学んだ事や情報収集したIT系の記事も書いています。管理者はフロントエンド、バックエンドを開発しているソフトウェアエンジニアです。Worldを表示する初回作成時のサンプルのカウントアッププログラムを読み解くTipsFlutterでプラットフォーム固有APIをMethodChannelとEventChannelで実行するFlutterの特徴を解説する2019.12.25こんにちはnasustです。Googleが開発したFlutterは、どのようなフレームワークなのか少し詳しく解説します。FlutterはiOS,Androidのアプリ開発をサポートするクロスプラットフォームのフレームワークです。ネイティブアプリに匹敵する品質とパフォーマンスのアプリを開発する事ができます。プログラミング言語、ライブラリ、開発ツールなど総合的に素晴らしい開発環境を提供します。Nativeを同程度の人気があり勢いあります。バージョン1.0を超えており、安定してきているのでプロダクトに採用しやすい状況です。WebのSPAとデスクトップアプリ、そしてサーバーサイドも開発できるように発展しています。頻繁にFlutterの技術的な記事や動画がアップされており注目度が高いフレームワークです。DartFlutterはGoogleが開発したプログラミング言語であるDartで開発します。DartはUIの開発に最適化した言語です。UIの開発に適した宣言型UIフレームワークが組み込まれています。元々はブラウザのJavaScriptの問題点を改善して代替を目的としたスクリプト言語でした。クロスプラットフォームな言語となっています。トレンドな機能を積極的に取り込んだ言語です。宣言型UIフレームワークFlutterの高い生産性の要素の1つは、宣言型UIフレームワークを言語レベルでサポートしている事です。コードで直感的に分かりやすくUIを開発する事ができます。宣言的UIとは、どういう風にUIを構築したいかをプログラミングする方法です。HTMLのようなUIの表現方法に近いです。その為、直感的にUIを構築する事ができます。このフレームワークはiOS、Androidより簡単に高品質なUIを開発しやすくなっています。iOSではストーリーボードでUIをGUIで作成できますが、高品質で作り込まれたUIを実現するにはコードで実装する事になります。コードで逐次的にUIを作り込みする為に構造が分かりにくくなります。Androidでは、XMLでUIを記述します。このXMLでの開発は宣言的で構造などは分かりやすいですが融通が効かなく、高品質なUIを作成するにはiOS以上に色々と手間が掛かります。DartではUIをコードで宣言的にレイアウトとデザインを表現する事ができます。);}dart上記のDartコードは宣言的にUI構築した例です。UIの構造がコードで表現されている為に分かりやすいですね。UIとコードが一体化しているのでツールが行き来しなくて済むので効率的に開発出来ます。ホットリロードと高速コンパイルFlutterの高い生産性と品質を実現する機能としてホットリロードと高速コンパイルがあります。ホットリロードはエミュレーター又は実機で開発中のアプリを実行したまま、コード変更した内容を1秒以内でリロードする機能です。UIの開発で品質を上げるにはトライ&エラーを繰り返す事が重要です。変更した瞬間に試せるので、もの凄く便利です。Flutterが人気になる理由の1つとして挙げられます。高速コンパイルはJITコンパイルされる事で実現しています。DartはJITとAOTの両方のコンパイラをサポートしています。JITはプログラム実行中にコンパイルされる為、変更を反映しながら素早く実行できます。アプリのリリース時はAOTでネイティブコードにコンパイルされる為、JITより※高速に動作します。※この高速とは、処理速度というより事前にコンパイルする事で最初の実行がJITより速いという事です。処理速度については、どちらが速いかは一概に言えません。オラクルのJavaはJITコンパイラですが、コンパイル後の処理速度はC/C++より速いケースがあります。UIはFlutter独自実装Flutterは、OSが提供しているUIを使用せずに独自に提供しています。メリットは、iOS,Androidの両方で同じデザイン、振る舞いを提供する事ができます。デメリットは、OSの標準的なUIでは無い為にデザインや細かい振る舞い違う事があります。FlutterはGoogleが開発されている為、Androidでは違和感は無いと思います。iOSの方が違和感強いです。対策として標準的なUIに似せたデザインのFlutterのUIを提供しています。UIのデザインはマテリアルデザインを採用しています。マテリアルデザインは現実世界にある動きや奥行きに沿ったデザインのフレームワークです。その為にユーザはアプリを視覚的に分かりやすく操作する事ができます。iOSのUIデザインによる違和感に話が戻りますが、GoogleがiOSに提供するアプリはマテリアルデザインになっています。Googleのアプリに慣れているユーザーにとっては、Flutterの独自のUIに違和感が少ないと思います。UIのパフォーマンスはネイティブアプリと匹敵します。GPUを活用したレンダリングエンジンによる高い実行パフォーマンスを実現しています。packagesFlutterは機能を追加できるパッケージがあります。Pubで公開しています。Flutterはパッケージを導入する機能がサポートされています。パッケージの設定する事で自動的にダウンロードと追加が簡単に出来ます。パッケージの依存関係で問題が起きないようにバージョンアップのルールを設定する事ができます。様々なライブラリが提供されています。firebaseやOauth2など、よく使う機能のライブラリが提供されています。iOSとAndroidのプロジェクトを使用しています。OS依存の機能は、それぞれのプラットフォームのプロジェクトに直接実装する事が出来ます。StudioでFlutterが生成したソースコードに機能を追加する事が出来ます。Dartには、それぞれのプラットフォームと通信する機能があります。開発ツールFlutterの公式的な開発ツールは2つあります。StudioAndroid開発用のIDEです。Flutterプラグインをインストールする事でFlutterが開発する出来ます。編集、デバッグ、デプロイを行います。Azure人気のエディッター、Flutterの拡張機能を追加する事で開発する事が出来ます。Studioより軽量で動作します。Studioより機能は少ないですが頻繁に機能が追加されています。Flutter.flutter.devDevToolsDevToolsは品質とパフォーマンスを充実した内容でデバック出来きるツールです。UIのレイアウトと状態、パフォーマンスとメモリの状態がデバック出来ます。分かりやすいビジュアライザーで表現されたデバック出来ます。4.0で提供されています。Documentation公式ドキュメントは英語ですが充実しています。開発するに十分な内容のドキュメントが揃っています。iOS、Androidを学ばないでFlutterだけで開発できるか?最低限、各プラットフォームのUIガイドラインやアプリのリリースの仕方を学ぶ必要があります。Pubで提供されていない機能を実装する場合は、iOS、Androidの知識が必要になります。現状、サードパーティのSDKなどはFlutter用に用意されている場合は少ないです。iOS、AndroidのSDKを導入してDartから使えるように開発するケースがあります。iOS、Androidの知識は必要になります。Flutterリンク集Flutterの更なる知見を得たい場合は、下記のウェブサイトで開発者の記事またはリンクがあります。dockercomment:iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。このブログはソフトウェア開発関係の内容を記事にしています。