前回に紹介した記事の概要に引き続き
なぜその技術を選んだのか
どうやってデザインを考えたかを紹介していきます。
Next.jsで何かを作りたいと思っている方の、一助になればなと思います。

使用技術(前回の復習)

言語

(なんちゃって)Typescript

フレームワーク

Next.js

CMS

Contentful

決済機能

stripe

会員管理のデータベース

supabase

ホスティングサービス

Vercel

UIライブラリ

Material-ui

CSS フレームワーク

Tailwind CSS

まず、言語はTypeScriptを使いました。

TypeScriptとは

マイクロソフトによって開発され、javascriptをもとにして作られた、大規模開発向けの静的型付けの言語である。

型・静的型付けとは何ぞやと思ったので調べてみました？

型とは何か

データはコンピュータ上ではただの数値の羅列ですが、「型」を定義することによってデータに意味を持たせ、有限な範囲のデータにすることによって、認識しやすくするツールです。

静的型付けとは

静的型付けの対義語として動的型付けというものがあります。
動的型付けというのは、ある程度の目星をつけておいて、データの結果が出てきてから型を付けることを言います。（javascript,phpなど）
動的型付けは柔軟性がありますが、コードを実行しないとどんなデータが出てくるかプログラム上では予測できていないことになります。そうすると、一回作ったプログラムを手直しして作った際に出力する型が変わってしまった場合、エラーが起きてしかもそのエラーの原因がわかりずらいということがあります。
静的型付けというのは、データが出てくる前にこのデータはこの形だよというのを定義することで先ほどの動的型付けの弱点を補っているのです。

使い始めた理由

Reactの記事を見ているとTypeScriptで書かれている記事が多かったからです。（ReactとTypeScript は親和性が高い）
それだけかよ！って思う方もいるかもしれませんが、
使っている人が少ない言語よりは、使っている人が多い言語の方がアップデートやエラーに関する記事などが多いので、インターネット上で情報収集することが多い人は特に意識した方がいいと思います。

個人的に使っていて恩恵を感じた点

記事が多いことと、型を定義することによって入力補完やミスを見つけやすいことぐらいでした。
（javascriptの強化版ぐらいのイメージで学習コストもそこまで高くない）
逆にデメリットとして、始めに型を定義しないとエラーが出まくるので、javascriptからからtypescriptに移行するとなるとちょっと面倒な場合があります。
ですが、一度型を定義してしまえば、変数の引き渡しでこの変数の型は何だっけといちいち考えなくても自動補完されるので、以前より早くコードを書くことができます。
まだ使い始めたばかりなので、完璧には使いこなせていない部分は多いですが、
参考にした記事だとモジュールハンドラというものがあるらしいのですが、まだ使ったことがないので、また今度使ってみようと思います。

次に,javascriptライブラリとして、Reactを使用しました。

Reactとは

Meta（旧FaceBook）が開発したUIを作ることに特化したJavaScriptライブラリです。

宣言的
コンポーネント志向
一度の学習で何度もかける

といった特徴があります。

Reactを使用した理由

TypeScriptと同様です。
加えて、Reactには豊富なUIライブラリが存在し、さまざまなnpmモジュールも開発されていて使い、プログラミングオタクでなくても簡単に見た目を整えることができます。
TypeScriptとReactの親和性が高い理由はReactでは、宣言的でstate管理が多く、値の受け渡しが多くなりがちであるため。

比較対象としてよくVue.jsがよく引き合いに出されますが、

VueとReactの主な違い

細かな技術的な違いはさまざまありますが、自分がコードを見て思ったのが、

Vueは書き方がhtmlっぽい
Reactはjsっぽい

といった違いです。
ReactもVueもどちらもなかなかいい勝負で、一時期アジアでは、Vueが使われることが多いこともありました。

ですが、最近Vueを使ってウェブページを作ったの際に、Vueってめんどくさいし、ダサいなと思いました。(Vueファンの方どうか怒らないでください)

Vueのアップデートに周辺ライブラリが追い付いていない
ビルドが遅い
templateと関数を分けて書くのが面倒
エラーコードについて調べても、該当する質問が少ない

Reactに先に慣れてしまったからかもしれませんが、Reactの方がコードを書く時のスクロールも少なく、入力補完もあるので圧倒的に楽に開発できます。
Vueはエラーに関する質問や記事も少ないので、そこもマイナスポイントでした。
UIライブリについても、Reactの方が最新のUIコンポーネントが使える場合が多いので、よきかな～と思っています。
一方で、型定義とかがないので、htmlとcssとjqueryをこれまでつかっていたという人には使いやすいのかなとも思いました。

Reactを使用したもう一つの大きい理由

それはReactフレームワークのNext.jsが使えるということです。
かなり長くなってしまったので、
Next.jsは次回の記事に書こうと思います。

参考　

TypeScriptをお勧めしたい7つの理由　 https://qiita.com/SoraKumo/items/43fba2ad2d10336a665f
なぜReactアプリにTypeScriptを使うべきなのか　 https://qiita.com/baby-degu/items/3c2891bc300cfbea6c90
TypeScriptの導入にあたって考慮すべきメリットとコスト　 https://engineering.linecorp.com/ja/blog/benefits-and-costs-to-consider-when-installing-typescript/
動的型付けと静的型付け　 https://qiita.com/toryuneko/items/c023031b61886cae2a99
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった　 https://zenn.dev/marokanatani/articles/compare_vue_and_react