本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

目的別の学習ルート

安全に公開するルート

公開前の組み立て、秘密の値、公開先、公開後の確認を順につないだ学習ルートです。

危険度: 注意して進める学習ルート

今すぐ使う

このルートで目指すこと

対象とゴールを確認します。今の自分に合えば、そのまま始めてください。

こんな人向け

手元では動くサイトを、秘密の値を混ぜずに公開し、公開後まで確かめたい人

終えたときにできること

秘密の値をコードから分けたうえで公開し、公開URLで主要な動作を確認して次の改善へ進めるようになります。

目安時間

60

確かめる

この順番で進める

順番にひとつずつ読みます。途中で止めても、続きから再開できます。

  1. 1

    公開用に組み立てる意味を知る

    7

    手元では見えない公開用の組み立てエラーを先に見つけるためです。

    ビルドを開く →
  2. 2

    環境ごとに変わる値を分ける

    8

    設定値や秘密の値をコードへ直接書かないためです。

    環境変数を開く →
  3. 3

    秘密の値を会話と履歴から外す

    7

    などをAIとの会話や共有する変更へ混ぜないためです。

    秘密の値をチャットやコードへ貼らないを開く →
  4. 4

    本番という場所を知る

    6

    自分の端末と、利用者が見る環境の違いを意識するためです。

    本番環境を開く →
  5. 5

    公開先へ反映する意味を知る

    6

    と公開を別の確認として扱えるようにするためです。

    デプロイを開く →
  6. 6

    公開URLで主要な操作を試す

    9

    手元の成功ではなく、利用者が開く場所で動くことを確かめるためです。

    デプロイ後は三つだけ確認するを開く →
  7. 7

    スマホとキーボードでも確かめる

    9

    見た目だけでなく、画面幅と操作方法が変わっても使えるか確かめるためです。

    スマホ幅とキーボードで主要操作を確認するを開く →
  8. 8

    表示されないときの確認順を持つ

    8

    公開先、反映した内容、キャッシュを順に切り分けるためです。

    デプロイ後に表示されないを開く →

理解する

作りながら身につける

学んだ内容を実際の制作へつなげ、必要なときに戻って確認します。

このルートの使い方

公開ボタンを押すことだけがゴールではありません。公開用に組み立て、値を分け、公開先で同じ操作を確かめるまでを一つの流れにします。