17
アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文 6. DEMOアプリ

React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

アジェンダ1. モバイルのマーケットについて2. アプリの種類について3. Flutterについて4. Dartについて5. プログラムの例文6. DEMOアプリ

Page 2: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文
Page 3: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文
Page 4: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Progressive Web Apps

HTML/CSS, React, Angular, Vue

Hybrid

(PhoneGap, Cordova, Sencha)

Native Solutions

(React Native, Flutter, Xamarin)

マイナス:

本当のアプリではないでので:• ブラウザ上で実行します。• マーケット(ストア)に出版できません。

• ショートカットを作成できません。• デバイスの機能(NFC、Bluetooth

など)使えないです。

プラス:

• 制作は簡単です。

マイナス:• WebViewには実行するのでアプリのパフォーマンスが悪いです。

プラス:• HTMLやJAVASCRIPT使用するのでWEBデベロッパーは早く慣れてます。

• プラグイン利用してデバイスの機能にアクセスできます。

• マーケット(ストア)に出版できます。

• ショートカットを作成できます。

マイナス:• 新しいフレームワークを勉強しないといけないです。

プラス:• パフォーマンスは最高です。• デバイスの機能(NFC、

Bluetoothなど)を使えます。• マーケット(ストア)に出版できます。

• ショートカットを作成できます。

Page 5: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

React Native

会社 Microsoft Facebook Google

リリース年 2011年 2015年 2018年

利用言語 XAML、Xamarin.forms JavaScript Dart

人気のレベル 高 高 低

人気のトレンド

だんだん下がります だんだん上がります どんどん上がります

コスト ライセンス必要 無料 無料

Page 6: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

StackOverflowの質問数

Page 7: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

について

Flutter(フラッター)は、Googleによって開発されたフリーかつオープンソースの

モバイルアプリケーションフレームワークである。

Flutterエンジン主にC++で書かれており、GoogleのSkiaを使用した低レベルのレンダリングをサポートしている。AndroidやiOS固有のSDKとも連携ができるようになっている

基本ライブラリDartで書かれており、エンジンと通信を行うためのAPIなど、Flutterを利用してアプリケーションを構築するために必要な基本的なクラスと関数を提供し

ている

ウィジェットFlutterのUI設計は、様々なウィジェットによって構成されている。ウィジェットはUI

のテキスト・図形などを含む多くの単純なウィジェットを組み合わせることで、複雑なウィジェットを作成すること

ができる。

Page 8: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Desktop

Windows

Linux

MacOS

Mobile

IOS

Android

Web

Firefox

Chrome

etc

予定

Page 9: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

はGoogleによって開発されたWEB向けのオブジェクト指向プログラミング言語です。

コンパイルできる環境:•機械語ARM & x64

• JavaScript

Page 10: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Widgets

Stateful Widget Stateless Widget Inherited Widget

Widgetの変数が変わる

Widgetの変数が変わらない

チャイルドのWidgetに値を上げます。

Page 11: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Stateless Widget

コンストラクタ

Statelessなので関数だけ使います。

Containerのスタイル

Containerのチャイルド

Page 12: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Stateful Widget

ステータスを作成

ステータスの変数

ステータスの操作

ステータスの変数があるWidget

Page 13: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Inherited Widget

Widgetのデータ

Page 14: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Product Card

Page 15: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

Image Widget Text Widget

RaisedButton Widget

Page 16: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

DEMO TIME

Page 17: React Native vs Flutter · アジェンダ 1. モバイルのマーケットについて 2. アプリの種類について 3. Flutterについて 4. Dartについて 5. プログラムの例文

まとめFlutterの利点

• どこでも実行できる• 開発のスピードは高い• パフォーマンスは良い• OSのバージョン異なって

UIが同じです

Flutterの欠点

• 新しい言語を勉強しないと• 将来は不明• ライブラリはまだ少ない• OSのバージョン異なって

UIが同じです