![[B-8-1] 生成AI基礎講座B_ClaudeCode補講「サーバーって何？」](https://i.vimeocdn.com/video/2133771701-bb7131d8ca52108052bb8c7f9e2899bdea2a449dd17d9162d21f06ae3d5c2ed2-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Claude Code でWebアプリ開発を始めたいけれど、「サーバー」という用語が理解できず二の足を踏んでいる方へ。 アプリ開発における最も基本的で重要な概念「サーバーとは何か」を、専門用語を避けてゼロから丁寧に解説します。 Google検索やSNSなど身近な例から始め、ローカルサーバー・公開サーバーの違い、開発フローまで完全理解できる内容です。 🎯 動画トピック 📍 この動画で学べること ・サーバーの語源と基本概念（Serve + ER = Server） ・日常で使っているサービスとサーバーの関係 ・Webアプリ開発に必須のサーバー知識 ・「耳にはするけど実はよくわからない」を完全解消 🖥️ サーバーの2つの種類 ・クラウドサーバー（公開サーバー）：インターネット上で誰でもアクセス可能 ・ローカルサーバー：自分のパソコン内で自分だけがアクセス可能 ・なぜWebアプリ開発にはローカルサーバーが必須なのか ・Google検索、SNS、Zoom、ショッピングサイトの裏側で動くサーバー 💻 ローカルサーバーの重要性 ・開発したアプリをブラウザで確認する仕組み ・localhost（ローカルホスト）とは何か ・「http://localhost:3000」の意味 ・Claude Codeで「ブラウザで開いて確認してください」と言われた時の正体 🔒 セキュリティと公開の基礎 ・なぜローカル環境は外部からアクセスできないのか ・「自分だけが見られる」状態の重要性 ・パソコン内のデータを守る仕組み ・完成したアプリを他の人に見せるには？ 🔄 Webアプリ開発の基本フロー ・ステップ1：ローカルで開発・コード作成 ・ステップ2：ローカルサーバーで動作確認（繰り返し） ・ステップ3：公開サーバーへアップロード ・「開発→確認→修正」サイクルの実践的な回し方 🚀 開発理解の本質 「サーバーとは、ネットワーク経由で何かのサービスを提供してくれるもの」 → この一文を理解すれば、Webの世界が見えてくる 「ローカルサーバーで確認、公開サーバーで本番」 → 開発と公開の違いを理解することが、安全な開発の第一歩 「localhostは自分のパソコン内への入口」 → URLの意味を知れば、開発作業がスムーズになる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料! #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #Webアプリ開発 #プログラミング初心者
![[B-8-2] 生成AI基礎講座B_ClaudeCode補講「デプロイって何？」](https://i.vimeocdn.com/video/2133770788-8ac3ed015662abc05deb531a0dc4427d2921efa01f540e7a14229a6fb85605fc-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Claude Codeでアプリを作ったけれど、「デプロイ」という用語が分からず公開まで進めない方へ。 開発したアプリを世界中の人に使ってもらうための最終ステップ「デプロイとは何か」を、専門用語を避けてゼロから丁寧に解説します。 GoogleドライブやSNSのような身近な例から始め、GitHub・Vercelを使った実際の公開手順まで完全理解できる内容です。 🎯 動画トピック 📍 この動画で学べること ・デプロイの語源と基本概念（Deploy = 配置する・展開する） ・「開発完了」と「新しい始まり」両方の意味を持つデプロイ ・会社の創業、お店のオープンに例えられる達成感 ・「SCENARI LIVE DEPLOY」イベント名の由来 🚀 デプロイまでの3ステップ ・ステップ1：ローカル開発（Claude Codeと一緒にアプリ作成） ・ステップ2：GitHubへアップロード（インターネット上の保管庫） ・ステップ3：Vercelが自動デプロイ（公開サーバーへ配置） ・「2ステップじゃなくて実は3ステップ」の理由 ⚡ Vercelの驚きの特徴 ・完全無料でアカウント作成・利用可能 ・複数のプロジェクトを同時にデプロイできる ・GitHubの変更を自動検知して再デプロイ ・Claude Codeが設定方法を全部教えてくれる ・URLが即座に発行され、すぐに共有可能 🐙 なぜGitHubが必要なのか ・直接Vercelにアップロード → 毎回手作業で大変 ・Vercelから直接取りに来てもらう → セキュリティ的に危険（ハッキング） ・GitHubという安全な中間地点の役割 ・「あなた → GitHub → Vercel」の一方向の流れが安全 ・Googleドライブのような保管庫としての機能 🔄 自動デプロイの仕組み ・初回：GitHubのURLをVercelに一度だけ登録 ・2回目以降：GitHubにコードをアップするだけ ・Vercelが常にGitHubを監視して変更を検知 ・変更があれば自動的に最新版をデプロイ ・「Gitにプッシュ → あとは自動」の快適さ 🔐 セキュリティと公開の基礎 ・なぜローカルから直接Vercelに送れないのか ・インターネット上のサーバーが個人PCにアクセスする危険性 ・GitHubとVercelは両方インターネット上のサービスだから安全 ・あなたが能動的にアップロードする重要性 🚀 デプロイ理解の本質 「デプロイとは、作ったものを公開サーバーに配置すること」 → 開発の完了であり、みんなに使ってもらえる新しい始まり 「ローカル → GitHub → Vercel の3ステップ」 → セキュリティを保ちながら、簡単に世界公開できる仕組み 「一度設定すれば、あとはGitHubにアップするだけ」 → Vercelの自動デプロイで更新も楽々 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料! #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #デプロイ #Vercel #GitHub #Webアプリ公開 #プログラミング初心者
![[B-8-3] 生成AI基礎講座B_ClaudeCode補講「GitやGitHubって何？」](https://i.vimeocdn.com/video/2133771977-457fe3c6cbc5e7a519e402d020c98df1202976bc5239cd46a76b10fff700619a-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCodeでアプリを開発中、「Git」や「GitHub」という用語が出てきて戸惑っている方へ。 開発に欠かせないこの2つのツールを、ゲームのセーブポイントやGoogleドライブのような身近な例で丁寧に解説します。 「コミット」と「プッシュ」の違い、なぜ履歴管理が重要なのか、ClaudeCodeでどう使うのかまで完全理解できる内容です。 🎯 動画トピック 📍 この動画で学べること ・GitとGitHubの基本概念（Git = 履歴管理、GitHub = 保管庫） ・前回のデプロイ動画との繋がり（3ステップの中間地点） ・非エンジニアでもイメージできる比喩表現 🎮 Gitの役割：セーブポイントとタイムマシン ・ゲームのセーブ機能と同じ仕組み ・好きなタイミングで作業をコミット（保存） ・失敗しても過去の状態に戻れる安心感 ・失敗を恐れずに新しい機能に挑戦できる ☁️ GitHubの役割：インターネット上の保管庫 ・Gitで管理した内容をクラウドに保管 ・パソコンが壊れても作成したコードは安全 ・別のパソコンからでも自分の作業を続けられる ・Vercelなどの公開サーバーがGitHubから自動で取得 📤 コミットとプッシュの違い ・コミット（Commit）：パソコン内でGitに保存 ・プッシュ（Push）：保存した内容をGitHubに送る ・「作業 → コミット → プッシュ」の2段階の流れ ・コミットだけではGitHub側には反映されない 🤖 ClaudeCodeでの実践的な使い方 ・「こういうアプリを作りたい」→ AIがコード生成 ・「今の状態を保存しておいて」→ AIが自動でコミット ・「GitHubにアップロードして」→ AIが自動でプッシュ ・難しいコマンドを覚える必要は一切なし 🚀 Git/GitHub理解の本質 「Gitは、開発作業のセーブポイントとタイムマシン」 → いつでも過去に戻れる安心感 「GitHubは、インターネット上の安全な保管庫」 → パソコンの故障からコードを守る 「コミット（保存）→ プッシュ（アップロード）の2段階」 → ローカルで保存してから、GitHubに送る 「AIに頼めば全部やってくれる」 → 自然な言葉で指示するだけ。専門知識不要 「安心と成長の道具」 → 失敗を恐れず、どんどん新しいことに挑戦できる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料! #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #Git #GitHub #バージョン管理 #プログラミング初心者 #非エンジニア #アプリ開発
すべての動画を表示しました
