Nainで開発のお手伝いをしている @takahi5 です。
さてNainではアプリ開発にFlutterを導入しています。
僕自身はReact Nativeを普段は使っていますが、同じくクロスプラットフォーム対応のFlutterは気になる技術でした。
先日Nainにて開催されたFlutterもくもく会をきっかけに、環境構築〜チュートリアルまでをやってみたので、その感想を書きたいと思います。
(2時間ほどチュートリアルを触っただけなので間違っていたらごめんなさい汗)
Hot Reloadが爆速
Hot Reloadとは、コードを編集したらその改修が即座にアプリ（シミュレーターなど）に反映される機能です。
通常のiOS/Android開発だと、、コードを変更して→コンパイルして→アプリで確認、、のような流れだと思うのですが、
コードを変更した瞬間にコンパイルとか無しで反映されるので、開発の効率がグンとアップします。
さてこのHot Reload的なもの、React Nativeでも存在するのですが、Flutterのほうが速い印象でした。
また、特筆すべきは「Hot Reload」と「Hot Restart」という概念があり、
Hot Reload：いまの画面で更新が反映される。更新が少ないとき。大体これでいける。
Hot Restart：アプリ再起動して更新が反映される。更新が多いとき。
という2種類があるらしく、React Nativeで体験していたのは「Hot Restart」のほうでした。
「Hot Reload」はアプリ再起動せずに更新されるので爆速です。
遷移の奥底のUIを調整するときなど便利そうです。
標準のUIライブラリが充実
標準のUIライブラリがマテリアルデザイン対応していて、完成度が高い印象です。
標準のコンポーネント(ウィジェットっていうのかな?)を組み合わせていくだけでも、それっぽいUIになります。
さすがGoogle。
React Nativeの場合、標準のコンポーネントのままだとイケてないデザインになります。
とはいえNativeBaseやReact Native ElementsなどサードパーティのUIライブラリ群が充実してるので、それらを使えば同等のメリットは得られるかと思います。
なんとなくReact Nativeと通ずる概念がある
ReactはComponentを組み合わせてUIを作っていきますが、Flutterの場合Widgetというものを組み合わせていきます。
チュートリアルをこなした限りでは、ほぼ同じ概念なのかな、と感じました。
Widgetの状態はStateで表現し、Stateを持つWidgetをStateful Widget、Stateを持たないのをStateless Widgetと呼ぶなど、この辺もReactのStateless Componentなどを彷彿させる概念です。
Widgetは必ずbuild関数を持っています。
このbuild関数でUIの見た目を定義しているのですが、これはReactのrender関数に相当するものかと思います。
と言った感じで、Reactと対応付けながら把握していくと意外とスッと概念が入ってきそうな印象でした。
Dartを恐れることはない
Flutterを始めようと思ったときのネックの一つとして、FlutterがDartで書かれていることがあるのではないでしょうか。
おそらく大抵の人はDartを触った経験は少ないだろうし、また新しい言語を覚えるのか..と。
が、触ってみた感じでは意外とスッと入ってきそうな印象でした。
もくもく会の参加者の方も、Dartを特に勉強したわけではなく、Flutterアプリを作りながら覚えたとのことでした。
Java, C#, JavaScriptなどの言語を経験していれば、思ったより学習コストは高くなさそうです。
Flutterもくもく会
NainではFlutterに関する情報交換の場として、もくもく会を開催しています。
次回は9/11(水)に開催予定です。
普段Flutterを活用している方から、まずはチュートリアルから入門してみようという方で幅広く参加いただいています。
お気軽にお越しください♪