【JavaScript入門】ファイルへのアクセス

　JavaScriptのプログラムでは、ファイルへのアクセスやデータの読み書きが必要になる場面があります。たとえば、外部ファイルからデータを取得したり、サーバーとの通信を行ったりする場合です。しかし、Webブラウザはセキュリティ上の理由から、ドメインや通信プロトコルの違いによってファイルの読み込みを制限します。
　ここでは、ドメインやオリジン、CORSなどの概念をはじめ、ローカルファイルを読み込むときの注意点、HTTPとHTTPSの違い、そしてCDNの利用方法について解説します。

１．ドメインとオリジン

　ドメインは、インターネット上の住所のようなもので、たとえば「https://example.com/fruit/apple.html」というURLの`example.com`が該当します。メールアドレス`info@example.com`の`example.com`も同様にドメイン部分です。

　同じドメイン内にあるファイルは、同じ組織が管理していると見なされるため、「Same-Origin（同一生成元）」として扱われます。これに対して、ドメインが異なる場合は「Cross-Origin（クロスオリジン）」となり、セキュリティ上の制限がかかります。ブラウザは、悪意あるスクリプトが勝手に別のサイトへアクセスすることを防ぐため、クロスオリジンの通信を厳しく制限しているのです。

２．Cross-Origin Resource Sharing（CORS）

　基本的にJavaScriptのプログラムは、同一ドメイン内のファイルにのみアクセスできます。しかし、サーバー側で特別なHTTPヘッダーを設定することで、異なるドメイン間でもリソースを共有できるようになります。これをCORS（Cross-Origin Resource Sharing）と呼びます。もし別のドメインにあるAPIやデータを利用する場合、サーバー側がCORSに対応していなければ、JavaScriptからの直接アクセスは制限されてしまう点に注意が必要です。

３．ローカルファイルへのアクセス

　ローカル環境（file:// で始まるURL）でHTMLファイルを開いた場合でも、ブラウザは別のドメインからのアクセスと同様に扱うため、JavaScriptからファイルを読み込もうとするとセキュリティエラーが発生します。これはChromeなどの主要ブラウザが採用している仕様で、ローカルファイルであってもクロスオリジン扱いとなるためです。

　デバッグや学習目的でローカルファイルを読み込みたい場合は、ブラウザのセキュリティ機能を一時的に無効化して起動する方法がありますが、通常の閲覧には推奨されません。もしくは、Node.jsなどでローカルサーバーを立ち上げると、HTTP経由でアクセスできるようになり、同一オリジンとして扱われます。

４．ローカルファイルを読み込む例

　以下のプログラムは、JavaScriptでローカルファイル「info.txt」を読み込み、コンソールにその内容を表示します。ただし、通常のChromeを使ってfile://スキームで開くとセキュリティエラーが起きるため、セキュリティ制限を無効化したブラウザやローカルサーバーを使う必要があります。

コマンドプロンプトを起動して以下のコマンドを実行して、セキュリティ制限を無効化したChromeを起動します。

<Chrome実行ファイル> --disable-web-security --user-data-dir=<データディレクトリ>

例）実際には1行のコマンドです。

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=
C:\Users\joeac\Desktop\node-js

localFileRead.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script>

    // XMLHttpRequestを用いて、ローカルファイル「info.txt」を読み込むプログラムです。

    const request = new XMLHttpRequest();

    // ロード完了後の処理
    request.onload = function() {
      // 読み込んだデータをコンソールに出力
      console.log("読み込んだデータ:\n" + request.responseText);
    };

    // 通信の設定
    request.open('GET', 'info.txt');
    request.responseType = 'text';

    // 通信の開始
    request.send();

    </script>
  </head>
</html>

info.txt

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わゐゑを
ん

　このコードは、request.open()でHTTPメソッドとURLを指定し、request.send()でリクエストを送信しています。読み込みが完了するとrequest.onloadが呼び出され、request.responseTextにファイルの中身が格納されます。

　セキュリティ制限を無効化したChromeで「localFileRead.html」を開いて、F12キーを押して、開発者ツールを表示します。そして、コンソールタブを表示します。

５．HTTPとHTTPS

URLの冒頭にあるhttp://やhttps://は、データをどのように転送するかを示しています。

HTTP（Hypertext Transfer Protocol）：平文でデータをやり取りするプロトコル。暗号化は行われません。
HTTPS（Hypertext Transfer Protocol Secure）：暗号化された安全な通信。ブラウザとサーバーの間でやり取りされるデータが暗号化されるため、セキュリティ面で優れています。

　HTTPSページ内でHTTPのリソースを読み込もうとすると、ブラウザが「混合コンテンツ」とみなし、警告やブロックを行うことがあります。

６．ライブラリとCDN

　JavaScriptのライブラリ（便利な機能がまとめられたプログラム）は、通常は自分のサーバーに配置して<script>タグで読み込みますが、CDN（Content Delivery Network）を利用する方法もあります。

CDNを利用するメリット
1. 回線の太いサーバーから高速に読み込める。
2. 多くのサイトで同じファイルを使っている場合、ブラウザのキャッシュを流用できる。
3. 自分のサーバーの転送量を減らせる。

以下はjsDelivrからjQueryを読み込む例です。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Google Hosted Librariesから読み込む例は次の通りです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

まとめ

　JavaScriptでファイルにアクセスするときは、ドメインやプロトコルなど、セキュリティに関わる仕組みを理解することが重要です。特に、クロスオリジンでの通信やローカルファイルへのアクセスは制限が厳しく、状況に応じた対処が必要になります。
　また、HTTPSとHTTPの違いや、ライブラリをCDNから読み込むメリットなども把握しておくことで、より安全かつ効率的なWeb開発が実現できます。