2024.12.03
セキュリティ製品を入れても検出されず…被害事例から見る最新の攻撃トレンド 不正侵入・悪用を回避するポイント
リンクをコピー
記事をブックマーク
神原健一氏(以下、神原):続いて入門時に押さえたいポイントということで、Flutterアプリのファイル構成、画面の作り方、ビジネスロジックの効率的な実装を紹介していきます。Flutterアプリを作っていくときには、プロジェクトを作ったあとに生成されます。
特に重要なファイルが2つあります。1つがソースコードで、main.dartというファイル。そしてpubspec.yamlというライブラリ、もしくはいろいろなアプリの中で使う画像などを定義するファイルがあったりします。簡単に中身の紹介をします。
例えばモバイルアプリを作るとき、AndroidやiOSをネイティブで開発している方であれば、XMLをいじったり、iOSであればStoryBoardをいじって画面を作っていくイメージがあると思いますが、Flutterの場合であれば、Dartを使ってUIの部分も自分でガリガリ編集していくことになります。
(スライドの)右側にあるような「こんにちは、Flutter」という画面を作ろうと思ったら、左側のようなソースコードを書いていくことになります。
ちょっとわかりづらいので、色でそれぞれの対応関係を示しています。Flutterでアプリを作るときにはマテリアルデザインに沿って作っていくのがけっこう普通なので、material.dartというファイルをインポートしたり、いわゆるGUIコンポーネント的なものに相当するStatelessWidgetがソースコードにありますが、これを継承してアプリケーションを作っていく。
細かいことは割愛しますが、いくつかGUIのコンポーネントを配置して、それが左側のソースコードにマッチしている感じになります。ここでちょっとつかんでほしいポイントが、ツリーの構造になります。Flutterでアプリを作るときには先ほどのソースコードを書いていきますが、非常に大事なのがツリー構造で考えることです。
ソースコードを上から下に順番に書いていく。Scaffoldはアプリケーションテンプレート的なものですが、その下にアプリケーションのバーやボディを配置していきます。
少しこれはちょっと応用的な話になりますが、動的な画面更新をしたいときには、状態をもつWidgetとして、StatefulWidgetがあります。例えばモバイルアプリであればボタンを押すと、画面の内部が変化する。カウンターのアプリであれば、+ボタンを押すとカウントアップしていく。そういったアプリを作る場合には、状態をもつStatefulWidgetを使いますが、そのときには(スライドの)左にあるソースコードを書いていくことになります。
続いて紹介するのは、ビジネスロジックの効率的な実装ということで、車輪の発明前にはパッケージ調査が非常に大事になってきます。パッケージというのは、いわゆるライブラリだと思ってください。Flutterの場合であれば、pub.devというサイトに飛ぶと、いろいろなライブラリを検索できます。
Androidのネイティブアプリを作っている方であれば、SharedPreferencesという、キーバリュー形式でデータを映像化するためのAPIがあり、それに相当するものがFlutterでも提供されています。その場合は、SharedPreferencesを検索すると、実際に使えます。
pub.devが非常に優れているのは、ライブラリの導入の仕方をけっこうわかりやすく書いてあるところです。先ほど紹介したpubspec.yamlというファイルで、定義の仕方や、あとは定義したあとにどうやるとそのライブラリが自分のプロジェクトに入っていくかもわかったり。
あとは「インポート文はこう書くんですよ」というのが書いてあるので、これはもう基本的にはコピペをしていくだけで、新たなライブラリを自分のプロジェクトに導入していくことが可能です。
ちなみにもしIDEとしてAndroid Studioを使っている方であれば、pubspec.yamlを開いて、先ほどのSharedPreferencesのライブラリ定義をして、あとは「Packages get」というボタンをポチッと押せば、ライブラリを新たにインポートします。これぐらいの操作で使えます。
SharedPreferencesでキーバリュー形式でデータを保存するよというときには、たかだかこれぐらいのコードです。インポート文を書いて、あとはちょっと下に関数が定義してありますが、バリューとして保存した値を与えれば、SharedPreferencesのAPIを使って、key1というキーに対して与えられてきたバリューを保存する。これでデータ永続化の処理は書けることになります。
Flutter入門時に押さえたい要素をいくつか紹介したいと思います。Flutterでコードを書くには、Dartをガリガリ書いていくことになりますが、ソースの"_"は、Javaの世界でprivateに相当するものだったり。あとは".."とか"..."など、いくつかDartに関するちょっと独特なものがありますが、公式サイトにこのあたりも例を交えて紹介されているので、よければ参照してください。
モバイルのアプリを作るときには、例えばいろいろな通信処理や重たいデータベースに関する処理など、いちいちユーザーを待たせるとストレスの多いアプリになってしまうので、非同期処理を駆使していくことは非常に大事になります。そのときには、FutureやStreamなど、非同期処理を簡単に実現するための機構もあるので、こちらも別途参照ください。
それではFlutterアプリの開発Tipsということで、もう少し実践的なところを紹介していきたいと思います。アプリの開発を高速するためには、いくつかの観点があります。コーディングを速くする方法、あとはその他のタスクを効率化していくアプローチがあります。それではまず、コーディングの高速化の話をしていきます。
従来のアプリケーションを作っていくときには、例えばStatelessWidgetでGUIコンポーネントに相当するものを、基本的には手書きで構造として書いていくことになります。これはたかだか5行ぐらいのコードですが、これをいちいち手書きで書くのはけっこう大変です。アニメーションに関しても、けっこう長めのソースコードを書く必要があったりします。
そこでおすすめなのが、ライブテンプレートを活用ことです。これはAndroid Studioの場合ですが、Android Studioにはライブテンプレートという機能が提供されていて、先ほどのようなStatelessWidget、アニメーションを書くための処理が、予めテンプレートとして提供されています。こういったものを使うことで、非常に効率的に処理を書いていくことが可能になります。
(動画開始)
ここでちょっと紹介したいのが、ライブテンプレート。具体的にどんなものなのかというと、例えばStatelessWidgetを作りたいときにはstlessと押して、あとはTabキーを押すと、そのテンプレートが吐き出されます。例えばStatefulWidgetであればstfulと打って、Tabキーを押せば、ソースコードが10秒ぐらいでジェネレートされる。こんな感じで、非常に効率よく開発を進めていくことができます。
(動画終わり)
「でも、これだけしかテンプレートがないんだっけ?」 というところがあります。そこでおすすめしたいのが、Flutter Snippetsです。こちらを導入すると、画面に表示しきれない100以上のテンプレートを使えるようになります。
自分がよく使うソースコードを何文字か入れて、Tabキーを押せば、簡単にソースコードを補完していけます。
続いて紹介したいのが開発タスクの高速化ということで、コーディングをしていく以外にもいろいろなやりたいことがあるので、その内容を紹介します。1つ目に紹介したいのが、Flutter Enhancement Suiteです。
(動画開始)
これがどんなものかというと、Flutterでアプリを作るときにパッケージを自分のプロジェクトに入れていきます。そのときにpub.devというサイトに飛んで、ライブラリの名前を検索して、どういう定義の仕方かを調べて、その内容をコピー&ペーストで持っていく流れを踏みますが、けっこう慣れてくると、ライブラリの名前は自分で覚えちゃったりします。
そのときには、覚えているこのライブラリの名前を数文字入れて、ポチッとボタンを押せば、検索候補として出てきます。そうすると、pub.devをいちいち覗きに行かなくても、自分のライブラリを新たに導入していくことが可能となります。
(動画終わり)
あと紹介したいのが、このFlutter Pub Version Checkerです。こういったツールを使うと、さらにライブラリの導入が簡単になります。あとはflutter-img-syncというものがあって。
(動画開始)
これはどんなものかというと、例えば、自分のFlutterのアプリの中で画像を使いたいケースのとき、を自分のプロジェクトのpubspec.yamlの中に手書きで画像の定義などをいちいち書いていく必要があります。
最終的にその使いたいソースコードを、Dartのソースコードのファイルの中に書いていく。“Image”が画像を表示するコンポーネントですが、その中に画像のファイルパスを書くことをやっていきます。そのときに、画像のファイルパスをスペルミスをして書き間違えたとしても、特に警告がぜんぜん出なくて、実行したときに初めて画像のファイルパスを書き間違えたことに気づくことになります。
(動画終わり)
それを、例えばflutter-img-syncを導入しておけば、あたかも自分のクラスの中にあるフィールドを参照するかのごとく、画像を参照できて、コーディングのミスを大幅に減らせるところがけっこう大きいと思います。今回はflutter-img-syncを紹介しましたが、他にも同様のライブラリが提供されています。
例えば、わさびーふさんが公開しているFlutterGen。最近僕はFlutterGenを使うことが多いんですが、それを使うと、同様に置いた画像をいわゆるクラス参照するようなかたちで使うことが可能になります。これでけっこう効率的に開発ができると思います。
あと最後にちょっと見てほしいと思うのが、FlutterJsonBeanFactoryというものです。Flutterのアプリも、スタンドアロンで動かすものはけっこうレアだと思います。
どちらかというとサーバーと何らかの通信をして、サーバーから取ってきたJSONファイルを基に、画面の中にリスト形式で表示したり、そんな感じでモバイルアプリを作っていくと思います。そのときにけっこう厄介なのが、取ってきたJSONを自分でパースして、それを画面に表示して、地味な処理をけっこうガリガリ書く必要があることです。
そこで見せたいのが、このFlutterJsonBeanFactoryです。
(動画開始)
これが使用例になります。ウィザードをちょっと1回開いて、クラス名を入力して、今回作りたいJSONをペコッと貼り付けます。あとは「Make」ボタンをポチッと押すと、このJSONに合致したDart用のデータクラスが、自動で生成されるようになっています。
(動画終わり)
この自動で生成されたDartクラスにアクセスするためのヘルパークラスも一緒に生成されるので、そのヘルパークラス系で、Dartの中をパースして表示したりも簡単に可能になります。従来面倒くさかった処理を代替してくれるので、効率的に開発を進められると思います。
こういったところを押さえてもらってFlutterのキャッチアップができたら、見てほしいのが、やはり非常に大事だと思っている、メンテナンスしやすいUIの作り方です。Flutterでアプリを作っていると、冒頭で紹介したとおり、UIのツリー構造がけっこう深くなっていったりします。
そうするとソースコードもどんどん長くなって、非常に見づらくなる。メンテナンスがしづらくなってきてしまうので、必要に応じてリファクタリングをしながらロジックを分割して、見通しのいいソースコードを書いていくところがポイントかなと思います。
あとは大事になってくるのは、アプリの状態管理です。Flutterでアプリを作っていくと、何か処理をしたらそれが画面に反映されて、また次の画面にデータを持っていってと、どうしても状態管理が大変です。そのときに、もう自前で何か処理をするのではなく、基本的にはこのProviderやRiverpod、BLoCなど、非常に便利な状態管理のライブラリ群があるので、こういったものを駆使して開発することが、複雑なアプリでも作っていくときにはポイントかなと思います。
ということで、最後にまとめます。Flutterは、1ソースでAndroidやiOSだけでなく、+αでデスクトップアプリやWebなどの世界のアプリを作れます。もう実際に商用アプリも作られているし、マーケットにも公開されています。プロダクション適用もできる状態になっています。
最後に紹介したようなTipsがいくつかあるので、そういったものを活用することで、効率的な開発を進められるのではないかと思います。
それでは駆け足になりましたが、これで発表を終わりとします。ご清聴ありがとうございました。
司会者:神原さんありがとうございました。1点だけ質問が来ているので回答できるようであればお願いします。「Visual Studio CodeにFlutterの環境構築するのと比べて、Flutter Studioを使うメリットってどんな点がありますか?」という質問が来ています。
神原:質問ありがとうございます。そうですね、Visual Studio Codeを使うケースであれば、基本的にそちらを使って開発をキャッチアップするのが個人的にはおすすめです。
Flutter Studioは冒頭で紹介したとおり、基本的にこういういろいろなIDEとかに慣れていない場合にGUIを使って、Flutterの画面の作り方をどうしたらいいんだろうとか、最終的にFlutter Studioを使うとドラッグ&ドロップで配置した画面がDartのソースコードとして出力されますので、その出力された結果を見ながら学んでいくには非常に便利です。
しかし、あくまでも練習用途になるので、Visual Studio Codeを使うのであれば、それを使って開発を進めるのがいいかなと思います。
司会者:回答ありがとうございました。それでは神原さん、発表ありがとうございました。
神原:ありがとうございました。
2024.11.29
「明日までにお願いできますか?」ちょっとカチンとくる一言 頭がいい人に見える上品な言い方に変えるコツ
2024.11.28
管理職の「疲弊感」がメンバーに伝わるリスク 部下の「働きがい」を育む6つのポイント
2024.11.27
何もせず月収1,000万円超…オンラインゲームにハマって起こした事業 大学中退し4社立ち上げ・2社売却した起業家人生
2024.11.27
部下に残業させられず、自分の負担ばかり増える管理職 組織成長のカギを握る「ミドル層」が抱える課題
2024.11.26
タスクの伝え方が部下のモチベーションを左右する マッキンゼー流、メンバーが動き出す仕事の振り方
2024.11.25
仕事はできるのに、なぜか尊敬されない人が使いがちな言葉5選 老害化を防ぐために大切な心構えとは
2024.12.03
職場の同僚にイライラ…ストレスを最小限に抑える秘訣 「いい人でいなきゃ」と自分を追い込むタイプへの処方箋
2024.11.28
“新規事業が生まれない組織”に足りていないもの 「PoC貧乏」に陥らず、アイデアを形にするためのヒント
2024.11.29
やたらと多い自慢話、批判や噂好き…「自己重要感」が低い社員の特徴 管理職が知っておきたい「一生働きたい職場」の作り方
2024.12.02
給料や人間関係が良いだけでは部下は満足しない メンバーの「働きがい」を育む5つのステップ