はじめに
この記事は 「MM2025 開発記」 シリーズ第2回です。
前回の記事では応募作品の概要を説明しましたが、今回はプロジェクトの環境構築についてまとめます。
ビルドツールとは
ビルドツールとは、Webアプリの開発で必要な作業（JavaScriptのまとめ・画像の最適化・開発サーバーの起動など）を自動でやってくれるツールのこと。
代表的なものには以下がある。
-
Webpack ： 柔軟性が高く大規模向けだが設定が重い
-
Vite ： 高速な開発サーバー
-
Parcel ： 設定ファイル不要＆すぐに始められる
今回自分は、初心者＆小規模開発という2つの理由からParcelを選択した。
環境構築
環境構築は以下の手順で行った。順番通りに説明していく。
- GitHubプライベートリポジトリを作成
- Codespaceを作成
- Parcelをインストール
- package.jsonの設定
- TextAlive App API を利用できるようにする
1.GitHubプライベートリポジトリを作成
GitHubにログインし、Homeから右上の＋ボタンをクリックしてメニューからNew repositoryを選択する。
↑Homeの右上の様子
以下のような画面が開いたら、Repository nameを入力し、Choose visibility を Private へ変更してから右下のCreate repositoryを押す。
ここまででやれば、プライベートリポジトリの作成は完了。
2.Codespaceを作成
Create a codespace → Create new codespaceで先程作成したリポジトリに新しいCodespaceを作成できる。
Codespaceのメリット
・ローカルに環境構築する必要がない
・どの端末からでも同じ環境で作業可能
3.Parcelをインストール
ビルドツールとしてParcelをインストールする。
npm install --save-dev parcel
実行後、README.mdのみだったディレクトリが以下のように変更される。
4.package.jsonの設定
開発用サーバの起動など、ターミナルに打ち込むコマンドを簡単＆わかりやすくするため、package.jsonのscriptにコマンドを登録する。
{
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
}
こうしておくことで、
・開発用サーバ起動
npm run dev
・本番用ビルド
npm run build
のように操作できるようになる。
5.TextAlive App API を利用できるようにする
TextAlive App APIを利用するには主に2つの方法がある。今回はscriptタグで読み込む方法を採用しているが、npmパッケージをインストールする方法の方が主流のため、どちらも説明する。
npmパッケージ経由（参考）
npm install textalive-app-api
実行後、以下のようなメッセージが帰ってくれば正常にインストールできている。
added XX packages, and audited XX packages in Xs
found 0 vulnerabilities
また、次のようなメッセージが出ることもあるが、コンテスト用の作品を作る上では問題ないので無視してよい。
XX moderate severity vulnerabilities
scriptタグで読み込み
こちらの方法の場合は、HTMLファイルを作成した際に以下のscriptタグを追加するだけでよい。
<script src="https://unpkg.com/textalive-app-api/dist/index.js"></script>
さいごに
今回の記事では、コンテスト用作品を開発するための環境構築方法について紹介しました。あくまで一例ですが、参考にしていただければ幸いです。
次回からは、具体的にどんな実装をしたのか解説していきます。