はじめに
下記アドベンドカレンダーの企画に沿って、アプリ開発でチャレンジした技術についてアウトプットもかねて紹介したいと思います
開発環境とか
| カテゴリー | 使用技術 |
|---|---|
| フロントエンド | HTML (Hypertext Markup Language) CSS (Cascading Style Sheets) JavaScript (JS) JSON (JavaScript Object Notation) |
| バックエンド | Node.js (14.x) Fastify (v4.21.0) Handlebars (テンプレートエンジン) |
| データベース | SQLite (ライブラリ: sqlite, sqlite3) |
| Fastify プラグイン | @fastify/view (テンプレートエンジン統合) @fastify/static (静的ファイルの提供) @fastify/formbody (フォームデータ処理) |
| 開発環境 | Glitch（ホスティングと開発プラットフォーム） |
| インフラ | Glitch（サーバーを運営する環境） |
| 依存管理 | npm（Node.js パッケージマネージャー） |
| バージョン管理 | Git（Glitch のプロジェクト管理） |
👆この中ではじめて「Fastify プラグイン」「Fastify」「Handlebars」にチャレンジしたのでこれらについてどのようなものなのか、これがないとどうなるのか、について簡単に記述していきます。
Fastifyとは？
Fastify は、Node.js 上で動作する 高速な Web サーバーフレームワーク になります。
簡単に言うと、ブラウザから送られてきたリクエスト（例: URLアクセスやフォームの送信）に対してどう処理をするかを設定するツールです。ロゴを見るだけでもスピードが速そうな、つようそうな印象を抱きます。
使用コード例
Fastify を使うことで、以下のようにリクエストを受け取り、レスポンスを返すコードを書けます。
const fastify = require('fastify')(); // Fastifyを初期化
// "/" にアクセスされたときに "Hello, world!" を返す
fastify.get('/', (request, reply) => {
reply.send({ message: 'Hello, world!' });
});
// サーバーの開始
fastify.listen(3000, (err) => {
if (err) throw err;
console.log('Server running on http://localhost:3000');
});
これがあることでできること
- ブラウザからのリクエスト（例:
http://localhost:3000へのアクセス）を処理して、データやHTMLページを返せる。 - APIやWebアプリを高速に構築できる。
これがないとどうなる？
Node.js の標準機能で同じことを実現しようとすると、もっと長いコードが必要になり、速度や使いやすさも落ちる可能性があります。
Handlebars (テンプレートエンジン)とは？
Handlebars は、テンプレートエンジンの1つです。
HTML の一部を動的に変える仕組みを簡単に作るためのツールになります。
使用しているコード例
たとえば、以下のようにテンプレート (template.hbs) を作成できます：
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>Hello, {{name}}!</h1>
</body>
</html>
このテンプレートにデータを渡すコード：
const fastify = require('fastify')();
const handlebars = require('@fastify/view');
// Fastify に Handlebars を統合
fastify.register(require('@fastify/view'), {
engine: {
handlebars: require('handlebars'),
},
});
// テンプレートをレンダリングして返す
fastify.get('/', (req, reply) => {
reply.view('/path/to/template.hbs', { title: 'My Page', name: 'John' });
});
ブラウザでこのコードにアクセスすると、次のようなHTMLが生成されます：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, John!</h1>
</body>
</html>
これがあることでできること
- データ（
titleやname）をテンプレートに埋め込んでHTMLを自動生成。 - 使い回せるテンプレートを使って、HTML の開発効率を向上。
これがないとどうなる？
すべてのHTMLを手作業で作成する必要があり、データを埋め込むたびに多くのコードを書き直す必要があります。
Fastify プラグインとは？
Fastify をさらに便利にする追加機能です。
以下のプラグインが使われています。
@fastify/view
テンプレートエンジン（例: Handlebars）の統合をサポートします。
-
具体例: 上述のテンプレート (
template.hbs) を使用可能にする。
@fastify/static
静的ファイル（画像、CSS、JavaScript ファイルなど）を簡単に配信します。
fastify.register(require('@fastify/static'), {
root: path.join(__dirname, 'public'), // 公開するディレクトリ
});
これがないとどうなる？
CSSや画像ファイルを別途設定しないと配信できず、手間が増えます。
@fastify/formbody
フォームから送信されたデータを解析し、使いやすい形に変換します。
fastify.register(require('@fastify/formbody'));
fastify.post('/submit', (request, reply) => {
console.log(request.body); // フォームのデータが表示される
reply.send('Form received!');
});
これがないとどうなる？
フォームデータを受け取る際に、手作業で解析する必要があります。
さいごにまとめ
これらの技術やプラグインがあることで、次のようなことが簡単に実現できることが少しわかりました。
- Webページの表示。
- データを埋め込んだHTMLの生成。
- 静的ファイル（CSSや画像）の配信。
- フォームデータの受け取り。
「これがない場合どうなるのか」を知ることで、これら技術が開発効率を上げるのに貢献していることをしりました。今後も便利な機能はどんどん使ってみたいと思います。
今回の記事が少しでも参考になれば幸いです。