作ったWebサイトをインターネットに公開するためのサービス。GitHubにコードを送ると自動で公開まで進むのが特徴で、個人開発でよく使われる。
Vercel(ヴァーセル)とは、作ったWebサイトやアプリをインターネット上に公開してくれるサービスです。特にNext.js(本サイトでも使われている開発フレームワーク)との相性が抜群で、個人開発の定番になっています。
「全自動の出版社」です。原稿(コード)を送るだけで、印刷・製本・全国の書店への配送(公開作業)をすべて自動でやってくれます。書き直した原稿を送れば、数分後には新版が並んでいる——それがVercelのデプロイ体験です。
昔は「サーバーを借りて、設定して、ファイルを転送して……」という公開作業だけで初心者が挫折していました。Vercelはその工程をほぼゼロにしてくれたので、「作る」に集中できるようになりました。無料枠だけでも個人サイトは十分公開できます。
初心者がつまずきやすいポイント
「手元では動くのに、Vercelに上げるとエラーになる」は誰もが通る道です。原因の多くは、環境変数(APIキーなどの設定値)をVercel側に登録し忘れていること。手元の.envファイルは自動では引き継がれません。もう一つ、商用サイトは有料プラン(Pro)が必要になる点も覚えておきましょう。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS(シーエスエス)
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML(エイチティーエムエル)
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js(ネクストジェイエス)
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。