React用語をまとめてみました！
Nextjs,TypeScript を学習中なので用語を初学者がざっくりまとめてみました。
Nextjs,TypeScritp 用語だけではないです。
間違っている箇所があればご指摘いただけると嬉しいです。
間違っている箇所があればご指摘いただけると嬉しいです。
※随時更新予定です。
用語(頭文字順)
あ行
アーキテクチャ
Web に関するところでいうと、ユーザー側が使いやすいように
システム設計、方針、概念を構築された Web サイト,Web アプリケーションのことです。
Jamstack もアーキテクチャの１つです。
Axios
JavaScript で非同期 API 呼び出しを容易にするライブラリ。
Promise ベースの API を提供しており、非同期通信を簡単い処理できます
Axios を使わずに、データフェッチする場合は fetch API を使う方法がある。
ESLint
皆大好き ESLint、開発者が書いたコードの品質を向上させるために使用され、
予期しないバグやメンテナンスの問題を未然に防ぐことがあります。
カスタマイズが可能で開発者に合わせたルールを設定することができます。
インスタンス
クラスをもとにつくられた、実体をもつオブジェクトのことを言います。
クラスとインスタンスの関係性でたい焼きの焼き型と例えられることが多いです。
同じ形のたい焼きをいくつも作れるのがクラス、
完成した、たい焼き自体をインスタンスと例えられます。
たい焼きの中身が別の味に変えられるようにそれぞれ変数に別の値を
もたせることができます。
SSG
Static Site Generation の略でビルド時にサーバー側で HTML の生成をし、
クライアントからリクエストがあった際にリアルタイムで HTML の生成する必要がない
高速で SEO にも有効なアーキテクチャの１つ。
SSR
Server Side Rendering の略でページ遷移のたびにサーバー上でレンダリングが
行われ HTML を生成します。クライアントは完全にレンダリングされたページを
受信するため高速で SEO にも強いアーキテクチャ。
SPA
Single Page Application の略で従来の MPA と違い
1 つの HTML で全てのコンテンツを動的に更新して、表示したいものがあればそのための
差分を都度 API から取得してくるアーキテクチャです。
MPA
Multi Page Application の略で複数の HTML から構成されるアーキテクチャで
現在の Web サイトのほとんどが MPA で構成されており、
リンクをクリックしたり URL を入力することで画面遷移されます。
か行
型推論
TypeScript における型推論とは、型を TypeScript が自動的に
推論してくれることです。
let foo = 3 //number型
let bar = "" //string型
型アノテーション
変数、関数、クラスなどの型を明示的にしていすることを型アノテーションと呼びます。
型アノテーションをしておくことで、プログラムが型推論をせずに
型を指定してくれるのでプロジェクトが大きければ大きいほど
型推論より速度が向上します。
let foo: number = 3; //number
let bar: string = ""; //string
型アサーション
すでにある型に対して型を上書きで型を付与すること。
基本的に多用するべきではありません。
型アサーションを多用してしまうと開発者が自由に型をいじれてしまうので
方の整合性がとれなくなってしまい、エラーの原因になります。
外部ライブラリを使うときに方が用意されていなかったり不十分だった場合に
型アサーションを使用するのがよい。
let foo = {}; //空オブジェクトがあったとして
foo.bar = 1; //プロパティbarは型｛｝に存在しませんとエラーになります。
let foo = {} as { bar: number };
foo.bar = 1; //asを用いて型を指定してあげることでエラーが無くなります。
コールバック関数
コンパイラ
プログラムを実行可能な形式に変換してくれるプログラム、
いわば翻訳的な役割であり、JavaScript では古いバージョンのブラウザでは
読み込めないものもあるため Babel を用いてコンパイルしたりします。
コンポーネント
React のコンポーネントは Web サイトはアプリケーションを構成する部品であり、
他のページで再利用される要素などを管理やカスタマイズがしやすくなっています。
例としてはホームページの Header と Footer などがコンポーネントとして扱われやすいです。
さ行
CSS in JS
JavaScript を使用して CSS を記述し、コンポーネントのスタイルを設定するスタイリング方法です。
CSS in JS はコンポーネント内にスタイリングを定義する為、
外部の CSS ファイルに依存することなく、スコープの名前の重複などを
回避することや props を参照して動的にスタイルを適用できるなどメリットがあります。
最近では Panda CSS が新しい CSS in JS ライブラリとして登場しました。
CDN
Content Delivery Network の略でインターネット上で配信されるコンテンツ
(Web ページ、動画、画像など)を高速に配信するための仕組みです。
CDN はサーバーの応答を肩代わりすることが出来るため、
安定した高速な配信を行うことができます。
た行
ダイナミックルーティング
ページファイル名に[]を使うことで１つのファイルで
複数の異なるコンテンツを表示することができます。
例: pages/blog/[id].tsx
・ /blog/001
・ /blog/002
・ /blog/003
このような URL にアクセスできます。
Nextjs のアップデートにより App Router では
例: app/blog/[id]/page.tsx
・ /blog/001
・ /blog/002
・ /blog/003
このような書き方に変更になりました。
ツリーシェイキング
不要なコードや見し医用の変数関数など除去してビルドファイルを
小さくし、効率的にすることをいいます。
JavascriptのコードやTypescriptなどのコードで使われます。
T3 Stack
「シンプル」「モジュール性」「フルスタック型安全」をテーマにした
Web 開発の方法です。
T3 Stack では次の 6 つの技術を採用しています。
・Next.js
・tRPC
・NextAuth.js
・Prisma
・Tailwind CSS
・Typscript
この６つの技術を採用することによりシンプルな構成で
Web 開発を行うことができます。
データフェッチ
サーバーからデータを取得することを指します。
Axios や fetch API を用いて非同期データを取得し、
UI を更新する際などにデータフェッチは使われます。
デッドコード
プログラムで決して実行されることがないコード（到達不能など）
実行する意味がないコードのことを指します。
な行
Never 型
値をかえさないことを示すための型で、主に例外やエラーが発生した場合や
強制的に停止する必要がある場合に使用されます。
const foo = (bar: "a" | "b") => {
switch (bar) {
case "a":
return;
case "b":
bar //bが型として入る
rerurn
default:
bar //never型が型に入る
bleak;
}
}
は行
BaaS
Backend as a Service の略でバックエンド機能を提供する
クラウドサービスのこと。提供する API を使用してデータストレージ、
認証などを簡単に実装できるようになる、BaaS の例として
firebase,AWS Amplify,NIFTY Cloud mobile backend
などがあります。
ハイドレーション
Reactのハイドレーションとはサーバーから読み込んだHTMLに対して
DOM要素などのイベントリスナ等の機能が注がれることを指します。
Promise
Javascript で非同期処理を行うためのオブジェクトで外部から
データを受け取る API や重い処理がある場合に使います。
引数として resolve と reject ２つの引数を受け取り、
then で正常に終了した時、catch で
失敗した時のプログラムを書くことができます。
プリフェッチ(prefetch)
将来的に必要になるデータをフェッチ（取り出す）ことにより
読み込みなどにかかる時間を短縮する仕組み。
プリロード(preload)
すぐに必要になるデータを予め読み込んでおき、
読み込みにかかる時間を短縮する仕組みのこと。
分割代入
オブジェクトや配列から値を取り出して別の変数に代入すること。
//このようなオブジェクトがあったとして
const obj = { a:1, b:2, c:3}
//オブジェクトから a の値を取り出すには以下のように書きます
const a = obj.a;
console.log(obj.a) // 1
// 分割代入を使うことで簡単に書くことができます。
const {a} = obj;
console.log(a) // 1
ま行
マウント
該当の React コンポーネントを画面に表示するために最初に呼び出されるメソッドのことです。
反対の言葉でアンマウントという言葉がありますがこれは
コンポーネントがブラウザの DOM ツリーから削除されることを指します。
や行
useEffect
React の HooksAPI の一つで useEffect の役割は
関数の実行タイミングをレンダリング後まで遅らせる事です。
useEffect は２つの引数を取ります、
第１引数に実行したい関数を渡し、第２引数には useEffect を
実行するタイミングを依存配列で指定します,空の場合は１度だけ、
依存配列がない場合がレンダリングごとに
useEffect が実行されるようになります。
ら行
リテラル型
開発者が自由に型を作成し、特定の型以外はエラーとすることができます。
単独で使われることはあまりなくユニオン型と合わせて複数のリテラル型を
定義されることが多いです。
const で定数を宣言した場合、const は再代入不可のため、
TypeScript が自動でリテラル型を定義します。
let foo:1 = 2 //リテラル型で１を指定しているためエラーになります。
let foo:1 = 1 //これでエラーが消えます。
type foo = "foo" | "bar" //typeを用いてユニオン型でリテラル型を定義する場合
const foo = "foo" //型は"foo"となります。
ルックアップ型
定義済の型["キー"]と書くことで、
オブジェクトのプロパティから値を取得するために使用されます。
keyof やジェネリクスと一緒に使われることも多いです。
type Obj = {
a: string
b:boolean
}
// 基本的なルックアップ
type Foo = Obj["a"]
//keyofとの共存
//この時のFooの型は string | booleanである
type Foo = Obj[keyof Foo]
//ジェネリクスを用いると関数のように扱えます。
type Foo<T, U extends keyof T> = T[U];
Discussion