Node.jsとExpressを使いWebアプリを開発しました。

席替えアプリを作成しました

今回は、友人が学校の先生をしていて困っていたので
Node.js、Express、Bootstrap、CDN版Vue、Canvasを使って席替えアプリを作成しました。
以下にその詳細を紹介します。

このシステムや記事のほとんどにGitHub Copilotが使用されています。
また、テストコードの一部はエンジニアの別の友人が改修しました。

使用技術

• Node.js: サーバーサイドのJavaScriptランタイム
• Express: Node.jsのための軽量なWebアプリケーションフレームワーク
• Bootstrap: モバイルファーストなフロントエンドフレームワーク
• Vue: フロントエンドのJavaScriptフレームワーク
• Canvas: HTML5の描画API
• Azure Web Apps: アプリケーションのデプロイとホスティングを行うためのクラウドサービス

プロジェクト構成

プロジェクトのディレクトリ構成は以下の通りです。

SeatChanger/
│  .gitignore
│  api.mjs
│  package-lock.json
│  package.json
│  README.md
│  server.mjs
├─public
│  │  index.html
│  ├─css
│  │      style.css
│  ├─fonts
│  │      NotoSansJP-VariableFont_wght.ttf
│  ├─img
│  │      icns.ico
│  │      icns.png
│  └─js
│          app.js
└─__tests__
        generate-image.test.js
        shuffle.test.js

環境変数の設定

このプロジェクトでは、環境変数を使用してサーバーのポート番号を設定しています。プロジェクトのルートディレクトリに.envファイルを作成し、以下のように設定してください。

PORT=3000

.envファイルが存在しない場合、デフォルトでポート3000が使用されます。

サーバーサイドの実装

server.mjsでは、Expressを使ってサーバーを立ち上げています。また、環境変数を読み込むためにdotenvを使用しています。
このアプリケーションはAzure Web Apps上で運用されています。

mjsについて

mjsは、JavaScriptモジュールファイルの拡張子です。mjsファイルは、ES6モジュールを使用するために特別に設計されています。Node.jsでは、mjs拡張子を持つファイルは自動的にESモジュールとして扱われます。これにより、importやexportを使用してモジュールを管理することができます。

メリット

• 標準化: ES6モジュールはJavaScriptの標準仕様であり、ブラウザや他のJavaScript環境でもサポートされています
• スコープの分離: モジュールごとにスコープが分離されるため、変数の衝突を避けることができます。
• ツールのサポート: 多くのモダンなツールやライブラリがES6モジュールをサポートしています。

デメリット

• 互換性: 古いバージョンのNode.jsやブラウザではサポートされていない場合があります。
• 設定の必要性: プロジェクトによっては、mjsファイルを使用するために追加の設定が必要になることがあります
• パフォーマンス: 一部のケースでは、requireを使用したCommonJSモジュールよりもパフォーマンスが劣ることがあります

フロントエンドの実装

public/js/app.jsでは、Vueを使って席替えのロジックを実装しています。席替えの結果を表示するためにCanvasを使用しています。

HTMLとCSSの実装

public/index.htmlでは、Bootstrapを使ってスタイルを整えています。Bootstrapを使うことでモバイルでも利用しやすい状態になっています。
また、public/css/style.cssでは、カスタムスタイルを追加しています。

APIの実装

api.mjsでは、席替えのロジックと座席表の画像生成を行うAPIを実装しています。

画像生成について

当初はHTMLのテーブルを使用して座席表を実装していましたが、利便性や学習のために画像生成を行うことにしました。最初はhtml2canvasライブラリを使用してクライアント側で処理を行っていましたが、環境依存の問題が発生し、特にスマートフォンで不具合が生じました。

そこで、サーバー側で処理を行う方法を模索し、puppeteerというライブラリにたどり着きました。しかし、puppeteerを使用した実装はうまくいきませんでした。代替案を探している中で、node-html-to-imageというライブラリを見つけました。これは内部でpuppeteerを使用しており、簡単に画像生成ができるものでした。ローカル環境ではうまく動作しましたが、Azureにデプロイする際にGitHub Actionsでエラーが発生しました。これはChromiumの不具合が原因のようでした。

画像をダウンロードできるようにすることも考えましたが、日本ではiPhoneの利用者が多く、iPhoneでは画像をダウンロードする際にフォルダアプリを一度挟んで写真アプリに保存する必要があります。このひと手間を無くすために、画像生成して表示させることにしました。

最終的に、canvasライブラリを使用することで問題を解決し、無事に実装とデプロイを完了することができました。

テストの実装

このプロジェクトでは、ユニットテストを実装して機能の正確性を確認しています。テストは__tests__ディレクトリに配置されています。

テストの構成

• generate-image.test.js: 座席表の画像生成機能のテストを行います
• shuffle.test.js: 席替えのシャッフルロジックのテストを行います

テストの実行方法

以下のコマンドを使用してテストを実行できます。

npm test

まとめ

このプロジェクトでは、Node.jsとExpressを使ってサーバーサイドを実装し、VueとCanvasを使ってフロントエンドを実装しました。席替えのロジックや座席表の画像生成など、様々な機能を実装することができました。

興味がある方は、ぜひ試してみてください！