我已经很久没有进行个人开发了。
我想回想起2022年10月左右的开发时光，并简单地做个备忘录。
希望这对打算开始学习TypeScript和React的人有所帮助。

制作的服务

这项服务使得我们能够轻松进行四则运算的训练。
由于是选择题，因此你可以大致得出答案。

 

造成的原因

・学习 TypeScript 和 React。
・由于计算机会变少，心算能力下降了，所以想轻松地进行计算训练。
・黑色屏幕非常适合用来打发不能入睡时或无聊的时间。
・希望能成为求职的亮点（目前似乎并没有太大的亮点）。

环境建设

我使用了WSL2和VSCode。
安装Node.js时使用了asdf。

WSL2： Windows 的子系统透过虚拟化技术实现的 Linux 模拟环境。

关于WSL2和VSCode，我参考了官方文档和其他文章。(可能还看了其他一些，但是没有留下备忘录…)

 

通过以管理员身份执行” wsl –install” 命令并进行多次重新启动，成功安装了 WSL2。

听说WSL2可以从微软商店中安装。

 

您需要在「啟用或停用 Windows 功能」中啟用以下功能：
・針對 Linux 的 Windows 子系統
・虛擬機器平台
・Windows 虛擬化平台

启动后进行了更新等操作。

$ sudo apt update && sudo apt upgrade
$ sudo apt install build-essential zip pkg-config libssl-dev language-pack-ja manpages-ja manpages-ja-dev -y
$ sudo update-locale LANG=ja_JP.UTF-8

VSCode – 代码编辑器

通过安装WSL 扩展功能，可以连接到VSCode。(文档中已经安装了远程开发并包含了WSL。)

 

对不起，我不理解你的意思。你可以提供更多的上下文吗？

我使用asdf安装了Node.js。
（TypeScript是通过npm install -g typescript进行安装的。）

 

# asdfのインストール（バージョンについては要確認）
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
$ echo '. $HOME/.asdf/asdf.sh' >> ~/.bashrc
$ echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
$ source ~/.bashrc

# Node.jsインストール
$ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
$ asdf list all nodejs
$ asdf install nodejs latest
$ asdf list nodejs
$ asdf global nodejs latest

$ node -v

赶上进展

首先，我开始学习 TypeScript 和 React。

TypeScript – TypeScript

我是通过以下网站初步入门TypeScript的。

 

由于之前有接触过JavaScript，所以看起来很简洁明了，容易理解。
尤其是“用React创建点赞按钮”的页面对于使用TypeScript的想象很有帮助，很棒。
不过，在开发过程中还有几个页面正在施工当中，感觉可能需要通过其他网站来补充知识。

我們在開發時使用了在「Reactでいいねボタンを作ろう」中介紹的create-react-app來創建項目。

 

回应

我在以下网站上学习了React。

 

这个公式非常好。但是，它是用类组件编写的，所以需要阅读和修改有点困难。
而且它是用JavaScript编写的，所以在使用TypeScript时会出现类型错误等问题。
在初学阶段，我们经常使用any进行开发（先前进很重要）。

以下是关于函数组件的参考资料。

 

据说在函数组件中有FC、VFC等，但似乎没必要使用，所以我并没有用过。

 

补充说明：我得到了以下网站的信息。
虽然是英文，但看起来非常不错。

 

似乎已经有日语的翻译出来了。

 

设计 (shè jì)

开发

在开发初期，这个页面对我来说非常有参考意义。

 

大致上入门了React，但是不知道从哪里开始开发才好，所以通过这个页面的说明，我对整个开发流程有了很好的印象。

在开始制作之前，先简单构想一下组件（部件），虽然内容可以为空，但是为每个组件都创建文件，逐步制作内容，以此进行开发。

开始时我们完全忽略了类型，全部以any进行开发。
等到基本完成后，再使用type来设置类型。

下面是一个英文网站，但是很有参考价值。

 

在按下按钮时的事件处理中，使用了类型为any的初步阶段是没有问题的，但一旦指定了预期类型，如event.target.id，则会出现错误，这还挺麻烦的。

 

我觉得CSS有点麻烦，但是我使用了Bootstrap。不过，一旦熟悉了，感觉就能很顺利地进行。

 

我直接进行了一些无法通过Bootstrap来实现的小样式更改。

 

使用LocalStorage功能来存储计算训练的正确答案数量等结果。

 

使用LocalStorage时需要注意，但是考虑安全性并无特别问题，我决定继续使用。

 

只有在以下情况下才应该使用本地存储：“不包含任何秘密信息”，“是普遍可获取的信息”，“数据量适中（不超过5MB）”，“仅包含字符串信息”以及“存储应用程序不要求性能”。

部署

我在部署的目标服务器上使用了Firebase Hosting。

 

对于Firebase的设置，同时设置了GitHub Actions的设置，这让我感到非常惊讶。我觉得这非常方便。

用React之后的感受

对于曾经接触过TypeScript和JavaScript的人来说，Vue框架是一个很容易学习的框架，因为可以通过它来创建组件和构建界面。

结束

由于个人开发的原因，可能只能处理一些基本的React操作，但是终于能够完成并发布了，非常满意。
虽然还没有写测试，这是我的一大遗憾。
听说在Survival TypeScript中加入了编写React组件测试的功能，也许有空的时候我可以试试。

希望能够开发出有商业价值的服务，因为这项服务不能赚钱。
该做些什么呢……。

本次就到此为止。