Day 3・実践 — AI生成のHTML/CSSを読んで直す
公開までの流れと卒業
ファイルを置く/デプロイの考え方。読める・任せる・直せる・説明できるへ。
手元で完成したページは、まだあなたのパソコンの中にいるだけです。世界中の人に見てもらうには『公開(デプロイ)』が必要です。仕組みはシンプルなので、考え方だけつかんでおきましょう。
たとえるなら
手元のファイルは、家の冷蔵庫にあるケーキです。おいしくても、お店(サーバー)に並べないとお客さんは買えません。デプロイとは、作ったケーキをお店のショーケースに並べる作業のことです。
公開の考え方: ファイルを『いつも起きているパソコン』に置く
Webページの正体は、HTMLやCSSといったファイルの集まりです。それを、24時間電源が入っていてインターネットにつながった特別なパソコン(これをサーバーと呼びます)に置く。すると、そのファイルは住所(で書いたリンク先のような、URLという住所)を持ち、世界中からアクセスできるようになります。
なぜ自分のパソコンではダメなのか
自分のパソコンは電源を切ったり持ち歩いたりします。その間はページが消えたのと同じになってしまう。だから『いつも起きていて動き続ける』サーバーに置くのです。今は無料や格安で、ファイルを置くだけで公開できるサービスがたくさんあります。
公開までの流れ(ざっくり)
- 手元でページを完成させ、スマホ幅とパソコン幅の両方で崩れがないか確認する
- アクセシビリティの三点(alt・見出しの順序・コントラスト)を点検する
- 公開サービスにファイル一式をアップロード(またはAIやツールに任せて置いてもらう)
- 発行されたURLを実際に開いて、手元と同じに表示されるか最終確認する
AIにはこう頼む
公開の具体的な手順はサービスごとに違います。迷ったら「作ったHTML/CSSを無料で公開したい。初心者向けの方法を一つ選んで、手順を順番に教えて」とAIに頼めば、あなたに合ったやり方を案内してくれます。全部を暗記する必要はありません。
気をつけること
公開したページは誰でも見られます。個人情報やパスワード、公開したくない下書きをうっかり置かないよう気をつけましょう。『これは世界中の人に見せてよいか』を公開前に一度自問する習慣をつけると安心です。
卒業 — あなたが手に入れた四つの力
3日間おつかれさまでした。あなたは(AIにコードを作ってもらう進め方)をしながら、AIの成果物とちゃんと向き合える人になりました。手に入れた力を確認しましょう。
- 読める: AIの(生成されたコード)を、構造から見た目の順に読み解ける
- 任せる: 何をどう作ってほしいかを、原因や観点つきでAIに具体的に頼める
- 直せる: 中央寄せ・はみ出し・余白などの崩れを、原因を切り分けて直せる
- 説明できる: HTMLとCSSの役割やアクセシビリティの意味を、たとえで人に伝えられる
この四つが揃うと何が変わるか
AIに丸投げして『動いたからヨシ』で終わる人と、あなたの差はここです。読めて、直せて、説明できる人は、AIを部下のように使いこなせます。コードを全部手書きできる必要はありません。中身を理解して舵を取れること、それが本当の卒業です。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
Webページを公開(デプロイ)するとき、ファイルを『サーバー』に置く理由として正しいのは?
このコースで目指した「卒業」の状態として最も近いのはどれ?
「デプロイ(公開)」とは何か、たとえを使って説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。