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 などがコンポーネントとして扱われやすいです。
た行
ダイナミックルーティング
ページファイル名に[]を使うことで１つのファイルで
複数の異なるコンテンツを表示することができます。
例: pages/blog/[id].tsx
・ /blog/001
・ /blog/002
・ /blog/003
このような URL にアクセスできます。
データフェッチ
サーバーからデータを取得することを指します。
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
などがあります。
Promise
Javascript で非同期処理を行うためのオブジェクトで外部から
データを受け取る API や重い処理がある場合に使います。
引数として resolve と reject ２つの引数を受け取り、
then で正常に終了した時、catch で
失敗した時のプログラムを書くことができます。
分割代入
オブジェクトや配列から値を取り出して別の変数に代入すること。
//このようなオブジェクトがあったとして
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 ツリーから削除されることを指します。
ら行
リテラル型
開発者が自由に型を作成し、特定の型以外はエラーとすることができます。
単独で使われることはあまりなくユニオン型と合わせて複数のリテラル型を
定義されることが多いです。
const で定数を宣言した場合、const は再代入不可のため、
TypeScript が自動でリテラル型を定義します。
let foo:1 = 2 //リテラル型で１を指定しているためエラーになります。
let foo:1 = 1 //これでエラーが消えます。
type foo = "foo" | "bar" //typeを用いてユニオン型でリテラル型を定義する場合
const foo = "foo" //型は"foo"となります。
Discussion