フロントエンドエンジニアとは、
ユーザーが目にする画面側の実装するエンジニアです。
HTML
HTMLは画面の枠組みです。
体でいうと骨の部分
この骨組みをHTMLで実装します。
CSS
CSSは
HTMLで実装した画面の枠組みに装飾します。
体でいうと血管、皮膚、髪の毛、服とか
この装飾で画面の適切な位置にキレイに表示されます。
JavaScript
JavaScriptは
HTML・CSSで実装した画面に動きを加えます。
体でいうと脳→関節、筋肉のような役割を果たします。
TypeScript
TypeScriptはほとんどJavaScriptにデータ型がついただけなので
見慣れればOKです。
node.jsという実行環境を使うとフロントエンドだけでなく、サーバーサイドとして使うこともできます。
React
TypeScriptのフロントエンドのパッケージです。
Reactを使用することで、データの管理や画面の実装が定形的にできるようになります。
Next.js
Next.jsはReactをベースにしたフロントエンドのフレームワークです。
フロントエンド開発に必要なものが最低限入っているので、これを使えば困りません。
状態管理
データやサーバーから取得したデータを管理しなければなりません。
フロントエンド側でストアという保存システムを持たせて、そこにデータを保持します。
保持したデータを必要に応じて受け取ることで、サーバーとのやり取りを減らすことができます。
Next.jsの場合、React Redux等を使います。