「魔法少女光之美少女」20周年，非官方的「魔法少女光之美少女」资料库已发布

首先

我最近创建了一个可以查看普妃珠的网站。

尽管是美少女战士（プリキュア）二十周年，但目前还没有一个能够一览所有美少女战士的网站。即使现在想知道有哪些美少女战士，也只能看到一些集体画面，无法看到全员。

还有一个叫作官方Precure系列门户网站（之前叫Precure花园），在那里可以看到系列的概览，但无法看到Precure角色的概览。

因此，我最近发布了一个使用GraphQL制作的API，名为Graph PreQL。

然而，仅有这些内容对于理解GraphQL有一定了解的人才能使用它。

因此，我对这个Graph PreQL进行了多次改造，以使其更易于操作，并添加了各种数据。

如果著作权者指出，由于我们只是一个简单的粉丝网站，完全不涉及版权问题，我们将立即关闭。

使用方法 (shǐ fǎ)

另外，在列表页面上点击选择选项标签，可以对条件进行更详细的筛选。可以根据参演系列进行筛选，也可以按颜色进行筛选，还可以根据指定日期之前或之后出现的普妮可儿来筛选（以播放日期为基准）。

在技术上努力努力

前端使用Next.js，托管采用Vercel，CSS全部使用TailwindCSS。技术选择方面，由于这是个人开发，不想花费太多钱，所以选择了使用Vercel进行托管。而且由于Graph PreQL中的数据都是静态的json，没有使用任何数据库，所以也不需要支付费用。

由于大部分只是简单地拉取数据，所以即使使用普通的REST API也完全没有问题，但我想尝试使用GraphQL技术，所以这次使用了GraphQL。

而且作为GraphQL客户端，我使用Apollo。它非常方便，无论是在SSG还是SSR还是CSR中，都可以轻松地连接到GraphQL服务器发送查询并获取数据。而且它还会自动缓存数据，所以我不需要额外使用SWR等其他擅长缓存的库。

在Precure搜索页面中，为了动态获取数据，我们采用了CSR技术。对于每个角色的独立页面，由于展示数据不会因用户而改变，我们采用SSG进行静态生成。

每次访问各个页面并返回时，我觉得重置上一个搜索结果很不方便，所以我通过上下文在状态管理中选择了哪个标签的哪个值，现在即使返回也能看到相同的数据。

在设计方面，为什么工程师设计的界面看起来很俗气呢？参考《面向工程师的界面设计课程》，我们希望创造一个充满可爱和酷炫设计的世界观，所以不想把它变成简单的数据列表。我们尝试用渐变来表示角色名称，用心形标记来表示列表，尽量去除界面的棱角并采用圆润的设计，还考虑到在手机上也能方便地查看。为此我们进行了设计修改。

为了尽量减少画像的大小，我将全部转换为WebP格式。

最后

因为今年是《Precure》系列20周年，所以作为一个受《Precure》培养成长的人，我仍然想要在工程师的方面通过《Precure》继续努力。我希望将来可以继续在这个Precure数据库里添加系列和电影等信息。

此外，因为Graph PreQL也变得很容易使用作为API，所以请一定与它一起尝试使用。

明天终于要变身成Cure Wing了！