现役高校生创办了一个水泳纪录管理服务的故事/第二部分：前端篇
首先
这篇文章是Qiita Advent Calendar的第三天的文章。
您可以在下面的文章中查看所有的文章。
关于笔者
-
- 現在高校２年生
-
- 水泳部マネージャー
-
- 生徒会長
- とある団体の代表
这本书
構想階段
技术选择 (jì shù
在这个概念阶段，我们制定了以下的要求。
-
- できるだけ楽に書ける技術
-
- カスタマイズ性に長けてる
-
- モバイルデバイスにも対応できるフレームワーク
- まあまあ楽にスタイルシートをかける仕組み
一直煩惱不已
在最开始的阶段，我满心欲画出原始的HTML和CSS。因为之前尝试过使用React、Next和Vue，所以觉得与其学习这些新技术，还不如继续使用熟悉的方法简单一些。然而，通过调查发现，做这种傻事等于浪费时间，所以只好勉强学习新的前端框架。我列出了以下的选项。
回应
Meta社正在开发的开源框架
Vue.js是一款流行的JavaScript框架。
尤雨溪所开发的框架
AngularJS
谷歌（Google）正在领导开发的框架。
下一步.js
基于React的框架。
Vercel正在主导开发的框架。
最终来说
最终被选择的是…React！
顺便提一下，我们选择使用React的原因如下。
-
- Nextは機能がありすぎてよくわからん
-
- なんかVueとどっちの方が描きやすいってなったらReactの方が見た目かきやすかった
- Angularはななんかサポートが終わってるとか終わってないとか
另外，我还使用了Bootstrap来编写CSS！这真的非常方便易用！！
开始开发了！
前端的处理其实意外地很简单！虽然碰到了很多困难。。。
這個認證問題要怎麼處理呢？
我基本上把以下的代码写在必要的地方。
import 'firebase/compat/auth'
import firebase from 'firebase/compat/app'
import { getAuth, onAuthStateChanged } from 'firebase/auth';
function checkAuthUser() {
const [idToken, setIdToken] = useState();
useEffect(() => {
const getIdToken = async() =>{
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGEINGSENDERID,
appId: process.env.REACT_APP_FIREBASE_APPID,
};
const init = firebase.initializeApp(firebaseConfig);
const auth = getAuth(init);
const idToken =await getIdToken((await firebase.auth().onAuthStateChanged());
}
}
)
}
这里的问题是useState()。事实上，在开发过程中，我几乎在值管理方面都使用了useState()。但是…如果使用太多，就会出错。换句话说，我必须考虑减少useEffect的方法，以下是选择。
useMemo()の利用
Reduxの利用
データの配列化
在代码中使用useMemo()方法
因为安全原因，在被登出的状态下，放弃了使用useMemo()。原因是希望在登出时显示登出提示对话框，而由于useState()可以根据结果的变化来改变渲染，因此useMemo()不能满足需求。
使用Redux
关于Redux的详细信息，请参阅以下网页
用简单的话来解释，它是一个可以在整个应用程序中管理值的库。但是这是最糟糕的选择。
-
- 学習コストが高すぎる
getIdToken()がどのタイミングで切れるかもわからないから使えない
他のプラットフォームに移植するときにどうするねん、的な
因为这些原因，选择了不选择。
将值转化为数组
最終的に我使用了这个来将值数组化。例如，我希望同时管理A值和B值。
function pgp1(){
const [a, setA] = useState();
const [b, setB] = useState();
}
当出现useState()的使用过多错误时，可以按照以下方式修改值。
function pgp2(){
const [c, setC] = useState(["a","b"]);
//aの値が変わるとき
setC([newA, c[1]]);
//bの値が変わるとき
setC([c[0],newB]);
}
这是一个有点复杂的机制，但是使用这个方法后就不会再出现太多错误了。
外觀
对我这样毫无审美眼光的人来说，这是个最大的问题。我制定了以下的要求。
-
- コンソール的な見た目
- 青のイメージを利用するけどシンプルなマテリアル的なイメージがいい
请参考以下链接了解Naterial Design。
我脑海中浮现的是：“这个，我们可以参考一下谷歌的服务吗？”
因此，通过对Google Drive的这个界面进行分析，我们总结出了以下特点。
1ベースカラーになる一色と白での構成になっている
ベースカラーは固定部分に、白い部分は変動部分に配色されている
左にメニューの配置
右上にアイコンが配置されている
根据我个人认为易于阅读的特点以及在我个人阅读的书籍中描绘的语句，我进行了设计。以下是设计结果。
和Google Drive相比，一个稍微麻烦的问题是它的基本颜色较深。但是，总的来说，我认为处理得还不错。
使用認證的問題是什麼？
Firebase Authentication提供了多种登录方式。
但是在这里选择使用哪种手段，让我相当困扰。
-
- お金はかけない
- 学生も利用しているものには対応したい
符合这个条件的有Google和Microsoft。也许这是教育现场经常使用的登录方式之一。
（顺便提一句，在测试时，我们也使用了GitHub和Yahoo，但基本上也是原封不动地放进去的。）
最后
我在后端遇到了很多困难，但是前端相对比较顺利。虽然接近尾声，但接下来我会选择什么样的路径呢？请期待接下来的《AdCare 23》文章。
