Site IconAtsulog

JS Lab#001

2026/08/10 13:06
2026/08/10 13:06
8 views
JS LabComputer ScienceWebGithubViteReactNode.jsgh-pages

このシリーズはこれで終わり！

JS Labのデプロイについてまとめます．デプロイとは超ざっくり言うと「公開すること」です．

正式にはリリースと区別して「本番環境に反映すること」と表現するべきなのですが，JS Labは個人開発なので一緒くたにして捉えていただければOKです．

静的・動的

JS Lab はHTML/CSS/JavaScriptだけで作成可能なデザインアイデアをまとめることが目的だったので，静的なWEBサイトとして公開しました．

静的(Static) であることは具体的に言うと以下のような形式であることです．

  • データベースを伴わない
  • サーバーサイドでプログラムが実行されない
  • サーバーが状態を持たない

すなわち，予め決まった形で提供されるWEBサイトということです． 逆に 動的(Dynamic) なWEBサイトでは，データや状態によって違った内容を表示することができます．例として，Atsulogは動的なWEBサイトです．

Github Pages

静的WEBサイトを公開する上で最も手軽な選択肢がGithub Pagesです．Github Pagesとは Github が提供している，Githubリポジトリから直接静的WEBサイトをホスティングできる無料のサービスです．

コードを管理しているリポジトリと公開環境が直結しているためサーバーの契約や複雑な初期設定を行うことなくWEBサイトを公開できます．内容を更新する際も，git pushによるブランチの変化が自動で反映されるので非常に楽です．

ちなみにENTRANCEはGithub Pagesで公開しています．自分のプロフィールページやブログを公開したい方にはおすすめです．AtsulogはGithub Pagesではありません．

Vite + React

今回はReactで実装したので，コンパイルしないとWEBサイトとして閲覧できません．AtsulogのようにNext.jsのようなフレームワークを使うこともできますが，静的サイトはサーバーサイドを利用しないので若干オーバースペックです．そこで Vite を採用しました．

Viteはフロントエンド開発ツールで，サーバーサイドを扱わないのでNextと違い純粋なReactプロジェクトとして開発することができます．Reactで書かれたコードから静的サイトをビルドするときに使用します．

正直あまり詳しくないのでそんなに書くことないです．

gh-pages

ビルドによって静的ファイルを生成するところまではできますが，1つ重要な問題があります．

ビルドによる生成物（dist/）は一般的にgit管理しないので，生成物だけを管理するリポジトリを別で作成して公開する必要があります．これは結構面倒ですし，Github Pagesの良さを殺してしまいます． そこでgh-pagesを使います．

gh-pagesはNode.jsのCLIツール/npmパッケージで，ビルドによる生成物を自動で指定のブランチ（デフォルトではgh-pagesブランチ）にコミット・プッシュしてくれます． これを使えば開発はmainブランチ，公開はgh-pagesブランチというように簡単に単一のリポジトリで管理することができます．

package.json

gh-pagesの利用方法について少し触れます．まずはpackage.jsonについてです．

package.jsonとはNode.jsを利用したJavaScript/TypeScriptのプロジェクトにおいて，設定情報や必要なパッケージ，実行コマンド等を一括管理する設定ファイルです．これをgit管理することで，別の環境でもnpm installすれば同じ条件で開発することができます．

以下にpackage.jsonの例を記載します．

{
  "name": "プロジェクト名",
  "version": "プロジェクトのバージョン",
  "private": 公開設定(true/false),
  "description": "プロジェクト概要",
  "type": "module",
  "scripts": {
    "dev": "開発用ローカルサーバーを起動するコマンド",
    "build": "本番公開用にコードをビルド（変換）するコマンド",
    "preview": "ビルド後の成果物をローカルで確認するコマンド",
    "predeploy": "deploy実行前に自動で割り込んで動く事前処理",
    "deploy": "ビルド成果物をGitHub Pages等に転送するコマンド"
  },
  "dependencies": {
    "本番環境の動作に必要なライブラリ（例: react）": "^18.3.1"
  },
  "devDependencies": {
    "開発・ビルド時のみ使うツール（例: vite, typescript, gh-pages）": "^5.0.0"
  }
}

似たようなものにpackage-lock.jsonがありますが，こちらはnpm が自動生成・管理するファイルで，package.jsonより細かい内容を含んでいます．package.jsonとは違い，人の手で書き換えるものではありません．

npm run deploy

上記のpackage.jsonを適切に書けば，コマンド1つでデプロイが可能です． まずはJS Labにおけるpackage.jsonのscriptsプロパティを見てもらいましょう． 都合により一部抜粋しています．

 "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }

deployを見るとgh-pagesが使われていることがわかります． -dオプションは Distributionからきていて，生成物のディレクトリを指定できます． このように設定しておけば，npm run deployを実行するだけでデプロイが完了します．

これだけだと何が起こっているのかわからないので，npm run deployの流れを簡単に記載します．

【ユーザーが叩くコマンド】
  npm run deploy
    │
    ├─► 1. [自動実行] npm run predeploy (preフックが作動)
    │     └─► npm run build を実行
    │           └─► vite build が動いて dist フォルダが生成される！
    │
    └─► 2. [本番実行] gh-pages -d dist
          └─► 生成された dist フォルダを GitHub へ転送する

最後に

gh-pagesに出会ったときはちょうど欲しかったツールだったのでちょっと感動しました．やっぱり本当に必要なものはちゃんと誰かが作るものなんですね〜

あと，久しぶりに文量多めの記事を書きました．書きたいことが溜まっているので少しずつ更新していきます．

More from JS LabView all in series →

Previous Part
JS Lab#000