カテゴリー: JavaScript

JavaScript で連番の整数を要素に持つ配列を作る方法はいくつも考えられるだろうけど、こんなのを見つけた（見つけたコードそのままじゃなくて、少し整理してある）。

const initArray = (n) => [...Array(n)].map((_, i) => i);

いささかトリッキーだと思うけど、まっさきに思い浮かぶであろう for ループを使うよりも簡潔にかけている。もちろん、期待通りに動く。

> initArray(5);
[ 0, 1, 2, 3, 4 ]

自分のメモのために説明しておくと、Array(n) で要素 n 個の配列をつくり、スプレッド構文を使って別の配列リテラルの中に埋め込む。で、map メソッドを呼び出して、各要素をそのインデックス値に置き換える。結果的に 0 からはじまり n 個の連番をもつ配列が出来上がる。

さて、トリッキーだと思うのは、コンストラクタでつくった配列 Array(n) をわざわざスプレッド構文を使って別の配列リテラルに埋め込むところ [...Array(n)] だ。だけどこれがないと期待通りに動かない。

> Array(5).map((_, i) => i);
[ <5 empty items> ]

<5 empty items> ってなんだ。そりゃ初期化してないから空の配列なんだろうけど、長さ（要素数）は 5 なんでしょ？

> Array(5).length;
5

いままで使ったことがなかったので知らなかったけど、配列をコンストラクタ Array() でつくると、長さはあるけど何の値も入ってない、まさに空の配列が返ってくる。

> Array(5);
[ <5 empty items> ]

この「空（から）」は undefined でも null でもない。この配列にインデックスを使ってアクセスすると undefined が返ってくる。

> const a = Array(5);
undefined
> a[3];
undefined
> a[3] == undefined;
true

なら undefined が5個入った配列と等しいのかというとそれも違う。

> a == [undefined, undefined, undefined, undefined, undefined];
false

さらにいえば、リテラルでつくったから配列とも違う。

> a == [];
false

わけがわからないよ。

Function オブジェクトの name プロパティで関数名を文字列として取得できることを知った。

Node.js の REPL で試してみるよ。

> function func1() {}
undefined
> func1.name
'func1'

ほんとだ。

アロー関数ではどうだろう？

> const func2 = () => {}
undefined
> func2.name
'func2'

ほうほう。代入先の変数名が返ってくるとな。

なら、これを別の変数に代入したら？

> func3 = func2
[Function: func2]
> func3.name
'func2'

えー？？

ところで、関数の名前を文字列で取得して何に使えるのかと思ったら eval() があるのね。

• eval() – JavaScript | MDN

でも「使うな」って書いてある。

あけおめ、ことよろ。

正月早々、奇妙なものを見つけた。元記事は去年（というか昨日）のもので、タイトルの通りなんだけど、こんなのだった。

> const fibonacci = ((fb = n => n > 1 ? n * fb(n - 1) : 1) => fb)();

どう見ても階乗を求める関数なのに名前が fibonacci っておかしいだろ、というのは置いといて。確かに期待通りに動作する。

> fibonacci(5);
120 

元記事の説明によると：

• アロー関数 n => n > 1 ? n * fb(n - 1) : 1 を変数 fb に代入し
• その代入した関数を即時関数によって関数 fb として返すように
• 代入（fibonacci）する

となってて、まあその通りではある。でも、その即時関数っていうのが単に引数をそのまま返してるだけなんだから、それ、いらねんじゃね？

というわけで即時関数なしでやってみると、やっぱり、ちゃんと期待通りに動作するじゃん。

> const fact = n => n > 1 ? n * fact(n - 1) : 1;
undefined
> fact(5);
120 

と、ここまで書いて気がついた。上では即時関数が云々と書いたけど、要するにその即時関数の引数であるアロー関数を変数 fb に代入してそれを呼び出してるだけだ。即時関数は何の関係もない。元記事の筆者がどこでネタを仕入れたのか知らないけど、不必要にトリッキーなだけだ。それとも以前のバージョンの JavaScript ではこう書かなきゃできなかったのかな。

ちなみに確認したのは Node v14.15.3。

takatoh@montana: takatoh > node -v
v14.15.3

というわけで、元記事から得たものといえば、関数呼び出しの引数部分に代入式が書けることか。使うかな、これ。

あ、あと、ブログのネタにはなった。

……いや、React というより Fetch API のせいなのかもしれない。

ここのところで React で web アプリを作ってる。例によって自分で使うためだけのもの。

JSON を返す API を2つバックエンドに置いて、両方から取ってきたデータを合わせて表示する Collections コンポーネントを書いてたんだけど、いい書き方がわからずにハマった。

Collections コンポーネントは次のように動作する（のを期待している）。

• 一方のAPIからコレクションのリストを取得する
• リスト中のコレクションそれぞれについて、もう一方のAPIから詳細を取得する
• 2つのAPIから取得したデータを合わせて、コレクションのリストとしてテーブル表示する

コレクションというのは、プログラミングにおけるデータ構造のことじゃなくて買い集めたコレクション（CDとかDVDみたいな）のこと。renderCollections 関数でレンダリングしているテーブルの行のうち、collection.id と collection.buy_date が一方のAPIから取得したデータ、collection.title と collection.brand がもう一方のAPIから取得したデータだ。

import React, { useState, useEffect } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';


const Collections = (props) => {
  const perPage = 10;
  const [collections, setCollections] = useState([]);
  const [currentPage, setPage] = useState(0);

  const page = props.query.page ? parseInt(props.query.page) : 1;
  useEffect(
    () => {
      setPage(page);
      const offset = perPage * (page - 1);
      let colls = [];
      const fetchProduct = async (coll) => {
        const result = await fetch(`${props.api2Endpoint}/products/${coll.product_id}`)
          .then(response => response.json())
          .then(data => data["products"][0]);
        colls = [...colls, {...coll, title: result.title, brand: result.brand.name}];
        setCollections(colls);
      };
      const fetchData = async () => {
        const result = await fetch(`${props.api1Endpoint}/collections?limit=${perPage}&offset=${offset}`, { mode: "cors" })
          .then(response => response.json())
          .then(data => data["collections"]);
        for (const c of result) {
          fetchProduct(c);
        }
      };
      fetchData();
    },
    []
  );

  return (
    <div>
      <h2>Collections</h2>
      <TableContainer component={ Paper }>
        <Table aria-label="collection table">
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Title</TableCell>
              <TableCell>Brand</TableCell>
              <TableCell>Buy date</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            { renderCollections(collections) }
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

const renderCollections = (collections) => {
  return (
    collections.map(collection => (
      <TableRow key={ collection.id }>
        <TableCell>{ collection.id }</TableCell>
        <TableCell>{ collection.title }</TableCell>
        <TableCell>{ collection.brand }</TableCell>
        <TableCell>{ collection.buy_date }</TableCell>
      </TableRow>
    ))
  );
}


export default Collections;

いろいろググりながらなんとか書いた上のコードで一応動くようにはなった。けど、表示されるコレクションの順番が不定になってしまう。APIからリストを取得した段階では ID 順に並んでいるのは確認したので、たぶん、個々の詳細データを取得する fetchProduct 関数内でリスト（変数 collections）を更新するタイミングのせいだ。つまり、ループの中で使ってる fetch 関数が非同期なせいだ（たぶん）。

あぁ、JavaScript ってこういうところがなんかやりづらいんだよなぁ。

なんかいい書き方はないものか。あとからソートすればいいのはわかるんだけど。

GitHub のリポジトリにあるドキュメントを見ながら。

GitHub – nodenv/nodenv

まずは GitHub から clone。

takatoh@apostrophe:~$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv

オプション扱いだけど dynamic bash extension とかいうのをビルド。nodenv がスピードアップするらしい。

takatoh@apostrophe:~$ cd ~/.nodenv && src/configure && make -C src

環境変数 PATH に ~/.nodenv を追加してから、セットアップ。

takatoh@apostrophe:~$ ~/.nodenv/bin/nodenv init
Load nodenv automatically by appending
the following to ~/.bashrc:

eval "$(nodenv init -)"

メッセージにあるとおり、.bashrc に記述を追加。終わったらシェルを起動し直す。

nodenv-doctor スクリプトで、ちゃんとインストールできてるか確認。

takatoh@apostrophe:~$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

OK って出たから大丈夫なんだろう。

つぎに、これもオプションみたいだけど、node-build をインストール。

takatoh@apostrophe:~$ mkdir -p "$(nodenv root)"/plugins
takatoh@apostrophe:~$ git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build

これで完了。

nodenv install -l でインストール可能な Node.js のバージョン一覧が見られる。公式サイトによると 12.18.1 が最新の推奨版なので、それをインストールする。

takatoh@apostrophe:~$ nodenv install 12.18.1

nodenv global で利用するバージョンを指定。

takatoh@apostrophe:~$ nodenv global 12.18.1

これで最新推奨版の Node.js が使えるようになる。

takatoh@apostrophe:~$ node --version
v10.19.0

えっ？？

takatoh@apostrophe:~$ nodenv versions
  system
* 12.18.1 (set by /home/takatoh/.nodenv/version)

ちゃんと 12.18.1 になってるじゃないか。どういうこと？

ちょっとびっくりしたけど、なんのことはない、シェルを立ち上げ直したらできた。

takatoh@apostrophe:~$ node -v
v12.18.1

おしまい。

うわー！もう今月終わりそう！

というわけで、Scala の学習のほうはここひと月ほど滞っているんだけど、代わりに（？）今日は、HTML と JavaScript でタイトルに書いたようなことをやってみる。

jQuery を使ってスライドショーを実現するライブラリはいろいろあるんだけど、今日はそういうのは使わないでやる。さらには、jQuery 自体も使わないでやる。やるって言ったらやる。

さて、まずは jQuery 利用バージョン。いくつかの Web ページを参考に書いた（というかほぼコピペ）のがこれ。

<!DOCTYPE html>
<html>
  <head>
    <title>Fade images</title>
    <link rel="stylesheet" href="style.css" />
    <script src="../lib/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        const $width = 960;
        const $height = 540;
        const $interval = 3000;
        const $fade_speed = 1000;
        $("#slide ul li").css({"position": "absolute", "overflow": "hidden", "width": $width, "height": $height});
        $("#slide ul li").hide();
        $("#slide ul li:first").addClass("active").show();
        setInterval(function() {
          let $active = $("#slide ul li.active");
          let $next = $active.next("li").length ? $active.next("li") : $("#slide ul li:first");
          $active.fadeOut($fade_speed).removeClass("active");
          $next.fadeIn($fade_speed).addClass("active");
        }, $interval);
      });
    </script>
  </head>
  <body>
    <div id="slide">
      <ul>
        <li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
      </ul>
    </div>
  </body>
</html>

これで、3秒ごとにフェードアウト/フェードインしながら画像が切り替わる。画像は4つ用意したけど、最後まで行ったら元に戻る。

つぎ。jQuery なしバージョン。さらにいくつかのページを参考に、試行錯誤した結果がこれ。

<!DOCTYPE html>
<html>
  <head>
    <title>Fade images</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
      function fadeIn(el, speed) {
        el.style.transition = speed;
        el.style.opacity = "1";
      }

      function fadeOut(el, speed) {
        el.style.transition = speed;
        el.style.opacity = "0";
      }

      function slide() {
        const width = "960px";
        const height = "540px";
        const interval = 3000;  // miliseconds
        const fade_speed = "1.0s";
        const slide = document.querySelectorAll("#slide ul li");
        for (let i =0; i < slide.length; i++) {
          slide[i].style.position = "absolute";
          slide[i].style.overflow = "hidden";
          slide[i].style.width = width;
          slide[i].style.height = height;
          slide[i].style.display = "block";
          slide[i].style.opacity = "0";
        }
        const first = slide[0];
        first.classList.add("active");
        first.style.opacity = "1";
        setInterval(function() {
          let active = document.querySelector("#slide ul li.active");
          let next = active.nextElementSibling || first;
          fadeOut(active, fade_speed)
          active.classList.remove("active");
          fadeIn(next, fade_speed)
          next.classList.add("active");
        }, interval);
      }

      document.addEventListener("DOMContentLoaded", slide);
    </script>
  </head>
  <body>
    <div id="slide">
      <ul>
        <li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
      </ul>
    </div>
  </body>
</html>

動作は同じ。

最近の流れとしては jQuery 使わないっていうのがあるみたいだけど、やっぱ使ったほうが楽ではあるよなあ。