とある案件でFlutterを使う必要が出てきたので、短期間でFlutterを使いこなせるように事前学習をしておこうと思います。
ついでにブログで学習内容を書いておいて、自分への備忘録としてしまい、ついでのブログのアクセス数も伸ばしてしまおうという、一度に三度の事を実現してしまおうという、欲張り精神満載の取り組みである。
これまで、Webサービスは、ほぼ「Vanilla（全て自前でプログラミング）」をモットーとして、ガリガリとネイティブ、JSとPHPを書いたり、サーバーでは、自分でC言語でモジュールを作ったりする、変態エンジニアっぷりを発揮していたんだが、ここにきて、ここ数年前から流行っているFlutterを使うことになろうとは・・・
そもそも、何故Flutterなのかというと、この案件を依頼してきた会社の社長さんとお友達で、その会社でいつもFlutterを使ってサービス構築を行っているため、その流れに乗って欲しいというオーダーである。
値段が安いか高いかは問題ではない、エンジニアたるもの、ベースが決まっているなら、あとは中身を作り込むだけだ。
言語や環境に左右されるのは本望ではないし、真のエンジニアとは言えない・・・と偉そうに考えてみた。
ということで、Flutterの学習、始めますよ。
Flutterの各種リンク
公式サイト
https://flutter.dev/
公式ドキュメント（英語）
https://docs.flutter.dev/
日本語翻訳ドキュメント
https://flutter.ctrnost.com/
Dart Pad
https://dartpad.dev/
Download (archive)
https://docs.flutter.dev/install/archive
このシリーズのゴール
Flutterを「なんとなく知っている」状態にしない事を目的にして、できるなら自分で使いこなして、他の案件でも選択肢として使える状態にする。
そして、次の判断ができる状態を目指す。
・自分の案件で使うべきか
・チームに導入できるか
・あえて使わない判断が妥当か
ゴールはとりあえず、以下のように設定しておく。
・Flutterで中規模業務アプリを設計・実装できる
・技術選定の説明を言語化できる
Flutterってどんなモノ？
そもそも、Flutterってなんなのよ？という人のために、少し事前に説明をしておく。
Google製のUIフレームワークで、Dart言語を使用している今流行りのプラットフォーム。
単一コードベースで以下をカバーしている。
・iOS
・Android
・Web
・Desktop
最大の特徴は、UIをネイティブ描画するという点で、HTML / CSS に依存しないというのが斬新的。
よくある誤解としては、
・「Web技術の延長」ではない
・「React Nativeの代替」でもない
Webエンジニア視点での立ち位置
React / Vueとの比較で見た場合、FlutterはSPAではないということを理解しておきましょう。
レンダリング思想が根本的に違うということ。
なので、CSS地獄が存在しないし、ブラウザ差異・OS差異に悩まされにくいのが特徴です。
その代わり、HTML的な自由度はないし、SEO重視用途には向かないので、社内システムや、特定のツールとしての利用が向いているフレームワークだと思う。
Flutterが向いているサービス
とりあえず、ミスリードにならないように、以下のようなサービス（システム）開発を目的にFlutterを利用するのがいいと思われる。
・業務支援ツール
・社内向け管理画面
・スタートアップ初期プロダクト
・UI品質を一定以上担保したいSaaS
逆に向いていないケース
・コンテンツSEOが主軸のWebメディア
・Webのみ・超軽量が最優先のサービス
Flutterのメリット
クロスプラットフォームの完成度が高い
iOS / Android / Web / Desktop を単一コードベースで実装できるので、アウトプットの幅が多いのと、運用管理が単一管理することができるので、少人数開発での運用も可能にできる。
「とりあえずWeb＋スマホ」を最短で出せるので、モックアップを使うのにも向いている。
PoC(Proof of Concept/プルーフ・オブ・コンセプト) として、本番への移行コストが低いのも非常に魅力的である。
UIの再現性が高く、崩れにくい
CSS差異・ブラウザ差異に悩まされないらしいが、これは今後学習をしていくことで、何故そうなのかが明確にわかるだろう。
デザイナー指定のUIをそのまま実装しやすいのも、非常に魅力的。
OSアップデートの影響を受けにくいというのは、スマホなどのコンテンツにとっては、非常にありがたい限りだ。
パフォーマンスが安定している
ネイティブ描画のため体感速度が速いらしい。
SPAで起きがちな描画遅延が少ないし、業務アプリで「遅い」と言われにくい。
これらは、体感値ということなので、実際に自分でコーディングをしてみて確かめたいし、VanillaのWebページとの比較も行ってみたいとも思った。
UIとロジックを一体で管理できる
Widget単位で責務が明確なので、プログラミングデザインパターンが構築しやすい。
コンポーネント分割が自然に設計へつながるので、明確な設計ができる（らしい）
フロントのスパゲッティ化を防ぎやすいが、これも実際にコーディングをやって１サービスぐらいを構築してから判断してみることにする。
バックエンドとの責務分離がきれい
API駆動設計と相性が良いとのこと。
BFF(Backend for Frontend)的な考え方をシンプルに実現できる。
既存のPHPやNode APIをそのまま活かせるというのは、非常に助かる。
採用・教育コストの現実解
Webエンジニアが比較的早く戦力化できるのは、仕事で使う場合に非常に助かる。
「React疲れ」した人材の受け皿になるので、設計に疲れたエンジニアは、Flutterを使うべきとも思った。
学習範囲が限定されているので、今回のブログ学習に向いていると考えたワケだ。
このステップのあとがき
今回、Flutterを学習するのは、流行っているからという理由ではないが、流行っているからという理由で、プログラミング学習をするのは、個人的に嫌いではない。
何故なら、そのプログラムができると、フリーエンジニアとしての仕事の幅が増えるし、何より新しい領域のエンジニアと話の接点ができる。
そして、流行りに乗っかるというのは、個人的なモチベーションアップにもつながる。
というわけで、今Flutter学習を開始しようとブログを書き始めた自分としては、まあまあワクワクしている状態なんですね。
0 件のコメント:
コメントを投稿