講座テキスト紹介『Web・アプリ・スマホアプリのしくみ入門』

2026年7月22日

毎日使っているWebサイトやアプリの裏側のしくみを知り、チャットAIのアーティファクト機能で「自分専用の道具」が実際に動くところまで体験する——AI講座上級編「AIに作らせる前に知っておこう！ Web・アプリが動くしくみ」の受講者テキストです。冊子の題名は『Web・アプリ・スマホアプリのしくみ入門』（Code for Nagato AIスキルアップシリーズ・A5判／全24ページ）。

前提知識は不要ですが、「ファイルって何？」というところからの方には駆け足に感じる場面もある——と冊子の冒頭にお断りを入れています。

2026年7月27日（月）18:00〜20:30・長門市しごとセンターの回に合わせて発行しました（初版）。

どんな内容？

中心は座学の第1章「Web・アプリ・スマホアプリの裏側を覗く」（P.4〜12）です。まずブラウザとサーバーの往復を、レストランの「注文」と「配達」にたとえるところから始めます。続いてホームページ・アプリ・システムの違いを、看板／券売機・レジ／店の管理システムという身近なたとえで整理。

そこから、画面の見た目と動きを作るフロントエンド（HTML＝骨組み、CSS＝見た目、JavaScript＝動き）、その裏側で働くバックエンド（認証・データベース・API・サーバー処理・ストレージ・通知・定期実行の7要素）と、セキュリティで気をつけたい3点へ。

後半では実行環境の話を、Webとスマホで分けて扱います。Webサイト・Webアプリは「ローカル環境（自分のPCの中だけ）」と「Webサーバー環境（インターネット上に置いて公開）」の2つ。スマホアプリ（ネイティブアプリ）は「開発中のデバッグ」「テスト配布」「ストア公開」の3つ——それぞれ誰が見られるのかを表で見比べます。最後の1-7では、サービスを安全に動かし続ける土台であるインフラ（オンプレミスとクラウドの違い、サーバー・ネットワーク・ドメイン/DNS・SSL・監視/ログ・バックアップ）まで紹介します。

山場の第2章（P.13〜16）は、普段お使いのチャットAI1つ（ChatGPT／Gemini／Claudeのいずれか）のアーティファクト／Canvas機能で「自分専用の道具」を作るハンズオン。「お試しレベルの自己紹介Webサイトを作って」「簡単なメモアプリを作って」と注文して、その場で動かすところまでを講師と一緒に進めます。あわせて、3つのAIでアーティファクト機能に何ができて何ができないか（データを貯められるか・閉じても残せるか）の違いも整理しています。

第3章（P.17〜20）は、できあがった道具を外の世界へ広げる7つのステップ——①Tailscale（公開せずにスマホでも見る）②Vercel（人に見せる）③独自ドメイン（URLを綺麗に）④API（AIを組み込む）⑤DB（データを管理）⑥CI/E2Eテスト（動き続ける保証）⑦git（変更を迷子にしない）——を、深入りせず紹介レベルでツアーします。第4章（P.21〜23）では、AIチャットとAIエージェントの使い分けと、AIに頼むときの注意点をまとめました。