こんばんわ、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のインストールは済ませてます。
この環境では既に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みたいなのでこっちのがよいかもですね。
比較はこちらの記事がよかったです。
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まで自動でやってくれます。
作成されたコードはこちら
ローカルホストで実行
作成されたディレクトリ内で以下のコマンドを実行
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 successfullyhttp://localhost:3000にローカル環境が立ち上がります。
最初からユーザー作成のSignUP画面と、Login画面が作成されてますね。
ちなみにデフォルトだとDBはSQLightで構築されます❗
まとめ
今回は環境構築と新規アプリケーション作成までをやりました。
Blitzはチュートリアルも公式にあるので、こちらを少しづつ進めていってブログ記事にしようかなと思います❗
思った以上に汎用性高めなイメージですね。
裏側のDBはSQLightからRDB（MySQLやProsgre）に変えることも出来るし、FaunaDBへGraphQLでのアクセスができるサンプルもありました。
まだまだ、ここがすごいよ❗って説明できるほどは触れていないので面白いポイントを見つけたら都度記事にしようかなと思います❗
結局、言うほど短くはならなかったけど書いた時間は1時間くらいで済んだかも🤔
おまけ
Apple Siliconには対応してなかったです。
（Blitzがというか、内蔵している別の部分がですが）
コメント