【初心者向け】Expressで作るシンプルなWebアプリケーション！Twitter Bootstrapでデザインもバッチリ

2024-06-15

Twitter Bootstrapをnpmでインストールする目的

このブログ記事では、Web開発における「node.js」、「Twitter Bootstrap」、「Express」の文脈において、「Twitter Bootstrapをnpmでインストールする目的」について分かりやすく解説します。

Twitter Bootstrapは、HTML、CSS、JavaScriptを用いた、Webデザインを迅速かつ簡単に構築するためのオープンソースのフロントエンドフレームワークです。グリッドレイアウト、コンポーネント、ユーティリティクラスなどを提供し、レスポンシブなWebサイトやWebアプリケーションの開発を効率化します。

npmとは

npmは、JavaScript用のパッケージマネージャーです。Node.jsと共にインストールされ、JavaScriptライブラリやツールを効率的にインストール、管理、更新することができます。

Expressは、Node.js用のWebアプリケーションフレームワークです。軽量で柔軟性に優れ、シンプルなAPIを提供することで、Webアプリケーションの開発を迅速かつ効率的に行うことができます。

Twitter Bootstrapをnpmでインストールする主な目的は以下の3つです。

補足:

Twitter BootstrapをCDN（Content Delivery Network）から読み込む方法もありますが、npmでインストールする方が、プロジェクト管理、カスタマイズ、オフライン利用の点で優れています。
Expressは、主にサーバーサイドの開発に用いられるフレームワークです。一方、Twitter Bootstrapはフロントエンドの開発に用いられるフレームワークです。両者は一緒に使用することができ、Expressで構築されたWebアプリケーションにTwitter Bootstrapを組み込むことで、レスポンシブで魅力的なデザインのWebページを作成することができます。

Twitter Bootstrapをnpmでインストールすることは、Web開発プロジェクトを効率化し、保守性を向上させる効果的な方法です。特に、チームでの開発や、カスタマイズ性やオフライン利用を重視するプロジェクトにおいて有効です。

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Express app with Twitter Bootstrap",
  "main": "app.js",
  "dependencies": {
    "bootstrap": "^5.3.0",
    "express": "^4.17.1"
  }
}

app.js

const express = require('express');
const app = express();
const path = require('path');

// Bootstrap を静的ファイルとして提供
app.use(express.static(path.join(__dirname, 'node_modules', 'bootstrap', 'dist')));

// ルートパスへのアクセスを処理するルートハンドラー
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>My App</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
      <div class="container">
        <h1>My Express App</h1>
        <p>This is a simple example of using Express and Twitter Bootstrap.</p>
      </div>
      <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
  `);
});

// ポート 3000 でサーバーを起動
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>My Express App</h1>
    <p>This is a simple example of using Express and Twitter Bootstrap.</p>
  </div>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

このコードの説明

package.json ファイルは、プロジェクトに必要な依存関係を定義します。この例では、express と bootstrap パッケージを指定しています。
app.js ファイルは、Express アプリケーションのメインロジックを定義します。
app.use(express.static(...)) ミドルウェアは、node_modules/bootstrap/dist ディレクトリを静的ファイルとして提供します。これにより、HTML ファイルから Bootstrap の CSS と JavaScript ファイルにアクセスできます。
app.get('/', ...) ルートハンドラーは、/ パスへの GET リクエストを処理します。このハンドラーは、HTML レスポンスを返し、Bootstrap コンポーネントを使用してシンプルなページを表示します。
app.listen(3000, ...) メソッドは、ポート 3000 でサーバーを起動します。

この例を拡張するには

この例はあくまでも基本的なものです。以下の方法で拡張することができます。

追加のルートハンドラーを作成して、アプリケーションの機能を追加します。
Bootstrap コンポーネントを使用して、より複雑なユーザーインターフェースを作成します。
SASS や LESS を使用して、Bootstrap のスタイルをカスタマイズします。
テンプレートエンジンを使用して、HTML ページを動的に生成します。

Node.jsでBootstrapをインストールするその他の方法

CDN (Content Delivery Network) を利用する

Bootstrapは、CDNから直接読み込むこともできます。これは、npmを使用せずにBootstrapをプロジェクトに含める最も簡単な方法です。

方法は以下の通りです。

HTMLファイルの <head> セクションに、以下のリンクタグを追加します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

上記のURLを、使用するBootstrapのバージョンに合わせて変更します。

Yarnを使う

Yarnは、npmに似たパッケージマネージャーです。npmの代わりにYarnを使用してBootstrapをインストールすることもできます。

yarn add bootstrap

手動でファイルをダウンロードする

Bootstrapの公式サイトから、CSSとJavaScriptファイルをを手動でダウンロードすることもできます。

CSS と JavaScript タブをクリックして、それぞれ必要なファイルをダウンロードします。
ダウンロードしたファイルをプロジェクトの適切なディレクトリに配置します。

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.bundle.min.js"></script>

上記のパスを、ダウンロードしたファイルの実際のパスに変更します。

各方法の比較

方法	メリット	デメリット
npm	プロジェクト管理が容易	インターネット接続が必要
CDN	インターネット接続があればすぐに使える	プロジェクトにファイルを埋め込む必要がある
Yarn	npmよりも高速で信頼性が高い	npmほど普及していない
手動ダウンロード	オフラインで使用できる	ファイル管理が煩雑