学習記録

学習したことをより深く理解するために、アウトプットする場所として利用しています。

JavaScript / some の使い方

someメソッドは、配列の中の少なくとも1つの要素が指定した関数によってテストをパスするかどうかをチェックします。
テスト関数が真を返す場合、someメソッドはtrueを返し、そうでない場合はfalseを返します。

const numbers = [1, 2, 3, 4, 5];

const hasNumberGreaterThanThree = numbers.some(number => number > 3);

console.log(hasNumberGreaterThanThree); // true

オブジェクト配列の例

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const hasPersonOlderThan30 = people.some(person => person.age > 30);

console.log(hasPersonOlderThan30); // true

includesメソッドとの組み合わせの例

const fruits = ['Apple', 'Banana', 'Cherry'];

const hasApple = fruits.includes('Apple');

console.log(hasApple); // true

JavaScript / forEach, map, filter の使い方

forEach

const array = ["apple", "orange", "peach"];
array.forEach((item) => {
  console.log(item);
});

// 結果
// apple
// orange
// peach

map

const array = ["apple", "orange", "peach"];
const results = array.map((item) => {
  return item;
});
console.log(results);

// 結果
// [ 'apple', 'orange', 'peach' ]

filterの使い方

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});
console.log(evenNumbers);

// [2, 4, 6];

一行で書くと下記のようになる

const evenNumbers = [1, 2, 3, 4, 5, 6].filter((number) => number % 2 === 0);
console.log(evenNumbers);

map と filter の組み合わせ

const numbers = [1, 2, 3, 4, 5, 6];

// mapで全ての数字に*2をして、filterをかける
const result = numbers
  .map(number => number * 2)
  .filter(number => number % 2 === 0);

console.log(result); // [2, 4, 6, 8, 10, 12]

map と filter を逆にする

const numbers = [1, 2, 3, 4, 5, 6];

// filterをかけてから、mapで数字に*2する
const result = numbers
  .filter(number => number % 2 === 0)
  .map(number => number * 2);

console.log(result); // [4, 8, 12]

ViteのrollupOptions>inputに適合するオブジェクトを生成する

解説コード

const path = require("path");
const glob = require("glob");

function getHtml() {
  const htmlFiles = glob.sync("**/*.html", {
    cwd: path.resolve(__dirname),
    ignore: ["**/modules/**/*.html", "**/assets/**/*.html", "**/dist/**/*.html"],
  });

  const inputs = Object.fromEntries(htmlFiles.map((file) => [file.replace(".html", ""), file]));
  return inputs;
}

console.log(getHtml());

// 出力コード（例）
// {
//   'src/index': 'src/index.html',
//   'src/template-group/index': 'src/template-group/index.html',
//   'src/template-person/index': 'src/template-person/index.html'
// }

Object.fromEntriesの挙動

let userArray = [
  ['name', '山田太郎'], 
  ['age', 32],
  ['address', '北海道']
];

let userObj = Object.fromEntries(userArray);

console.log(userObj);
// { name: "山田太郎", age: 32, address: "北海道" }

▼Object.fromEntriesに渡している引数について

htmlFiles.map((file) => [file.replace(".html", ""), file]);

// 出力結果
// [
//   ["src/index", "src/index.html"],
//   ["src/template-group/index", "src/template-group/index.html"],
//   ["src/template-person/index", "src/template-person/index.html"],
// ];

▼map配列はどのように出力されているのか

const html = htmlFiles.map((file) => {
  return file;
});
console.log(html);

// 出力結果
// [
//   'src/index.html',
//   'src/template-group/index.html',
//   'src/template-person/index.html'
// ]

globライブラリの挙動

▼ドキュメント www.npmjs.com

Micromodal.js Document Translation (Installation)

Installation

Micromodal is available on npm and can be installed from the command line via npm or yarn

Micromodalはnpmで利用可能で、コマンドラインからnpmまたはyarnでインストールできる。

npm install micromodal --save // via npm
yarn add micromodal --save // via yarn

You can also download or link to the latest compiled version using the CDN.

また、CDNを使用して最新のコンパイル済みバージョンをダウンロードまたはリンクすることもできる。

https://unpkg.com/micromodal/dist/micromodal.min.js
Reference Article

micromodal.vercel.app

Micromodal.js Document Translation (Introduction)

Introduction

Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript

Micromodal.jsは、純粋なJavaScriptで書かれた、軽量で設定可能なa11y対応のモーダルライブラリです。

It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

WAI-ARIAガイドラインに準拠したモーダルダイアログを、最小限の設定で確実に作成することができます。最小化され、gzip圧縮された、わずか1.9kbの小さなライブラリは、大きな変化をもたらします。

サンプル省略

Following are some of the interactions handled by the library:-
・Closing modal on overlay click
・ Closing modal on esc button press
・Toggling aria-hidden attribute on modal
・Trapping tab focus within the modal
・Maintaining focus position before and after toggling modal
・Focusing on the first focusable element within the modal

以下は、同ライブラリーが扱うやりとりの一部である。
・オーバーレイ クリックでモーダルを閉じる
・esc ボタン押下でモーダルを閉じる
・モーダルで aria-hidden 属性を切り替える
・モーダル内でタブ フォーカスをトラップする
・モーダルの切り替えの前後でフォーカスの位置を維持する
・モーダル内で最初にフォーカス可能な要素にフォーカスを当てる

Reference Article

micromodal.vercel.app

TypeScript / Jest / VSCode の環境設定

JavaScript / TypeScript

必要なnpmライブラリをインストール

npm i -D ts-jest @types/jest

ファイルを設定

launch.json

{
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

runtimeArgs: これはNode.jsプロセスに渡されるランタイム引数の配列です。この例では、"jest.js"というJestのエントリポイントに"--runInBand"というオプションを渡しています。"--runInBand"オプションは、すべてのテストを同期的に一度に一つずつ実行することを意味します。
console: デバッグ出力を表示するためのコンソールタイプを指定します。"integratedTerminal"はVSCode内の統合ターミナルを使用します。
internalConsoleOptions: "neverOpen"は、デバッグコンソールが自動的に開くのを防ぎます。

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

test.spec.ts（サンプル）

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});