ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

RailsインスパイアのReactJsフレームワーク Blitzを試した

Blitzとは?

GitHubの説明をGoogle翻訳を通した引用…

Blitzは、Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣習を復活させ、 Reactとクライアントサイドレンダリングについて私たちが愛するすべてを維持します!

github.com

つまりRailsっぽくてクールなNextJs!!!(?)

Blitzでアプリケーションを作る

公式ドキュメントを参考に進める
form libraryは React Final Form (recommended) を選びました

$ npm install -g blitz
$ blitz new blitzTestApp
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

? Pick a form library (you can switch to something else later if you want) …
▸ React Final Form (recommended)
  React Hook Form
  Formik

✔ Pick a form library (you can switch to something else later if you want) · React Final Form

Hang tight while we set up your new Blitz app!

CREATE    .env
CREATE    .env.local
CREATE    .env.test.local
CREATE    .eslintrc.js
CREATE    .npmrc
CREATE    .prettierignore
CREATE    README.md
CREATE    app/auth/auth-utils.ts
CREATE    app/auth/components/LoginForm.tsx
CREATE    app/auth/components/SignupForm.tsx
CREATE    app/auth/mutations/login.ts
CREATE    app/auth/mutations/logout.ts
CREATE    app/auth/mutations/signup.ts
CREATE    app/auth/pages/login.tsx
CREATE    app/auth/pages/signup.tsx
CREATE    app/auth/validations.ts
CREATE    app/components/.keep
CREATE    app/hooks/useCurrentUser.ts
CREATE    app/layouts/.keep
CREATE    app/layouts/Layout.tsx
CREATE    app/pages/404.tsx
CREATE    app/pages/_app.tsx
CREATE    app/pages/_document.tsx
CREATE    app/pages/index.test.tsx
CREATE    app/pages/index.tsx
CREATE    app/users/queries/getCurrentUser.ts
CREATE    babel.config.js
CREATE    blitz.config.js
CREATE    db/index.ts
CREATE    db/migrations/.keep
CREATE    db/schema.prisma
CREATE    db/seeds.ts
CREATE    integrations/.keep
CREATE    jest.config.js
CREATE    package.json
CREATE    public/favicon.ico
CREATE    public/logo.png
CREATE    test/.keep
CREATE    test/__mocks__/fileMock.js
CREATE    test/setup.ts
CREATE    test/utils.tsx
CREATE    tsconfig.json
CREATE    types.ts
CREATE    utils/.keep
CREATE    .gitignore
CREATE    app/components/Form.tsx
CREATE    app/components/LabeledTextField.tsx

✔ Retrieving the freshest of dependencies
✔ Resolving packages
✔ Fetching packages
✔ Linking dependencies
✔ Building fresh packages
✔ Initializing SQLite database
✔ Committing your app

Your new Blitz app is ready! Next steps:

   1. cd blitzTestApp
   2. blitz start
$ cd blitzTestApp/
~/work/node/blitzTestApp (master)
$ blitz start
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

> ⚠️  Git config core.excludesFile is unset. Inferring .gitignore file locations.
✔ Prepped for launch
Loaded env from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/.env
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:3000
info  - Using external babel configuration from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/babel.config.js

localhost:3000 にアクセスすると最初のページが表示されました
\Hello Wold/

f:id:kuronekopunk:20201212205226p:plain

migrationをしてみる

最初のページに書いてあるとおり、ページを生成、DBのmigrateをしてみる
構文などはほぼRailsである

$ blitz generate all project name:string
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

✔ Model for 'project' created successfully:

> model Project {
>   id        Int      @default(autoincrement()) @id
>   createdAt DateTime @default(now())
>   updatedAt DateTime @updatedAt
>   name      String
> }

Now run blitz db migrate to add this model to your database

CREATE    app/projects/pages/projects/[projectId]/edit.tsx
CREATE    app/projects/pages/projects/[projectId].tsx
CREATE    app/projects/pages/projects/index.tsx
CREATE    app/projects/pages/projects/new.tsx
CREATE    app/projects/components/ProjectForm.tsx
CREATE    app/projects/queries/getProject.ts
CREATE    app/projects/queries/getProjects.ts
CREATE    app/projects/mutations/createProject.ts
CREATE    app/projects/mutations/deleteProject.ts
CREATE    app/projects/mutations/updateProject.ts

~/work/node/blitzTestApp (master)
$ blitz db migrate
You are using alpha software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma
✔ Name of migration … y
📼  migrate save --name y

Local datamodel Changes:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// --------------------------------------

model Project {
  id Int @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name String
}

Prisma Migrate just created your migration 20201212115831-y in

migrations/
  └─ 20201212115831-y/
    └─ steps.json
    └─ schema.prisma
    └─ README.md

Run prisma migrate up --experimental to apply the migration

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma
🏋️<200d>  migrate up

Changes to be applied:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// --------------------------------------

model Project {
  id Int @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name String
}

Checking the datasource for potential data loss...

Database Changes:

Migration         Database actions             Status

20201212115831-y  1 CreateTable statements.    Done 🚀

You can get the detailed db changes with prisma migrate up --experimental --verbose
Or read about them here:
      ./migrations/20201212115831-y/README.md


🚀    Done with 1 migration in 128ms.

Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env
Prisma schema loaded from db/schema.prisma

✔ Generated Prisma Client (2.12.1) to ./node_modules/@prisma/client in 60ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient()

warn Prisma 2.12.0 has breaking changes.
You can update your code with npx @prisma/codemods update-2.12 ./
Read more at https://pris.ly/2.12

このままだとProjectの登録ができないので公式チュートリアルを参考にフォームを動くようにする

blitzjs.com

公式のフォームデータのとり方が配列のindex指定なの全然参考にならなかった。。。

event.target[0].value

他サイトだと document.getElementById を使ってるものもあったりとキレイでベターなやり方が見つからなかった。
ReactJsなのでFormコンポーネント内でstateを持つのが良さそうだと思う。
event.target はHTMLElementなのでquerySelectorなどで取得も可能だった

event.target.querySelector('[name=name]').value