2024年12月09日
こんにちは。AI/BI部の塚本です。
今回は、Advent Calendarでの2回目の投稿となります。
前回、Remixについての簡単な紹介をしましたので、そちらを先にご覧いただくと、より今回の記事も楽しめるかと思います。
参考: https://www.sohobb.jp/event/remixintroduction-sohobb-ai-bi-advent-calendar-2024/
今回は、前回紹介したRemixのactionとloaderについてより理解するための実践編となります。
それでは、今回もどうぞよろしくお願いします！
本題に入る前にPrismaについて触れておきます。
PrismaはNode.jsでのサーバーサイドの開発の際に、手軽にデータベース操作ができるようにするためのORMフレームワークです。
ORMとは、「Object Relational Mapping」の略で、メソッドの実行をするようにデータベース操作をできるようにするものです。
SQLのクエリ文を文字列として持っておいて…というようなことをしないで済むのでソースコードの管理が断然楽になります。
例えば、Prismaの場合、Userというテーブルからすべてのレコードを取得したい場合は下記のように記述します。
import { PrismaClient } from '@prisma/client'
// Prismaのデータベース接続のためのクライアントのインスタンスを生成
const prisma = new PrismaClient()
// SELECT * FROM User;に相当する処理
const users = await prisma.user.findMany()
今回は、このPrismaを利用してPostgreSQLデータベースを操作します。
Prisma + PostgreSQLについては、今回のメインではないので詳しくは触れませんがどちらもよく見る技術スタックなので、調べてみて損はないと思います。
参考:
まずは、ソースコードを書いていく前に、環境について触れておきたいと思います。
今回は、Remixのactionとloaderの雰囲気をつかむことがメインとなるため、環境構築の詳細は省きますが、各種公式ドキュメントのリンクを貼りますので、自分も試してみたいという方はそちらの導入に関する記事を参考にしてみてください。
なお、PostgreSQLは、Dockerで起動するのがお手軽かと思いますので、Docker Imageのリンクを貼りつけておきます。
今回使った各種バージョンを共有するため、package.jsonのdependeneciesの部分を参考までに貼り付けておきます。
"dependencies": {
"@prisma/client": "^5.21.1",
"@remix-run/node": "^2.13.1",
"@remix-run/react": "^2.13.1",
"@remix-run/serve": "^2.13.1",
"isbot": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tsx": "^4.19.2"
},
参考:
それでは、さっそく実践に入っていきます。
最初はデータベースの下ごしらえです。
prisma initコマンドで/prismaというディレクトリとその下に/prisma/shema.prismaというファイルが作成されます。
yarn prisma init
今回は、より簡素にするため、ユーザー名とe-mailアドレスを登録していくだけの仕組みを作ってみることにします。
今回は、shema.prisamファイルに下記のように設定してみました。
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String
}
PostgreSQL上にUserというテーブルが作成されるような設定です。
shema.prismaでPrismaの設定をしたら、下記の二つのコマンドを実行しておきましょう。
Prismaのクライアント（データベースとのやり取りをするもの）を作成するコマンド
yarn prisma generate
Prismaのデータベースのマイグレーション（スキーマに従ってDBを構成すること）を実行するコマンド
yarn prisma migrate dev --name init
また、Prismaを利用できるように、TypescriptのソースコードでもPrismaClientの設定を記述しておきます。
今回は、/app/lib/prisma.server.tsというファイルを作成し、そこに下記の通り記述しておきました。
既にPrismaClientインスタンスが存在すればそれを使って、存在しない場合は新しく生成しています。ローカルの開発環境でリロードのたびにインスタンスが大量に生成されるのを防ぐための対応策となっています。
import { PrismaClient } from "@prisma/client";
const prisma = (global as any).prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") {
(global as any).prisma = prisma;
}
export default prisma;
actionとloaderを実装するために、Usersというページコンポーネントを作成します。
まずは、下記のようなソースコードを用意してみました。
/app/routes/blogusers/route.tsx
import { Form } from "@remix-run/react";
const Users = () => {
return (
<>
<p>ユーザー登録</p>
<Form method="post">
<div>
<label>name: </label>
<input type="text" name="name" id="name" />
</div>
<div>
<label>email: </label>
<input type="email" name="email" id="email" required />
</div>
<button type="submit">Submit</button>
</Form>
<p>ユーザー一覧</p>
<ul>
<li>username: user@email.com</li>
</ul>
</>
);
};
export default Users;
この段階の見た目は下画像のようになっています。
{root}/blogusersというURLのページになっていますね。
Remixでは、ソースコードのファイルの構成自体がページURLとなるような仕組みになっています。
/app/routesというディレクトリ以下に作成されたファイルやディレクトリがURLとなるため、どのようなページ構成になるのかが、ソースコードを見ればわかるのはとても分かりやすいです。
私個人としては、大きくコンテキストが変わるページはディレクトリを作成して、そのページにのみ使うコンポーネントなどは、そのディレクトリ内にファイルを作成して実装すると分かりやすそうだと思いました。
まずは、登録しなければ話が進まないので、ユーザー登録の実装をしてきましょう。
今回は、下記のようなaction関数を実装してみました。
import { Prisma } from "@prisma/client";
import { ActionFunctionArgs } from "@remix-run/node";
import prisma from "~/lib/prisma.server";
export const action = async ({ request }: ActionFunctionArgs) => {
const body = await request.formData();
const name = body.get("name");
const email = body.get("email");
if (typeof name !== "string" || typeof email !== "string") {
throw new Error("Invalid form data");
}
const userData: Prisma.UserCreateInput = {
name: name,
email: email,
};
const user = await prisma.user.create({
data: userData,
});
console.log(user);
return null;
};
とりあえず、動作検証してみましょう。
まず、nameとemailを入力して、Submitボタンをクリックしてみます。
ちゃんと、データベースに保存されたデータが表示されています。
※ この時点では、loaderを実装していないので、ブラウザ上に追加したデータは反映されません。
ここで一つ注意しておきたいのが、action関数内で記述したconsole.log()の内容がブラウザのコンソールではなくて、Remixを起動したローカルのコンソール上に表示されている点です。
action関数の処理はサーバー側で実行されていることが分かります。
action関数の中身を少し解説しておきます。
まずは下記の部分ですが、actionでは、request.formData()で簡単にFormの各inputの内容を取得できます。
export const action = async ({ request }: ActionFunctionArgs) => {
const body = await request.formData();
const name = body.get("name");
const email = body.get("email");
// 略
};
もう一か所、Prismaを利用してUserレコードを作成している部分も確認しておきましょう。
Prisma.{テーブル名}CreateInputという型の変数に作成したデータを格納しています。
その後、prisma.user.create()で実際にレコードを作成しています。
export const action = async ({ request }: ActionFunctionArgs) => {
// 略
const userData: Prisma.UserCreateInput = {
name: name,
email: email,
};
const user = await prisma.user.create({
data: userData,
});
// 略
};
次は登録したレコードを表示するためのloaderを実装してみます。
今回は単純にloaderを使ってユーザーをすべて持ってくる実装にしてみました。
import { Prisma, User } from "@prisma/client";
import { ActionFunctionArgs } from "@remix-run/node";
import { Form, json, useLoaderData } from "@remix-run/react";
import prisma from "~/lib/prisma.server";
export const loader = async () => {
const users = await prisma.user.findMany();
return json(users);
};
export const action = async () => {
// actionの実装内容
};
const Users = () => {
const users = useLoaderData<User[]>();
return (
<>
<p>ユーザー登録</p>
<Form method="post">
<div>
<label>name: </label>
<input type="text" name="name" id="name" />
</div>
<div>
<label>email: </label>
<input type="email" name="email" id="email" required />
</div>
<button type="submit">Submit</button>
</Form>
<p>ユーザー一覧</p>
<ul>
{users.map((user, index) => {
return (
<li key={index}>
{user.name}: {user.email}
</li>
);
})}
</ul>
</>
);
};
export default Users;
実行してみた状態が下画像です。
さきほど、登録した際にidが2となっていましたが、事前確認していたname=””, email=”a@a”というデータも表示されています。
では、この状態でさらにデータを追加してみます。
name=”tsukamoto”, email=”tsukamoto@test.com”にして、追加してみます。
ちゃんと新規追加したデータも表示されました！
今回作成したloader関数はとても単純で、すべてのレコードを取得しているだけのものになります。
Remixが提供しているjson関数を利用することで、json形式で取得したUserレコードの一覧を利用することができます。
import { json } from "@remix-run/react";
export const loader = async () => {
const users = await prisma.user.findMany();
return json(users);
};
loaderで取得したデータを実際に利用する際には、Remixのフックである、useLoaderData()を利用します。
さらに言うと、@prisma/clientがshema.prismaで定義したmodelの型を持っているので、ソースコード上でわざわざ再度User型を定義する必要はありません。便利！
import { User } from "@prisma/client";
import { useLoaderData } from "@remix-run/react";
// 略
const Users = () => {
const users = useLoaderData<User[]>();
return (
<>
<p>ユーザー登録</p>
// 略
<p>ユーザー一覧</p>
<ul>
{users.map((user, index) => {
return (
<li key={index}>
{user.name}: {user.email}
</li>
);
})}
</ul>
</>
);
};
export default Users;
Remixの機能紹介もかねて、少しUXを改善してみます。
今回は、フォームを送信した後、inputの中身が残ってしまっている部分を改善してみましょう。
以下のようなソースコードにすることで改善ができます。
import { Prisma, User } from "@prisma/client";
import { ActionFunctionArgs } from "@remix-run/node";
import { Form, json, useLoaderData, useNavigation } from "@remix-run/react";
import { useEffect, useRef } from "react";
import prisma from "~/lib/prisma.server";
export const loader = async () => {
// loaderの実装内容
}
export const action = async () => {
// actionの実装内容
}
const Users = () => {
const navigation = useNavigation();
const users = useLoaderData<User[]>();
const isAdding = navigation.state === "submitting";
const formRef = useRef<HTMLFormElement>(null);
useEffect(() => {
if (!isAdding) {
formRef.current?.reset();
}
}, [isAdding]);
return (
<>
<p>ユーザー登録</p>
<Form ref={formRef} method="post">
// formの中身は同じ
</Form>
<p>ユーザー一覧</p>
<ul>
// ユーザー一覧の中身は同じ
</ul>
</>
);
};
Remixでは、useNavigation()というフックを利用することで、そのページの状態を手軽に確認することができます。
navigationの状態を監視して、状態変化を監視しているのが下のコードです。
ReactのフックであるuserEffect()を利用して、isAddingという変数を監視して、変更が発生した場場合に、処理が発生するようにしています。
const Users = () => {
const navigation = useNavigation();
const isAdding = navigation.state === "submitting";
useEffect(() => {
if (!isAdding) {
// submit中以外になったときの処理
}
}, [isAdding]);
};
import { Prisma, User } from "@prisma/client";
import { ActionFunctionArgs } from "@remix-run/node";
import { Form, json, useLoaderData, useNavigation } from "@remix-run/react";
import { useEffect, useRef } from "react";
import prisma from "~/lib/prisma.server";
export const loader = async () => {
const users = await prisma.user.findMany();
return json(users);
};
export const action = async ({ request }: ActionFunctionArgs) => {
const body = await request.formData();
const name = body.get("name");
const email = body.get("email");
if (typeof name !== "string" || typeof email !== "string") {
throw new Error("Invalid form data");
}
const userData: Prisma.UserCreateInput = {
name: name,
email: email,
};
const user = await prisma.user.create({
data: userData,
});
console.log(user);
return null;
};
const Users = () => {
const navigation = useNavigation();
const users = useLoaderData<User[]>();
const isAdding = navigation.state === "submitting";
const formRef = useRef<HTMLFormElement>(null);
useEffect(() => {
if (!isAdding) {
formRef.current?.reset();
}
}, [isAdding]);
return (
<>
<p>ユーザー登録</p>
<Form ref={formRef} method="post">
<div>
<label>name: </label>
<input type="text" name="name" id="name" />
</div>
<div>
<label>email: </label>
<input type="email" name="email" id="email" required />
</div>
<button type="submit">Submit</button>
</Form>
<p>ユーザー一覧</p>
<ul>
{users.map((user, index) => {
return (
<li key={index}>
{user.name}: {user.email}
</li>
);
})}
</ul>
</>
);
};
export default Users;
今回はactionとloaderを実際に実装して、動作を確認してみました。
何となくでも雰囲気が伝わって、自分でも試してみたいと思ってもらえたらうれしいです。
私もまだまだRemix触りたてなので、今後もいろいろ勉強していきたいと思います。
次回は、Remixとは別にBackendを作成するパターンを紹介したいと思います。Backendの実装では、Go言語のGinというフレームワークを利用してみようと思います。
次回もどうぞよろしくお願いします！
我们每个月都会举办一次全体员工的学习会。
学习会的发表内容是UIUX、Salesforce、figma等，大家会发表自己和工作相关的事情或者是自己有兴趣等等的东西。
发表的人会通过输出知识而对自己目前所有的知识进行整理，
其他员工也获得了了解发表的人的想法和新知识的好机会。
在您加入公司后，公司将会对您进行培训。
今年度所学的是HTML，CSS，JavaScript的基础编程
在这一年的下半年，我们通过Google-NewsAPI取得新闻来制作了一个新闻网站。
我们使用Docker构建了一个容器环境，并开发了一个函数来显示在客户端使用API检索的新闻。
我们的团队使用了Bootstrap和Vue.js等框架
制作出了动态设计和非同时处理的网站
入社後は開発研修を行います。
今年度はHTML、CSS、JavaScriptの基礎的なコーディングについて学び
後半ではGoogle-NewsAPIで取得したニュースでニュースサイト作成を行いました。
Dockerによりコンテナ環境を構築し、APIを用いて取得したニュースをクライアント側で表示する機能を開発。
チーム毎にBootstrapや、Vue.jsといったフレームワークを用いて
レスポンシブ対応デザイン、非同期処理等を駆使してページを作成していきました。
毎月1回、当社では全体で勉強会を行っています。
発表内容はUIUX、Salesforce、figmaなど、仕事関連や関心のある事などそれぞれの好きなことを発表しています。
発表者はアウトプットを通じて知識を整理し、
他の社員は発表者の考えていることや新しい知識を知れる良い機会となっています。
Salesforceの認知度と普及率の高まりから、当社ではSalesforce導入支援の案件が増加しています。
当社ではSalesforce 認定アドミニストレータ合格を目標に、新卒研修として約2週間Salesforceの講座を行います。
関連サービスのPardot、Tableauについても実践形式で研修を行うため、実務で扱う際にも抵抗なく取り組むことが出来るようになります。
日本でビジネスを行う上で、日本語でのコミュニケーション能力が重要であることは言うまでもありません。
ソホビービーでは海外からの新入社員向けに週3回日本語講師を招き、就業前の時間を利用し日本語レッスンを実施し、来日1年後の日本語検定N1合格に向けて日本語のトレーニングを行っています。