エンジニアなら押さえたい！基本用語5選

でじぼうです。

開発の現場では「このライブラリ入れた？」「useEffect使ってる？」「スキーマ書いた？」など、カタカナと英語が飛び交います。

でも最初は何のことかよくわからないですよね。解説していきますよ！

でじぼう

この記事は下記の方がおすすめ！

言葉の意味がよくわかっていない
漠然とした理解でしかない
かっこよく自信もって言葉を活用していきたい！

Instagramフォロワー数9,500人を越える人気のもち・大福店えにかいたもち

MUIとは？ReactでおしゃれなUIがすぐ作れるライブラリを解説！

MUIはReactで美しいUIを簡単に作れるライブラリ。豊富なコンポーネントと柔軟なカスタマイズが魅力です。

ライブラリとは？
フレームワークとは？
フック（Hook）とは？
ユーティリティ関数とは？
スキーマとは？
用語の使い分けまとめ

ライブラリとは？

必要な機能だけを取り出して使える「便利な道具箱」のことです。
特定の処理を簡単に行いたいときに使います。柔軟で、部分的に導入できるのが特徴です。

ライブラリは import して、関数やメソッドを直接使うのが基本形です。
import ライブラリ名 from 'パッケージ名';

// axios を使って API からデータ取得（ライブラリ）
import axios from 'axios';
axios.get('/api/user').then((res) => console.log(res.data));

// dayjs を使って日付を整形（ライブラリ）
import dayjs from 'dayjs';
const today = dayjs().format('YYYY/MM/DD');
console.log(today);

以下は、ライブラリの一部です。

ライブラリ名	主な用途
`axios`	API通信（HTTPリクエスト）
`dayjs`	日付のフォーマット・計算
`zod`	データの型チェック・バリデーション
`react-hook-form`	フォームのバリデーション管理

フレームワークとは？

アプリ全体の構成やルールを決めてくれる「設計のセット」のことです。

ライブラリが「部品」だとすれば、フレームワークは「家の骨組み」
画面遷移、API連携、ディレクトリ構造などの基本設計がすでに決まっており、迷わずアプリを作れるのが特徴です。

// Next.jsのページ例（フレームワーク）
// ファイル: pages/index.tsx
export default function Home() {
  return <h1>こんにちは</h1>;
}

以下は、フレームワークの一部です。

フレームワーク名	主な用途
`Next.js`	ReactベースのフルスタックWebフレームワーク
`Nuxt.js`	VueベースのフルスタックWebフレームワーク
`Laravel`	PHPの定番サーバーサイドフレームワーク
`Vue.js`	軽量で学習コストが低いUIフレームワーク

※補足：Reactは「UIライブラリ」と公式には位置づけられますが、SPA開発で中心的に使われており、実質的にフレームワーク的に扱われることが多いため、ここでは便宜上フレームワークカテゴリに含められることが多いです。

フック（Hook）とは？

Reactの機能を拡張する「便利な内蔵関数」のことです。

関数型コンポーネントで、状態管理や副作用の処理、フォーム制御などを行うために使うReactの専用関数群です。useで始まる名前になっているのが特徴です。

💡「副作用の処理」とは？
コンポーネントが画面に表示される以外で、何か別の操作を行うことを指します。

例
ボタンを押したらサーバーからデータを取りに行く
ページを開いたらローカルストレージから値を読み込む
ウィンドウのスクロール位置を取得して処理する

こうした「表示以外の処理」は、Reactでは useEffect などを使って明示的に書きます。

// useStateでボタンの開閉状態を管理
import { useState } from 'react';

function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? '閉じる' : '開く'}
    </button>
  );
}

// useEffectでデータ取得処理を実行
import { useEffect } from 'react';

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data));
}, []); // 初回レンダー時のみ実行

以下は、フックの一部です。

フック名	主な用途
useState	値の状態を記憶（カウント、入力など）
`useEffect`	副作用の処理（API取得、初期化処理）
`useRef`	DOMや変数への参照保持
`useForm`	入力フォームの管理（react-hook-form）
`useContext`	グローバルな状態共有

useStateとwatchの違いとは？フォーム入力の管理方法を解説！

ReactのuseStateとwatchの違いを初心者向けに解説！フォーム入力の管理方法と使い分けを具体例で紹介します。

ユーティリティ関数とは？

よく使う処理をまとめた「再利用できる自作関数」のことです。

同じ処理を何度も書かないようにまとめておくと便利です。

// 空文字をチェックするユーティリティ関数
const isEmpty = (val: string | null | undefined) => {
  return val == null || val.trim() === '';
};

if (isEmpty(inputValue)) {
  alert('入力が空です');
}

JavaScriptに最初から用意されている関数ではありません（いわゆる「公式関数」ではない）
実務では「自分で名前をつけて」作ることがほとんどです。

以下は、ユーティリティ関数の例として記載します。

ユーティリティ関数名（任意の名前）	主な用途
`isEmpty(value)`	値が空かどうか判定
`formatDate(date)`	日付を表示形式に変換
`toHalfWidth(str)`	全角→半角変換

スキーマとは？

「データの形とルール」を定義してチェックできる仕組みのことです。

フォームやAPIで送受信する「データが正しいか？」を検証するために使います。
入力値の形式、必須項目、最大文字数などをルールとして定義できるのが特徴です。

スキーマは Zod などのライブラリを使って記述します。

// Zod を使って名前と年齢のバリデーション（スキーマ）
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, '名前は必須です'),
  age: z.number().min(18, '18歳以上が必要です')
});

// 入力値の検証：name が空文字、age が17なのでエラーになる
schema.parse({ name: '', age: 17 });

用語の使い分けまとめ

ライブラリ　→　特定機能を使いたい
フレームワーク　→　全体構成を任せたい
フック　→　Reactの状態制御
ユーティリティ関数　→　処理を再利用したい
スキーマ　→　データの形式チェック