2022-11-09

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

2022-05-06

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

typescript javascript

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っぽいけど全文検索もサポートしてくれようとしてるところが高印象だった*1。 www.prisma.io

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

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

2022-05-05

ubuntu22.04のfirefoxをsnap版からdeb版に戻す

firefox ubuntu

ubuntu22.04がリリースされたので個人の端末をアップデートしてみたらfirefoxがsnap版になった。前にsnap版はうまく動かないときがあって、gihyoの更新記事を見てるとまだ直ってなさそうだったのでppaのdeb版への変更の仕方を調べた。

gihyo.jp

debへの戻し方

以下のサイトに書いていることを参考にするとdeb版にできた。

www.omgubuntu.co.uk

fostips.com

コマンド

参考にしたサイトでは snap disable firefox というコマンドをやっているが、自分はやってない

# snap版のfirefoxをアンインストール
snap remove --purge firefox 
sudo apt remove --autoremove firefox

# firefoxのppa追加
sudo add-apt-repository ppa:mozillateam/ppa

# ファイルを作成しつつ書き込む（内容は後述
sudo vim /etc/apt/preferences.d/99mozillateamppa

99mozillateamppaには以下の内容を書いて優先順位を変更する

Package: firefox*
Pin: release o=LP-PPA-mozillateam
Pin-Priority: 501

Package: firefox*
Pin: release o=Ubuntu
Pin-Priority: -1

firefoxをインストールする

sudo apt install firefox

ちなみに

最初はfirefoxのダウンロードページ*1からダウンロードしようと思ったが、ここからダウンロードすると自分でdesktop用のファイル書いたりとかしないといけなくてこっちのが楽だった

*1:https://www.mozilla.org/ja/firefox/all/#product-desktop-release

ゆずめも

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