マーカーをクリックしたときや、任意の位置にポップアップを表示させることができます。
既定の背景色は「白」ですが、css でカスタマイズできます。

こんな見た目にカスタマイズできます

• Mapbox custom popup window - JSFiddle - Code Playground

const opt = {
  container: 'map',
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
};

opt.center = [138.73072, 35.36286];
opt.zoom = 13;
const map = new mapboxgl.Map(opt);

map.addControl(new mapboxgl.NavigationControl());

const html = `<H3>富士山</H3>
<span>
富士山（ふじさん、英語: Mount Fuji）は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と、山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。標高3776.12 m、日本最高峰（剣ヶ峰）の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。<a href='https://ja.wikipedia.org/wiki/%E5%AF%8C%E5%A3%AB%E5%B1%B1' target="_blank">Wikipedia より</a>
<span>
`;

// create the popup
const popup = new mapboxgl.Popup({ 
  //anchor: 'bottom',
  className: 'my-class', 
  closeButton: false,
})
.setMaxWidth('400px')
.setHTML(html);

// create the marker
new mapboxgl.Marker()
  .setLngLat([138.73072, 35.36286])
  .setPopup(popup) // sets a popup on this marker
  .addTo(map)
  .togglePopup();

body { margin: 0; padding: 0; }

/* $popupBkColor: darkblue; */

.my-class {
  color: white;  
}

.my-class .mapboxgl-popup-content {
  background-color: darkblue;
  box-shadow: 6px 6px 6px rgba(1,1,1,.4);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  align-self: center;
  border-bottom: none;
  border-top-color: darkblue;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  align-self: center;
  border-top: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  align-self: center;
  border-left: none;
  border-right-color: darkblue;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  align-self: center;
  border-right: none;
  border-left-color: darkblue;
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  align-self: flex-start;
  border-top: none;
  border-left: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  align-self: flex-end;
  border-top: none;
  border-right: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  align-self: flex-end;
  border-bottom: none;
  border-right: none;
  border-top-color: darkblue;
}

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  align-self: flex-start;
  border-bottom: none;
  border-left: none;
  border-top-color: darkblue;
}

解説

Popup 生成時のオプションに className: 'my-class' などとして任意のクラス名を割り当てることができます。
が、これは 吹き出し全体(コンテンツ部と矢印＜三角形のつなぎ＞部)を示します。
このクラスの backgroud-color を指定しても期待した結果にはなりません。
既定の吹き出しっぽいデザインを完全に捨てて、オリジナルの吹き出しを配置する場合は使用することになると考えられます。

ポップアップのコンテンツ部は .mapboxgl-popup-content というクラスを上書きすることで背景色などを変更できます。
矢印＜三角形のつなぎ＞部のところはちょっと面倒で、ポップアップが表示される8方向に応じて bottom, left, top, right, top-right, top-left, bottom-right, bottom-left のそれぞれのクラスを上書きする必要があります。

Popup の anchor を指定しない場合は、ポップアップの出現方向が可変になるため、8方向すべての CSS 定義が必要になります（次の図は bottom-right の例）。

anchor を bottom と設定した場合は、ポップアップは上方向にしか表示されず、CSS上書きは bottom だけで大丈夫そうです。

ポップアップの幅は、Popup.setMaxWidth('400px') として拡張できます。高さはコンテンツ次第なようなので、制限する場合は自力で行う必要がありそうです。

ギモン

anchor の CSS セレクタは

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {

としていますが、

.my-class .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {

こう書きたかったのですよね。でも効いてくれませんでした。
「一つのマーカーのポップアップのみ、背景色を変える」ということができないかな？と考えたのですが・・・。

参考

• クリック時にポップアップを表示 | Mapbox GL JS | ドキュメンテーション | Mapbox
• マーカーインスタンスにポップアップを添付 | Mapbox GL JS | ドキュメンテーション | Mapbox

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

クロージャーとは

「外側のスコープにある変数への参照を保持できる」という関数が持つ性質のこと。

...なんのこっちゃ。

実際にクロージャーを用いたコード

function outside() {

    let count = 0;

    function inside() {
        count = count + 1;
        return count;
    }
    return increment;
}

このような関数があるとします。
この時、

const myCounter = outside();
console.log(myCounter());

このように、outsideを実行して、変数myCounterに格納し、中身をみてみると。

>>  function inside() {
        count = count + 1;
        return count;
    }

当然、関数が返ってきます。

では、下のようにmyCounterを呼び出した結果をみてみると

console.log(myCounter());

>> 1

この時、countは、 「スコープチェーン」 によりoutside配下のcountの参照します。
スコープチェーンとは、
変数を参照する際には、現在のスコープから外側のスコープへと順番に変数が定義されているかを確認することです。
つまり、現在のスコープ

    function inside() {  //ここ  }

に、countなんて定義されてないぞ！!しゃーない、外に見に行くか。はー、めんどくさ。

function outside() {
    let count = 0;
}

おお、すぐいた！！
ということで、一つ外側のスコープoutsideにcountが定義されてたので
めでたく count が　0であることが分かりました。
そして、insideで定義された処理を実行した結果、当然返り値は

>>1

となるのです。
では、二回実行するとどうなるか。

console.log(myCounter());
console.log(myCounter());

>> 1
>> 2

となります。。。。なんでや。

これこそが 「クロージャー」 の動きとなります。

なぜ、このような挙動をとるのか。

JavaScriptの「静的スコープ」と「メモリ管理の仕組み」によります。

「静的スコープ」について

JavaScriptのスコープには、どの識別子がどの変数を参照するかが静的に決定されるという性質があります。

つまり、どこでinside関数を呼び出そうが、inside内のcountは、outside直下のcountを参照するということですね。

「this」という特別なキーワードだけは、呼び出し元によって動的に参照先が変わります。

「メモリ管理の仕組み」について

変数のデータはパソコンの上のメモリに保存されます。これは、決まったタイミングで解放しないといけません。メモリは有限だからです。
JavaScriptでは 「ガベージコレクション」 という「どこからも参照されなくなったデータを不要なデータと判断して自動的にメモリ上から解放する仕組み」をとっています。

逆にいうと、参照され続けている限りメモリには保存され続けます。
「関数の中で作成したデータは、その関数の実行が終了したら解放される」訳ではありません。

例えば

function outX () {
  let x = 1;
  console.log(x);
}
outx();

この関数が実行された時、xが参照する1が保管されたメモリが確保されますが、関数終了後に、このメモリは解放されます。これは「関数が終了したから」ではなく「xが参照されなくなったから」です。

よって表題例の場合
内側の関数内から、外側の関数内の変数countを参照しているため、メモリが解放されず値を保持し続けるということですね。

よって一回目の

myCounter();

が実行された段階で、countには　1　が格納され、メモリ上に保持されるので

二回目に

myCounter();

が呼び出された時、返り値は　2　となります。

また、このように再度outside()を実行しなおしすと、

const myCounter = outside();
const myCounter2 = outside();

console.log(myCounter()); // => 1
console.log(myCounter2()); // => 1

と、別々の関数が作り直されて　let count = 0が 各々で実行されるので、当然結果は上記のようになります。

こんなことしなくても、関数内でプロパティーを定義したらいいやん。

と思われるかもしれません。

下記のcountUp関数は、自身のプロパティcountの値に　＋１　をして、呼び出し元に返却する関数です。

function countUp() {
    // countプロパティを参照して変更する
    countUp.count = countUp.count + 1;
    return countUp.count;
}
// 関数オブジェクトにプロパティとして値を代入する
countUp.count = 0;
// 呼び出すごとにcountが更新される
console.log(countUp()); // => 1
console.log(countUp()); // => 2

これでも、プロパティとして値を保持し続けます。しかしクロージャーとの違いは、

関数の外からでも値を変更できてしまう。ということです。

countUp.count = 0;

そもそもこの式が、外から関数のプロパティーの値を操作してますよね。
関数をconstで 変数に格納して定義したとしても、関数もオブジェクトでありミュータブルであるため、プロパティの値の変更は可能です。

詳しくはこっちの記事をごらんください。

https://qiita.com/sho_U/items/3d64d23fe31ed09e9dcb

上記のクロージャーだと、関数の外から直接countの値を変更することはできません。

関数の外から count = 100;　みたいなことをしても 関数スコープに阻まれるので操作できないのですね。

これこそがクロージャー（「閉ざされた。」）の由来であり、一番のメリットであります。この辺は勝手な想像ですが。

ということで　自分なりに学習したクロージャーについてでした。

。。。合ってますか？

やりたいこと

formのselect(プルダウンメニュー)で特定のものを選んだら
1.追加項目を出す
2.追加項目に必須項目を設定する

結論

jsを使って入力可否を入れ替える。

index.html

<form method="post" action="〇〇.php" name="〇〇_form">
  <!--もともと表示している項目-->
  <table>
    <tr>
      <th>生産地</th>
      <td><input name="生産地" type="text" id="name" required></td>
    </tr>
    <tr>
      <th>種類</th>
      <td>
        <select name="種類" id="fruitstype" onchange="entryChange();" required>
          <option hidden value="">選択してね</option>
          <option value="ぶどう">ぶどう</option>
          <option value="りんご">りんご</option>
        </select>
      </td>
    </tr>
  </table>
  <!--りんごが選ばれたら表示したい項目-->
  <table id="fruitstypeID">
    <tr>
      <th>品種</th>
      <td><input class="fruitstype-additional-items" size="30" type="text" name="品種" required /></td>
    </tr>
    <tr>
      <th>糖度</th>
      <td>
        <select class="fruitstype-additional-items" name="糖度" required>
          <option hidden value="">選択してね</option>
          <option value="あまい">あまい</option>
          <option value="あまくない">あまくない</option>
        </select>
      </td>
    </tr>
    <div>
      <input type="submit" value="確認" />
    </div>
</form>

script.js

function entryChange() {
  if (document.getElementById('fruitstype')) {
    id = document.getElementById('fruitstype').value;
    //りんごが選ばれたら
    if (id == 'りんご') {
    //追加項目を表示
      document.getElementById('fruitstypeID').style.display = "";
    //追加項目の入力を有効化
      $('.fruitstype-additional-items').removeAttr('disabled');
    //りんごが選ばれなかったら
    } else if (id != 'りんご') {
    //追加項目を非表示
      document.getElementById('fruitstypeID').style.display = "none";
    //追加項目の入力を無効化
      $('.fruitstype-additional-items').attr('disabled', 'disabled');
    }
  }
}
window.onload = entryChange;

考え方

必須項目であるrequiredをつけ外しするのではなく入力可否であるdisabledをつけ外しする。
ぶどうを選んだときでも追加項目が入力可能のままだと確認画面で入力されていないまま表示されてしまうが、disabledを設定することによって確認画面での表示も、必須項目未入力判定も出ない。

他に試した方法

1.PHPの条件分岐(ボタンを押すなどして受け渡しをしなければ発動しないので違う)
2.非同期ajax（その画面のままやるなら非同期型、もっと単純なはず）
3.requitedのつけ外し（思ったままシンプルに）
$('.fruitstype-additional-items').attr('requited');が出来るんじゃないかと思っていたが、出来なかった。

まとめ

「requitedのつけ外し」ができそうで出来なくてかなり時間を使いました。requitedのつけ外しはこんなにシンプルじゃなければ出来るようなので機会があればそっちもやってみたいな…と思います。機会があれば……

Nuxtでlayout適用時にページが表示されない

起きていること

layoutを適用した場合、pagesの<template>タグで設定した内容が表示されない。

SamplePage.vue

<template>
  <div>
    <!-- いい感じのコンテンツ -->
  </div>
</template>
<style>
</style>


<script>
export default {
  layout:'MyLayout'
};
</script>

解決策

layoutでは、<nuxt/>タグが必要です。
この<nuxt/>タグがlayoutに存在している場合、パスと一致するページ(pagesフォルダ内のファイル)を呼び出します。

1. はじめに

こんにちは！みなさま楽しいプログラミンライフをお過ごしでしょうか？
最近TypeScriptでのReact開発を勉強しています。

ObjectのKeyに変数でアクセスしようとしたときに、
型付けのところでハマったポイントがあったので、備忘録として残しておきたいと思います。

	Version
node.js	14.12.0
yarn	1.22.7
TypeScript	3.8.3

2. やりたいこと

以下のような、
object2のcategoryのvalueと、object1のkeyが一致するvalueの配列に、object2をまるっとpushしたい。object3のようになるイメージ。

const object1 = {
  category1: [],
  category2: []
}

const object2 = {
  id: 1,
  title: "nazeudon",
  category: "category1",
}

const object3 = {
  category1: [
    {
      id: 1,
      title: "nazeudon",
      category: "category1",
    },
  ],
  category2: []
}

3. JavaScriptだとこう書ける

とてもシンプル。まさに。Simple is the Best.

const cat = object2.category;
object1[cat].push(object2);

4. ハマったポイント

同じことをTypeScriptでやろうとすると。。。

const cat = object2.category;
object1[cat].push(object2);

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ category1: never[]; category2: never[]; }'.
No index signature with a parameter of type 'string' was found on type '{ category1: never[]; category2: never[]; }'.(7053)

要素は暗黙のうちに 'any' 型を持っています。なぜなら、型 'string' の式は型 '{ category1: never[]; category2: never[]; }' をインデックス化するために使用できないからです。
type '{ category1: never[]; category2: never[]; }' には、型 'string' のパラメータを持つインデックスシグネチャが見つかりませんでした。

そりゃ、TypeScriptだからね。型付けしろと言うわけですよね！
interfaceで型付けしてやって〜、でも。。。

interface OBJECT1 {
  category1: OBJECT2[]
  category2: OBJECT2[]
}

interface OBJECT2 {
  id: number
  title: string
  category: string
}

const object1: OBJECT1 = {
  category1: [],
  category2: []
}

const object2: OBJECT2 = {
  id: 1,
  title: "nazeudon",
  category: "category1",
}

const cat = object2.category;
object1[cat].push(object2);

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'OBJECT1'.
No index signature with a parameter of type 'string' was found on type 'OBJECT1'.(7053)

要素は暗黙のうちに 'any' 型を持っていますが、それは 'string' 型の表現が型 'OBJECT1' のインデックスに使用できないからです。
型 'OBJECT1' の型 'string' のパラメータを持つインデックス・シグネチャは見つかりませんでした。

おっと、これでもダメなのね。OBJECT1のインデックスにString型を指定できないと言われています。

ってことで、この解決に小一時間費やしたので、解決策を残しておきます。

5. TypeScriptでの書き方（例）

const cat: keyof OBJECT1 = object2.category as keyof OBJECT1;
object1[cat].push(object2);

こんな感じで、cat変数とobject2.categoryを共に、OBJECT1のkeyですよ、と明示してあげれば無事動きました！！

6. 最後に思ったこと

• 自分のわかっている知識の範囲だと、型付けはバグを防げて便利だなと言う印象。
• 自分のわからない範囲の知識が必要で、型に起因するエラーが出ると、型付けめんどくさ！ってなる。
• 結論、もっと勉強しましょう。今回も良い勉強になりました。

日本語　☞　英語

変数　→　variable
定数　→　constant
配列　→　array
オブジェクト指向プログラミング　→　object‐oriented programming(OOP)
演算子　→　operator
識別子　→　identifier
代入　→　assignment
属性　→　attribute
キャッシュ　→　cache　（cashまたはcasheではない）

今日の名言

Done is better than perfect.
（完璧であることよりも終わらせることの方が重要）

-マーク・ザッカーバーグ

こんばんは、Sorakimeです。

昨日の投稿を読んでくださると内容が理解できると思うので、先にそちらのほうご一読を推奨します。

昨日の投稿では、骨組みだけを作りましたがあれでは結局なにも動作しません。ですから、簡単に作り方をここに書いておきます。

メソッドというかなんというかを作る方法

昨日の投稿でやりましたね。現在以下のようなソースコードになっていると思います。

shortwrite.js

var _$={
  version: '1.0'
}
window._$=_$;

これは、機能も言った通り連想配列です。ですから、ここからもっと下にキーと値というかここで言うメソッドとその動作する機能の実装をしていばよいわけです。まずは、version: '1.0'の後に,を追加して、改行してから書いていきましょう。
例えば、ここではselectという名前で、querySelectorのそのままの実装を作ってみましょう。ちなみに、この場合には無名関数、function () {}的な書き方かアロー関数、() => {}でもよいです。ここでは、引数は仮にqueryとしておきましょう。そうすれば、以下のようなソースコードが出来上がると思います。

shortwrite.js

var _$={
  version: '1.0',
  select: (query) => {
    return document.querySelector(query);
  }
}
window._$=_$

ちょっと違う、という人もいるかと思います。あと、空白に関しては一行目と4行目以外は無視してくれてよいです。

shortwrite.js

var _$={
  version: '1.0',
  select: function (query) {
    return document.querySelector(query);
  }
}
window._$=_$

これでも違う人はまぁコピペしよう。
基本的な機能はこれで完成です。まぁ、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="shortwrite.js"></script>
</head>
<body>
  <script>console.log(_$.select())</script>
</body>
</html>

なんて文書かれたらこの場合はどうしようもありませんけどね。対処法としてはif文とかでqueryに何か入ってるかを確認してから動作させるなんてことをすればよいと思います。まぁこんな感じかなぁ。

shortwrite.js

var _$={
  version: '1.0',
  select: (query) => {
    if (query!=null) {
      return document.querySelector(query);
    } else {
      return false;
    }
  }
}
window._$=_$

とまぁこんな感じで機能をどんどん追加していきます。ちなみに何個かメソッドを追加していく方法は知っていますが、メソッドなしの動作方法は知りません。考えておきますが、忘れてる可能性もあります。

ちなみに、Class文とか使うとIEでのサポートができなくなり、少し文も見にくい気がするのでこっちで書いてます。アロー関数使ってる時点でIE無理だけどね。
MDNへGO!
まぁ、最適というだけで使えるので、ファイルサイズ削減にもいいんじゃないかな。昨日さえ思いついたら、全部乗っけていって作ってもいいかも。

ということで、若干雑かもしれないですが終わります。

最後まで読んでくださり、ありがとうございました。

Unity (#1) Advent Calendar 第１日目を飾るにはものすごくふさわしくない超地味な内容となっています。申し訳ございません。

以前に
Unity(WebGL)でC#の関数からブラウザー側のJavaScript関数を呼び出すまたはその逆(JS⇒C#)に関する知見(プラグイン形式[.jslib])
という長ったらしいタイトルの記事を書きましたが、今回はこれの更新版＋αという内容となっています。
前回の記事はもう古くなってしまったので、改めて調査をしました。
(古い記事は一応古いバージョンとして残しておきます)

調査したUnityのバージョン: 2019.4.1f1 (と2020.2.0b2.3094)
(文中ではそれぞれ 2019, 2020 と省略して表記します)

どうしてもES6+でコードが書けない

なんかemscriptenの最新バージョンだとES6+でコードが書けるようになったとかならないとか。ただしUnityで使用されているemscriptenではいまだ(Unity 2020)にES6+でコード書くと怒られます。

同じ関数名の関数はどちらかが上書きされる

複数の.jslibを用意してコンパイルすると、同じスコープ(ブロック)に展開されます。
なので、別々の.jslibファイルであっても同じ関数名の関数を定義した場合、どちらかが上書きされてしまいますので注意が必要です。ですので、名前が被らないような少し長めな関数名にすることがいいでしょう。
(どのような順番で上書きされるのかまでは未調査)
特に、アセットストアにあるWebGL用のアセットをインポートすると高確率で.jslibファイルがありますので、もしかするとこういったアセットの.jslibの関数を上書きしてしまう可能性があることに注意してください。

逆に、これがとても有効に働くときもあります。それがUnity自身が用意している.jslib(実際は.js)の上書きです。
例えば、WebCamTextureのWebGLビルド用ソースはWebCam.jsというファイルになっています。ただ、このWebCam.jsは複数カメラが接続された状態でのカメラの選択などが行えないなどの非情なまでのバグがあります。このWebCam.jsで定義されている関数と同じ関数名で正しく動作する関数を定義した.jslibファイルを用意してコンパイルすればきちんとカメラデバイスを選択できるようになります。
きちんとデバイスを選択できるようにしたサンプル

dynCallパターン

dynCallのパターンが2019では 165パターンに結構増えており、さらに2020においては566パターンとめちゃくちゃ増えてます。
ちなみに、C:\Program Files\Unity\Hub\Editor[version]\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten にあるemscripten-version.txtの内容を見ると2019, 2020ともに"1.38.11"となっており一緒でした。
同じバージョンなのになぜパターン数が違うのかが疑問です。

dynCallデータ型に'j'が追加される(2019～)

データ型に'j'が追加されています。
ドキュメントから引用させていただくと

• 'v': void type
• 'i': 32-bit integer type
• 'j': 64-bit integer type (currently does not exist in JavaScript)
• 'f': 32-bit float type
• 'd': 64-bit float type

となっており'j'はBigIntとして扱うのでしょう。
(なぜ'j'なのかをDiscordで聞いてみたら'i'の次だからそうです)
とすると、HEAP64やHEAPU64があるのかと予想しましたが2020でもありませんでした。
このIssueの最後の開発者コメントで、WASM_BIGINTフラグを有効にすることでHEAP64が追加されるということです。
調べてみるとWASM_BIGINTフラグは1.39.13で追加されたもので、試せる環境が手元にないため未検証です。

Runtimeオブジェクトの廃止(2019～)

古いバージョンでは、dynCall()などのメソッドはRuntimeオブジェクトにありましたが、このRuntimeが廃止されているようで見当たりませんでした。dynCall()も見当たりません。ですので、dynCall()の代わりに直接dynCall_viといったパターン分用意されたメソッドを使用します。

古いバージョン(2018以前?)でのdynCall_viiの実行

// ptrCSFuncは、C#側関数のポインター
Runtime.dynCall('vii', ptrCSFunc, [arg1, arg2]);

新しいバージョン(2019以降)でのdynCall_viiの実行

Module.dynCall_vii(ptrCSFunc, strPtr1, strPtr2);

数値配列を渡す(引数)、数値配列を戻す(戻り値)

配列を引数に渡すと.jslib側ではポインターとして受け取ります。ですのでポインターから配列に戻す処理が必要です。
戻り値として配列を戻す場合は、_malloc()したポインターで戻すということをしなければなりません。
固定長配列でしたら、それほど苦労せずに受け渡すことができますが、問題は可変長配列の場合です。
特に戻り値として戻す場合は、1つのデータにしなければなりません。
配列の最初の要素に要素数を追加するという方法も考えたのですが、バイト配列だと最大でも要素数が256までになってしまいますのでこの方法はあまり有効ではありません。頑張って導き出した答えが、最初の4バイトを要素数にし以降を配列のデータとすることでとりあえずできました。
unsafeを使えばある程度すっきりしたコードになりパフォーマンスも上がりますが、ここではあえて(皆さん嫌いな)Marshalを使った方法をとってみました。

可変長配列を受け取り、可変長配列を戻すサンプルコード

// Unity

[DllImport("__Internal")]
private static extern IntPtr byteArrayFunc(byte[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    return arr;
}

private static void test() {
    // byte[]を渡し、byte[]の戻り値を受け取る
    byte[] byteArrayArg = new byte[] { 1, 2, 3 };
    IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
    byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
    Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => x.ToString()).ToArray())}]");
}

// .jslib

$utils: {
    arrayToReturnPtr: function (arr, type) {
        var buf = (new type(arr)).buffer;
        var ui8a = new Uint8Array(buf);
        var ptr = _malloc(ui8a.byteLength + 4);
        HEAP32.set([arr.length], ptr >> 2);
        HEAPU8.set(ui8a, ptr + 4);
        return ptr;
    },
},

byteArrayFunc: function (arg, len) {
    debugger;
    var byteArray = HEAPU8.subarray(arg, arg + len);
    console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

    var ret = [3, 2, 1];
    var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
    return ptr;
}

_free()するタイミング

前述のサンプルコードを見ていただくと一つ問題に気付いた方もいると思います。
_malloc()したのですから_free()しなければいけません。
戻り値として_malloc()したポインターを戻す場合、いつ_free()するかという問題にあたります。
return ステートメント以降で行わないといけないですが、当然returnステートメント以降は実行されません。
簡単な方法としてはsetTimeout()を使って_free()を実行することで一応、回避可能です。

// .jslib

    //前述のサンプルコードのarrayToReturnPtr関数部分
    arrayToReturnPtr: function (arr, type) {
        var buf = (new type(arr)).buffer;
        var ui8a = new Uint8Array(buf);
        var ptr = _malloc(ui8a.byteLength + 4);
        HEAP32.set([arr.length], ptr >> 2);
        HEAPU8.set(ui8a, ptr + 4);
        // setTimeout()で_free()を行う
        setTimeout(function() { _free(ptr) }, 0);
        return ptr;
    },
//...

もっと確実な方法としては、面倒ではありますが.jslib側に_free()を行う関数を用意しておき、C#側から戻り値を受け取り用が済んだらその関数を実行することです。

// Unity

// _free()を行う関数追加
[DllImport("__Internal")]
private static extern void execFree(uint arg);

[DllImport("__Internal")]
private static extern IntPtr byteArrayFunc(byte[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    // 用が済んだら_free()を行う
    execFree((uint)ptr);
    return arr;
}

private static void test() {
    // バイト配列を渡し、バイト配列の戻り値を受け取る
    byte[] byteArrayArg = new byte[] { 1, 2, 3 };
    IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
    byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
    Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => x.ToString()).ToArray())}]");
}

// .jslib

// _free()を行う関数を追加
execFree(ptr) {
    _free(ptr);
}

byteArrayFunc: function (arg, len) {
    debugger;
    var byteArray = HEAPU8.subarray(arg, arg + len);
    console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

    var ret = [3, 2, 1];
    var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
    return ptr;
}

可変長の文字列配列を渡す、文字列配列を戻す

じゃあ、可変長数値配列の受け渡しができたなら文字列配列も受け渡しできたい。文字コードはUTF8で。
数値配列の受け渡しを応用すれば一応できました。

// Unity

[DllImport("__Internal")]
private static extern void execFree(uint arg);

[DllImport("__Internal")]
private static extern IntPtr stringArrayFunc(string[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    Debug.Log($"ptr: {(uint)ptr}");
    int len = Marshal.ReadInt32(ptr);
    Debug.Log($"byteArry len:{len}");
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    execFree((uint)ptr);
    return arr;
}

private static string[] ptrToStringArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    Debug.Log($"stringArry len:{len}");
    IntPtr[] ptrArr = new IntPtr[len];
    Debug.Log(ptrArr);
    Marshal.Copy(IntPtr.Add(ptr, 4), ptrArr, 0, len);
    List<string> ret = new List<string>();
    for (var i = 0; i < len; i++)
    {
        var byteArray = ptrToByteArray(ptrArr[i]);
        var str = Encoding.UTF8.GetString(byteArray);
        ret.Add(str);
    }
    execFree((uint)ptr);
    return ret.ToArray();
}

public static void test()
{
    string[] stringArrayArg = new string[] { "foo", "bar", "baz" };
    IntPtr ptrStringArray = stringArrayFunc(stringArrayArg, stringArrayArg.Length);
    string[] stringArrayRet = ptrToStringArray(ptrStringArray);
    Debug.Log($"stringArrayFunc ret: [{string.Join(", ", stringArrayRet)}]");
}

// .jslib

stringArrayFunc: function (arg, len) {
    var strArray = [];
    for (var i = 0; i < len; i++) {
        var ptr = HEAP32[(arg >> 2) + i];
        var str = Pointer_stringify(ptr);
        strArray.push(str);
    }
    console.log('strArrayFunc arg: ' + strArray);

    var ret = ['hoge', 'fuga', 'piyo', 'hogera', 'ほげほげ', '叱る'];
    var retPtr = utils.stringArrayToReturnPtr(ret);
    return retPtr;
}

見ていただくとわかる通り、可変長数値配列の受け渡しもそうですが、可変長文字列配列の受け渡しはさらにめんどいことに。はっきり言ってJSONで受け渡したほうが楽です。
文字列を_malloc()した場合は、Unity側で自動で_free()してくれるのですが、C#側でUTF8に変換したいためにbyte[]に変換しているため自動で_free()されません。
(Marshal.PtrToStringAnsi()で一応、ポインターから文字列に変換することは可能ですがUTF16に変換されてしまいます。.NET5ではMarshal.PtrToStringUTF8()というまんまな関数が用意されましたが、いかんせんUnityでの.NET5のサポートはまだまだ先になるようです)

固定長数値配列の参照渡し

UnityのWebXR Exporterというアセットのソースを覗いてたら、お！っと思うコードが記述されていました。

// Unity

[DllImport("__Internal")]
private static extern void refArrayFunc(float[] a, int l);

int[] refIntArray = new int[3];
refArrayFunc(refFloatArray, a.Length);

// .jslib

refIntArrayFunc: function (arg, len) {
    Module.refIntArray = new Int32Array(buffer, arg, len);
}

このように書くことで、C#側のrefFloatArrayと.jslib側のModule.refFloatArrayは参照渡しの関係となり、.jslib側でModule.refFloatArrayの値を変更すると、(returnステートメントなしに)C#のrefFloatArrayに値が反映されます。

テクスチャー

テクスチャーは、C#側で生成し、Texture.GetNativeTexturePtr()でポインターを取得し、ポインターを.jslibの関数に渡す。.jslib側でGL.textures[ptr]でテクスチャーを参照することが可能"らしいです"。
"らしいです"というのは、C#で

var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false);
var ptr = texture.GetNativeTexturePtr();

としても、ptrは0になり有効な値になってくれません。
"もし、有効なポインターを取得する方法をご存じの方がいらっしゃればぜひご教授をお願いします"

仮に有効なポインターの値が取得できた場合は

// .jslib

textureFunc(ptr) {
    GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[ptr]);
    GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, true);
    GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA,GLctx.UNSIGNED_BYTE, video);
    GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, false);
}

といったコードを書くことにより、そのテクスチャーにimgエレメントの画像や、videoエレメントの映像、WebRTCなどのMediaStreamの映像などもほぼ直接的に表示できるようになる"はずです"。

最後に

Unity (#1) Advent Calendar 第1日目の内容は以上となります。
ちょっとネタに走った感はありますが、.jslibを書けるようになればUnityだけではできないこと、特にJS(Web)のいろんなAPIなどをUnityに取り入れることが可能となりますのでぜひかけるようになりましょう！

あ、あとまとめたテストコードも載せておきます

// Unity

using AOT;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Runtime.InteropServices;
using System.Text;
using UnityEngine;

public class jslibtest : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void execFree(uint arg);


    [DllImport("__Internal")]
    private static extern byte byteFunc(byte arg);

    [DllImport("__Internal")]
    private static extern short shortFunc(short arg);

    [DllImport("__Internal")]
    private static extern int intFunc(int arg);

    [DllImport("__Internal")]
    private static extern float floatFunc(float arg);

    [DllImport("__Internal")]
    private static extern double doubleFunc(double arg);

    [DllImport("__Internal")]
    private static extern IntPtr byteArrayFunc(byte[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr shortArrayFunc(short[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr intArrayFunc(int[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr floatArrayFunc(float[] arg, int length);


    [DllImport("__Internal")]
    private static extern IntPtr doubleArrayFunc(double[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr stringArrayFunc(string[] arg, int length);

    [DllImport("__Internal")]
    private static extern void refIntArrayFunc(int[] arr, int len);

    private int[] refIntArray = new int[3];

    private void Start()
    {
        test();

        refIntArrayFunc(refIntArray, refIntArray.Length);
        StartCoroutine(chekRefArray());
    }

    IEnumerator chekRefArray ()
    {
        while(true)
        {
            yield return new WaitForSeconds(0.3f);
            Debug.Log($"refIntArray: [{string.Join(", ", refIntArray.Select(x => $"{x}"))}]");
        }
    }

    private void Update()
    {
    }

    private static byte[] ptrToByteArray(IntPtr ptr)
    {
        Debug.Log($"ptr: {(uint)ptr}");
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"byteArry len:{len}");
        byte[] arr = new byte[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        execFree((uint)ptr);
        return arr;
    }

    private static short[] ptrToShortArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"shortArry len:{len}");
        short[] arr = new short[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static int[] ptrToIntArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"intArry len:{len}");
        int[] arr = new int[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static float[] ptrToFloatArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"floatArry len:{len}");
        float[] arr = new float[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static double[] ptrToDoubleArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"doubleArry len:{len}");
        double[] arr = new double[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static string[] ptrToStringArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"stringArry len:{len}");
        IntPtr[] ptrArr = new IntPtr[len];
        Debug.Log(ptrArr);
        Marshal.Copy(IntPtr.Add(ptr, 4), ptrArr, 0, len);
        List<string> ret = new List<string>();
        for (var i = 0; i < len; i++)
        {
            var byteArray = ptrToByteArray(ptrArr[i]);
            var str = Encoding.UTF8.GetString(byteArray);
            ret.Add(str);
        }
        execFree((uint)ptr);
        return ret.ToArray();
    }

    public static void test()
    {
        byte byteArg = 210;
        byte byteRet = byteFunc(byteArg);
        Debug.Log($"byteFunc ret: {byteRet}");

        short shortArg = 210;
        short shortRet = shortFunc(shortArg);
        Debug.Log($"shortFunc ret: {shortRet}");

        int intArg = 210;
        int intRet = intFunc(intArg);
        Debug.Log($"intFunc ret: {intRet}");

        float floatArg = 210.123f;
        float floatRet = floatFunc(floatArg);
        Debug.Log($"floatFunc ret: {floatRet}");

        double doubleArg = 210.321d;
        double doubleRet = doubleFunc(doubleArg);
        Debug.Log($"doubleFunc ret: {doubleRet}");


        byte[] byteArrayArg = new byte[] { 1, 2, 3 };
        IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
        byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
        Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => $"{x}"))}]");

        short[] shortArrayArg = new short[] { 4, 5, 6 };
        IntPtr ptrShortArray = shortArrayFunc(shortArrayArg, shortArrayArg.Length);
        short[] shortArrayRet = ptrToShortArray(ptrShortArray);
        Debug.Log($"shortArrayFunc ret: [{string.Join(", ", shortArrayRet.Select(x => $"{x}"))}]");

        int[] intArrayArg = new int[] { 7, 8, 9 };
        IntPtr ptrIntArray = intArrayFunc(intArrayArg, intArrayArg.Length);
        int[] intArrayRet = ptrToIntArray(ptrIntArray);
        Debug.Log($"intArrayFunc ret: [{string.Join(", ", intArrayRet.Select(x => $"{x}"))}]");

        float[] floatArrayArg = new float[] { 1.1f, 2.2f, 3.3f };
        IntPtr ptrFloatArray = floatArrayFunc(floatArrayArg, floatArrayArg.Length);
        float[] floatArrayRet = ptrToFloatArray(ptrFloatArray);
        Debug.Log($"floatArrayFunc ret: [{string.Join(", ", floatArrayRet.Select(x => $"{x}"))}]");

        double[] doubleArrayArg = new double[] { 5.5d, 6.6d, 7.7d };
        IntPtr ptrDoubleArray = doubleArrayFunc(doubleArrayArg, doubleArrayArg.Length);
        double[] doubleArrayRet = ptrToDoubleArray(ptrDoubleArray);
        Debug.Log($"doubleArrayFunc ret: [{string.Join(", ", doubleArrayRet.Select(x => $"{x}"))}]");

        string[] stringArrayArg = new string[] { "foo", "bar", "baz" };
        IntPtr ptrStringArray = stringArrayFunc(stringArrayArg, stringArrayArg.Length);
        string[] stringArrayRet = ptrToStringArray(ptrStringArray);
        Debug.Log($"stringArrayFunc ret: [{string.Join(", ", stringArrayRet)}]");
    }
}

var lib = {
    $utils: {
        arrayToString: function (arr) {
            var ret = '[';
            for (var i = 0; i < arr.length; i++) {
                var spl = i === arr.length - 1 ? '' : ', ';
                ret += arr[i].toString() + spl;
            }
            return ret + ']';
        },
        arrayToReturnPtr: function (arr, type) {
            var buf = (new type(arr)).buffer;
            var ui8a = new Uint8Array(buf);
            var ptr = _malloc(ui8a.byteLength + 4);
            HEAP32.set([arr.length], ptr >> 2);
            HEAPU8.set(ui8a, ptr + 4);
            // setTimeout(function() { _free(ptr) }, 0);
            return ptr;
        },
        stringArrayToReturnPtr: function (strArr) {
            var ptrArray = [];
            var enc = new TextEncoder();
            for (var i = 0; i < strArr.length; i++) {
                var byteArray = enc.encode(strArr[i]);
                var ptr = utils.arrayToReturnPtr(byteArray, Uint8Array);
                ptrArray.push(ptr);
            }
            var ptr = utils.arrayToReturnPtr(ptrArray, Uint32Array);
            return ptr;
        }
    },

    execFree: function (ptr) {
        console.log('free ptr: ' + ptr);
        _free(ptr);
    },

    byteFunc: function (arg) {
        console.log('byteFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    shortFunc: function (arg) {
        console.log('shortFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    intFunc: function (arg) {
        console.log('intFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    longFunc: function (arg) {
        console.log('longFunc arg: ' + arg);
        var ret = 128;
        return ret;
    },

    floatFunc: function (arg) {
        console.log('floatFunc arg: ' + arg);

        var ret = 128.123;
        return ret;
    },

    doubleFunc: function (arg) {
        console.log('doubleFunc arg: ' + arg);

        var ret = 128.123;
        return ret;
    },

    byteArrayFunc: function (arg, len) {
        var byteArray = HEAPU8.subarray(arg, arg + len);
        console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

        var ret = [3, 2, 1];
        var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
        console.log('jslib ptr: ' + ptr);
        return ptr;
    },

    shortArrayFunc: function (arg, len) {
        var shortArray = HEAP16.subarray(arg, len);
        console.log('shortArrayFunc arg: ' + shortArray);

        var ret = [6, 5, 4];
        var ptr = utils.arrayToReturnPtr(ret, Int16Array);
        return ptr;
    },

    intArrayFunc: function (arg, len) {
        var intArray = HEAP32.subarray(arg, len);
        console.log('intArrayFunc arg: ' + intArray);

        var ret = [9, 8, 7];
        var ptr = utils.arrayToReturnPtr(ret, Int32Array);
        return ptr;
    },

    floatArrayFunc: function (arg, len) {
        var floatArray = HEAPF32.subarray(arg, len);
        console.log('floatFunc arg: ' + floatArray);

        var ret = [3.3, 2.2, 1.1];
        var ptr = utils.arrayToReturnPtr(ret, Float32Array);
        return ptr;
    },

    doubleArrayFunc: function (arg, len) {
        var doubleArray = HEAPF64.subarray(arg, len);
        console.log('doubleFunc arg: ' + doubleArray);

        var ret = [6.6, 5.5, 4.4, 3.3, 2.2];
        var ptr = utils.arrayToReturnPtr(ret, Float64Array);
        return ptr;
    },

    stringArrayFunc: function (arg, len) {
        var strArray = [];
        for (var i = 0; i < len; i++) {
            var ptr = HEAP32[(arg >> 2) + i];
            var str = Pointer_stringify(ptr);
            strArray.push(str);
        }
        console.log('strArrayFunc arg: ' + strArray);

        var ret = ['hoge', 'fuga', 'piyo', 'hogera', 'ほげほげ', '叱る'];
        var retPtr = utils.stringArrayToReturnPtr(ret);
        return retPtr;
    },

    refIntArrayFunc: function (arg, len) {
        console.log('ref len:' + len);
        Module.refIntArray = new Int32Array(buffer, arg, len);
        Module.sampleValue = 0;
        setInterval(function () {
            console.log('refIntArray update: ' + Module.refIntArray.length + ' ' + Module.sampleValue );
            for (var i = 0; i < Module.refIntArray.length; i++) {
                Module.refIntArray[i] = Module.sampleValue + i;
            }
            Module.sampleValue += Module.refIntArray.length;
        }, 1000);
    }
};
autoAddDeps(lib, '$utils');
mergeInto(LibraryManager.library, lib);

調査編につづき、今回は実際にユーザーコードでAttributionをコントロールしてみます。なお、SDKとしての挙動を試す目的でAttributionの表示をコントロールしますが、実際には利用許諾にしたがった表示を行ってください。

Text attribution

Attributionを非表示

options.attributionControlをfalseに設定するとtext attributionが非表示になります。

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        attributionControl: false
    });

カスタムAttributionを表示

options.attributionControlに文字列、もしくは文字列の配列を指定するとAttributionとして表示されます。

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        customAttribution: '<a href="https://example.com/custom1">custom1</a>'
    });

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        customAttribution: ['<a href="https://example.com/custom1">custom1</a>', 'custom2']
    });

デフォルトのAttributionを消した上でカスタムAttributionを追加(compact表示設定)

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        attributionControl: false
    });

    map.addControl(new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: '<a href="https://example.com/custom1">custom1</a>'}));

初期表示

展開表示

StyleでAttributionを設定

urlでアクセス

    var map = new mapboxgl.Map({
        container: 'map', // container id
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8'
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

urlでアクセス + Attributionを指定

    var map = new mapboxgl.Map({
        container: 'map', // container id
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8',
                    attribution: 'in style',
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

tilesでアクセス

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

tilesでアクセス + Attributionを指定

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512,
                    attribution: 'in style'
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

Workmark

urlでアクセスし、wordmarkを非表示

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8',
                    mapbox_logo: false
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

tilesでアクセスし、wordmarkを表示

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512,
                    mapbox_logo: true
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });

どうも7noteです。簡単なくじ引きシステムをjavascriptで作ります。

2チームに分けたり、あたりとはずれの本数を決めてくじびきすることができます。

見本

※jQueryを使用しています。jQueryって何？という方はこちら

仕様

・参加メンバーとくじの本数を選択
・スタートボタンを押す。
・あたりの人とはずれの人の2種類に分ける

※くじの本数が足りない時はアラートで警告を出す。

ソース

index.html

<div class="wrapper">
  <div class="area">
    <div id="member">
      <h2>参加メンバーを選ぼう！：</h2>
      <label><input type="checkbox" value="佐藤" checked/> 佐藤</label>
      <label><input type="checkbox" value="田中" checked/> 田中</label>
      <label><input type="checkbox" value="伊藤" checked/> 伊藤</label>
      <label><input type="checkbox" value="鈴木" checked/> 鈴木</label>
      <label><input type="checkbox" value="高橋" checked/> 高橋</label>
    </div>

    <div id="honsuu">
      <h2>くじの本数：</h2>
      あたり：<select name="hit">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      </select>　<!--
-->      はずれ：<select name="miss">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      </select><br>
    </div>
    <div class="button">
      <input type="button" value="抽選開始" onclick="start();">  <!-- 関数startを実行する。 -->
    </div>
    <div id="result">
      <h3>あたり：</h3>
      <h3>はずれ：</h3>
    </div>
  </div>

</div>

style.css

.wrapper {
  margin: 50px 10%;
  text-align: left;
}

.area {
  width: 80%;
  margin: 0 auto;
}

h2 {
  display: inline-block;
  font-weight: bold;
}

#member {
  margin: 5px auto 20px;
}

#member label {
  display: inline-block;
}

#honsuu {
  margin: 0 auto 20px;
}

.button {
  border-bottom: solid 1px #000;
  padding: 0 0 20px;
  margin: 0 auto 50px
}

#result h3 {
  font-size: 18px;
  font-weight: bold;
}

script.js

var toddayMember = new Array();  // 本日の参加メンバーを入れる配列を新規作成

// 関数start
function start() {
  var theamA = new Array();               // あたりの人たちを入れる配列を新規作成
  var theamB = new Array();               // はずれの…〃
  var hitNum = Number($('select[name="hit"]').val());   // あたりのくじの本数を変数[hitNum]に格納
  var missNum = Number($('select[name="miss"]').val()); // はずれの…〃
  var rand = 0;                           // ランダムの数字 初期値は0

  todayMember = $('input[type="checkbox"]:checked').map(function(){
    return $(this).val();                 // チェックのついたメンバーを配列に格納
  }).get();

  // 人数に対してくじが足りない時にアラートして処理を終了
  if(todayMember.length > hitNum+missNum){
    alert("くじの本数が足りないよ");
    exit;
  }

  // 1人ずつ、あたりもしくははずれを決める
  for(var i = 0; i < todayMember.length; i++ ){
    if(hitNum == 0 && missNum > 0){       // あたりくじがなくなっていて、はずれが余っていればrand=2
      rand = 2;
    }else if(missNum == 0 && hitNum > 0){ // はずれくじがなくなっていて、あたりが余っていればrand=1
      rand = 1;
    }else{                                // どちらでもなければランダムで1か2
      rand = Math.floor( Math.random() * 2 ) + 1;
    }

    if(rand == 1){
      theamA.push(todayMember[i]);        // 1だったらあたりチームの配列に追加
      hitNum += -1;                       // あたりくじを1本減らす
    }else if(rand == 2){
      theamB.push(todayMember[i]);        // 2だったらはずれチームの配列に追加
      missNum += -1;                      // はずれくじを1本減らす
    }
  }
  $("#result h3:first-child").text("あたり："+theamA); // あたりチームを表示
  $("#result h3:last-child").text("はずれ："+theamB);  // はずれチームを表示
}

アラートの出方

解説

分かりやすく分解して書いているので最短の処理や記述ではございませんのであしからず。

1. ボタンがクリックされ、「start関数」が起動
   • htmlからjavascriptを動かすときは、onclick="start();"のように書くことで、動かすことができます。
2. あたりチーム、はずれチームそれぞれの配列を作成。また選択されたくじの本数を変数に格納。
   • 新しい配列をつくる時は、new Array()。またselectの要素を取得すると文字列として取得してしまうので、Number()でくくることで数字として変数に格納します。
3. :checkedの疑似クラスを使って、チェックされた人をtodayMember（変数）に格納
4. もし「人数 > くじの本数」だった場合、警告文を出して処理を強制終了
   • .lengthで配列にあるデータ数、今回でいうと参加人数の数値を取得できます。
5. for文を使って1人ずつあたりはずれを抽選する。
   • 最初のif文では、もしすでにどちらかのくじがなくなっていた場合、もう片方のくじを引くように処理を入れています。どちらのくじもまだ残っている場合はランダムの数字を入れます。ランダムはMath.floor( Math.random() * 2 ) + 1とかくことで1もしくは2を取得できます。範囲を広げたいときは2の部分を任意の数時にします。
6. 後のif文ではランダムで決めた1もしくは2でそれぞれチーム移動とくじを1本減らしています。
   • push()で指定の配列から別の配列に値を追加（複製）します。くじを引いたので-1してのこりのくじの本数を調整します。
7. text()でhtmlのほうに結果をテキストで出力して完了。

まとめ

プログラミングを始めるきっかけってそれぞれあると思いますが、ゲームなどの面白いものを作りたいって思って始める人が多いように思います。私自身もゲームがすきで自分で作れたらいいなと思いプログラミングの勉強を始めました。

でも始めたての頃は右往左往して何から手を付けたらいいのか分からないものです。
この記事がこれからjavascriptを始めようと思っている人の練習課題的なものになればいいなと思います。
簡単なものから作り始めれば、経験値を重ねていつかは壮大なものも作れるようになるし、もの作りを続けていれば仲間も増えてより様々なもの作りに挑戦できると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

App.js

<template>
  <div>
    <select v-model="selected">
      <option>りんご</option>
      <option>バナナ</option>
      <option>ぶどう</option>
    </select>
    {{selected}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'りんご'
    }
  },
};
</script>

はじめに

以前、Nuxt.jsで開発をしていてCKEditorを試行錯誤で導入しました。

そちらの経験を、Nuxt.jsにCKEditorを導入し、エディタ内の画像の移動、リサイズをドラッグで実現するとしてまとめました。

その後、少し経験値を積みまして、変わったというか、あぁ、恥ずかしいという箇所を修正します。

CKEDITR4の導入方法の変更

CKEditorにプラグインを追加するのが手間だと思っていましたが、以下のように、あっさりと実現ができました（汗）

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

<style scoped></style>

editorUrlにローカルに設置したCKEditorを使用していましたが、CDN経由からのダウンロードに変更しました。

この背景には、プラグインを設定ファイルで自由に変更できることがわかったからです。
editorConfigのextraPluginsで追加のプラグインを指定でき、removePluginsで除外するプラグインを指定できました。

独自プラグインを導入する

前回の記事には書きませんでしたが、独自プラグインを導入することを視野に入れていましたので、CKEditor自体をダウンロードすることにも抵抗がありませんでした。

今回CDN経由にして、独自プラグインを呼び出す方法がわかったのでお伝えしようと思います。

CKEDITORでaddExternalメソッドを呼び出すと、独自のプラグインが読み込まれます。

ckeditor4-vueならどうするのかな？って思ったら、以下のようにするようです。

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
    @namespaceloaded="onNamespaceLoaded"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2', 'timestamp'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    onNamespaceLoaded(CKEDITOR) {
      // Add external `placeholder` plugin which will be available for each
      // editor instance on the page.

      let pluginBaseDir = '/ckeditor/plugins/timestamp/'
      if (process.env.NUXT_ENV_DEPLOY_SUBDIR) {
        pluginBaseDir =
          process.env.NUXT_ENV_DEPLOY_SUBDIR + '/ckeditor/plugins/timestamp/'
      }
      CKEDITOR.plugins.addExternal('timestamp', pluginBaseDir, 'plugin.js')
    }
  }
}
</script>

<style scoped></style>

ckeditrコンポーネントに対して、namespaceloadedというイベントを受信するようにします。
こちらは、ckeditor4-vueがCKEDitorインスタンスをロードした場合に呼ばれるそうです。

それをVueのMethodsで定義した、onNamespaceLoadedメソッドで処理をして、外部のプラグインを読み込みます。

プラグインは、プラグインのチュートリアルで記載された、現在時刻の挿入プラグインとなります。

デモサイト

概要

JSを触っていく上でどのように解釈してブラウザに表示されているのだろう？と思いました。この機会に裏で何をやっているのか理解をしておこうとおもったのでまとめていきます。

ブラウザが認識できる言語

まず、ブラウザで認識されるのはHTML, CSS, JavaScript, WebAssemblyという言語です。

たとえば、Railsでコードを書いていったとしても最終的に開発者ツールなど見たらHTMLなどに変換されています。

高級言語

高級言語とはプログラミング言語の分類のひとつで、人間がわかりやすいように設計されているものです。反対に、機械がわかりやすい言語のことを低級言語と呼びます。たとえば、開発するときに効率的にはやく書きたいときに扱うのが高級言語でSCSSなどの人間が便利だと思うもののことです。

コンパイル

コンピュータが分かる言葉にするには、コンパイルをして表示させています。プログラミング言語は機械に認識してもらわないと動きません。端的に言うと、機械に認識してもらう作業、要するに機械が理解できるようプログラミング言語を翻訳する作業のことをコンパイルといいます。

コンパイルの流れ

コンパイルはコンピュータがわかるように翻訳する作業のことで、翻訳作業を行ってくれているのはコンパイラというプログラムです。

一度整理すると

1.プログラミング言語をコンピュータに理解してもらうには翻訳をしなければならない。
2.翻訳作業のことをコンパイルと呼びコンパイラというプログラムで翻訳される。

ただコンパイラはなんでも翻訳してくれるわけではありません。そこで出てくるのがプリコンパイルというものです。

プリコンパイルとは

コンパイラが言語の翻訳ができるように、事前に準備することです。コンパイラに翻訳をお願いする前に、もっとコンピュータのわかりやすい言葉にしてあげることです。

アセットパイプライン

アセットパイプラインとは、JavaScriptやCSSなどのアセットを小さくしたり圧縮したりしてまとめてくれる機能のことです。複数のアセットファイルを一つにまとめてブラウザに表示するために必要な機能です。処理の流れを簡単にいうと、複数のアセットファイルをプリコンパイルして連結して、最小化または圧縮して最終的に軽量化されたものをブラウザに渡せるようにpublicディレクトリに配置します。

Sprockets

Railsでは、プリコンパイルするために、SprocketsというGemを用いてアセットパイプラインをしていました。しかし、JavaScriptの使用が多くなり、Railsのバージョン6系からモジュールバンドラによるプリコンパイルが主流になりました。

モジュールバンドラ

モジュールバンドラとはJavaScriptの依存関係を考慮しながら管理してくれるものです。依存関係を考慮しながらというのが大切で、複数あるJavaScriptファイルを１つにまとめることでブラウザで読み取ることができるようにしています。また、１つのファイルにすることで通信の高速化を可能にしています。

JavaScriptではwebpackというモジュールバンドラを利用しています。

webpackとWebpacker

webpackを使えば依存関係の管理ができるのですが、Railsではもっと簡単に管理できるものが用意されています。それはWebpackerというものです。専用の設定ファイルやヘルパーメソッドを用意してくれるGemでRailsのバージョン6系からはデフォルトでWebpackerというGemが用意されているので、導入のことを意識せずとも使えています。Webpackerによってプリコンパイルに加え、JavaScriptのパッケージを管理することを可能にしています。

npmとyarn

Webpackerにパッケージをインストールして入れていくにはパッケージ管理ツールを使います。パッケージ管理ツールにはnpmというものがありますが、Railsではyarnというものを使います。yarnはpackage.jsonとyarn.lockで使用するパッケージを管理します。RailsのGemfileとGemfile.lockのように管理されるようになります。簡単にいうと、package.jsonで使用するパッケージを管理して、yarn.lockで使用するパーケージのバージョンを管理しているということです。

まとめ

• コンパイルとはコンピュータが理解できることばに翻訳すること。
• コンパイラというプログラムが翻訳している。
• ブラウザは一つのファイルしか読み取ることができない。
• プリコンパイルとは、コンパイラが理解できるように事前に準備をすること。
• アセットパイプラインとはプリコンパイル、連結、圧縮、配置する機能のこと。
• publicディレクトリに配置することでブラウザが読み込めるようにしている。
• SprocketsというGemでのプリコンパイルからWebpackerというGemが使われるようになり、プリコンパイルに加えJavaScriptのパッケージ管理を行ってくれている。
• 最近はwebpackerというモジュールバンドラで管理しており、依存関係を解決しながらモジュールを一つにまとめることでブラウザに表示されるような仕組みになっている。
• webpackerにパッケージを入れるにはnpmを使うがRailsではyarnというものが使われていてパッケージを管理している。

参考文献

• 高級言語 (high-level programming language)
• コンパイル (compile)
• webpackの公式ドキュメント
• Webpacker
• Ruby on Rails ガイド【アセットパイプライン】
• DOM の紹介
• 【Rails】結局bundlerって何？bundlerの仕組みを図解形式で徹底解説
• npmとは　yarnとは
• 超初心者がwebpackerについて調べてみたぞ

やりたいこと

interface Hoge {
  id: number | string;
  value: string;
}

const hogeList: Hoge[] = [
 { id: 'A', value: 'a' },
 { id: 'B', value: 'b' },
 { id: 'C', value: 'c' },
];
const hogeList2: Hoge[] = [
 { id: 1, value: 'a' },
 { id: 2, value: 'b' },
 { id: 3, value: 'c' },
];

const byB = hogeList.find(hoge => hoge.id === 'B');
console.log(byB); // 'b'

const by3 = hogeList2.find(hoge => hoge.id === 3);
console.log(by3); // 'c'

hogeListリストから、
findを使わずにid指定でvalueを取得したい

方法

リストからidをキーにしたオブジェクトへ変換

const obj = toObjectFromList(hogeList);
console.log(obj['B']); // 'b'
console.log(obj); // Object{A: 'a', B: 'b', C: 'c'}

const obj2 = toObjectFromList(hogeList2);
console.log(obj2[3]); // 'c'
console.log(obj2); // Object{1: 'a', 2: 'b', 3: 'c'}

ts(7053)エラーになる書き方

export function toObjectFromList(list: Hoge[]): {[k: number]: string} | {[k: string]: string} {
  return list.reduce((acc, { id, value }) => {
    acc[id] = value;
    return acc;
  }, {} as {[k: number]: string} | {[k: string]: string});
}

型 'string | number' の式を使用して型 '{ [k: number]: string; } | { [k: string]: string; }' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。
型 'string' のパラメーターを持つインデックス シグネチャが型 '{ [k: number]: string; } | { [k: string]: string; }' に見つかりませんでした。ts(7053)

※tsconfig.jsonでcompilerOptionsに"noImplicitAny": true,を指定した場合にエラーになります。

修正

export function toObjectFromList(list: Hoge[]): {[k in string | number]: string} {
  return list.reduce((acc, { id, value }) => {
    acc[id] = value
    return acc;
  }, {} as {[k in string | number]: string});
}   

Playground

この記事は、株式会社エイチームフィナジー の Advent Calendar 2020 6日目の記事になります。

6日目は、React環境でスクロール連動エフェクトを実装する際に便利な
react-intersection-observerについて、デザイナーの@masaki632dがご紹介します。

背景

現在、React(JSフレームワーク)とEmotion(CSSinJS)を導入した環境でタスクを進めており、
特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつを実装する機会がありました。

当初は、JavaScriptのscrollイベントやwindow.pageYOffsetなどを使って一度実装したのですが、
この手法だとスクロールのたびに関数が呼び出されるため、パフォーマンスに影響を及ぼしてしまうようです。

scrollイベントの手法で実装後、ふとエンジニアから、
「最近はこれで実装するのがパフォーマンスも軽くて良きです」と紹介されたのが、
「Intersection Observer」 でした。（名前がカッコ良い）

なるほど！と思った数日後には、
エンジニア側で軽やかに「Intersection Observer」で実装完了されており、
表示を確認すると、特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつがしっかり再現されていました。

今後同じような実装が必要になった時、自分の方でも軽やかに実装したいと思ったのと、
せっかくのReact環境ということで、
今回はreactと名前の付いたreact-intersection-observerで実装を試してみました。

Intersection Observer とは

「Intersection（要素間の交差）」を「Observe（監視）」するAPIのことです。
指定したDOM要素の交差点（DOM）を監視することができます。
「Intersection Observer」の詳細はこちら

ブラウザサポートも拡充しており、今後標準となる技術のようです。
「Intersection Observer」の対応ブラウザはこちら

react-intersection-observer とは

今回使用するライブラリ react-intersection-observer は、
上記の Intersection Observer API をReactで簡単に扱うためのライブラリになります。
「react-intersection-observer」の詳細はこちら

何はともあれ実装

• $ yarn add でライブラリ react-intersection-observer をインストールします。 （package.jsonとyarn.lockに react-intersection-observer が追加されます。）

$ yarn add react-intersection-observer

• コンポーネントに使用していきます。

index.tsx

/** @jsx jsx */
import { FC } from "react";
import { jsx } from "@emotion/core";
import { styles } from "./Styled";

import { useInView } from 'react-intersection-observer';

export const index: FC = () => {
  // Hooksを使って簡単に書くことができます。
  // refで要素を指定して、inViewを使って要素がViewに入ったかどうかを判定します。
  // Optionについては、rootMarginを設定。要素が100pxより上に入った段階でinViewを取得できます。
  const [ref, inView] = useInView({
    rootMargin: '-100px 0px',
  });

  return (
    // スクロールして要素が表示されると同時に styles.show が付与される
    <p ref={ref} css={[styles.yellow, inView && styles.show]}>
      テキストテキスト
    </p>
  );
};

• Styled.ts

import { css } from "@emotion/core";

export const styles = {
  // マーカー箇所のstyle
  yellow: css`
    width: 200px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: 2s;
    background: -webkit-linear-gradient(
      left,
      rgb(255, 250, 153) 50%,
      transparent 50%
    );
    background-repeat: no-repeat;
    background-size: 200% 0.8em;
    background-position: 100% 0.5em;
  `,

  // スクロールして要素が表示されると同時に付与されるstyle
  show: css`
    opacity: 1;
    background-position: 0% 0.5em;
    animation: SlideIn 3s ease-out both;
    transform: translateY(-10px);
  `,
};

• ブラウザをスクロールして確認すると、
  テキスト箇所が表示される高さになった瞬間に、アニメーションが発火してくれました！
  （動き的には、ふわっと下から表示 + マーカーが左から引かれる）

利用に便利なシチュエーション

• 特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつ
• 画像の遅延ロード
• YouTubeの自動再生
• コンテンツの追加読み込み
  などなど

まとめ

いかがだったでしょうか？
今回はReact環境で簡単にIntersection Observer APIを使用することができる、
react-intersection-observerをご紹介しました。
とても簡単で便利ですので、ぜひ一度使ってみてください。

参考

• JSでのスクロール連動エフェクトにはIntersection Observerが便利
• 使ってみよう！Intersection Observer！
• ReactでIntersection Observer APIを使うにはreact-intersection-observerが便利