BlitzJSを試してみましたよ

技術ネタ
この記事は約9分で読めます。

こんばんわ、hisayukiです❗
超久しぶりの投稿です。

毎回思うんですが、アウトプットが停滞するときって完成度ばっかり気にしてるんですよね。
数書くのが良いのはわかってるんですが、ついつい出来栄え気にして書かなくなるという・・・

なので少し思考を変えて、短くてもいいのでポンポン書くようにしようと思います❗
(もしかしたら前にも言ったかもしれない)

スポンサーリンク

React界隈が来てる気がする

なんとなくですがReact周りが盛んだなって感じていて、勉強しておいて損はしないだろうなーって感じてます。
主にこのあたり。

  • React(ちなみにほぼ書いたことないので初心者)
  • Gatsby(静的サイトジェネレーター)
  • Next(フロント側SSR)
  • Nest(Backendフレームワーク、Angularっぽい書き方出来るらしい)
  • Blitz(フルスタックフレームワーク)
  • frourio(フルスタックフレームワーク)
  • TailwindCSS(Reactではないけど気になる分野)


そしてどれもTypeScriptが使える。
今のうちに勉強しておいてもいいなって感じた次第です。

その中でBlitzを選んでみた

Blitzとは?

ReactによるRails思想のフルスタックフレームワークです。
NextJSとPrismaが主に使われています。

同じようにfrourioというフレームワークもありますが、frourioのが選べるフレームワーク選択肢が多いイメージですね。
加えてfrourioはReactに限定していないので、VueやSvelteでも使えます。
今回はReactとNextJSで探していたので、Blitzを採用することにしました。

Blitzで引かれたのはZERO-API思想

よく使われているのがRESTAPIで、最近になってやっとGraphQLが顔出てきたかなって感じです。
その状況下でどちらの必要性も排除するためのデータレイヤー抽象化を特徴としています。

ここにきて

「RESTAPIもGraphQLも使わずにデータのやり取りしようぜ!」

って思想がなんか斬新で面白そうって感じました。

加えてNextJSとTailwindCSSも一緒に使えそうなので

あと、Silver SponsorsにFaunaDBがいたのも大きいです。
FaunaDBは実際に使う機会にはあってないですが、応援だけしています😁

環境構築

最近はVSCodeのRemoteContainerメインのため、環境構築は基本Dockerfile書いてます。
今回も同様で、他のReact周りの作業も出来るようにこんな感じの環境つくりました。

Dockerfile内でblitzのインストールは済ませてます。

mori-hisayuki/react-container
Contribute to mori-hisayuki/react-container development by creating an account on GitHub.

この環境では既にblitzコマンドが使えるようになってます。

新規アプリケーション作成

コマンド叩いて新規アプリケーションを作成します。

blitz new sample-blitz-app

実行すると利用するFormを選択するように言われるので、今回はReact Hook Formを選択しました。
React Final Formで作り直しました。

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

推奨はReact Final Formみたいなのでこっちのがよいかもですね。
比較はこちらの記事がよかったです。

Blitz.jsの議論から学ぶ,formik vs react-final-form vs react-hook-form - Qiita
What should the default form library be in Blitz apps? BlitzがどのFormライブラリをデフォルトにするかの議論が参考になったので要約しました。 formik re...

Form選択してから3分から5分くらいで完了します。

$ blitz new sample-blitz-app
✔ 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    README.md
CREATE    app/auth/components/LoginForm.tsx
CREATE    app/auth/components/SignupForm.tsx
CREATE    app/auth/mutations/changePassword.ts
CREATE    app/auth/mutations/forgotPassword.test.ts
CREATE    app/auth/mutations/forgotPassword.ts
CREATE    app/auth/mutations/login.ts
CREATE    app/auth/mutations/logout.ts
CREATE    app/auth/mutations/resetPassword.test.ts
CREATE    app/auth/mutations/resetPassword.ts
CREATE    app/auth/mutations/signup.ts
CREATE    app/auth/pages/forgot-password.tsx
CREATE    app/auth/pages/login.tsx
CREATE    app/auth/pages/reset-password.tsx
CREATE    app/auth/pages/signup.tsx
CREATE    app/auth/validations.ts
CREATE    app/core/components/Form.tsx
CREATE    app/core/components/LabeledTextField.tsx
CREATE    app/core/hooks/useCurrentUser.ts
CREATE    app/core/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/schema.prisma
CREATE    db/seeds.ts
CREATE    global.d.ts
CREATE    jest.config.js
CREATE    mailers/forgotPasswordMailer.ts
CREATE    package.json
CREATE    public/favicon.ico
CREATE    public/logo.png
CREATE    test/setup.ts
CREATE    test/utils.tsx
CREATE    tsconfig.json
CREATE    types.ts

✔ 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 sample-blitz-app
   2. blitz dev

ここまで実行すると、Git Commitまで自動でやってくれます。
作成されたコードはこちら

mori-hisayuki/sample-blitz-app
Contribute to mori-hisayuki/sample-blitz-app development by creating an account on GitHub.

ローカルホストで実行

作成されたディレクトリ内で以下のコマンドを実行

blitz dev
✔ Compiled
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/vscode/develop/sample-blitz-app/.env
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
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.

info  - Using external babel configuration from /home/vscode/develop/sample-blitz-app/babel.config.js
event - compiled successfully

http://localhost:3000にローカル環境が立ち上がります。

最初からユーザー作成のSignUP画面と、Login画面が作成されてますね。
ちなみにデフォルトだとDBはSQLightで構築されます❗

まとめ

今回は環境構築と新規アプリケーション作成までをやりました。
Blitzはチュートリアルも公式にあるので、こちらを少しづつ進めていってブログ記事にしようかなと思います❗

思った以上に汎用性高めなイメージですね。
裏側のDBはSQLightからRDB(MySQLやProsgre)に変えることも出来るし、FaunaDBへGraphQLでのアクセスができるサンプルもありました。

まだまだ、ここがすごいよ❗って説明できるほどは触れていないので面白いポイントを見つけたら都度記事にしようかなと思います❗

結局、言うほど短くはならなかったけど書いた時間は1時間くらいで済んだかも🤔

おまけ

Apple Siliconには対応してなかったです。
(Blitzがというか、内蔵している別の部分がですが)

コメント