1.0」がリリースされました。FlutterはiOSとAndroidのネイティブアプリを開発するためのオープンソースのSDKです。Flutterにはプログラミング言語の「Dart」が含まれていて、Flutterでの開発もDartを使用します。Flutter、Dart共にGoogleが中心となって開発しています。私の周りでは意外と評判が良いので、ちょうどv1.0がリリースされたところだし、どんなものか試してみることにしました。開発環境を構築して、デモアプリをシミュレーターで表示するところまで試してみました。内容をまとめたので、ぜひ参考にしてみてください。Codeでソースコードを確認するDartの構文紹介まとめはじめに今回の記事では、Flutterの開発環境の構築から、実際にプロジェクトを作成し、デモアプリを表示するまでの方法を紹介します。Code(v1.29.1)を使用します。内容に関しては、やはり公式ドキュメントの方が詳しく書いてあると思いますので、当記事は参考程度に見てもらい、わかりにく部分やもっと詳細を知りたい部分は公式ドキュメントを見ていただくのが良いかと思います。SDKをダウンロードします。SDKはzipファイルになっていて、Windows版、Mac版、Linux版が用意されています。ちなみに、以下はMac版のものです。SDKの置き場所を決めます(置き場所は任意です)。SDKを解凍(unzip)します。~/Downloads/flutter_macos_v1.0.0-stable.zipPATHを登録する次に、flutterコマンドをどこからでも使えるように、PATHの登録を行います。$HOME/.bash_profileファイルをviなどで開いて(もしくは作成して)、以下を追記します(上記でFlutterを解凍したディレクトリのパスを指定します)。PATH=/Users/maechabin/Slites/flutter/bin:$PATHPATHの登録を行ったら、sourceコマンドで現在の画面に反映させます。$HOME/.bash_profile以下のコマンドを実行すると、flutter/binディレクトリが現在のPATHにあることを確認することができます。$PATHまた以下のコマンドでバージョンが表示されれば、インストールとPATHが通ったということが確認できます。f9ebf21297)これでFlutterが使えるようになりました。設定に必要なツールを確認するFlutterをインストールしたら、Flutterアプリを開発するための設定を行っていきます。doctorを実行すると、設定に必要な依存関係をチェックしてくれます。何をすべきかを詳しく教えてくれるので大変便利です。doctorコマンドを実行します。doctor以下のようなチェック結果が表示されます。toolchainが「✗」と出ました。categories.必要な操作をコマンドベースで教えてくれるのがとても良いですね。Studioの設定が必要です。StudioはAndroidアプリを開発するための統合開発環境です。Studioをインストールするには、以下よりdmgファイルをダウンロードしてインストールします(私がダウンロードしたdmgファイルは988MBありました)。Developersdmgファイルをダウンロードしたら、ファイルを開いてインストールします。–android-licenses」と表示されます。以下のコマンドを実行してライセンスに同意します。docterを実行すると、以下が表示されます。Studioにインストールされていないという内容です。Studioを開いてこれらのプラグインをインストールします。Studioを起動すると以下のスタート画面が表示されます。画面右下から「Plugins」を選択します。Plugins画面の検索フォームに「Flutter」と入力して検索ボタンを押します。Studioにインストールされていれば検索結果として表示されます。repositories」をクリックして外部のリポジトリから検索します。外部のリポジトリにあるFlutterという文字列を含むプラグインが検索結果として表示されます。検索結果の「Flutter」を選択し、画面右側の「Install」ボタンを押すとFlutterプラグインがインストールされます。Flutterプラグインをインストールする時に、依存関係も一緒にインストールするか聞かれるので、「OK」を選択すると、同時にDartプラグインもインストールされます。Studioを「restart」するとプラグインが反映されます。仮想端末を作成するAndroidは数多くの端末が存在しています。Studio上でさまざまな端末を仮想端末として定義できるようになっています。Flutterプラグインをインストールすると、Flutterプロジェクトを作成できるようになります。何でも良いので、Flutterプロジェクトの作成画面を開くと、仮想端末を作成できるようになっています。Manager」と選択すると、仮想端末の作成画面が表示されます。Studioの公式ドキュメントをご参照ください。DevelopersXcodeの設定FlutterでiOSアプリを作成する場合は、Xcodeの設定が必要です。Xcodeは、iOSアプリをはじめとする各ソフトウェアを開発するためのアップルの統合開発環境です。Storeまたは公式サイトからダウンロードしてインストールします(時間がかかります)。Xcodeはv9.0以降のものが必要です。Xcodeのインストールが完了したら、Xcodeを起動してライセンスに同意します。すると、コンポーネントのインストールが始まります(これも少々時間がかかります)。以下のコマンドでもライセンスに同意することもできます。-licenseそれから、以下のコマンドを実行して、インストールしたXcodeのバージョンを使用するようにコマンドラインツールを設定します。/Applications/Xcode.app/Contents/DeveloperiOSのシミュレータが起動するかは、以下のコマンドで確認することができます。SimulatoriOSデバイスにデプロイするための設定こちらの設定はデプロイするための設定なので、デモアプリを確認するだけであれば最初は必要ありませんが、一応紹介しておきます。Homebrewをインストールし、Homebrewを最新の状態に更新します。setupが時間かかります)。setupFlutterプロジェクトを作成するFlutterプロジェクトを作成します。createコマンドの後ろに「プロジェクト名(パッケージ名)」を指定してコマンドを実行するとプロジェクトが作成されます。flutter_sampleなお、プロジェクト名は、「小文字」と「アンダースコア」のみ許容されています。ハイフンは使えないので注意が必要です。プロジェクトの作成が完了すると、以下のようなメッセージが表示されます。Componentsを使ったシンプルなデモが含まれています。runコマンドでそのデモを起動してみましょう。runを実行する際に、あらかじめAndroidかiOSのシミュレータを起動しておく必要があります。devices.」と怒られます。Codeからシミュレータを起動することができるようになります。Emulatorコマンドを実行すると、以下のようにシミュレータが選択できるようになっています。任意のシミュレータを選択すると起動します。runコマンドを実行すると以下のようにシミュレータにFlutterアプリが反映されます。Codeで開いて確認してみます。Codeで起動します。Codeで扱う場合は、機能拡張「flutter」をインストールしておくと便利です。Dartにも対応し、さらにFlutterアプリのデバッグなどもできるようになります。デモのソースコードは以下のようになっています。詳細はコメントを参照してください。このウィジェットはアプリケーションのルートです。これはアプリケーションのテーマです。run"でアプリケーションを起動してみましょう。青いツールバーを持ったアプリが開きます。reload"に対して変更を保存するかだけでもOKです)。カウンターはゼロにリセットされていないということに注目してください。アプリケーションは再起動されていません。このウィジェットはアプリケーションのホームページです。(以下で定義されている)Stateオブジェクトを持っていることを意味しています。このStateオブジェクトには、見た目に影響を及ぼすフィールドを含んでいます。このクラスはstateのための設定を行います。widget)値を保持します。Widgetサブクラスのフィールドは常に"final"でマークされます。何かが変更されたということを伝えます。これにより、以下のbuildメソッドがreturnされ、更新された値が反映されます。buildメソッドは再び呼ばれることはなく、何も起こらないでしょう。このメソッドはsetStateが呼ばれるたびにreturnされます。上記の_incrementCounterメソッドによってreturnされるように。Flutterフレームワークはbuildメソッドが速くreturnするように最適化してきました。更新が必要なものだけを再buildできます。appbarのtitleを設定するために使用します。Centerはレイアウト用のwidgetです。単一の子を取り、親の中央に配置します。Columnもまたレイアウト用のwidgetです。子のリストを取り、それらを垂直に並べます。デフォルトでは、子のサイズに合わせてサイズが変更され、親の高さになります。painting"を起動します。Paint"コマンドを実行します。Columnは、自分自身の大きさや子の配置方法を制御するための様々なプロパティを持ちます。ここでは、子を垂直方向にセンタリングするためにmainAxisAlignmentを使用しています。ここでの主軸は垂直軸となります。それは列が垂直(交差軸は水平)であるからです。この末尾のカンマは、buildメソッドのための自動フォーマットをより良くします。}}main.dartWidgetのテストコードは以下のようになっています。ファイルはtestディレクトリ内にあります。こちらも詳細は、ソースコード内のコメントを見てください。これは基本的なwidgetのテストです。Flutterが提供するWidgetTesterユーティリティを使用します。タップとスクロールのジェスチャを送信することなどができます。テキストを読み取り、widgetのプロパティの値が正しいことを検証することもできます。アプリをbuildしてフレームをトリガーします。カウンターが0からスタートするか検証します。'+'アイコンをタップし、フレームをトリガーします。カウンターが増えるか検証します。testコマンドを使います。以下のようにファイルを指定してもOKです。test/counter_test.dartFlutterのユニットテストについての公式ドキュメントは以下となります。詳細はこちらをご参照ください。上記のデモはDartで書かれています。私にとって現時点でDartはまだそこまで馴染みのないプログラミング言語です。上記のデモのソースコード内で調べておく必要があるなと思った構文をピックアップしました。変更が必要のない変数につける修飾子です。final修飾子をつけた変数は、初期化時にのみ1回だけ代入でき、それ以降は変更できなくなります。varの代わりとなり、final修飾子の後に型注釈をつけるのはOKです。Error上記のデモのソースコードの中でステートフルWidgetとして定義しているMyHomePageクラスで、コンストラクタで受け取った値を受け取る変数にfinal修飾子をつけています。_MyHomePageState();}https://www.dartlang.org/guides/language/language-tour#final-and-const@overrideアノテーションサブクラスで、インスタンスメソッド、ゲッター、セッターをオーバーライドすることができます。@overrideアノテーションは、メンバーを意図的にオーバーライドしていることを示すために使用します。···}上記のデモのソースコードの中では、build()関数のところなどで@overrideアノテーションが使われています。{...}https://www.dartlang.org/guides/language/language-tour#extending-a-classコンストラクタ関数Dartのコンストラクタ関数は、クラス名と同じものを使用して定義します。this.title})と定義されています。_MyHomePageState();}https://www.dartlang.org/guides/language/language-tour#constructorssuper()関数extendsしたスーパークラスのコンストラクタ関数を呼び出す方法としてsuper()関数を使用します。使用方法としては、以下のようにサブクラスのコンストラクタ関数の後ろに:を挟んでsuper()関数を呼び出します。'foo'.}上記のデモのソースコードでもMyHomePageクラスのコンストラクタ関数の定義のところでsuper()関数を使用しています。parametersDartでは、関数の引数を定義する時に{}または[]で囲うと任意の引数として定義することができます。parametersとなります。parametersを使って関数を定義した場合、引数名を明記することで関数の呼び出し時に第二引数にだけ値を渡せるようになります。false);上記のデモのソースコード内にも以下のように引数名を明記した状態で引数が指定されている箇所が多く見られます。parametersと言って、こちらの場合は引数名を明記する必要はありませんが、引数の指定する順番を気にする必要があります。https://www.dartlang.org/guides/language/language-tour#optional-parametersまずはこの辺の構文を押さえておけば、デモのソースコードは理解できるんじゃないかと思います。これを皮切りに少しずつDartの書き方を覚えていければいいんじゃないかと思います。まとめいかがでしょうか。Studio、Xcodeの設定などやることがたくさんありますが、これでFlutterアプリの開発環境をMacで構築できるようになるはずです。「はじめに」でも書きましたが、必要最小限のことしか書いていないので、詳細についてはFlutter公式のドキュメントを見てもらえると良いでしょう。FlutterはDartで書く部分がネックとなりますが、2019年はFlutterがそこそこ来るのではないかと漠然と思っています。GitHubのスター数が現時点ですでに約46,000もあります。Nativeが約72,000ほどです。後発の割にはだいぶ健闘しているのではと思っています。私自身まだFlutterについてはよく理解していないので、これから少しずつ覚えていこうと思っています。次は実際に自分でToDoアプリなどのサンプルを作って、理解を深めたいと思っています。ありがたいことにFlutterの入門書も出版されています。最後に紹介しておきます。maechabinホーム目次トップ。