Building a Flutter Development Environment with VSCode and Useful Extensions

VSCode による Flutter 開発環境構築 と 便利な拡張機能について 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト

MS Eva 時代は、フロントエンドも担当。 WPF → Silverlight → Azure Mobile Apps/Xamarin, HoloLens (初代)…etc. Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist

アジェンダ l l l Flutter の開発・デバッグ環境構築 おすすめの拡張機能 まとめ

Flutter の開発・デバッグ環境構築

Flutter とは︖ • Flutter 特⻑ https://docs.flutter.dev/get-started/install • 開発⾔語は Dart • フロントエンド業務⽤ • Google 開発による Dart ⾔語 フレームワーク • iOS と Android アプリを1⾔語で 同時に開発 •VSCode と Android Studio が 公式エディタ • OS 依存のネイティブ機能へのア クセスも、パッケージ管理ツールが 読み込む YAML にパッケージ名 指定コードを書くだけで可能 • 例︓ ・ ファイルフォルダにアクセス • カメラ起動 • Push Notification 受信 • GPS 情報取得 • 機種情報取得 • 構築には、ビルドツールとして XCode と Android Studio が必要

• https://docs.flutter.dev/get-started/install

flutter doctor コマンドで環境設定の状況をチェック • flutter doctor • flutter doctor –v で詳細 • ⾜りないものはサジェストされる • エラーが出たら修正を⾏う https://docs.flutter.dev/get-started/install

• https://docs.flutter.dev/get-started/install

Flutter v3.38.1 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter Flutter モバイルアプリの効果的 な編集、リファクタリング、実⾏、 及びリロードのサポートと、Dart プログラミング⾔語サポートを追加

• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• https://flutter.io/
• https://www.dartlang.org/

便利な VSCode 拡張機能

Flutter ではすべてが Widget • Widget • 使⽤するすべてのクラス • 画⾯にレンダリングするすべてのテキスト • および Flutter アプリ全体 • Widget は Stateless Widget と Stateful Widgetに分類 • Stateless Widget は状態を変更しない • Stateful Widget は、ユーザーが対話したときに状態を変更 • Stateless Widget クラスから継承するクラスを作成する • このクラスに MyApp という名前を付ける（任意の名前） • クラスの名前が⼤⽂字で始まることに注意 class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return ; } }

Flutter Tree https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree • コードを書く前に UI の実装イメージ が固まっているのが前提 • わずか1⾏で複雑なレイアウトを⼀気 に書ける

• https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree

Flutter Widget Snippets https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets • よく使う Widget を⾼速で挿⼊可能 • Column とか Row 等、よく使うものの Children…と続けるのは⾯倒

• https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets

Dart Data Class Generator https://marketplace.visualstudio.com/items?itemName=dotup.dart-data-class-generator ボイラープレートを記述したりコード⽣成を実⾏したりすることなく、Dart Data Class を簡単かつ迅速に作成 • ジェネレーターは、クラスのプロパティ ま たは⽣のJSON に基づいて、クラスの コンストラクター、copyWith、toMap、 fromMap、toJson、fromJson、 toString、operator==、および hashCode メソッドを⽣成できる • その他開発プロセスをスピードアップする ための便利なクイックフィックスがいくつか あり

• https://marketplace.visualstudio.com/items?itemName=dotup.dart-data-class-generator

Awsome Flutter Snippets https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets ⼀般的に使⽤される Flutter 関数とクラスのコレクションスニペットとショートカット • Widget の作成に関連するボイラープレート コードのほとんどを排除することにより、開発 の速度を向上 • 例︓ • StreamBuilder → streamBldr • SingleChildScrollView → singleChildSV --------------------------------------------------------

• https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets

Todo Tree https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree • ripgrep を使⽤してワークスペースで TODO や FIXME などのコメントタグを すばやく検索、アクティビティバーのツリー ビューに表⽰。 • ビューは、アクティビティバーからエクスプロー ラーペイン（または他の任意の場所）に ドラッグできる • ツリー内の TODO をクリックで、ファイルが 開き、TODOを含む⾏にカーソルが移動 • ⾒つかった TODO は、開いているファイル でも強調表⽰できる • 構成例については、 wikiを参照

• https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
• https://github.com/BurntSushi/ripgrep
• https://github.com/Gruntfuggly/todo-tree/wiki/Configuration-Examples

Flutter Coverage https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage テストビューでフォルダ/ファイルごとのコードカバレッジを表⽰する • ツリービューをテストビューコンテナに追加 • ファイル/フォルダごとのカバレッジを⽰す fluttertest test--coverage --coverage flutter

• https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage

Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme マテリアルデザインアイコンを VSCode に取り込み

• https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

GistPad https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs GitHub Gists とリポジトリを使⽤して、コードスニペットと開発者向けメモを管理 • 快適に GitHubGists とリポジトリーを編 集できる拡張機能 • 要旨とリポジトリを開いたり、作成したり、 削除したり、フォークしたり、スターしたりして、 クローンを作成したり、プッシュしたり、プル したりすることなく、ファイルがローカルに あるかのようにシームレスに編集可能 • コードスニペット、⼀般的に使⽤される構 成/スクリプト、プログラミング関連のメモ、 ナレッジベース、およびインタラクティブな サンプルを構築および参照するための独⾃ の開発者ライブラリのようなもの

• https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs
• https://gist.github.com/

参考︓pub.dev Dart ⽤ライブラリよりご紹介 Dart/Flutter package for using Elastic App Search through a simple API returning easy to handle objects https://pub.dev/packages/elastic_app_search • Elastic App Search ⽤のすぐに使⽤できる API • Elastic Cloud にデプロイされたインスタンス が必要 • Elastic App Search をすでに理解している ことを前提としつつ、クエリ作成と結果の操作 を容易にすることを⽬的 • ドキュメントの任意のフィールドに公園を含む 公園をクエリ • フラグ world_heritage_site が true に設 定された、カリフォルニアに拠点を置く公園を フィルタリング • 公園の説明のタイトルと140⽂字のスニペット のみがクエリによって返される • 最初のページをリクエスト • 50ドキュメントに制限

• https://pub.dev/packages/elastic_app_search
• https://cloud.elastic.co/home

Flutter x Firebase サンプルアプリ構成 (CQRS) プロジェクト iOS Mobile App Flutter Cloud Function Firebase Firestore データ保存 Firebase/Firestore ⽤ Elastic App Search 統合拡張機能 でノンコーディングで実現︕ Cloud Function で同期 Android Mobile App Flutter Elastic エンタープライズサーチ 全⽂検索クエリ https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 VSCode Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/

まとめ l l Flutter の開発・デバッグ環境構築 おすすめの拡張機能

分散トレーシングによるソフトウェア信頼性の構築 2022/4/20 12:00-13:00 https://www.elastic.co/jp/virtual-events/elastic-security-workshop

• https://www.elastic.co/jp/virtual-events/elastic-security-workshop

Elastic セキュリティワークショップ 2022/4/27 14:00-17:00 https://www.elastic.co/jp/virtual-events/elastic-security-workshop

• https://www.elastic.co/jp/virtual-events/elastic-security-workshop

Jaguʻeʼr Cloud Native #5 クラウドネイティブ設計コンペバトル 2022/4/28 13:00-15:00 https://jaguer-cloud-native.connpass.com/event/244567/ Jaguʼeʼr 会員企業所属のみです。ごめんなさい︕

• https://jaguer-cloud-native.connpass.com/event/244567/

Thank you for your attention!

Appendix

The Elasticsearch Platform In a world where endless data creates endless possibility, search helps people and organizations thrive. Enterprise Search Observability Security Kibana Explore, Visualize, Engage Elasticsearch Store, Search, Analyze Integrations Connect, Collect, Alert Public cloud Hybrid On-premises

3 Solutions, 1 Stack, Deploy Anywhere 3 つのソリューション Elastic エンタープライズサーチ Elastic オブザーバビリティ Elastic セキュリティ 可視化 & 管理 Kibana Elastic Stack Beats 豊富なデプロイ選択肢 蓄積、検索、分析 Elasticsearch Logstash Elastic Cloud Elastic Cloud Enterprise SaaS (AWS/Azure/GCP) IaaS (クラウド & オンプレ） Elastic Cloud on Kubernetes Kubernetes (クラウド & オンプレ） 収集

Elastic Enterprise Search どこでも、すべてを、検索 最も関連性の⾼いサービスを提供する 検索結果をどこでも 検索を市場に迅速に提供 強⼒かつシンプルなカスタマイズ 簡単にスケール ⾼騰するコストを抑えることができる

Elastic App Search • Elastic App Search は Elastic のエンタープライズサーチソリューションの⼀部 • お客様の Web サイトやアプリケーションにパワフルでスケーラブルな検索体験を追加するのに 必要なすべてのツールを提供

Elastic ＆ Google Cloud、強化されたデータ統合機能について (BigQuery, Firestore, DataFlow, GCS, PubSub) https://qiita.com/shosuz/items/9e375fea6f5016e4fc8f

• https://qiita.com/shosuz/items/9e375fea6f5016e4fc8f

Kotlin x Firebase サンプルアプリ構成 (CQRS) プロジェクト Android Mobile App Kotlin データ保存 Elastic APM Agent Elastic Search UI Cloud Function で同期 全⽂検索クエリ https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 React Web App Elastic APM Agent VSCode Cloud Function Firebase Firestore 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html
• https://github.com/elastic/search-ui

Firebase 全⽂検索 https://firebase.google.com/docs/firestore/solutions/search?provider=elastic 全⽂検索 ほとんどのアプリでは、ユーザーがアプリのコンテンツを検索できるようになっています。たとえば、特定の単語を含む投稿や、特定のトピックに ついて書いたメモを検索する、といったケースが考えられます。 Cloud Firestore では、ネイティブ インデックスの作成やドキュメント内のテキスト フィールドの検索をサポートしていません。 さらに、コレクション全体をダウンロードして、クライアントサイドでフィールドを検索することは現実的ではありません。 Cloud Firestore データの全⽂検索を有効にするには、専⽤のサードパーティの検索サービスを使⽤します。これらのサービスは、単純なデ ータベース クエリで実現できる機能をはるかに上回る、⾼度なインデックス作成と検索の機能を提供します。 続⾏する前に、調査して以下の検索プロバイダのいずれかを選択してください。 ● ● ● Elastic Algolia Typesense

• https://firebase.google.com/docs/firestore/solutions/search?provider=elastic
• https://www.elastic.co/app-search/
• https://www.algolia.com/
• https://typesense.org/

Kotlin x Firebase サンプルアプリ構成 (CQRS) プロジェクト Android Mobile App Kotlin Cloud Function Firebase Firestore データ保存 コーディングして Firebase Deploy する必要あり Elastic APM Agent Cloud Function で同期 検索⽤アプリを新たに作る必要あり Elastic Search UI 全⽂検索クエリ https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 React Web App Elastic APM Agent VSCode 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html
• https://github.com/elastic/search-ui

Firebase/Firestore ⽤ Elastic App Search 統合 https://www.elastic.co/jp/blog/accelerate-search-experiences-with-elastic-app-search-and-google-firebase Firebase 統合 なぜこれが重要なのか - アプリケーション内で効果的な検索エクスペリエンスを 構築することは困難 ユーザーは、ストアで商品を検索する場合も、サポート サイトの記事を検索する場合も、会社のブログに投稿 する合でも、迅速な結果を期待 拡張機能を使⽤して⾼速でスケーラブルで関連性の ⾼い検索エクスペリエンスを Firebase モバイルおよび Web ベースのアプリケーションに簡単に組み込める アプリケーションに検索を追加する⽅法と、数回クリック するだけで開始する⽅法の詳細 Elastic 7.15 からの新機能 Elastic App Search エンジン作成と Firebase からのドキュメント受信の設定 Google Firebase 拡張機能ディレクトリ の Elastic App Search 拡張機能 https://firebase.google.com/products/extensions/firestore-elastic-app-search/

• https://www.elastic.co/jp/blog/accelerate-search-experiences-with-elastic-app-search-and-google-firebase
• https://firebase.google.com/products/extensions/firestore-elastic-app-search/

Kotlin x Firebase サンプルアプリ構成 (CQRS) プロジェクト Android Mobile App Kotlin Cloud Function Firebase Firestore データ保存 Elastic APM Agent Firebase/Firestore ⽤ Elastic App Search 統合拡張機能 でノンコーディングで実現︕ Cloud Function で同期 Elastic エンタープライズサーチ App Search 内蔵の Reference UI で Web 版Elastic React アプリの雛形⾃動⽣成 全⽂検索クエリ Search UI https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 React Web App Elastic APM Agent VSCode 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html
• https://github.com/elastic/search-ui