コース目次 / 第6章
公開①
ビルドして dist フォルダを公開します。型がビルドで消えることも目で確かめます。
このコースでいちばん嬉しい章です。 今日、あなたのダッシュボードが世界に出ます。コードはほとんど書きません。
今日のゴール
https://〇〇.netlify.app を開くと、本物の為替レートで動くダッシュボードが誰からでも見られます。
ミニ解説(JS): build と dist
これまで動かしていた npm run dev は開発用です。公開するには出荷版を作ります。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
dist というフォルダができます。この中身が出荷版です。手元で確認するには次を打ちます。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
package.json を開くと "build": "vite build" と書いてあります。npm run ○○ は、ここに書いてあるコマンドを呼んでいるだけです。魔法ではありません。
型はビルドで消える(1分で確かめる)
これはTypeScriptの正体を理解する上でとても大事なので、必ず自分の目で見てください。
VS Code をお使いの方
dist/assets/ の中にある .js ファイルをVS Codeで開きます。
ターミナル派の方
dist/assets/ の .js ファイルを開きます。ファイル名は毎回変わるので、まず一覧を見ます。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
出てきた .js の名前を、そのままエディタで開いてください(nvim dist/assets/index-XXXXXXXX.js のように、実際に出た名前で)。
中身は読みにくく圧縮されていますが、: string や : number や type が1つも無いことは分かります。
型は、動くプログラムには含まれません。型は「書いている間だけ効く安全装置」で、出荷のときに全部外れます。
だからこそ第1章で言った「実行するのはVite、検査するのはtsc」が成り立ちます。
正直な注記: いまの npm run build は 型チェックをしていません。型エラーがあってもビルドは通ってしまいます。これは第10章で直します(そのとき、わざと型エラーでビルドを止める体験をします)。
公開する前に(ここだけ真面目に読んでください)
コース1の「本名・顔写真は必須ではない」に加えて、このコース特有の注意があります。
旅の日付と行き先は、実物を書かないでください。
公開された旅程は、「その期間、家にいません」という予告になります。カウントダウンの日付も同じです。
ダミーの日付か、「いつか行きたい」という書き方を既定にしてください。
見本のコードも、ここでダミーの日付に変えます。
import { setupExchange } from './exchange'; -const TRIP_DATE = '2026-09-19';+// 公開するので実際の旅程は書かない。ここはダミーの日付。+const TRIP_DATE = '2026-12-31'; function daysUntil(dateText: string): number {行頭の + - は変更の目印です。コピーすると、記号と削除された行を除いたこの章を終えた時点の内容が入ります。
公開する
コース1の第5章の再演です。新しいのは1点だけ——ドロップするのは dist フォルダです。
- ブラウザで
https://app.netlify.com/dropを開きます distフォルダだけを点線の枠にドラッグして離しますhttps://〇〇.netlify.appが発行されます
いちばん多い失敗: プロジェクトフォルダ(tabi-dashboard)ごとドロップしてしまう。
それでは真っ白なページが公開されます。ドロップするのは dist だけです。
サイト名は Site configuration → Change site name で変えられます。
更新したいときは、自分のサイトの Deploys タブに dist をドロップします。トップページのDropに落とすと別のサイトが新しくできてしまいます(コース1第9章と同じFAQです)。
公開URLでもAPIは動きます
「手元では動いたけど、公開したら止まるのでは」と心配になるところですが、動きます。このコースで使っているAPIは、よそのサイトから呼んでよい設定(CORS許可)であることを実測して選んであります。
あなたの番
- スマホで自分のURLを開いてください。 メッセージアプリで自分宛てに送るのが早いです。
- サイト名を自分の好きな名前に変えてください。
- 誰かに見せてみてください。「本物のAPIで動いている」のは、それだけで十分すごいことです。
この先の予告
残りは4章です。ここから先は、このダッシュボードを「壊れにくく」していく旅になります。外から来るデータを疑い(第7章)、失敗を画面に出し(第8章)、天気を足して共通化し(第9章)、仕上げます(第10章)。
TSエラー語辞典
この章で実際に出るエラー英文と、その日本語訳です。卒業するころには全章ぶんがお助けページに集まります。
| エラー英文 | 言っていること |
|---|---|
(この章に新しいエラー英文はありません) |
公開だけの章です |
ハマったら
公開したページが真っ白
dist の中身ではなく、プロジェクトフォルダごとドロップした可能性が高いです。dist フォルダだけをドロップし直してください。
再ドロップしたら別のURLになった
トップページのDropに落とすと新しいサイトが作られます。Netlifyで自分のサイトを開いてから Deploys タブにドロップしてください。
ZIPで戻したい
このページの下のZIPは、この章を終えた状態です。
解凍したら、フォルダの中で次の2つを順に打ちます。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
丸ごと置き換えると自分で書き換えた内容が消えます。 まず src/places.ts(自分の行き先データ)と、自分で変えた文言をメモ帳に待避してから、壊れたファイルだけを差し替えてください。
こうなっていればOK
うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。
卒業まであと4章です。
この章はまだ完了していません。