ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

flutterインストールして起動してみた

flutterのmacosへのインストールをnotionにメモしてたのでそれを公開 *1

インストール

直接入れるよりも nodebrew 的な fvm を利用して入れるのが良さそう

fvm.app

macへのインストール

install

brew tap leoafarias/fvm
brew install fvm

uninstall

brew uninstall fvm
brew untap leoafarias/fvm

fvm入れたら dart が入ってきた

プロジェクトの作成

fvm install stableしたあとにfvm flutter create してもダメで、先に fvm use <version> --force で無理やり初期化してやる必要がある(fvmのドキュメントでflutterの公式のインストール方法に従ってflutterをグローバルにインストールすることを推奨してるので、 flutter コマンドプロキシしてcreateとかが楽にできたりするのか…?)

iosでのrun

デフォルトのアプリが起動できるかやってみる

fvm flutter doctor を実行すると以下のように設定できているものの一覧が出る。下記の例だとAndroidiosもできてなくてchrome(web)だけ使える。直前にxcodeのインストールだけApp Storeからやってしまったので入れてない場合の表記はわからない。

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6.1 21G217 darwin-arm, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 14.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web

(cocoapodsがrubyに依存してたりでめんどくさくなってきた)

ちなみにxcodeというかiosのセットアップはflutterのios setupの部分を参考にした

docs.flutter.dev

cocoapodsインストール

自分はhomebrewでcocoapodsインストールするだけでdoctorが大丈夫になった

brew install cocoapods

インストールが終わったらios simulatorが立ち上がる事を確認する

open -a Simulator

画面サイズ等変えれるがなんとなくiphone se第3世代にした

設定後の確認

emulatorsdevices というコマンドがあるらしいが違いはよくわかってない。いろんな記事でemulatorsコマンドで apple_ios_simulator • iOS Simulator • Apple • ios というのが表示されると書いてたが表示されなかった

> fvm flutter emulators
Unable to find any emulator sources. Please ensure you have some
Android AVD images or an iOS Simulator available.

> fvm flutter devices
3 connected devices:

iPhone SE (3rd generation) (mobile) • <UUID>                               • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
macOS (desktop)                     • macos                                • darwin-arm64   • macOS 12.6.1 xxxxxx darwin-arm
Chrome (web)                        • chrome                               • web-javascript • Google Chrome xxxxxxx

実行

ios simulatorを立ち上げてる状態でflutter run コマンドを使うと自動的にシミュレーター上でアプリが立ち上がってきた

flutter run

# 端末を指定したい時
flutter run -d chrome

(devicesコマンドで取れたmacosとかchromeと書かれた部分でios立ち上げたかったらuuid指定するのか?)

editorの設定

まだプラグイン入れただけで特に何もしてないがこの辺参考にすると良さそう

dev.classmethod.jp

まとめ

しょうがないけど初期セットアップがめんどくさいな。。主にxcodeのインストールだけど。。

とりあえずバージョンマネージャー入れて動かすところまでを忘れる前にメモ的に書いてるので、本当はこうやったほうがいいと言ったようなことがあれば知りたい。

*1:notionのものをexportしてはてなブログに貼ったらどうなるのかも実験したかった

tanstack-routerのquick startやってみた

健康診断に向かってる途中にtwitter見てたらtanstack-routerが発表されていた。 100% Typesafeと書かれているのが気になってとりあえず試してみることにした。

そこでソース読んだり色々試す前にquickstart動かしてみようと思ったら地味にハマったのでそれのメモ

React Router | TanStack Table Docsを参考にインストールする際にバージョンの選択肢が出てくるが、0.0.1-beta.2を選択してもなぜか0.0.1-alpha.0がインストールされてしまう。 そのため以下のようにバージョンを指定してインストールする必要がある

yarn add @tanstack/react-router@0.0.1-beta.2

どうやってroutingをtype safeにやるんだろうと気になってたのはcreateRouteConfigとして最初にルーティングを列挙するからできるっぽい。code-splittingとかはまだドキュメント化されてないので今後が気になるところ。

それにしてもこんなバージョン選択のUI?がyarnで出るの始めて知った。react-routerも新しいの試してないけど他の何かないかな~とは思っていたので色々試していく予定。

github.com

prismaのquickstartであるstarterを1から作ってみた

prismaのquickstartはすぐにできたので、この環境を0から作ってみる

sqliteの説明はないのでDBは適当に選択した

www.prisma.io

今回はyarnとesbuild-registerでやる

やってみたソース

github.com

プロジェクトの作成と必要なもののインストール

yarn init -y
yarn add -D prisma typescript ts-node @types/node
yarn tsc --init
yarn run prisma init

prismの設定等を書いていく

.env

デフォルトだとpostgresqlの接続情報が書かれているので変更する

DATABASE_URL="file:./dev.db"

schema.prism

schema.prismを書き換えていく。デフォルトだとpostgresqlの設定が書いてあるのでそれをsqliteのものに差し替える

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Post {
  id Int @id @default(autoincrement())
  title String
  content String?
  published Boolean @default(false)
  author User? @relation(fields: [authorId], references: [id])
  authorId Int?
}

model User {
  id Int @id @default(autoincrement())
  email String @unique
  name String?
  posts Post[]
}

マイグレーションを作成・実行

yarn run prisma migrate dev --name init

上記のコマンド一発でマイグレーション用のsql作成と実行をしてくれる。 また実行時にprisma-client-jsがインストールされているかをチェックし、存在しなければインストールを行う。

scripts.tsを作成

最終的にはstarterのsqliteファイルをコピーしてくればいいと思うが、一旦createをprism上からやってみる

import { PrismaClient, Prisma } from "@prisma/client"

const prisma = new PrismaClient()

async function main() {
  const user: Prisma.UserCreateInput = {
    email: "sarah@prisma.io",
    name: "Sarah",
  }

  const createUser = await prisma.user.create({ data: user })

  const post: Prisma.PostCreateInput = {
    title: "Hello World",
    published: false,
    author: {
      connect: {
        id: createUser.id
      }
    },
  }
  await prisma.post.create({
    data: post,
  })
}

main()
  .catch((e) => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

書いたコードを実行する

node -r esbuild-register scripts.ts

これでsqliteにデータが入ったのでコマンドライン上から確認してみる

sqlite3 ./prisma/dev.db

雑なSQLでデータを確認する

# ヘッダーを出るように
.headers ON

select * from User;
select * from Post;

データが入ることが確認できたのでstarterのsqliteファイルでdev.dbを上書きする

quickstartと同じリードの処理を書いて実行してみる

import { PrismaClient, Prisma } from "@prisma/client"

const prisma = new PrismaClient()

async function main() {
  const allUsers = await prisma.user.findMany({
    include: { posts: true },
  })

  // use `console.dir` to print nested objects
  console.dir(allUsers, { depth: null })
}

main()
  .catch((e) => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

データが無事に取れた!!

まとめ

prisma触ってみよう触ってみようとずっと思っててやっと触れた。

schemaを変更するとmigrationが生成されたり、まだpreviewっぽいけど全文検索もサポートしてくれようとしてるところが高印象だった*1www.prisma.io

またschemaを元に型をつけてくれるのがとても便利で良い体験だった。次の開発で自分が選んで良いなら実践投入すると思う。

*1:前にtypeormで困った部分だったので