その他

npmを使ってBootstrapを導入するには

Bootstrap5をnpmを使ってインストールする手順を示します。

はじめに

早速手順を示す前に少しだけおさらいです

Bootstrap5とは

Bootstrapは、HTML、CSS、JavaScriptで構成されるフロントエンドのWebアプリケーションフレームワーク。過去に複数回のアップデートを経て、世界で一番有名なWebフレームワークのひとつとなりました。

npmとは

npm（Node Package Manager）は、コンピュータで動くプログラムを簡単にダウンロードしたり、管理したりするためのツールのようなものです。

CDNを利用するのが簡単ではある

CDNを利用する方法はまた別の記事でご紹介します。

手順

  1. Node.jsとnpmのインストール:
    まず、Node.jsとnpmをインストールしてください。公式ウェブサイト（https://nodejs.org/）からNode.jsをダウンロードしてインストールします。npmはNode.jsと一緒にインストールされるため、別途インストールする必要はありません。
  2. プロジェクトフォルダの作成:
    プロジェクトのための新しいフォルダを作成します。任意の名前を使って構いませんが、このフォルダにBootstrapと関連ファイルが保存されます。
  3. Bootstrapのインストール:
    コマンドライン（ターミナル）でプロジェクトフォルダに移動し、以下のコマンドを実行してBootstrapをインストールします。

    npm install bootstrap

    これにより、Bootstrapと依存関係がnode_modulesディレクトリにダウンロードされます。

  4. Sassのコンパイル:
    Bootstrap 5はSassファイルを使用しているため、これをコンパイルしてCSSファイルを生成する必要があります。通常、コンパイルされたファイルはプロジェクト内の別のディレクトリに保存されます。

    以下の手順でコンパイルします。

    a. プロジェクトフォルダにscssという名前のディレクトリを作成します。

    b. scssディレクトリ内にstyle.scssという名前の新しいファイルを作成します。このファイルには、カスタムスタイルを記述することができます。

    c. style.scssファイルに以下のようにBootstrapのSassファイルをインポートします。

    // style.scss
@import '../node_modules/bootstrap/scss/bootstrap';
// ここにカスタムスタイルを追加できます

    d. コマンドラインで以下のコマンドを実行してSassをコンパイルします。

    npx sass scss/style.scss css/style.css

    これにより、cssディレクトリにstyle.cssファイルが生成されます。

  5. HTMLファイルの作成:
    プロジェクトフォルダにindex.htmlという名前の新しいHTMLファイルを作成し、以下のようにBootstrapのCSSとJavaScriptを読み込むリンクを追加します。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Example</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Your content here -->

    <!-- Bootstrap JS -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

    これで、Bootstrap 5が適用されたWebサイトを作成できる準備が整いました。

  6. サーバーの起動（オプション）:
    ローカルで開発を行う場合は、コンパイルされたファイルを表示するためにローカルサーバーを起動することがよくあります。Node.jsのhttp-serverパッケージを使用してローカルサーバーを起動することができます。

    ターミナルで以下のコマンドを実行して、http-serverをインストールし、ローカルサーバーを起動します。

    npm install -g http-server
http-server

    これで、Webサイトはhttp://localhost:8080（デフォルトのポート番号）でアクセスできるようになります。

-その他