スタッフブログ

STAFF BLOG

アプリ開発日誌

2021.05.12

【快適すぎる】iOS専用のアプリでさえも「Flutter」を使いたくなる理由

Flutterを使い始めてから、なるべくネイティブではなくFlutterで実装したいと思うようになりました。
iOS専用のアプリでもFlutterで実装したいと進言するほどです。

その理由の一つは、ホットリロードが使えるからです。

210512_eda_blog.002

ビルドして結果が表示されるまで待ち、
コードを調整してまたビルドして結果が表示されるまで待ち…。

コーディング中はずっとこの繰り返しですよね。
ビルド中は周辺コードを見直したりしますけど、結果が表示されても全く期待値と違うことだってあります。
さっさと表示されてほしい…誰しもそう思うはずです。

ホットリロードが使える環境で開発することで、そのストレスは激減します。

Flutterを使い始める前はiOSネイティブの開発をしていました。
その経験も踏まえて今回はiOSエンジニアの目線から、ネイティブエンジニア向けにホットリロードについて語ります。

 

実行結果を1秒もかからずに確認できる「ホットリロード(Hot Reload)」とは?

210512_eda_blog.003

Flutterでは一度ビルドすると停止するまでホットリロードができます。

ホットリロードというのは、変更した部分が実行中の画面に即時反映される機能です。
最近ではSwiftUIなどで、ネイティブ側も同じようなことができるようになってきていますね。
クロスプラットフォームのフレームワークでは当たり前になってきている機能です。

ホットリロードは本当に便利な機能で、初めて使った時は感動しました。
ネイティブ開発ではいちいちビルドし直していたので、あの時間はなんだったんだ…と思うと同時に、急速に時代が進んだような感覚にワクワクしたのを覚えています。

多少はビルドし直さないといけない場面もあるものの、基本的にはほとんど場合で変更結果が即座に反映されます。
画面の調整などはもちろん、ロジックの調整も1秒もかからず確認することができるのは本当に快適です。

 

実際の動作

MacでAndroid Studioを使っていてRunボタン経由でビルドした場合は ⌘ + S でホットリロードできます。
上書きされたと同時に画面が更新されます。

Runボタン自体のショートカットのデフォルトは Control + R です。
なので、Control + R で最初のビルドを通した後は、調整する度に ⌘ + S で結果を見ながら進めていきます。

コマンドラインから flutter run で実行した場合は r キーがホットリロードのショートカットになります。

Screen 01_1

⌘ + S を押した瞬間に画面が更新される

 

ホットリスタートを併用したり、もう一度ビルドし直すことももちろんある

また、現在の状態をリフレッシュしてもう一度ビルドした時の状態から始めたい場合は、ホットリスタートを行います。
複数の画面にまたがるState(状態)をリフレッシュしたい時などに使います。
Android StudioでRunボタンを使ってビルドした場合は、もう一度Runボタンを押すことで実行できます。
ショートカットの場合はもう一度 Control + R です。

それでもリフレッシュできない変更の場合はもう一度ビルドを行います。
使い分けとしては以下のような形です。

1、調整中の画面の一部やちょっとしたロジックを変更した場合は ホットリロード
2、複数の画面にまたがる変更を加えた場合は ホットリスタート
3、ファイル追加や根本的な部分の調整を加えた場合は もう一度ビルド

だいたいの作業は1のホットリロードまでで事足ります。
必要な場合は2、3で確認します。

210512_eda_blog.005

ビルドエラーはネイティブよりも面倒な場合もある

ビルドが通った後は快適なのですが、その前にビルドエラーが出た時はネイティブよりも面倒な場合が多いです。
なぜかというと、ビルドできなくなった場合は、まず原因が「Flutter側なのかネイティブ側なのか」を判断する必要があるからです。
ネイティブと比べて調査範囲が広くなりがちだったりもします。

iOSの場合はXcodeでエラーを見た方がいいかもしれません。
Android Studioではコンソール上でログが吐き出されるだけなのであまり詳しく見れないからです。
Xcodeで見た場合はファイルのリンクや、処理の順序などがわかり、もう少し詳しく見れます。
Xcodeでビルドした時も同じエラーが見れるので、困った場合はXcodeで見るのもいいと思います。

210512_eda_blog.006-2

まとめ

ビルドエラーが出た時は少し厄介なものの、ホットリロードがあることで開発速度は格段に上がります。
既にFlutterやReact Nativeなどを使っている人からすると当たり前に感じるかもしれません。
しかし、ネイティブ開発していた頃と比べるとその快適さは感動するレベルです。

Flutterに興味あるけどまだ触れていないという方は、ぜひ触ってみてください。

210512_eda_blog.007

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 木下 晴晶
    Mail:[email protected]

    3.取得した個人情報の利用目的的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。