shanon's note

プログラミングとアニメがすき

Dart/Flutter入門者向けハンズオンに参加しました #dartlang_jp

tech

Dart/Flutter入門者向けハンズオンに参加しました。 dartisans-jp.connpass.com

日曜日の昼間（しかも大雨）ということもありちょっと参加者少なめでしたが、会場の熱量は高かったと思います。ばっちりFlutter入門できました。👌

Flutterとは

f:id:shanonim:20180514155827p:plain

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. flutter.io

Flutterは、Googleが提供するモバイルアプリ開発のクロスプラットフォームです。シングルコードベースでiOS/Androidアプリを作ることができます。 モバイルアプリのクロスプラットフォームといえばReactNativeやXamarinが有名ですが、Flutterも役割としてそれらに並ぶのではないかと期待されています。Cordovaのことはもう忘れました。

読み方は「フラッター」です。（not フルッター）ネイティブ発音を聴くと「フラタァ」と聞こえます。

つい先日開催されたGoogle I/O '18では、Flutter beta3のリリースが発表されました。 www.youtube.com medium.com

Dart

DartはGoogleが開発しているプログラミング言語です。FlutterはDartで開発を行います。 決してメジャーなプログラミング言語ではありませんが、ここ最近のFlutter界隈の盛り上がりによって言語自体の盛り上がりも加速しているようです。今年の2月にはDart 2が発表されました。 www.publickey1.jp

ハンズオンの講師

講師はntaooさん、メンターで4869さんとlacolacoさんがいらっしゃいました。

ハンズオンの内容

大きく3ステップありました。

  • Dartの概要を知る
  • Flutterの概要を知る
  • サンプルアプリを作ってみる（終わったら自分でオリジナルアプリを作る）

資料はこちらです。（@ntaooさん資料リンクありがとうございます！） docs.google.com docs.google.com

FlutterでiOS/Androidアプリを作る

サンプルアプリがこちらです。 f:id:shanonim:20180514132839g:plain:w400

HackerNewsのReaderアプリで、ざっくり以下のような機能を持ちます。

  • NewsをListViewで表示する
  • Newsをお気に入り登録して一覧で表示する
  • タップしたらWebViewで記事を表示する

これをDart未経験・Flutter未経験の状態からたった4時間で作ることができました。（iOS/Androidの開発環境・エミュレータのセットアップ時間は除く）

  • Flutterをセットアップ
  • IDEにFlutter Pluginをインストール
  • iOSのシミュレーターを使うための各種brew install
  • コーディング

でざっくり4時間です。びっくりです。 もちろん、ちゃんと同じアプリがiOS/Android両プラットフォームのシミュレーターで動きます。

開発について

セットアップが簡単

公式のセットアップ手順を順番に辿るだけで最初のHelloWorld（Flutterアプリ起動）まで容易にたどり着けました。 flutter.io

慣れ親しんだIDEが使える

Flutterのアプリ開発では、以下のIDEが使えます。

今回のハンズオンではIntelliJ IDEAを使いました。 f:id:shanonim:20180514135537p:plain

IntelliJ IDEAでどうやってエミュレータ指定するんだろう・・と思っていたんですが、Runボタンの付近に選択Windowが表示されるので無問題です。 f:id:shanonim:20180514135708p:plain

flutter doctorが便利

コマンドラインからflutterに関する操作を行うときはflutterコマンドを使うのですが、flutter doctorというコマンドがセットアップ時において非常に便利でした。開発環境を走査してFlutter開発に必要なライブラリのインストールやアクションを指示してくれます。 f:id:shanonim:20180514134943p:plain

Hot Reloadが便利

UIの変更を即座に反映するHot Reloadがサポートされています。コードを変更して『⚡』ボタンを押すだけでリロード完了です。ReactNativeやSPAなWeb開発なら一般的なのかもしれませんが、普段のネイティブアプリ開発の感覚でいると圧倒的な反映速度に感動します。

雑感

Indentのサイズに慣れない

デフォルトだと2です。「JavaとJavaScriptをmixさせたような見た目」とも揶揄されるDartですが、見た目からなのか4で使いたいぐぬぬ・・となってしまいました。慣れるしかない。

フォーマッターどうしよう問題

cmd + option + Lでコードフォーマットした時にばしっとキマるいい感じのフォーマッター設定が知りたいかも。

.gitignoreどうしよう

giboにはUnknown argument: Flutterと言われてしまったので、公式を参考にしました。
flutter/.gitignore at master · flutter/flutter · GitHub

サンプルアプリのコード

講師のntaooさんのコードそのまま写経ですが、GitHubにアップしました。 github.com

機能追加の実験などでこれからもアップデートしてみたいと思います。

まとめ

  • Flutter、意外とサクッと入門できた。
  • 界隈も盛りがってきているので、始めるには良いタイミングかも。

リンク集

公式サイト

flutter.io

Dart Packages

Flutterを始めとしたDart言語での開発で使えるPackageを探すためのサイトです。 pub.dartlang.org

Awesome Flutter

Flutterに関する""Awesome""なライブラリを集めたrepositoryです。 github.com

コードで見るFlutterアプリの実装

konifarさんがDroidKaigi 2018で講演した資料です。一度入門してから読み返すと、さらに理解度が深まります。
コードで見るFlutterアプリの実装 // Speaker Deck

Flutter Japan User Group

Flutterアプリ開発者のコミュニティです。meetupが5/31にあるみたい。 flutter-jp.connpass.com