Web開発の基礎を理解しよう
はじめに
AI受託開発では、
- AIの知識
- プロンプトエンジニアリング
- LLMの仕組み
も重要ですが、それ以上に重要なのがWeb開発の基礎です。
実際のAIサービスの多くは、
React
↓
Rails API
↓
PostgreSQL
↓
OpenAI API
という構成で作られています。
つまりAIを利用したシステムであっても、まずはWebシステムとして動作しているのです。
この記事では、Web開発未経験者向けに、実務で最低限必要となる知識を解説します。
Webアプリケーションの全体像
普段利用しているサービスを思い浮かべてみましょう。
- ChatGPT
- X（旧Twitter）
- YouTube
- Amazon
これらはすべてWebアプリケーションです。
Webアプリは一般的に以下のような構造を持っています。
ブラウザ
↓
フロントエンド
↓
API通信
↓
バックエンド
↓
データベース
例えばユーザーがログインボタンを押した場合、
メールアドレス入力
↓
パスワード入力
↓
ログインボタン
↓
React
↓
Rails API
↓
PostgreSQL
↓
認証処理
↓
結果返却
という流れで処理が進みます。
まずはそれぞれの役割を理解しましょう。
フロントエンドとは
フロントエンドとはユーザーが直接操作する部分です。
例えば、
- ログイン画面
- 商品一覧画面
- チャット画面
- マイページ
などがフロントエンドに該当します。
現在のWeb開発ではReactが広く利用されています。
Reactの役割は、
- 画面を表示する
- ユーザーの操作を受け取る
- API通信を行う
ことです。
例えばボタンを押した際、
const handleClick = () => {
console.log("クリックされました");
};
のような処理が実行されます。
Reactは画面を作るためのライブラリですが、実際には単なる画面表示だけではなく、バックエンドとの通信も担当します。
バックエンドとは
バックエンドとはシステムの裏側で動作するプログラムです。
ユーザーからは見えません。
例えば、
- ログイン処理
- ユーザー登録
- データ保存
- データ取得
- AIへの問い合わせ
などを担当します。
今回の研修ではRails APIを利用します。
例えば、
GET /tasks
というリクエストが送られた場合、
Railsはデータベースからタスク一覧を取得し、
[
{
"id": 1,
"title": "Rails学習"
}
]
のようなデータを返します。
データベースとは
データベースは情報を保存する場所です。
ユーザー情報やタスク情報などはすべてデータベースに保存されます。
例えばユーザーテーブルは、
| id | name | |
|---|---|---|
| 1 | Yama | yama@example.com |
のような形になります。
タスクテーブルは、
| id | title |
|---|---|
| 1 | Rails学習 |
| 2 | React学習 |
のようになります。
今回はPostgreSQLを利用します。
データベースがあることで、アプリを再起動してもデータを保持できます。
HTTPとは何か
フロントエンドとバックエンドはHTTPという通信ルールを使ってやり取りします。
例えばブラウザでGoogleを開く場合、
ブラウザ
↓
HTTPリクエスト
↓
Googleサーバー
↓
HTTPレスポンス
↓
画面表示
という流れになります。
HTTPはWeb開発において最も重要な基礎知識の一つです。
HTTPメソッド
HTTPにはいくつかの通信方法があります。
GET
データを取得する
GET /tasks
タスク一覧取得
POST
データを作成する
POST /tasks
タスク作成
PATCH
データを更新する
PATCH /tasks/1
タスク更新
DELETE
データを削除する
DELETE /tasks/1
タスク削除
ステータスコード
サーバーは処理結果をステータスコードとして返します。
200 OK
成功
200 OK
201 Created
作成成功
201 Created
400 Bad Request
リクエスト不正
401 Unauthorized
認証失敗
403 Forbidden
権限不足
404 Not Found
存在しないURL
500 Internal Server Error
サーバーエラー
JSONとは何か
API通信ではJSONが利用されます。
例えば、
{
"name": "Yama",
"age": 22
}
のような形式です。
これはJavaScript Object Notationの略です。
現代のWebシステムではJSONが事実上の標準フォーマットになっています。
Gitとは何か
実務では複数人で開発を行います。
そのためソースコードの管理が必要です。
そこで利用されるのがGitです。
Gitはバージョン管理システムと呼ばれます。
Gitの基本操作
clone
リポジトリ取得
git clone リポジトリURL
add
変更を記録対象へ追加
git add .
commit
変更履歴作成
git commit -m "ログイン機能追加"
push
GitHubへ反映
git push
pull
最新状態取得
git pull
ブランチとは
実務ではmainブランチを直接編集しません。
例えばログイン機能を作る場合、
git checkout -b feature/login
のように作業用ブランチを作成します。
main
├─ feature/login
├─ feature/task
└─ feature/user
各メンバーが別々に開発を行います。
JavaScript基礎
Reactを学ぶ前にJavaScriptを理解する必要があります。
変数
const name = "Yama";
値を保存できます。
配列
const fruits = ["apple", "orange"];
複数の値を管理できます。
オブジェクト
const user = {
name: "Yama",
age: 22
};
関連するデータをまとめられます。
map
配列処理で頻繁に利用します。
const numbers = [1, 2, 3];
numbers.map((number) => {
return number * 2;
});
非同期処理
API通信では非同期処理を利用します。
async function fetchTasks() {
const response = await fetch("/tasks");
}
React開発では必須の知識です。
Reactとは
ReactはMeta社が開発したUIライブラリです。
現在最も利用されているフロントエンド技術の一つです。
コンポーネント
Reactでは画面を部品として管理します。
function Button() {
return <button>送信</button>;
}
これをコンポーネントと呼びます。
Props
親から子へ値を渡します。
function Greeting(props) {
return <h1>{props.name}</h1>;
}
State
画面の状態を管理します。
const [count, setCount] = useState(0);
例えばカウンター機能などに利用されます。
useEffect
画面表示時に処理を実行できます。
useEffect(() => {
fetchTasks();
}, []);
API通信で頻繁に利用します。
ReactとRailsが連携する流れ
実際の開発では、
React
↓
HTTP通信
↓
Rails API
↓
PostgreSQL
という流れになります。
例えばタスク一覧取得では、
React
↓
GET /tasks
↓
Rails
↓
DB検索
↓
JSON返却
↓
React表示
が実行されています。
AI受託開発で重要なこと
AI受託開発では、
- OpenAI API
- Claude API
- Gemini API
などを利用します。
しかし実際の案件では、
AIそのものよりも
- 認証
- ユーザー管理
- API設計
- DB設計
- フロントエンド
の方が開発工数が大きいことが多いです。
そのためまずはWeb開発の基礎を理解することが重要です。
まとめ
Webアプリは、
ブラウザ
↓
React
↓
HTTP
↓
Rails API
↓
PostgreSQL
という構成で動いています。
- Webアプリの仕組み
- HTTP
- API
- JSON
- Git/GitHub
- JavaScript
- React
です。
これらを理解することで、Week2以降のRails APIや認証機能の学習がスムーズになります。
まずは「ボタンを押したら裏側で何が起きているのか」を説明できる状態を目指しましょう。