B2BエンジニアがなぜReactを勉強するのか
5,6年前まではJavaで比較的規模の小さいWebアプリケーションの開発などをやっていました。B2Bが主な領域なので、専属のデザイナーなどはおらず、その時はbootstrap,jqueryベースのサンプルアプリケーションを見ながら何とかそれっぽいUIを作成しておりました。
その後AWSでデータ解析環境の整備をPython,cloudformation,cdk等を用いて行うことが主な業務となったため、ただでさえ少ないフロントエンドの知識が枯渇しかけており、新たにWebアプリの開発が必要になったときに困るのではないかと思いました(あとAWS、cdk等の勉強がひと段落して大体わかるようになったというのもあります)。
最近フロントエンドの情報はReact、Vue関連の情報ばかりとなり、UIコンポーネント集もMantine、React-Hook-FormなどReactベースのものが多くなり、いまさらbootstrap,jqueryで開発するのもそれはそれで大変そうです。フロントエンドをバックエンドの片手間で作っているエンジニアももはや、React、Vueどちらかの知識は必須となりかけているのではないでしょうか。
なぜt3 Stackに入門するのか
typescriptでフルスタックのWebアプリケーションを作成しようとしたのですが、最初のプロジェクト作成の時点でかなり大変な設定が必要でした(今思えば、もっと楽な方法がいくらでもありそうですが)。
- npm workspacesの設定
- サーバ側アプリの作成
* fastify or nest.jsプロジェクトの作成
* graphql or openapiの設定 - クライアント側アプリの作成
* next.jsプロジェクト or vite.jsプロジェクトの作成
* graphql or openapiのclientの自動生成の設定
* tailwind等のcssフレームワークの設定
その時たまたま目にしたt3 Stackの記事をみてt3-appのテンプレートを使うとフルスタックのアプリケーション開発がかなり簡単に始められることがわかりました。やはり、初心者にとっては開発開始までの手軽さは重要です。
また、Redwood.js,blitz.js等のフルスタックフレームワーク等を利用することも考えましたが、t3-appはただのテンプレートであり、使われているフレームワークはNext.jsなどの一般的なものなので、使わない技術等があれば比較的自由に変更できそうなことも魅力です。
このt3 Stack入門でやらないこと
B2BではSEO等は一切考慮する必要がないので、ServerSideRendering等は一切やりません。
とりあえずチュートリアル
とりあえずチュートリアルをやってみます。
https://create.t3.gg/en/introduction
~$ npm create t3-app@latest
Need to install the following packages:
create-t3-app@latest
Ok to proceed? (y) y
___ ___ ___ __ _____ ___ _____ ____ __ ___ ___
/ __| _ \ __| / \_ _| __| |_ _|__ / / \ | _ \ _ \
| (__| / _| / /\ \| | | _| | | |_ \ / /\ \| _/ _/
\___|_|_\___|_/‾‾\_\_| |___| |_| |___/ /_/‾‾\_\_| |_|
? What will your project be called? t3-app-example
? Will you be using JavaScript or TypeScript? TypeScript
Good choice! Using TypeScript!
? Which packages would you like to enable? nextAuth, prisma, tailwind, trpc
? Initialize a new git repository? Yes
Nice one! Initializing repository!
? Would you like us to run 'npm install'? Yes
Alright. We'll install the dependencies for you!
Using: npm
✔ t3-app-example scaffolded successfully!
Adding boilerplate...
✔ Successfully setup boilerplate for nextAuth
✔ Successfully setup boilerplate for prisma
✔ Successfully setup boilerplate for tailwind
✔ Successfully setup boilerplate for trpc
✔ Successfully setup boilerplate for envVariables
Installing dependencies...
✔ Successfully installed dependencies!
Initializing Git...
✖ Failed: could not initialize git. Update git to the latest version!
Next steps:
cd t3-app-example
npx prisma db push
npm run dev
~$ cd t3-app-example/
~/t3-app-example$ npx prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "db.sqlite" at "file:./db.sqlite"
SQLite database db.sqlite created at file:./db.sqlite
🚀 Your database is now in sync with your Prisma schema. Done in 167ms
✔ Generated Prisma Client (4.7.0 | library) to ./node_modules/@prisma/client in 119ms
~/t3-app-example$ npm run dev
> t3-app-example@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
これで、初期画面は出ましたが、NextAuth.jsの設定がまだなのでログイン機能が使えません。
discordのアカウントを持っているなら、
https://discord.com/developers/applications
に飛んで、「New Application」でApplicationを作成したのち、左のOAuth2をクリックして、CLIENT IDとCLIENT SECRETを取得。
Add Redirectをクリックして
http://localhost:3000/api/auth/callback/discord
を登録しておきます。
作成したプロジェクトの直下にある.envファイルのDISCORD_CLIENT_ID、DISCORD_CLIENT_SECRETにその値を設定します。
NEXTAUTH_URL=http://localhost:3000
# Next Auth Discord Provider
DISCORD_CLIENT_ID=123456789
DISCORD_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXX
ちなみに、3000ポートが利用中とかで、開発サーバがほかのポートで立ち上がった場合、RedirectのURLとNEXTAUTH_URLのポートを変える
必要があります。そこでちょっと引っかかってしまいました。
最後にブラウザで表示しSign Inボタンをクリックしてログインできるかどうか確認します。
また、sqliteでログインしたユーザの情報がデータベースに書き込まれていることを確認します。
:~/t3-app-example$ sqlite3 prisma/db.sqlite
SQLite version 3.31.1 2020-01-27 19:55:54
Enter ".help" for usage hints.
sqlite> select * from User;
id|name|email|emailVerified|image
clbxxxxxxxxxxxxx|bioflowy|bioflowy@example.com||https://cdn.discordapp.com/embed/avatars/1.png
AccountとUserテーブルがありますが、Userテーブルが自作のアプリケーションで管理するユーザ、Accountがソーシャルログインで利用したユーザの情報でしょうか。
会社ではBtoBの開発をしているので、OAuthを利用することはほぼなくここら辺の知識が不足しています。
NextAuth.jsでは伝統的なUserId/Password方式のログインもできるみたいなので、そのうちその方法も確認したいところです。