Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
30
Help us understand the problem. What is going on with this article?
@naruqiita

なんかFlutterやってる人イケてね?Flutterの可能性を調べてみた

なんかFlutterやってる人イケてね?Flutterの可能性を調べてみた

by naruqiita
1 / 28

Flutterとは

スクリーンショット 2021-04-25 19.28.26.png


ターゲット

  • Flutterの良さを感じていない人
  • 名前は聞いたことがある程度の人
  • ReactNativeの方が良くない?と思っている人

イメージ

  • これから来そう
  • Googleが出してたっけ?
  • まだ勉強すべきではないのかな?
  • 勉強してる人が増えてるイメージ

僕の状況(2021/04)

社内勉強会にて毎週勉強中
Flutterでの製作物

- ファスティングの16時間を計測するオートファジーアプリ
- 画像検索APIを使った画像一覧アプリ
- ハッシュタグを保存し、共有するアプリ(製作中)

一番の特徴

クロスプラットフォーム(iOS, Android, Web)
OSの異なる環境で同じ仕様のアプリケーションを動作させるプログラム

WORAを目指している(write once, run anywhere)
一度コードを書くだけでどの環境下でも動くことを目指している


Flutterの歴史

2018年12月4日 Flutter 1.0のリリースが発表された

2021年3月3日 Flutter 2.0がリリース
https://www.youtube.com/watch?v=IdrCyS7EF8M


そもそもFlutterはDartで書かれています


Dartの歴史

2011年10月10日
JavaScriptの代替となることを目的に作られました

つまり、モバイル領域のための言語では全然なかった
かつ、Google内ですらChromeのブラウザでの採用を見送りTypeScriptを採用
2018年最も学ぶ価値のないプログラミング言語だった


しかし
2018年2月にはDart2がリリースされ
モバイルアプリの需要と供に再び注目され始めた


Why Flutter

  • モバイルアプリの需要は常に高まりユーザーが増えている
  • ウィジェットやライブラリーの豊富さ
  • ReactNativeよりアニメーションと画面遷移の支援機能が強い

GoogleTrend
スクリーンショット 2021-04-29 14.06.55.png


ウィジェットについて

UIを構築しているパーツのこと

TabBar
スクリーンショット 2021-04-29 14.58.30.png

      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
              ),
            ],
          ),
        ),


FloatingActionButton

スクリーンショット 2021-04-29 14.59.28.png

floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // Add your onPressed code here!
        },
        label: const Text('Approve'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
      ),


なんか簡単そうじゃない?


マテリアルデザイン:

Googleが提供しているデザインシステム
直感的に理解できるよう、立体的に見えるデザインなど視覚的な工夫を取り入れたもの
FlutterのWidgetのほとんどは、マテリアルデザインが提供するmaterial library
https://www.youtube.com/watch?time_continue=38&v=Q8TXgCzxEnw&feature=emb_logo


何ができるのか

Hot Reloadを使って、高速に開発ができる
ネイティブはコンパイルごとに10秒-1分程度の時間がかかるが
クロスプラットフォームものに多いホットリロードで開発時間短縮

クロスプラットフォームで開発コストを一気に下げる
(iOSとAndroidの画面が同じになる)


既に使っているような人気のもの

Google Ads Tencent
スクリーンショット 2021-04-25 20.43.37.png スクリーンショット 2021-04-29 13.57.35.png

日本国内では
ベンチャーで使われているケースが多い!

@Amijakan さんからコメントを頂いた
トヨタが組み込みの分野でFlutterを採用している!
https://medium.datadriveninvestor.com/flutter-engage-flutter-2-2b4e8dde016f

ただ、大手で使われてるイメージが多くないので構想してみる


大手で使われていない理由予想
- ReactNativeが3年程早く市場に出ている
- 2018年からの本格始動なので大手があまり使っていないイメージ


なんで使われてないんだろ〜


Flutterでできないこと

  • ハードウェアに関わる機能が多いアプリはサポートできていない
  • ウィジェット機能や加速度センサー等、プラグインが提供されていなかったり、自作等での対応が必要なケースも

難易度

Webエンジニアにとって難易度は高くない
JavaやReactを経験している方が書きやすいイメージ

Flutterはネイティブコンポネントを使わない
WidgetというUIや動きをつけるフレームワークが充実!

GoogleがYoutubeでの使い方動画を作っており
ディベロッパーフレンドリー
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG


案件がどのくらいあるのか

Flutter React Native
Green スクリーンショット 2021-04-25 20.21.11.png スクリーンショット 2021-04-25 20.22.12.png
レバテックフリーランス スクリーンショット 2021-04-29 15.24.25.png スクリーンショット 2021-04-29 15.24.46.png

FlutterとReactNativeは差分なさそう

けどネイティブアプリの言語に比べると少なくて単価は低い


即金性

プラス

  • 学習コスト低め(Webエンジニアにとって)
  • iOSとAndroidでローンチ可能で速度の優位性

マイナス

  • ベンチャーが多いので単価は比較的低い
  • 個人開発でのアプリは既にレッドオーシャン
個人アプリを量産で勝算を狙う
もしくは、副業などで稼ぐ方がいい

結論

ベンチャー&個人開発に最適

熱くなってる言語ではある
とにかく時間をかけないモバイルアプリ制作に最適
アイデアがなければ
副業や企業でモバイルアプリ開発をする方が良い


個人開発を中心に発信しています
フォローしてねください
https://twitter.com/1026NT

twitter_main.JPG


参照

30
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
naruqiita
個人開発の人🙋‍♂️ RubyとVueが好きです💎 最近はGoとFlutterに手を染めました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
30
Help us understand the problem. What is going on with this article?