<p>IE11 が対象外になったことで JavaScript は webpack などのモジュールバンドラ無しで書いてもブラウザで動作するようになりました。ウェブアプリなど React を利用するシーンでは、まだまだモジュールバンドラを利用したほうがいいと思いますが（TypeScriptで書きたいですよね）、ウェブサイトではモジュールバンドラ無しで十分だと思います。</p>



<p>Rails7 でも Webpacker が剥がされて、Node.js レスな環境を提供しています。</p>



<h2>JavaScript モジュール</h2>



<p>具体的には <a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules" data-type="URL" data-id="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules" target="_blank">JavaScript モジュール</a>を利用します。ブラウザのサポート状況を確認しても、IE以外は問題なさそうです。以下簡単なサンプルです。</p>



<pre title="utils/EventEmitter.js" class="wp-block-code"><code lang="javascript" class="language-javascript">class EventEmitter {
  ...
}

export default EventEmitter;</code></pre>



<p>main.js で、EventEmitter クラスを import して使います。拡張子は必須です。拡張子が不要なのは webpack の設定でしたよね、そういえば。</p>



<pre title="main.js" class="wp-block-code"><code lang="javascript" class="language-javascript">import EventEmitter from './libs/EventEmitter.js';

const ev = new EventEmitter();

console.log(ev);</code></pre>



<p>HTML側に設定を書きます。</p>



<pre class="wp-block-code"><code class="">&lt;script type="module" src="/assets/js/libs/utils/EventEmitter.js">&lt;/script>
&lt;script type="module" src="/assets/js/main.js">&lt;/script></code></pre>



<p>type 属性に module をつければ OK です。main.js にも付けましょう。これだけで OK 。Node.js レスで JavaScript を記述することができます。</p>



<h2>ライブラリの import</h2>



<p>ではライブラリの扱いはどうしましょう？グローバルで読み込むのもアリですが、import で読み込むことも可能です。import maps という web標準の機能を利用します。が、しかし、この機能はまだ使えるブラウザ環境が少ないです。</p>



<p><a href="https://caniuse.com/import-maps">Import maps | Can I use... Support tables for HTML5, CSS3, etc</a></p>



<p>大きなところでは Safari がダメですね。意外に Edge はイケる。これは Polyfill を利用します。</p>



<p><a href="https://github.com/guybedford/es-module-shims">guybedford/es-module-shims: Shims for new ES modules features on top of the basic modules support in browsers</a></p>



<pre class="wp-block-code"><code lang="javascript" class="language-javascript">&lt;script async src="https://ga.jspm.io/npm:es-module-shims@1.5.8/dist/es-module-shims.js">&lt;/script>

&lt;!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
&lt;script type="importmap">
{
  "imports": {
    "react": "https://ga.jspm.io/npm:react@18.0.0-rc.0/index.js"
  },
  "scopes": {
    "https://ga.jspm.io/npm:react@18.0.0-rc.0/": {
      "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
    }
  }
}
&lt;/script>

&lt;script type="module">
  import react from 'react';
  console.log(react);
&lt;/script></code></pre>



<p>ブラウザサポート状況はこんなかんじ。</p>



<figure class="wp-block-image size-full"><img src="https://wp.katsushi-ougi.com/wp-content/uploads/2022/06/image-3.png" alt="" class="wp-image-3375"/></figure>



<p>普通に使う程度なら問題無さそう。でもグローバルとして扱えばよいかなと個人的には思います。</p>



<h2>ファイルを大量にロードするが問題ないのか？</h2>



<pre class="wp-block-code"><code lang="markup" class="language-markup">&lt;script type="module" src="/assets/js/libs/utils/EventEmitter.js">&lt;/script>
&lt;script type="module" src="...">&lt;/script>
&lt;script type="module" src="...">&lt;/script>
...</code></pre>



<p>こういう記述が続くので、ロードするファイル数がかなり多くなります。gulp などで、JavaScript ファイルを一個にまとめて通信量を減らした経験がある人には眉をひそめる記述でしょう。</p>



<p>が、それは HTTP/1.1 時代のお話。現代は HTTP/2 の時代です。HTTP/2 はストリームという概念を導入したことで、並列で通信が可能になりました。HTTP/1.1 のように、Aのロード終了後にBをロード...というシリアルな処理にはならない模様です。画像もスプライト画像にして通信量を減らす、という時代もありましたがそれも過去の話になりました。</p>



<h2>デメリット</h2>



<p>HTML に module を記述するのが結構面倒です。大量にモジュールを扱うウェブアプリなどには不向きでしょう。ウェブサイト向きかなと思いました。</p>

JavaScript をモジュールバンドラ無しでモダンに書く方法

<p>AWS Lambda を利用する必要が出てきそうだったので学習。まずはアクセス権について。Lambda には3つのアクセス権が関与します。</p>



<ol><li>Lambda 関数の登録権限 (開発者用の IAM ユーザー)</li><li>Lambda 関数の実行権限 (開発者用の IAM ユーザーやイベントの発生源など呼び出し元に対する IAM ロール)</li><li>Lambda 関数の実行ロール (Lambda 関数自体に設定する IAM ロール)</li></ol>



<h2>開発者となる IAM ユーザーに割り当てる管理ポリシー</h2>



<p>AWSLambda_FullAccess ポリシーを使います。S3 や DynamoDB などへの書き込み権限も付与されます。</p>



<h2>Lambda 関数に結びつける IAM ロールに割り当てる管理ポリシー</h2>



<p>ほとんどの場合、AWSLambdaBasicExecutionRole を適用すれば十分。このポリシーは CloudWatch Logs への書き込みアクセス権を与えます。</p>



<h2>IAM ユーザーを作成する</h2>



<p>IAM コンソールを開いて、ユーザーを追加します。ユーザー名は lambda-devuser とします。プログラムからのアクセスも、パスワード - AWS マネジメントコンソールへのアクセスも許可します。</p>



<p>次にアクセス権限の付与の画面に進みます。</p>



<p>「既存のポリシーを直接アタッチ」から AWSLambda_FullAccess を探して付与します。</p>



<p>次のステップのタグは何も設定しないで次に進みます。</p>



<figure class="wp-block-image size-large"><img src="https://wp.katsushi-ougi.com/wp-content/uploads/2022/06/image-1024x656.png" alt="" class="wp-image-3338"/></figure>



<p>ユーザーが出来上がりました。CSV は保管しておきましょう。</p>



<p>さらに以下のポリシーを追加します。</p>



<figure class="wp-block-table"><table><tbody><tr><td>CloudWatchLogsFullAccess</td><td>CloudWatch Logs を参照したり設定変更したりするのに必要</td></tr><tr><td>CloudWatchEventsFullAccess</td><td>CloudWatch イベントを作成したり管理したりするのに必要</td></tr><tr><td>AmazonS3FullAccess</td><td>S3の操作に必要</td></tr><tr><td>AmazonAPIGatewayAdministrator</td><td>API Gateway の作成やデプロイに必要</td></tr><tr><td>AmazonSESFullAccess</td><td>SES の操作に必要</td></tr><tr><td>AmazonSQSFullAccess</td><td>SQS の操作に必要</td></tr><tr><td>AWSCloud9Administrator</td><td>Cloud9 環境を構築するのに必要</td></tr><tr><td>AWSCloudFormationFullAccess</td><td>CloudFormation の操作に必要</td></tr></tbody></table></figure>

Lambda 実行ロールの作成