Skip to main content

前提知識

省力化コンポーネントを用いてアプリケーションを開発するにあたって、以下のカテゴリの技術知識が必要となります。

カテゴリ技術
プログラミング言語JavaScript, TypeScript
フロントエンド技術スタックReact, Next.js
UI コンポーネントライブラリAnt Design, Material UI, React Bootstrap
バリデーションライブラリYup, Zod
API 関連知識TanStack Query, OpenAPI Specification, Orval

プログラミング言語​

技術説明
JavaScriptウェブアプリ開発に用いられるスクリプト言語です。
TypeScriptJavaScript に静的型付けを追加したプログラミング言語です。JavaScript と上位互換性があり、静的型付けによりコード実行前にエラーを検出できます。その性質から、開発規模が大きくなるほどその効果を発揮します。

フロントエンド技術スタック​

技術説明
Reactコンポーネントベースのアプローチで、ウェブアプリ開発に用いられる JavaScript ライブラリです。
Next.jsReact をベースにしたフレームワークです。サーバーサイドレンダリングや静的サイト生成を簡単に実現するための強力なツールを提供します。

UI コンポーネントライブラリ​

warning

以下に示す 3 つの UI コンポーネントライブラリ全ての知識を持っている必要はありません。 プロジェクトで使用する UI コンポーネントライブラリに対する知識があれば十分です。

技術説明
Ant Designエンタープライズ向けの高品質な React コンポーネントライブラリです。
Material UIGoogle の Material Design に基づいた React コンポーネントライブラリです。
React BootstrapBootstrap フレームワークに基づいた React コンポーネントライブラリです。

バリデーションライブラリ​

warning

以下に示す 2 つのバリデーションライブラリ両方の知識を持っている必要はありません。 プロジェクトで使用するバリデーションライブラリに対する知識があれば十分です。

技術説明
YupJavaScript のオブジェクトスキーマバリデーションライブラリです。 柔軟で使いやすいという特徴を持ちます。
ZodTypeScript のオブジェクトスキーマバリデーションライブラリです。型安全性が高く、軽量であるという特徴を持ちます。

API 関連知識​

warning

以下に示す API 関連知識の全てを持っている必要はありません。 プロジェクトで採用する API 仕様に対する知識があれば十分です。

技術説明
TanStack Queryバックエンドの API を呼び出すために使用するライブラリです。
OpenAPI SpecificationAPI の仕様を記述するための標準規格です。
OrvalOpenAPI 仕様から TypeScript の型定義と API クライアントコードを自動生成するツールです。

参考サイト​

前提知識として必要な技術要素を学習するための参考サイトを紹介します。

JavaScript Primer (JavaScript)​

JavaScript の学習はJavaScript Primerを参考にしてください。

JavaScript Primer は、JavaScript の文法や機能を一から学べるサイトです。第一部：基本文法までの知識があれば、最低限の JavaScript の知識は身に付いています。目次を見てわからない箇所があれば学習してください。

サバイバル TypeScript (TypeScript)​

TypeScript の学習はサバイバル TypeScriptを参考にしてください。

サバイバル TypeScript は、TypeScript を最短ルートで実務利用できることを目指したサイトです。読んで学ぶ TypeScriptの知識があれば、最低限の TypeScript の知識は身に付いています。目次を見てわからない箇所があれば学習してください。

React 公式サイト (React)​

React の学習は公式サイトを参考にしてください。

React を利用したことがない人はクイックスタートから始めることをお勧めします。
「React を学ぶ」の内容が理解できていれば、最低限の React の知識は身に付いています。分からない箇所があれば学習してください。

Next.js 公式サイト (Next.js)​

Next.js の学習は公式サイトを参考にしてください。

省力化コンポーネントを使用するアプリケーション基盤として Next.js を採用しています。

Ant Design 公式サイト (Ant Design)​

Ant Design の学習は公式サイトを参考にしてください。

Material UI 公式サイト (Material UI)​

Material UI の学習は公式サイトを参考にしてください。

React Bootstrap 公式サイト (React Bootstrap)​

React Bootstrap の学習は公式サイトを参考にしてください。

Yup 公式サイト (Yup)​

Yup の学習は公式サイトを参考にしてください。

Zod 公式サイト (Zod)​

Zod の学習は公式サイトを参考にしてください。

TanStack Query 公式サイト (TanStack Query)​

TanStack Query の学習は公式サイトを参考にしてください。
特に useQuery、useMutation は頻繁に使用するため、目を通しておくことをお勧めします。

OpenAPI 公式サイト (OpenAPI Specification)​

OpenAPI Specification の学習は公式サイトを参考にしてください。

info

Swagger Editorを使用することで API のリクエスト、レスポンスなどの詳細を確認できます。 API 仕様の内容をSwagger Editorのエディターに貼るとプレビューにその内容が表示されます。

その他の Swagger 機能についてはWhat Is Swagger?を参照してください。

Orval 公式サイト (Orval)​

Orval の学習は公式サイトを参考にしてください。