👓

Flutterを学び"始めた"UIデザイナーの半年間

2023/05/12に公開

はじめまして、私は半年ほど前からFlutterに興味を持ち学習をしているUIデザイナーです。
自己紹介かねてFlutterとの馴れ初めを書かせていただきます。

Fluttterとは

簡単にFlutterは、Googleが開発したオープンソースのモバイルアプリケーション開発フレームワークです。Flutterを使うことで、iOSとAndroidの両方のプラットフォーム向けにネイティブアプリを開発できます。UIパーツをレゴのように積み重ねていくので高品質な見た目のアプリが割と簡単に構築できます。

Flutterを学ぼうと思ったきっかけ

きっかけはこの1年UIデザイナーとしてWeb・アプリのUIデザインを考えたりHIG・MDGガイドラインなどを読んだりしていく中でアプリ作りに興味が出ました。
そして半年ほど前からアプリ作りに挑戦しました。最初はPython(Webアプリ)、その後にモバイル系のSwiftUIやReact Nativeを試してみましたが、GUIでパーツを配置できるSwiftUIは使いやすい反面、置き間違いやエラーが特定しにくいと感じ、React NativeはJavaScriptがどうしても好きになれず…(笑)

そんな中、友人がFlutterスマホアプリを開発し、アプリで資金調達・売却していたのを見て、私自身もFlutterをやってみようという気になりました。Flutter(Dart)はエンジニア未経験の私でも理解しやすいと感じました。

Flutterを学んでいった過程

  • まずYOUTUBEやtiktokなどでFlutterコードを書いて美しいUIが次々と実装されていく様を見て興味を持ちました。
  • ネットの教科書や動画を参照して学び、chatGPTで簡単なアプリを作ってみました。読んでみると、意味がふわっとわかってきたような気がしました。
    ・その後、FlutterエンジニアのTwitterフォロー、イベント参加、Flutterコミュニティ「Flutter大学」への参加をし、モチベーションを維持できる環境を作りました。
  • 現在は「みんちゃれ」のFlutter講座を受講し手を動かしながら意味を理解しようと努めています。(とても難しく感じます)

Flutterを学んでみて変化

HTML,Css,Jqueryなどwebサイト制作の薄い知識しかなかったので、アプリケーションを作るということは、エンジニアリングとはどういうことか!をようやく体感し始めたように感じます。
また、社内にフロントエンドエンジニアがいて、ReactやVueとやらを使っており私は一切中身がわからなかったのですが、どうやらFlutterとReact(DartとJavascript(ES6以降))は、文法や非同期処理、状態管理など共通した部分があるらしく、なんとなく彼らが言っていることがわかってきたような気がします。(気のせい)
また、UIデザイナーが使うFigmaの「コンポーネント」、「状態管理」の概念はFlutter・Reactなども同じで、エンジニア目線を学ぶことでデザインにも活かせそうです。
これからもどんどん学んでいこうと思っています。

Discussion