Flutter on the Webでアプリを作り、 React/Next.jsの違いを体感する - FlutterKaigi mini Osaka #1 with Mix Leap Study #75

FlutterKaigi mini Osaka #1 with Mix Leap Study #75 での登壇内容です。

Transcript

1. Flutter on the Webでアプリを作り、 React/Next.jsの違いを体感する Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Kanon (@samurai_se) #FlutterKaigi mini Osaka
2. 自己紹介 2 Kanon 株式会社 虎の穴ラボ 個人事業 blessing software samurai_se ↓詳しくは↓ • 3次元に嫁が1人います。2次元にはたくさんいます。 • 水瀬いのりライブTで神戸から色んなテックカンファレンスに登壇してる人です • 最近「アイコンみたことある！」と声かけていただける率が増えてて嬉しい • 本業はKtor(Kotlin), Next.jsで副業がLaravel, Nest.js,Next.js Copyright © 2024 blessing software. All Rights Reserved.
3. 3 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Flutter…?
4. 4 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 1行も書いたことありません！！
5. 5 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 気には なっていました
6. 6 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ということで、今日はFlutterを知るために 初めてDartを書き、LTで登壇します
7. 7 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ここまで先に資料を作っていて、 この時点ではまだ1行もコードを書いてません。 ここから時間が許す限りコードを書きます ここ作ってるのは登壇のちょうど1週間前
8. 環境構築→初期ページを表示する Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
9. command + shift + p 9 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
10. 怒られる 10 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio • SDK入れろ ◦ Download SDKを押す • 入れてもエラー • パス通せと怒られる ◦ といっても→を押してダウ ンロードフォルダを選ぶだ け
11. 改めて 11 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
12. 改めて 12 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
13. 改めて 13 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
14. きちゃあああああああああ 🎉 14 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
15. 15 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 無事にFlutter on the Webが動きました！
16. 感想 🗒 16 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio • Next.jsでプロジェクト作る場合 ◦ npx create-next-app@latest ◦ 色々コマンドラインで入力 ◦ npm run dev • Flutter on the Webの場合 ◦ GUIでぽちぽちできるので本当の初心者に 優しそう
17. 17 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 　　　　　　　終
 　　　　　制作・著作
 　　　　　━━━━━
 　　　　　　ⓃⒽⓀ
18. 18 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 冗談です
19. 19 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio これだと流石に味気なさすぎるので もうすこし作り込んでみます
20. 簡単にデモアプリに挑戦 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
21. Next.jsで作ったアプリに近いものを作ります 21 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
22. コントリビュートしやすいOSSを探すアプリ 22 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
23. MVP要件 23 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 時間がないので UIは雑に作ります 条件も JS固定にします データフェッチ + 表示
24. 必要なパッケージを追加 24 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
25. 必要なパッケージを追加 25 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 保存すると 勝手にとってきてく れる これは IntelliJ + gradle を使ってる感
26. 26 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio GitHubへのシークレット情報をどう管理する🤔
27. Node.jsと同じくdotenvがある 27 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
28. この辺の書きっぷりはどの言語でもあまり変わらん 28 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio プロトコルって、 偉大だ
29. UI側で初期状態を作る 29 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio この Stateful,Stateless っていうのが 宣言的でよい
30. すると、データfetchには成功したっぽい 🎉 30 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
31. 31 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ここまで来たら、あとはUIに出すだけ！！
32. UIをGPT先生が実装 32 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio コンポーネントとか スタイルの当て方 さっぱりだったので ほぼ聞いた
33. MVP要件を満たしたものが完成 🎉 33 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
34. せっかくなのでFirebaseへデプロイ 34 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio firebase experiments:enable webframeworks firebase init hosting firebase deploy
35. デプロイ完了 🎉 35 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ここまで初心者でも 2時間くらいで できました 🎉 https://flutter-demo-ac 950.web.app/
36. まとめ Next.jsに比べてよかったところ 36 • 初期の環境構築がGUIで出来てやさしい • ライブラリのインストールも気が利く • 意外とデータfecthなどUI以外はTypeScriptで書く のと大差ない • UIが状態を持つ・持たないが宣言的なのは(個人 的には)わかりやすい • 単にコードを書いてればモバイルのソレも出来上 がるのはタイパがいい Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
37. まとめ Next.jsに比べて難しいところ 37 • UIを作るのがめちゃくちゃ難しく感じる ◦ ほぼGPT先生に書いてもらってた ◦ 慣れの問題？ ◦ MaterialUIなんかも苦手(恐れずにいうなら嫌い) • 基本的にTailwind CSS信者なので、設計されたス タイル(CSSのクラス)を指定してある程度好きに スタイルを書き換えたい Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
38. 38 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 オフラインLT会を 神戸で開催します！ オンラインでも毎朝もくもく会 してます！
39. 39 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 PHP以外の話も ウェルカムです！！ Flutterの話もしにきて ください！
40. 40 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ご清聴、あざざました
41. Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio おわりに 三ノ宮で待ってます！！ samurai_se