こんにちは！しゅんせいです！
僕は、ITベンチャーの株式会社GenAi（以下、GenAi）でインターン生として働いています！
このシリーズでは、エンジニア経験が全くない僕が、GenAiの菅原さん（以下、師匠）に指導を受けながら、アプリ開発を学ぶ過程を記録していきます。
以下は、師匠が書いたFlutterFlow（ノーコードアプリ開発ツール）に関する記事です。FlutterFlow自体の概要を知りたい方はこちらをご覧ください！
以下の予定で、師匠に出された課題をこなしていく形で進んでいくので、皆さんも一緒に手を動かしてみてください！
経費申請アプリまで進めると、SlackとFlutterFlowで作ったアプリを連携させるなど、かなり難しそうな機能まで実装できるようになります！
| vol | 課題 | 概要 |
|---|---|---|
| vol.0 | 自己紹介カード | 基本Widgetの役割 |
| vol.1 | メモアプリ | Actionの追加 |
| vol.2 | 匿名掲示板アプリ | Firebaseとの連携 |
| vol.3 | 匿名掲示板アプリ | Page Parameters/Page State/On Page Loadなど |
| vol.4 | 掲示板アプリ | Authenticationの設定、Conditional Visibility |
| vol.5 | 掲示板アプリ | UXの改善（Validation,Padding) |
| vol.6 | スレッド付き掲示板アプリ | 複雑なデータモデル（ERD）、Action Output |
| vol.7 | スレッド付き掲示板アプリ | レスポンシブ対応（Responsive Visibility、Responsive Text） |
| vol.8 | 経費申請アプリ | API call、Googleログイン |
| vol.9 | 経費申請アプリ | Custom Action、Custom Function |
本記事では、簡単な自己紹介や、インターン・アプリ開発を始めた契機、FlutterFlowに関する前提知識の共有を行い、最後にFlutterFlowで簡単な自己紹介カードを作成します。
自己紹介
せっかくなので、さっきFlutterFlowで作成したプロフィールを載せておきます。この作成過程については後で説明します！
僕は現在、東京大学の2年生で、4ヶ月前にGenAiにインターン生として入社しました。他社でのインターンの経験もエンジニアリング・プログラミングの経験もないのですが、アプリ開発を学ばせてもらえることになり、絶賛ワクワク中です！
インターンを始めた経緯
入学してからインターンを始めるまでの間は「起業したいなー」という漠然とした思いはあったものの、ダラダラと過ごしていました。
「ビジネスについて何もわかってない！」
そんな焦りが徐々に大きくなり、大学2年が終わる頃、友人にインターンを勧められ、求人サイトでGenAiを見つけます。そして、師匠と代表と一回ずつの面談を経て、以下の魅力を感じ、入社しました。
- 成長段階のベンチャーで、経営陣との距離が近い。
- インターン生も少なく（現在、6名）、裁量権が大きい
- 自然体で、いい意味で緊張感がなさそうな雰囲気
エンジニアを目指した経緯
僕は元々、エンジニアに興味があったわけではありません。むしろ、自分は文系だし、PCに向かってひたすら作業することも退屈そうだし、選択肢に入ってすらいませんでした。
しかし、師匠からアプリ開発を教えてもらえるという話を頂くと、不思議と好奇心が湧いてきました。
というのも、FlutterFlowはノーコードツールなので感覚的にアプリを作れて、1ヶ月あれば全容が掴めるらしいのです！
FlutterFlowと周辺知識のインプット
さて、本題に入りましょう！
以下の画像は、教育コンテンツの一部を抜粋したものです。
調べてもよく分からない単語もあると思いますが、ひとまず大枠を理解して、次に進みましょう。
アプリケーションの構成要素
FlutterFlowで実現できるクライアントサイドの機能
FlutterFlowで実現できるバックエンドの機能
実際にFlutterFlowで自己紹介ページを作成！
さっそく、師匠から「自己紹介ページを作ってみよう。」という課題が出されました。クライアントサイドのUI構築の方法を学ぶことが目的のようです。
僕は、馴染みのあるマッチングアプリ風のプロフィールを作ることにしました。
FlutterFlowで新しいプロジェクトを作る
FlutterFlowにログイン後、右上の「Create New」を押し、「Create Blank」を選択すると、新しいプロジェクトを作成できました。
FlutterFlowの基本セクション
右も左も分からないので、公式が出している動画を見てみます。
なるほど！主に以下の4つのセクションを操作するらしいです！
Canvas（キャンバス）
中央部のセクション。Widgetをドラッグ&ドロップで配置していきます。
Widget Palette（ウィジェットパレット）
左部にあり、Widgetが羅列されているセクション。 ナビゲーションバーの最上部のアイコンを押すと表示されます。
Widget Tree（ウィジェットツリー）
左部にあり、アプリの画面がツリー構造で表示されるセクション。 ナビゲーションバーの上から2番目のアイコンを押すと表示されます。
Properties Panel （プロパティーズパネル）
右部にあり、ページやWidgetの性質をカスタマイズできるセクション。
Widgetを配置してみる
Textを設置してみました！
Containerを設置！
Imageを設置。
WidgetPaletteからCanvasへ、Widgetをドラッグ&ドロップで配置できました！
レイアウトについて調べてみる
レイアウトについて調べてみると、公式ドキュメントを発見しました。上の画像は、そこから引用したものです。
なるほど！Column・Row・Stackがレイアウトのキーとなるようです！ 以下がそれらの特徴です。
- ColumnでWidgetを垂直方向に配置
- RowでWidgetを水平方向に配置
- StackでWidgetを上下に配置
こちらが参照した公式ドキュメントです！とても分かりやすかったのでぜひ一読してください！ （英語が苦手な方はGoogle翻訳を使うといいと思います！）
自己紹介カード完成！
1.5時間くらいで何とか完成！ ColumnとRowを使用してレイアウトを作成し、TextとImageを配置しました！
スペースは要素ごとのPaddingで何とかそれっぽくしてます！
Imageは正方形にしたかったのですが、大きさをうまく規定できなかったので、Macの写真アプリでトリミングして画像そのものを正方形にしました！笑
こだわりポイントは、Rowを用いて、写真を複数枚、スライドで見れるようにしたことです！
まとめ
色々なWidgetを試してみて、課題が明確になりました。
- 各Widgetの役割を理解する。
FlutterFlowの公式サイトに各Widgetの説明ページがあるので、適宜確認していく。 - Widgetの大きさが何によって規定されるかを理解する。
WidthやMax Width、Expansion、Boxfitなど、実際に使ってみて感覚で覚えていくしかなさそう。
次回はメモアプリを作ってみます。どんな要件で作るか楽しみです！
株式会社GenAiについて
株式会社GenAiは、新規事業としてのアプリケーション開発（MVP開発）を最速で実現することで、日本の様々な企業の挑戦を支えているITコンサルのスタートアップです。
ローコードツールや生成AIなどの新規技術を積極的に取り入れた開発スタイルで、少数でも最速の価値提供を実現しています。
現在GenAiでは、一緒にチャレンジしたいエンジニア志望の方を募集しています！ご興味ある方はまずはカジュアルにお話ししてみませんか？以下からご応募お待ちしております！ https://www.wantedly.com/projects/1685413
