【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part02
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part02 )です。
模範となったプロダクト
FlutterはFaceBookが開発したReact Nativeに強い影響を受けています。
React Nativeの特徴を生かしよくなかった点を補って進化しています。
僕にとってReact Nativeは“つらい” DMMが負債脱却のために取り組んだSwift化 – ログミーTech (logmi.jp)
React Native開発を1年ぐらいやって得たことの感想 – Qiita
例えばReact NativeはJavaScript → iOS, AndroidのネイティブUIに通信を行う際、「ブリッジ処理」行われています。
この関係でコストが大きかったのですが、Flutterは事前にそれぞれのプラットフォームの言語でコンパイル(Ahead-Of-Time)して実行されるため高速動作します。
React Nativeも単一のコードを用いて様々なプラットフォームのアプリケーションを作成できるフレームワークです。
こちらは「React(React.js)」を用いて実装を行うものでした。
FlutterはDartという言語を用いて実装を行います。
Dart言語で実装
Dart言語もFlutter同様にGoogleが開発した製品となります。
Flutterが生まれる前から存在はしていましたが今一つパッとしない感じがありました。
Flutterが誕生し、Dart言語に再びスポットライトが当たったような印象があります。
Flutter使うならDart言語で実装しないといけませんからね(笑
宣言的UI
Flutterは宣言的UIで記述しているようです。
Swiftのように後付けで宣言的UIを追加したのではなく、生まれた時から宣言的UIなのでこの形でしか実装できません。
潔し！
はてこれはどういうことなのか・・・。
Flutterの公式サイトに説明がありました。
Start thinking declaratively – Flutter
英語・・・分かりません😫
Vue.jsの例で宣言的UIを説明しているサイトがありました。
宣言的UIが何か分からなかったので調べてみた (zenn.dev)
なるほど・・・最初からすべての要素を定義しておいて大事な部分は変数にしておくという考え方ですかね。
テンプレートという言葉がありますがコレと何が違うのかいまいちピンときません。
ホットリロード可
Flutterの開発ではホットリロードが可能です。
これは開発をしていてうれしい機能ですね！いちいち停止→修正→開始としなくてもよくなるので開発効率が高くなります。
どんな修正でもホットリロードが効くのでしょうか。進めていくうちに判明するかもしれませんね。
必要なものはだいたい用意されている
Flutterに標準で備わっている部品だけでだいたいのことは実現できるようです。
また用意された部品は簡素なものではなく美しく高度である、自身たっぷりで頼もしい発言です🤗
また部品をカスタムすることも容易とのこと。
次は環境構築ですかね。
今日はここまで！