※个人备忘录 要的就是接下来要学习的东西
也许不到一年就会失败，也许会被使用超过十年，未来的事情我们不得而知，但我选择了即使是十年后也能感到满意的技术来学习。

目前正在比较使用Heroku的Postgres还是Supabase的Postgres，包括费用和能力等方面。知识水平大致是广泛浅显地接触教程的程度。不包括扩展功能和库等细节。

技术选择清单

VSCode（编辑器）
Node.js（语言）
React（语言）
TypeScript（语言）
Next.js（前端）
Vercel（托管）
Docker（容器管理）
PostgreSQL（数据库）
Heroku（云服务）
Supabase（云服务）
Figma（设计）
Storybook（组件管理）

Urql（GraphQL）-Urql（GraphQL）优质Prisma（GraphQL）-Prisma（GraphQL）高质量Apollo（GraphQL）-Apollo（GraphQL）ReactQuery（GraphQL）-ReactQuery（GraphQL）

TailwindCSS（样式处理）
Headless UI（无界面）
Chakra UI（组件库）
daisy UI（图标库）
Mantine UI（UI工具包）

Jest（测试）
React 测试库（测试）

ESlint（SpellOutLint，诊断工具），
Prettier（ErMei整形，格式化工具）

DBeaver（数据库客户端）
A5:SQL Mk-2（数据库客户端）
Table Plus（数据库客户端）

还需要其他的东西吗？比如认证。

原因

VSCode（编辑器）
在编辑日语文本时，使用秀丸更加方便。

Node.js（编程语言）是开发网站的最佳选择。

响应
React组件开发的主要方向

TypeScript是当前Web开发的事实标准，如果要在Node.js上进行开发，毫无疑问，这是唯一的选择。

下面是一个可能的中文翻译：
从框架开发转向组件开发是为了使用Next.js和React。

Vercel（托管）
作为Next.js的开发者，兼容性很好。
部分功能是免费的。

Docker（容器管理）
用于本地网络和数据库开发

Postgre是一种采用关系型数据库的数据库。

Heroku（云服务）
数据库服务器

Supabase（云数据库服务器）

看起来可以与Storybook结合使用的Figma（设计工具）

故事书（组件管理）

Prisma（一种用于GraphQL的ORM）

urql（数据获取GraphQL客户端）
着重于GraphQL。
Apollo（数据获取GraphQL客户端）
着重于GraphQL。
在GraphQL中处理服务器端和客户端间的数据交互
React Query（数据获取）
着重于数据获取。

TailwindCSS（美化工具）
Headless UI（美化的 UI 组件集）
Chakra UI（美化工具）

测试
Jest（测试）
React 测试库（测试）

代码格式化
ESlint （代码格式化工具）
Prettier （代码格式化工具）

决定保留的事项

由于NoSQL在开发应用程序时不合适，所以选择Firebase作为后端平台。Firebase Authentication用于认证，Firebase Database用于存储数据，Firebase Emulator用于本地开发。

目前仍不太清楚哪种状态管理方式更好。
Recoil（状态管理）
SWA（状态管理）

数据库的数据维护方法仍然不清楚
内容管理系统（CMS）

还在学习中

服务提供网站

编辑器 (Bianji qi)

VSCode 是一款由微软开发的代码编辑器工具，可以用于开发、调试和部署应用程序。它具有强大的功能和丰富的扩展性，可以满足开发者的各种需求。您可以在以下链接中获取更多关于 VSCode 的详细信息：https://azure.microsoft.com/ja-jp/products/visual-studio-code/.

整理源代码

ESlint（代码规范工具）
https://eslint.org/
Prettier（代码格式化工具）
https://prettier.io/

话语

Node.js（一种JavaScript的服务器端语言）
https://nodejs.org/ja/
TypeScript（一种有类型的 JavaScript 替代语言）
https://www.typescriptlang.org/
React（一种组件化的前端框架）
https://ja.reactjs.org/

容器管理

Docker，中文名为“容器技术”，是一个开源软件项目，提供了一种用于打包、分发和运行应用程序的平台。更多详细信息，请访问https://www.docker.com/。

前端框架

Next.js 是一个用于构建React应用程序的开源框架。它提供了一种简单且灵活的方式来创建具有服务器端渲染(SSR)功能的现代Web应用程序。Next.js具有快速加载的特点，并且易于使用和部署。您可以在https://nextjs.org/上获取更多关于Next.js的信息。

数据库 (Database)

PostgreSQL（数据库）
https://www.postgresql.org/

用于部署应用程序的托管服务应用

Vercel (免费和付费可选)
https://vercel.com/

GraphQL是一种用于API开发的查询语言。

Prisma（Node.js TypeScript ORM）
https://www.prisma.io/
普利兹玛（Node.js的TypeScript ORM）
https://www.prisma.io/

Apollo（GraphQL）
https://www.apollographql.com/
阿波罗（GraphQL）
https://www.apollographql.com/

GraphQL服务器 (gurafukuru saabaa)

Hasura（免费・付费）
https://hasura.io/

组件管理

故事书：https://storybook.js.org/

考试

Jest
https://jestjs.io/

React Testing Library是一种用于测试React应用程序的工具库。

设计

Figma
https://www.figma.com/

CSS 样式修饰

https://chakra-ui.com/:
加柯 UI 是一个使用 React 构建的开源 UI 组件库，具有可自定义的样式和易于使用的功能。

https://tailwindcss.com/:
Tailwind CSS 是一个高度可定制的 CSS 框架，支持快速构建现代化的网页设计。

Postgres 云服务 PaaS

Heroku（免费/付费）
https://jp.heroku.com
Supabase（免费/付费）
https://supabase.io/
ElephantSQL（免费/付费）
https://www.elephantsql.com/

使用在线DB服务的ElephantSQL（PostgreSQL）- Qiita

术语

CMS 是用于通过管理界面操作内容，而无需改变前端源代码的工具。
数据操作是通过 API 进行的。
由于通过 API，因此容易与其他服务进行集成。

如果使用无头CMS，就不需要使用视图，因此可以在任何设备上进行内容的统一管理。以前需要为PC、智能手机和平板电脑分别准备。

原型档案

 

利用オアシス宣言使互联网成为一个安心且安全的世界。
GitHub链接：https://github.com/masakinihirota

开发VNS作为SNS的替代产品。