jQueryなどを利用する場合によく使われる外部ライブラリを配布している、CDNなどを利用してる方は多いと思います。
また、開発環境などではモジュールパンドラーを利用してReactやVueを利用していたり、サーバーサイドでNode.jsでモジュールを取り込んでい利用するなど、様々な利用方法があります。

# どんな方法が存在するのか？　また、その記述法とは？
まず前提条件として
- フロントサイド（ブラウザ実行）
- サーバーサイド（サーバー実行Node.js）
- +モジュールパンドラーを利用する場合の違い
があります。

問題は、それぞれの記述法が異なっていたり、選択肢がいくつかある点です。

## フロントサイド（ブラウザ実行）

### htmlにそのまま読み込む

- 通常jsは下記のように取り込みます。
```html
<script src="***.js" />
```

- モジュールを利用する場合は以下のように指定する必要があります。
```html
<script src="***.mjs" type="module" />
```
.jsでもいけますが、.mjs利用が推奨されています。


- importmapを使う事で外部モジュールのエイリアスを指定できる。

```html
<script type="importmap">
{
  "imports": {
    "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js", 
    "@" : "./originalmodule.js"
  }
}
</script>
```

上記のようhtml上にimportmapで外部モジュールのエイリアスを指定すると

```js
  import * as _ from 'lodash';
  import {OriginalFunc} from '@';

```
のように使う事ができます。


外部モジュール利用で特にキャッシュを気にする事はないと思いますが、自作モジュールを読み込む場合はパラメーターなどを手動で付与するなどの
対策をしないとキャッシュ依存が生まれる場合があります。


## サーバーサイド（サーバー実行Node.js）

サーバーサイドで外部モジュールを読み込む方法は大きく２つあります。

- Commmonモジュール 
Node.jsデフォルトのモジュール形式です。同期で読み込みます。jsが非strictモードになります。
```js
// モジュールのエクスポート
module.exports = {
    Own = func(){ return "Own" }
};

// モジュールのインポート
const Own = require('./Own.js');
```
拡張子は.cjsが推奨


- ESモジュール
フロント側や、パンドラーでも広く使われてるESモジュール形式。非同期で読み込み。
```js
//　モジュールのエクスポート
export const Own = function(){}

// モジュールのインポート
import {Own} from "***.mjs";
```
node コマンドラインで実行する場合 .mjsとして指定する必要あり。


## +モジュールパンドラー、ビルドツールを利用する場合の違い

現在の主流はESモジュールなのですが、Node.jsの基本はCommonモジュール形式です。
ESモジュールを使うにはモジュールシステムの変更を明示するか、さきほどの例のように.mjs拡張子をつける必要があります。

- モジュールシステムを変える

- package.jsonに  type:moduleを明記する
```json
{
  "type": "module"
}
```
nodeコマンドは同ディレクトリのpackage.jsonを参照しますので、これで、.jsのままでもesモジュール形式での読み込みが可能になります。


- node オプションにtypeを明記して実行する　＞　x

一部解説などで、--input-type=module オプションを指定するとesで読み込み可能との解説がありましたが、利用できませんでした。
```sh
(node:78105) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
```

-  多くの場合はビルドツール（webpack,Rollup,Percel,Vite）と組み合わせて使う方が望ましいです。

# 最後に・・・多言語と比べてお複雑なjs回り
jsを取り巻く環境は非常に複雑で、Nodeによるバージョンの違い、ブラウザによるサポートの違いなど様々です。
都度、ドキュメントを参考にテストコードを書いて、理解不足を補っていくのが望ましいです。





 
## オブジェクトをグループでまとめて処理する。

例えば、都道府県のjsonデータがあり、関東地方や関西地方などで、グループにして処理したい場合などに利用できます。

- 参考、[Mozilla サンプル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy)　

```js
const datas = [
  { name: "kanagawa", area: "kanto"},
  { name: "aichi", area: "tokai" },
  { name: "mie", area: "tokai"},
  { name: "oosaka", area: "kansai" },
  { name: "tokyo", area: "kanto"},
];
const result = Object.groupBy(datas, ({ area }) => area);

console.log(result);
```


実際には下記のようなデータとして出力されます。

```json
{
    "kanto": [
        {
            "name": "kanagawa",
            "area": "kanto"
        },
        {
            "name": "tokyo",
            "area": "kanto"
        }
    ],
    "tokai": [
        {
            "name": "aichi",
            "area": "tokai"
        },
        {
            "name": "mie",
            "area": "tokai"
        }
    ],
    "kansai": [
        {
            "name": "oosaka",
            "area": "kansai"
        }
    ]
}
```



## このデータに順番は担保されているか？

[参考](https://qiita.com/suguru03/items/bf48610225fefcb0f45e) こちらの記事を見る限り、オブジェクトの順序にはブラウザ間で誤差があるようです。
今回の使い方では順序の問題は出ませんが、順序を指定してデータを取り出す方法をいくつか考えてみます。


## KeyとValueを分解して処理してみる。

```js
console.log(Object.keys(result));
console.log(Object.values(result));
```

標準組み込みオブジェクトのObjectを利用する事により、さきほどの値を keyとvalueの配列（Array）に分ける事が可能です。
持ってるIndexの値は同じなので、それを利用して出力する順番を変更可能です。

```js
    //さきほどの続きresultを処理
    const area = Object.keys(result).sort();
    /* ソート結果
    [
        "kansai",
        "kanto",
        "tokai"
    ]
    */
    for(const [i,v] of area.entries()){
      console.log(result[v]);
    }
```

現時点ではこうなってくると Underscoreなどのライブラリがあった方が・・・となりそうです。



groupByでオブジェクトをグルーピング - JSを利用した配列操作、オブジェクト操作について

スタッフちゃん

## VanJSとvan-elementを利用してShadowDom＋リアクティブなUIを実装する

ウェブのシステムや管理画面ではフロントの実装でReactを利用する事が多いですが、
Webサイトや軽量なパーツを実装する場合は、軽量なフレームワークや生JSで実装する事が多いです。

そして、軽量なフレームワークの中でも最近はVanJSを利用しています。
- [VanJS](https://van-element.pages.dev/)

複数のサイトにまたがりCSSの影響を受けない為に今回はShadowDomを利用できるvan-elementを紹介します。
- [van-element](https://van-element.pages.dev/)

# ShadowDomとWebコンポーネント
平たく言えば、SodowDomとしてカプセル化されたHtmlElements郡であり、これらはカプセル外にあるCSSの影響を受けません。
そのようなパーツは再利用性が高い、webコンポーネントとして利用が可能になります。

# 導入方法
[インストール、利用方](https://van-element.pages.dev/intro/get-started.html)
defineという関数を追加するだけで、簡単に利用ができます。
jsでそのまま実装するよりもコード記述量も少なくて、直感的でわかりやすくなります。

サンプルコード
```js
import { define } from "vanjs-element";
import van from "vanjs-core";

const {p,button} = van.tags;

export const SetVanElements = () => {

    define("custom-element", () =>
        p(
            "I am a Van Element 🎉 ",
            button({ onclick: () => alert("Hello from VanJS 🍦") }, "Click me")
        )
    );
}
```

これで、実際にHTML部分に 
```html
  <custom-element></custom-element>
```
と入力するだけで、利用が可能になります。




VanJSとvan-elementを利用してShadowDom＋リアクティブなUIを実装する

## 一番のウリはgroupBy
※ObjectにもMapにも存在します
[参考](https://qiita.com/silane1001/items/5f2a4f06e964e7443433)

これらを、自身で実装しようとする場合、下記のように関数を実装する必要があります。
[参考](https://qiita.com/nagtkk/items/e1cc3f929b61b1882bd1)

配列の操作については下記で色々なパターンケースが紹介されてますので、こちらもご確認ください。
[参考](https://ics.media/entry/200825/)

データをグルーピングして、表示する際には非常に便利です。

## ReactでMapやObjectでgroupByを利用する場合
オブジェクト化されたデータ（例えばarr）をReactなどでレンダリングする場合はmap関数を利用する必要があります。
そのため、もとのオブジェクト(arr)をMap.keys(arr).map や Map.value(arr).map ,Map.entries(arr).map　などで、mapが利用できる形に利用する必要があります。
グループ化する事で、カテゴリー別に見出しをつけて、データを表示するなどの処理が楽になります。

## TypescriptでgroupeByが許可されない場合
下記を参照して、形を自身でプロジェクトに追加など
[参考](https://stackoverflow.com/questions/77663053/how-to-enable-object-groupby-in-typescript-and-node-js)


JSにおいてMapオブジェクトを、どんな時に利用するか？

jsで外部ライブラリ（モジュール）を利用するすべての方法について


# promiseの基本
https://qiita.com/cheez921/items/41b744e4e002b966391a


# promiseとは
プログラムには同期処理と非同期処理があります。同期処理は順番通り処理実行される処理ですが、非同期処理は同期処理とは別の流れがプログラムの中にできる事を指します。
１本の川の流れが、２本になるみたいなイメージです。

promiseを知る前にコールバック地獄についておさらいしておきましょう。
[コールバック地獄の例](https://qiita.com/umeko2015/items/2fdb2785eac8f4117f23)
上記リンク先のように関数が入れ子で入り続ける事をコールバック地獄と言います。
これでもプログラム自体は動作しますが、可読性の弱さはいなめません。

promiseを使えば、このコールバック地獄を避ける事が可能になります。

## promise初心者が注意するべき点

非同期の処理はいつ実行されるかという点です。
通常は上から順番どおり処理が実行されていくのですが、その記述順通りいかないのがpromiseとなります。

- promiseの動きがわかるサンプル

```js
console.log("0");
const rt = new Promise((resolve, reject) => {
  const a = "3";
  resolve(a);
  //reject(); リジェクトすると .catchが実行される
})
  .then((v) => {
    console.log(1);
    return v;
  })
  .catch(() => {
    console.log(2);
  })
  .then((v) => {
    //resolve()->thenから来るとvは出力
    //reject()->catchから来ると vはundefinedになる。 returnが無い為
    console.log("3 is ", v);
    return v;
  });
console.log("4");
```
こちらのコードを実行すると 0 -> 4 -> 1-> 3 is 3　という形でoutputされます。

また、最後の行に下記のように追加して
```js
console.log("rt is ",rt);
```
戻り値を設定したはずのrtを出力した場合どうなるでしょうか？
最後のthenからvの３の値が出力されるかもと思われるかもしれませんが、実際にはそのような動きにはなりません。実際にはpending状態のプロミスが下記のように返されるだけです。
```
rt is Promise {<pending>}
```
一度別れた川は別々になってしまったため、v=3の値を値を返す事はできません。

## 何のためにpromiseを使うのか？
先程、２本の川に別れてしまう＝並行処理の話しをしました。
これは例えば、プログラム本体の外からjsonなどのデータを取得する際に利用が必要になります。

# async await

今回は外部ファイルを呼ぶfetchなどを利用しませんが、先程のrtを受け取って出力するにはどうすれば良いでしょうか？

- １つ目は.thenメソッドを呼び出して、処理する方法です。
```js
rt.then((v)=>{
    console.log("rt2 is",v);
})
```
さきほどのpendding状態のrtを引き継いで、returnされてくる値を取得表示が可能になります。

- ２つ目の方法はasync,awaitを利用してpromiseを解決する事です。
```js
// 書き方１
async function getRT(rt){
    const r = await rt;
    console.log("r is ", r);
}
getRT(rt);

// 書き方２ 即時関数とクロージャスコープを作って１
(async function(rt){
    const r = await rt;
    console.log("rt2 is ", r);
  
})(rt)

//書き方３ 即時関数とクロージャスコープを作って２
(async (rt) => {
  const r = await rt;
  console.log("r is ", r);
})(rt);

```

# 最後に
promiseにasync await、さらにジェネリック関数などを理解する事で、今後のjsのフレームワークがどのような処理を行っているのかの理解が少し深まります。




9ヶ月前

jsで外部ライブラリ（モジュール）を利用するすべての方法について

Toysking.news
2024/7/14 8:22 公開

関連記事一覧

groupByでオブジェクトをグルーピング - JSを利用した配列操作、オブジェ..

VanJSとvan-elementを利用してShadowDom＋リアクティブなU..

JSにおいてMapオブジェクトを、どんな時に利用するか？

js初心者のための、promiseの基本について

関連カテゴリ一覧

9ヶ月前

jsで外部ライブラリ（モジュール）を利用するすべての方法について

Toysking.news2024/7/14 8:22 公開

関連記事一覧

groupByでオブジェクトをグルーピング - JSを利用した配列操作、オブジェ..

VanJSとvan-elementを利用してShadowDom＋リアクティブなU..

JSにおいてMapオブジェクトを、どんな時に利用するか？

js初心者のための、promiseの基本について

関連カテゴリ一覧

Toysking.news
2024/7/14 8:22 公開