便利な外部モジュールの取り込み

便利な外部モジュールの取り込み

プログラミングをする上でよく利用される機能、例えば、ネットワーク経由のアクセスなどは別の人が既に作成したモジュールがインターネットで公開されている場合が多く、改めて自分で作らなくても簡単に自分のアプリに取り込んで利用する事ができます。取り込み方はいろいろありますが、Web アプリの場合はインターネットの接続があるのが前提なのでインターネット経由でも取り込む事ができます。この記事では外部モジュールを利用する際に自分のプログラムに取り込む方法を紹介します。

インターネット接続が前提の Web アプリ

Web アプリとは、Web サイトの形で、Web ブラウザを使って利用する形式のアプリです。当然ですが、Web サイトにアクセスして利用するのでインターネットの接続が前提になっています。 既に紹介していますが、Web アプリの場合、必要な情報は Web ブラウザを介してインターネット経由で Web サーバーから取り込んでいます。

Web ページの中で、HTML で書かれた Web ページの基本情報だけではなく、そのページが利用している Javascript やイメージファイルなども一緒に取り組むようになっています。Javascript は HTML ファイルの中に記述することも可能ですが、大きなプログラムの場合、別のファイルで記述して、HTML ファイルの中から呼び出す形で読み込む場合が多くなります。

要は、ある Web ページが読み込まれた場合に、必要な外部モジュールのファイルも読み込むことで、外部モジュールが提供する機能をそのページで利用できるという点では、自分で作ったプログラムに似ています。

外部モジュールの取り込み方は大きく分けて２種類です

外部モジュールの取り込み方は大きく分けて二つの方法があります。

＊パッケージ管理アプリ（npmなど）を使って、自分のプロジェクトの中に取り込む

＊　CDN(Contents Delivery Network)を利用して他のサイトから取り込む

簡単にいうと、予め自分のプロジェクトの中に取り込んで利用するか、機能を使う際に、他のサイトから必要なプログラムを取り込んで利用するかの違いです。Web アプリの場合、インターネット接続が前提なので、その機能を利用するページが読み込まれた場合に、別のサイトから必要なモジュールのファイルを取り込んで利用するというのが、CDN の仕組みです。

自分のプロジェクトに取り込んだ場合には、必要なモジュールのプログラムは、自分の Web ページをホスティングしているサイトに置かれる事になります。CDN の場合は、そのモジュールのプログラムを提供する幾つかのサーバーを指定して別のサイトから取り込みます。 いずれにしても、ネットワーク経由でモジュールを Web ブラウザに取り込むので、読み込みのスピードも余り大きなさが付かない場合が殆どです。

CDN を利用すると、自分の Web サイトに置くファイルの量が減らせるので、サイトで使用するストレージ容量を抑える事ができます。

例えばどんな機能があるか？

インターネットで公開されている多くのモジュールは、npmでも、CDNでも利用が可能な場合が殆どです。 Firebase もCDNでも利用できますし、npmでプロジェクト内にインストールしても利用できます。

npmでプロジェクト内にインストールする場合には

$ npm install firebase

のようにすれば、プロジェクトに firebase に必要なファイルがインストールされます。 React や Vue をnpmのプロジェクトとして開発する場合にはこの方法が便利です。

CDN で利用する場合にはを HTML 内に埋め込めば、ページが読み込まれたときに必要なファイルを Web ブラウザが取得してくれます。

<script type="module">

  // Import the functions you need from the SDKs you need

  import { initializeApp } from "h t t p s://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";

  // TODO: Add SDKs for Firebase products that you want to use

  // h t t p s://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration

  const firebaseConfig = {

    apiKey: "YourAPI_Key",

    authDomain: "test-xxxxx.firebaseapp.com",

    databaseURL: "h t t p s://test-xxxxx.firebaseio.com",

    projectId: "test-xxxxx",

    storageBucket: "test-xxxxx.appspot.com",

    messagingSenderId: "yourSenderId",

    appId: "1:app_id"

  };

  // Initialize Firebase

  const app = initializeApp(firebaseConfig);

</script>

これは、個別の Web ページごとに機能を実装する場合には便利です。

Web サイトを作る際に基本的な部品とその見栄えを整えるのに CSS を使いますが、そうした、HTML の「部品」を予め装飾して部品化したものに、「Bootstrap」がありますが、これも CDN を利用してページに取り込む事ができます。

<link

  href="h t t p s://cdn.jsdelivr.net/npm/bootstrap＠5.1.1/dist/css/bootstrap.min.css"

  rel="stylesheet"

  integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"

  crossorigin="anonymous"

/>

を HTML ページのヘッダー部分に入れておけば、必要な CSS を読み込んでくれるので、ボタンやテキストフィールの装飾が予め取り込まれるので、ページの記述が楽になります。

プログラムを実行する仕組みがわかると理解しやすい！

こうした、CDN の仕組みは、プログラムを実行する仕組みがわかっていると理解しやすくなります。 Javascript のプログラムは基本は、自分の Web サーバーから取り込むようになっていますが、URL がわかっていれば、Web ブラウザは別の Web サイトからでも取り込む事ができます。Web ブラウザは指定された URL にアクセスしてデータを受け取るという仕組みになっているからです。一旦 Web ブラウザに取り込まれてしまえば、あとは Web ブラウザで実行されるのでどこから持ってきても機能的には同じです。

CDN というと何か特別な事をしているように見えますが、実は、シンプルで、URL で指定したファイルを Web ブラウザが受け取っているだけという事です。こうした一連の流れは、Web アプリが実行される仕組みを知っていると理解できますが、知らないと「呪文」のように、Web ページに埋め込んでいるという事になります。

CDNとnpmのどちらを使うかは、開発のスタイルや規模で決めるのが一番です。React や Vue を npm で利用する場合には、基本はnpmで取り込んだ方が簡単です。しかし、Bootstrap のような場合は、ベースになるページ（通常は、public/index.html）に CDN の URL を埋め込んだ方がシンプルです。（モジュールでインストールする方法も利用できますが、記述の仕方が若干変わります）

まとめ

今回は、外部モジュールを自分の作成するプロジェクトで利用する方法について紹介してきました。 予め自分のプロジェクトに取り込む方法が、React や Vue を利用する場合は主流になりますが、CDN も便利な選択肢の一つです。 別のサイトから取り込むということで、何となく効率が悪そうなイメージがしますが、実は、自分のプロジェクトに取り込んでもネットワーク経由で必要なプログラムを Web ブラウザに読み込むという点では同じです。

よく利用される CDN のモジュールは、Web ブラウザに予め読み込まれている（キャッシュされている）場合も多いので、性能的には殆ど問題にならない便利な方法です。

こうした仕組みを理解するには、プログラムがどのように実行されるかを理解していると簡単に仕組みがわかるので利用の際にも一番良い方法を選択できるようになります。