用語集 - AIでWebアプリ開発を学ぼう

アプリケーション間でデータをやり取りするための仕組み。フロントエンドとバックエンドの通信に使われる。「/todos」のようなエンドポイントに対してリクエストを送り、JSONでデータを受け取る。

JavaScriptで非同期処理を扱うための構文。async関数の中でawaitを使うと、処理の完了を待ってから次の行に進む。API通信など時間がかかる処理で使う。

ReactやNext.jsで使うUIの部品。ボタン、フォーム、カードなどを独立した部品として作り、組み合わせてページを構築する。再利用可能で管理しやすい。

異なるオリジン（ドメイン）間でリソースを共有するための仕組み。localhost:3000からlocalhost:8000へのアクセスもCORSの設定が必要。バックエンドで許可設定を行う。

Create（作成）、Read（読み取り）、Update（更新）、Delete（削除）の頭文字。データベースやAPIの基本的な4つの操作を指す。

APIにアクセスするためのURL。「/todos」「/users/123」などのパスのこと。HTTPメソッド（GET/POST等）と組み合わせて機能を定義する。

JavaScriptでHTTPリクエストを送るための関数。APIからデータを取得したり、データを送信したりするときに使う。

アプリ開発の土台となる枠組みを提供するもの。Next.jsやFastAPIがこれにあたる。ルーティングやセキュリティなど、よく使う機能があらかじめ用意されている。

Reactの機能で、関数コンポーネントで状態管理や副作用を扱うための仕組み。useState、useEffectなど「use」で始まる関数のこと。

Webでデータをやり取りするためのプロトコル（通信規約）。HTTPSは暗号化されたセキュアな通信。GET/POST/PUT/DELETEなどのメソッドがある。

データを表現するための形式。{"name": "太郎", "age": 25}のように書く。APIでのデータ交換によく使われる。人間にも読みやすい。

JavaScriptの中にHTMLのような記法を書ける構文。Reactで使われる。<div>Hello</div>のようにJavaScript内に直接UIを記述できる。

JavaScriptのパッケージ管理ツール。外部ライブラリのインストールやプロジェクトの管理に使う。npm installでパッケージをインストール。

Pythonのパッケージ管理ツール。pip install fastapiのように外部ライブラリをインストールする。

Reactコンポーネントに渡すデータ。親コンポーネントから子コンポーネントへデータを渡すときに使う。<Button text="送信" />のように渡す。

Pythonのデータバリデーションライブラリ。FastAPIでリクエスト/レスポンスのデータ構造を定義するのに使う。型ヒントを活用して自動でバリデーションを行う。

URLと表示するページや処理を対応づける仕組み。Next.jsではファイル名がそのままURLになる。/about → app/about/page.tsx

コンポーネントが保持するデータ。useStateで管理する。状態が変わると画面が自動的に再描画される。カウンターの数値やフォームの入力値など。

JavaScriptに型システムを追加した言語。変数や関数に型を指定することで、エラーを事前に発見しやすくなる。.tsまたは.tsx拡張子を使う。

Reactのフック。コンポーネント内で状態を管理する。const [count, setCount] = useState(0)のように使い、setCountで値を更新する。

Reactのフック。コンポーネントの表示後や、特定の値が変わったときに処理を実行する。APIからのデータ取得などに使う。

ユーザーが直接見て操作する部分。ブラウザで動作するUI。HTML/CSS/JavaScript、React、Next.jsなどで作る。

ユーザーからは見えない裏側の部分。サーバーで動作し、データの保存や処理を行う。Python、FastAPI、データベースなどで作る。