0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

web制作の基本part3

0
Posted at

AIアプリ開発・セキュリティ・デプロイ・チーム開発

はじめに

Week1ではWeb開発の基礎を学びました。

ブラウザ
↓
React
↓
Rails API
↓
PostgreSQL

Week2ではRails APIと認証について学びました。

React
↓
JWT認証
↓
Rails API
↓
DB

Week3では実際のAI受託開発で必要になる知識を学びます。

ここまで学習できれば、

  • ログイン機能
  • CRUD機能
  • AIチャット機能

を持つWebアプリを開発できる状態になります。


AIアプリは何が違うのか

最近は

  • ChatGPT
  • Claude
  • Gemini

などの生成AIが話題です。

しかし実際のAIアプリの構造は、

React
↓
Rails API
↓
OpenAI API

です。

つまり、

AI部分はシステム全体の一部に過ぎません。

実際の開発では、

  • 認証
  • DB設計
  • API設計
  • 権限管理

の方が工数が大きいことも珍しくありません。


OpenAI APIとは

OpenAIはAPIを提供しています。

APIを利用することで、

自分たちのアプリからChatGPTを利用できます。

例えば、

ユーザー
↓
質問入力
↓
Rails
↓
OpenAI API
↓
回答生成
↓
Rails
↓
React

という流れになります。


APIキーとは

OpenAIを利用するためにはAPIキーが必要です。

イメージとしては、

サービス利用権

のようなものです。

OPENAI_API_KEY=xxxxx

APIキーは絶対に公開してはいけません。

GitHubへPushしてしまうと大きな問題になります。


トークンとは

LLMは文章をそのまま処理しているわけではありません。

文章を細かい単位に分解して扱っています。

例えば、

こんにちは

という文章も内部ではトークンに変換されています。


なぜトークンを意識するのか

OpenAIはトークン数によって課金されます。

例えば、

100文字

よりも

10000文字

の方が高額になります。

そのため、

  • 不要なデータを送らない
  • 長すぎる履歴を送らない

ことが重要です。


プロンプトとは

AIへ送る指示文のことです。

あなたは優秀なプログラマーです。
以下のコードをレビューしてください。

プロンプト次第で回答品質が大きく変わります。


AIチャット機能の流れ

一般的なAIチャット機能は、

入力
↓
React
↓
Rails API
↓
OpenAI API
↓
回答取得
↓
React表示

という構造になります。

意外とシンプルです。


セキュリティの重要性

実際の受託案件では、

AI機能よりセキュリティの方が重要です。

セキュリティ事故が発生すると、

会社の信用を失う可能性があります。


XSS

Cross Site Scriptingの略です。

例えば、

<script>alert("hack")</script>

を入力された場合、

そのまま表示すると危険です。

悪意のあるJavaScriptが実行される可能性があります。


SQL Injection

悪意のあるSQLを実行させる攻撃です。

危険な例

' OR 1=1

RailsのActiveRecordを利用することで、

多くのケースは防げます。


CSRF

ユーザーが意図しない操作を実行させる攻撃です。

例えば、

ログイン中の状態で悪意あるサイトへ誘導されるケースです。

RailsにはCSRF対策機能があります。


パスワード管理

絶対に平文保存してはいけません。

危険な例

password = "123456"

安全な例

ハッシュ化

Railsではbcryptが利用されます。


環境変数

機密情報は環境変数で管理します。

DATABASE_URL=xxxxx

OPENAI_API_KEY=xxxxx

コード内へ直接書いてはいけません。


デプロイとは

デプロイとは、

開発したシステムを公開することです。

ローカル環境では、

自分しか利用できません。

デプロイすると、

世界中からアクセス可能になります。


デプロイ構成

一般的な構成

React
↓
フロントサーバー

Rails API
↓
バックエンドサーバー

PostgreSQL
↓
DBサーバー

開発環境と本番環境

開発時

localhost

本番

https://example.com

実務では環境を分けます。


GitHubを利用したチーム開発

個人開発と受託開発の大きな違いは、

チームで開発することです。


Issue

まずタスクをIssue化します。

ログイン画面作成

タスク作成API作成

AIチャット機能作成

ブランチ戦略

mainへ直接コミットしません。

main
├─ feature/login
├─ feature/task
└─ feature/chat

Pull Request

実装後はPRを作成します。

feature/login
↓
Pull Request
↓
レビュー
↓
mainへマージ

コードレビュー

実務では必須です。

レビューの目的は、

  • バグ発見
  • 品質向上
  • 知識共有

です。


コンフリクトとは

複数人が同じファイルを編集すると発生します。

Aさん
↓
login.js編集

Bさん
↓
login.js編集

Gitがどちらを採用すべきか判断できなくなります。

これをコンフリクトと呼びます。


AI受託案件で求められること

AI受託案件では、

「AIを使える」

だけでは不十分です。

実際には、

  • React
  • Rails
  • PostgreSQL
  • Git
  • 認証
  • API設計

ができた上で、

さらに

  • OpenAI API
  • Claude API
  • Gemini API

を扱います。

つまり、

Webエンジニアリングの上にAIが乗っている状態です。


3週間のまとめ

Week1

  • Webの仕組み
  • HTTP
  • API
  • Git
  • JavaScript
  • React

Week2

  • Rails API
  • MVC
  • CRUD
  • PostgreSQL
  • 認証
  • JWT

Week3

  • OpenAI API
  • AIチャット
  • セキュリティ
  • デプロイ
  • チーム開発

最後に

AIアプリ開発と聞くと、

高度な機械学習や数学が必要だと思われがちです。

しかし実際の受託開発では、

まず

React
↓
Rails API
↓
PostgreSQL

をしっかり作れることが重要です。

その上で、

OpenAI API

を組み込むことでAIアプリになります。

まずはWeb開発の基礎を固め、

その後にAI技術を組み合わせられるエンジニアを目指しましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?