静的サイト・ジェネレータのひとつである、Hexo。
最近、ブログを書くために使い始めました。

使うというだけでなく、プラグイン機構を活かし、開発もはじめました。
hexo-tag-google-photos-album 公開しました
まだまだ荒削りな部分が残りますが、さしあたり使う分には困らない程度まではできました。

今後、プラグインの開発を進めるにあたり、方法や内部構造などを調べています。
それで、成果（？）をアウトプットしていこうと考え、まとめています。
また、それを知っていただいたり、フィードバックなどを得られたり、ということを期待して、Qiitaにも書いてみようかと思いました。

中身は私のブログに、少しずつ記事をあげてますので、ご興味あればご覧ください。（宣伝乙）

• カテゴリー hexo
• Hexo 内部探訪 (1) はじめに
• Hexo 内部探訪 (2) 準備 npm linkメモ
• Hexo 内部探訪 (3) コンテキストとしての"hexo"変数
• Hexo 内部探訪 (4) プラグインのロード
• Hexo 内部探訪 (5) ライフサイクル
• Hexo 内部探訪 (6) DevToolsを使ったデバッグ

今後も連載継続予定。

概要

前回の記事までは、Todoを追加する『Add Todo』と、Todoの未・済を切り替える『Toggle Todo』の機能を実装して参りました。今回は、選択したフィルタによって表示するTodoを変更する『Filter Todo』の機能を実装していきたいと思います！

『Add Todo』に関してはこちら
『Toggle Todo』に関してはこちら

完成品

『All』,『Active』,『Completed』のリンクを押すことで、ページに表示されるTodoが変わります！

Action Creatorの作成

新たにsetVisibilityFilterを追加します。ここでは、フィルター（SHOW_COMPLETEDなど）を受け取り、typeとfilterを返します。

src/actions/index.js

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE',
};

let nextTodoId = 0;
export const addTodo = text => {
  return {
    type: ADD_TODO,
    id: nextTodoId++,
    text,
    //text: text,
  };
};

export const toggleTodo = id => {
  return {
    type: TOGGLE_TODO,
    id,
    //index: index
  };
};

export const setVisibilityFilter = filter => {
  return {
    type: SET_VISIBILITY_FILTER,
    filter,
    // filter: filter
  };
};

reducerの作成

初期stateをSHOW_ALLとし、action.typeがSET_VISIBILITY_FILTERの際にaction.filterを新しいstateとして返します。

src/reducers/visibilityFilter.js

import {VisibilityFilters} from '../actions';

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

export default visibilityFilter;

新しくreducerを作ったので、src/reducers/index.jsにてcombineReducers関数に加えましょう！

src/reducers/index.js

import {combineReducers} from 'redux';
import todos from './todos';
import visibilityFilter from './visibilityFilter';

const todoApp = combineReducers({todos, visibilityFilter});

export default todoApp;

動作確認

src/index.jsにて、正しくデータが格納されるか手動で確認してみましょう！

src/index.js

import {addTodo, toggleTodo, setVisibilityFilter} from './actions';

console.log(store.getState()); /// "SHOW_ALL"
store.dispatch(setVisibilityFilter('SHOW_COMPLETED'));
console.log(store.getState()); /// "SHOW_COMPLETED"

ここまでで、Action Creatorとreducerを作成し、フィルターの値をstoreに格納することができました。

次からは、フィルターの値によってviewの表示を変更できるようにしましょう！

VisibleTodoListを修正する

todos.filter()のように配列のメソッドのフィルタを用いることで、todoのcompleted属性によって、新たに作成した配列を返します。

• 配列のfilterメソッド

src/containers/VisibleTodoList.js

import {connect} from 'react-redux';
import TodoList from '../components/TodoList';
import {toggleTodo, VisibilityFilters} from '../actions';

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos;
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(todo => todo.completed);  //todos.filter()は配列のメソッドのフィルタ 
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(todo => !todo.completed); //todos.filter()は配列のメソッドのフィルタ
  }
};

const mapStateToPorops = state => {
  return {todos: getVisibleTodos(state.todos, state.visibilityFilter)};
};

const mapDispatchToProps = dispatch => {
  return {
    toggleTodo: id => {
      dispatch(toggleTodo(id));
    },
  };
};

const VisibleTodoList = connect(
  mapStateToPorops,
  mapDispatchToProps
)(TodoList);

export default VisibleTodoList;

先ほどと同様にsrc/index.jsにて手動で動作確認をしましょう！

src/index.js

import {addTodo, toggleTodo, setVisibilityFilter} from './actions';

store.dispatch(setVisibilityFilter('SHOW_COMPLETED'));

Linkを作成する

表示したいTodoの種類をLinkをクリックすることによって表示できるようにします。

まずは、とりあえずLinkを表示させましょう！

props.childrenはコンポーネントの中身を取得できます。Linkコンポーネントを使うときの、<Link>xxx</Link>のxxxです。

src/components/Link.js

import React from 'react';
import PropTypes from 'prop-types';

const Link = ({children, onClick}) => {
  return (
    <a href="#">{children}</a>
  );
};

Link.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Link;

LinkコンポーネントはFooterコンポーネントで使用します。

src/components/Footer.js

import React from 'react';
import FilterLink from '../containers/FilterLink';

const Footer = () => {
  return (
    <p>
      Show: <Link>All</Link>
      {', '}
      <Link>Active</Link>
      {', '}
      <Link>Completed</Link>
    </p>
  );
};

export default Footer;

FooterコンポーネントはAppコンポーネントで表示します！

src/component/App.js

import React from 'react';
import VisibleTodoList from '../containers/VisibleTodoList';
import AddTodo from '../containers/AddTodo';
import Footer from './Footer';

const App = () => {
  return (
    <div className="App">
      <AddTodo />
      <VisibleTodoList />
      <Footer />
    </div>
  );
};

export default App;

これでリンクの表示が完了です。

リンクをクリックしたときにフィルターの値を変える

リンクをクリックした際にフィルターの値（SHOW_ALLなど）を変えるには、リンクをクリックした際に、dispatch(setVisibilityFilter())を呼び出せるようにします。
connect関数を使って、propsにdispatchを渡せるようにしましょう！

src/containers/FilterLink.js

import {connect} from 'react-redux';
import {setVisibilityFilter} from '../actions';
import Link from '../components/Link';

const mapStateToProps = (state, ownProps) => {
  return {state: state};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter));
    },
  };
};

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link);

export default FilterLink;

src/components/Footer.jsでLinkとmapStateToProps,mapDispatchToProps
をconnectさせた『FilterLink』を使います。
この際に、mapDispatchToPropsのonClick関数にフィルターの値を渡すためfilter="SHOW_ALL"のように記述します。

src/components/Footer.js

import React from 'react';
import FilterLink from '../containers/FilterLink';

const Footer = () => {
  return (
    <p>
      Show: <FilterLink filter="SHOW_ALL">All</FilterLink>
      {', '}
      <FilterLink filter="SHOW_ACTIVE">Active</FilterLink>
      {', '}
      <FilterLink filter="SHOW_COMPLETED">Completed</FilterLink>
    </p>
  );
};

export default Footer;

Linkをクリックした際にonClick関数を呼ぶ

『preventDefault』は『デフォルトの動作を発生させない』という意味です。今回はaタグの中で使っているのですが、これは『aタグのherfで指定されたURLへ遷移する動作を発生させない』という意味を持っております。

src/components/Link.js

import React from 'react';
import PropTypes from 'prop-types';

const Link = ({children, onClick}) => {
  return (
    <a
      href="#"
      onClick={e => {
        e.preventDefault();
        onClick();
      }}>
      {children}
    </a>
  );
};

Link.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default Link;

これで、Linkを押すとviewの表示が切り替わる動作を実装することができました。
(Linkクリック→onClick関数が呼び出される→dispatch(setVisibilityFilter())が呼び出される→storeに保存されているフィルターの値が更新→viewが書き換わる)

現在activeなリンクを押せなくする

現在activeなリンクを押せなくするために、activeなリンクをただのテキストに変更する機能を実装いたします。

ここでは,Linkコンポーネントの現在の状態を知るためにprops.activeとしてデータを渡します。

src/containers/FilterLink.js

const mapStateToProps = (state, ownProps) => {
  return {active: ownProps.filter === state.visibilityFilter};
};

そして、activeの状態によってテキストを返すか、リンクを返すかをsrc/components/Link.jsにて判断いたします。

src/components/Link.js

import React from 'react';
import PropTypes from 'prop-types';

const Link = ({active, children, onClick}) => {
  if (active) {
    return <span>{children}</span>;
  }

  return (
    <a
      href="#"
      onClick={e => {
        e.preventDefault();
        onClick();
      }}>
      {children}
    </a>
  );
};

Link.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default Link;

以上で、『Filter Todo』の実装は完了です！

公式のBasicTutorial完了

これで公式のBasicTutorialと同じ機能が実装できたように思います。

リファレンス

• Redux Basic Tutrial
• Redux ExampleのTodo Listをはじめからていねいに(3)
• 配列のfilterメソッド
• JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識

以下のように指定して、vue-cli-service build --target wc でビルド。その後カスタムエレメントの属性で制約違反の値をセットしても、その値が入ってしまう。

コンソールにエラーは出るが、値が入るんじゃ全く意味がない。指定方法はこれで間違いはないと思うんだけどな。

export default class TestVue extends Vue {
  @Prop(Number) readonly prop_a!: number
  @Prop({ type: Number, required: true, default: 999, validator: function () { return false; } }) readonly prop_b!: Number
  @Prop({ type: String, required: true, default: "デフォルト", validator: function () { return false; } }) readonly prop_c!: string
  @Prop({ type: Boolean, required: true, default: true, validator: function () { return false; } }) readonly prop_d!: boolean
略
}

自力で値チェックして、エラー時はthis.$el.parentNode.removeChild(this.$el);で無理やり使えなくする処理が必要かな。
エラーが出ても画面上は変化がないからユーザは気付かずに使ってしまうだろうし。

Reactのフレームワークであり、かつ爆速でReact環境を構築できるNEXT.jsを使って、定番のTodoアプリを作ってみます。

そこにReact Hooksを使えばTodoアプリくらいなら10分もあれば作れるので、NEXT.jsまたはReact Hooksを使った事のない方は、気軽に取り組んでみてください。

作るもの

こんな感じの簡単なTodoアプリを作ります。

環境設定

NEXT.jsが動く環境を作ります。

まずはプロジェクトの作成。

$ mkdir next-todo-app
$ cd next-todo-app
$ npm init -y

次にNEXT.jsおよびReactを入れる。

$npm install --save react react-dom next

そこに pages/index.jsx を作成して、以下のReactコンポーネントのコードを書きます。

pages/index.jsx

const App = () => {
  return <h1>Hello World!</h1>;
};

export default App;

package.json のscriptsも書き換えます。

package.json

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

あとは、nextを起動させて、http://localhost:3000 でHello Worldが表示されているのを確認できれば完了です。

$ npm run dev

Todoアプリを作る

NEXT.jsで一瞬でReact環境を作ることができたので、次にTodoアプリを実装していきます。

Todoアプリの基本的なコードは以下の通り

pages/index.tsx

import { useState } from "react";

const App = () => {
  // 作成したtodoを入れておくためのstate
  const [todos, setTodos] = useState([]);
  // フォームに入力された値をtodoに登録するまでに入れておくためのstate
  const [tmpTodo, setTmpTodo] = useState("");

  const addTodo = () => {
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");
  };

  return (
    <>
      <h1>Todo App</h1>
      <div className="form">
        <input
          type="text"
          name="todo"
          // formの入力値をtmpTodoで持っておく
          onChange={e => setTmpTodo(e.target.value)}
          value={tmpTodo}
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => {
          return <li key={index}>{todo}</li>;
        })}
      </ul>
      <style>{`
        h1 {
          text-align: center;
        }
        .form {
          display: flex;
          justify-content: center;
        }
        ul {
          width: 200px;
          margin: 10px auto;
        }
      `}</style>
    </>
  );
};

export default App;

これで、Todoアプリに登録する処理が書けました。
React Hooksの1つであるuseStateを使うことで、stateの管理が一気に楽になります。

あとは、空白の状態でTodoが登録されないようにしつつ、削除処理のコードを加えて、Todoアプリは完成です。

pages/index.tsx

import { useState } from "react";

const App = () => {
  const [todos, setTodos] = useState([]);
  const [tmpTodo, setTmpTodo] = useState("");

  const addTodo = () => {
    // formの内容が空白の場合はalertを出す
    if (tmpTodo === "") {
      alert("文字を入力してください");
      return;
    }
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");
  };

  // todoを削除する処理
  const deleteTodo = index => {
    const newTodos = todos.filter((todo, todoIndex) => {
      return index !== todoIndex;
    });
    setTodos(newTodos);
  };

  return (
    <>
      <h1>Todo App</h1>
      <div className="form">
        <input
          type="text"
          name="todo"
          onChange={e => setTmpTodo(e.target.value)}
          value={tmpTodo}
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => {
          return (
            <li key={index}>
              {todo}
              {/* 削除ボタンを追加 */}
              <button onClick={() => deleteTodo(index)}>x</button>
            </li>
          );
        })}
      </ul>
      <style>{`
        h1 {
          text-align: center;
        }
        .form {
          display: flex;
          justify-content: center;
        }
        ul {
          width: 200px;
          margin: 10px auto;
        }
      `}</style>
    </>
  );
};

export default App;

NEXT.jsを使ってReact環境の構築が簡単になったこと、React Hooksを使ってStateの管理が簡単になったことで、Todoアプリくらいなら10分くらいで作ることができるようになりました。

他にもNEXT.jsを使うことで、

• デフォルトでサーバーサイドレンダリングされる
• デフォルトでコードスプリッティングされる
• デフォルトでSPAになっている
• ページごとのシンプルなページルーティング

などの利点があります。

まあ、複雑なことをやろうとすると厳しいところもあるNEXT.jsですが、Reactの環境構築としては秀逸なので触ってみる価値はあると思います。

今回作ったコードはこちらから
https://github.com/hiraike32/next-todo-app

JavaScriptのデータ型について

JavaScriptはC言語やJavaと違い、データ型に寛容です。
そのため、String型であろうが、Number型であろうと
let, var, constで宣言します。

data.js

//String
let str = 'This is a message'
console.log(typeof str) //string

//Number
let num = 10
console.log(typeof num) //number

//Boolean
let boo = true
console.log(typeof boo) //boolean

//Symbol
let sym = Symbol('This is a Symbol')
console.log(typeof sym) //symbol

//Undefined
let undefined
console.log(typeof undefined) //undefined

//Array(Object)
let array = [1, 2, 4, 8]
console.log(typeof array) //object

//Object
let array2 = { key: 'value' }
console.log(typeof array2) //object

//Function
let func = function () { console.log('This is a Function') }
console.log(typeof func) //function

変数の宣言について(var, let, const)

基本は以下の3つを使用して、変数宣言の命令をします。

var

ES2015以前よりあった命令です。

//Sample
var data = 'This is sample data' //var命令で変数を宣言します。

---

let

ES2015(ES6)で追加された命令です。

・特徴
let命令は、変数名の重複を許可しません。

//Sample
let data = 'This is sample data' //let命令で変数を宣言します。

data = 10 // Okay
let data = 10 //Error

---

const

ES2015(ES6)で追加された命令です。
(一部のブラウザの拡張機能により、以前から利用できましたが、ES2015で標準化されました。)

・特徴
const命令は、中身の変更を許可しません。

//Sample
const data = 'this is sample data' //const命令で変数を宣言します。

data = 'This is changed' //Error
const data = 'This is changed' //Error

命令をつけない場合

上記の命令を付けなくても、変数を宣言できます。
その場合、グローバル変数として宣言されます。
違いが分かりづらいので、例を以下に示します。

命令がある場合

//Sample
var data = 'Global variable'

changeValue = () => {
  var data = 'Local variable'
  return data 
}

console.log(changeValue()) //Local Variable
console.log(data)          //Global variable

命令がない場合

//Sample
data = 'Global variable'

changeValue = () => {
  data = 'Local variable'
  return data 
}

console.log(changeValue()) //Local Variable
console.log(data)          //Local Variable

今日やったこと

• ドットインストール「詳解JavaScript オブジェクト編」

コードは書かずにざっと動画を見てみました。

配列やオブジェクト、クラスの基礎について学びました。

後半は主に配列の操作方法についてですね。

Mathオブジェクト、Dateオブジェクトはドットインストールの他の講義でも出てきました。

オブジェクトの最後の要素にも,（カンマ）をつけてもエラーにならないのは知りませんでした。

後から他の要素を付け足したいときに手間が減るので、オブジェクトの最後で,(カンマ)で終わるようにした方がいいですね。

あと、setTimeout()とsetInterval()の違いについても確認しました。
システムに負荷をかけたくない場合は、setTimeout()を使うといいみたいです。

まだ理解しきれていない部分もありますが、アプリやゲームを作ってみない限りはなかなか理解しきれないので、あと１、２回見たら実践に入りたいと思います。

明日からも引き続き頑張ります。

おわり

こんにちは、ブログ「学生ブロックチェーンエンジニアのブログ」を運営しているアカネヤ(@ToshioAkaneya)です。

Hello. World!をブラウザに喋らせてみよう！

Web Speech API Speech Synthesisをご存知でしょうか。
テキストから音声を生成することの出来るブラウザAPIです。
ChromeではこのAPIを使うことが出来ます。

以下のコードを実行して見てください。3行ですみますa

const ssu = new SpeechSynthesisUtterance();
ssu.text = 'Hello, World!';
speechSynthesis.speak(ssu);

Hello, World!という流暢な英語が聞こえましたね？

他にも日本語を喋らせたり出来るので、ぜひこのAPIを使って遊んでみてください。

はてなブックマーク・Pocketはこちらから

はてなブックマークに追加
Pocketに追加

はじめに

職場の非技術職の方が業務効率を上げるためにBacklogを試用し始めたらしいのだけど、「プロジェクト作成時に定型のマイルストーンを同時に作成したい(でもそんな機能がなさそう)、なんとかならないかなぁ」という話を小耳にはさんだので、用意されているREST APIで対応して使い勝手向上できないかなと試してみた。

で、Excel＋PowerShellでも出来そうだったけど、もともとExcelよりはGoogleスプレッドシートで情報管理はしていたそうなので、スプレッドシートで使えるGoogle Apps Scriptもあわせて試してみた。

(※ ちなみに筆者はGoogle Apps ScriptもJavaScriptも経験なし…)

Google Apps Scriptって？

• Google Apps Scriptは単体でも動くし、(ExcelのVBAのように)スプレッドシートなどに内蔵させて動作させることもできる
• GmailやカレンダーなどGoogleの各種サービスと簡単に連携できる
• スプレッドシートの操作も当然できる
  • シートやセルの基本的な操作はほぼCOMコンポーネント使ったExcelの操作と同じ
• 言語はJavaScript
• サードパーティのライブラリも豊富
  • ただBacklog操作用のライブラリは見つからなかった…

Backlogって？

• ヌーラボ社が運営しているタスク・プロジェクト管理のサービス
• REST APIが用意されているので定型操作を自動化できる

ということで、Google Apps Scriptのwebアクセス機能を使って、スプレッドシートに記入した「プロジェクト名一覧」と「マイルストーン一覧」を入力として、Backlog APIを使って「リストの全プロジェクトを作成・各プロジェクトのマイルストーンも初期設定として作成」してみたという話。

Google Apps Scriptで実装

スプレッドシートの操作

とにかく、以下をざっと見れば操作できるようになる。

• 【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル
  • 連載目次：超初心者向けGASでBotを作りながら基礎を学ぶ

ここの「【初心者向けGAS】」の1から14まで通してみれば、GASでスプレッドシートを操作する基本的な処理内容は把握できる。
1ページごとの内容も短く簡潔にまとめられているので、すごくわかりやすいし、意外と早く概要は理解できるはず。

スクリプトの作成

まずはデータ管理用のスプレッドシートを作成する。

ファイル名は適当に入力。

ファイルを作成したら、[ツール]メニューの[スクリプト エディタ]を起動する。

すると、新しいタブでスクリプトエディタが起動する。

デフォルトでmyFunction()という空の関数が作成され、このファイルにスクリプトを作成していく。
スプレッドシートと同じく名前(「無題のプロジェクト」となっているところ)をクリックすると名前変更できるので、適当に変更する。

保存と実行とログ出力

Google Apps Scriptでは、(print()とかconsole.log()のような)ログ出力にはLogger.log()を使用する。

コード.gs

function myFunction() {
  Logger.log("hello world");
}

こんなコードを書いたら…

未保存のマークがつくので、Ctrl-Sで保存(自動保存じゃないみたい)

保存したら、Ctrl-Rで実行。

Ctrl-R以外にも、メニューバーや[実行]->[関数を実行]からも実行できる。

Logger.log()で出力した内容は、Ctrl-Enterか[表示]->[ログ]で出力内容を確認する。

関数が複数ある場合は、実行する関数を選択して実行することもできる。(個人的にこの仕組みはびっくりしたｗ)

参考: 【初心者向けGAS】はじめてのスクリプトを作成し、保存し、実行する

スプレッドシートの基本操作

基本的な操作は以下の通り。
(実はExcelの操作とまったく同じ)

1. スプレッドシートを開く
2. シートを開く
3. セルを取得する
4. 取得したセルに対して読み書きを行う

スプレッドシートを開く

スプレッドシートのスクリプトエディタで作成したスクリプトであれば、とにかく以下のコードで「開いているスプレッドシートのオブジェクト」が取れる。

var ss = SpreadsheetApp.getActiveSpreadsheet()

GASやJavaScript固有の単語はまだちょっと把握できてないけど、C++/Java的にいうとSpreadsheetAppクラスのgetActiveSpreadsheet()staticメソッドを呼んでいる感じ。

スプレッドシートに対する操作は、すべてこのメソッドで取得できるオブジェクト(ここではss変数)に対して行う。

参考: 【初心者向けGAS】Spreadsheetサービスの「オブジェクト」の基礎の基礎を知ろう

シートを開く

スプレッドシートは(Excelも同様に)複数のシートで構成されているので、処理対象のシートを選択する。
スプレッドシートを開くときに使用したgetActiveSpreadsheet()と同じように、現在アクティブなシートを開くgetActiveSheet()もあるが、複数シートがあると制御が難しい。
複数シートのうちどれかを開く場合は、シート名を指定してgetSheetByName("シート名")を使うとよい。

例えばこのシートを開くのであれば、以下の通り。

var ss = SpreadsheetApp.getActiveSpreadsheet()
var sheet = ss.getSheetByName("マイルストーン")

参考: 【初心者向けGAS】スプレッドシートのシートを取得する２つの方法

セルを取得する

セルを取得するには何通りか方法があるが、基本はまずgetRange()でセルの範囲を指定する。

getRange()にも使い方が複数あり、

• セルの範囲が1つの場合
  • getRange('B1')で「B1セル」を取得する
  • getRange(1, 2)で、「1行目2列目」を取得する (数字は0でなく1開始)
• 範囲が複数の場合
  • getRange('A1:B5')で「A1からB5までの範囲を取得する
  • getRange(1, 2, 3, 5)で「1行目2列目から3行目5列目」を取得する

  var cell = sheet.getRange("A1")

シート内のデータ件数がいくつあるか不明の場合でも、getLastRow()で、データが入力されている最終行を取得できる。

  var lastRow = sheet.getLastRow();

セルに対して読み書きする

getRange()で取得したセルに対してgetValue()を行うことでセルの内容を取得できる。
セルの範囲が複数の場合はgetValues()(複数形)で、リスト形式で内容を取得できる。

  var cell = sheet.getRange("A1")
  Logger.log("cell A1: %s", cell.getValue())  // A1セル内の値が取得できる

  var list = sheet.getRange(dataRowIndex, dataColumnIndex, lastRow, dataColumnIndex).getValues();

セルに値を書き込むには、setValue()を使用する。

  sheet.getRange(i, checkedColumnIndex).setValue("登録済")

参考: 【初心者向けGAS】スプレッドシートのセル・セル範囲とその値を取得する方法

メニューの追加

function onOpen(e)を使うことで、スプレッドシートにオリジナルのメニューを追加して任意の関数を簡単に呼び出せるように設定できる。

スクリプト内に、onOpen(e)という関数を定義することで、スプレッドシートを開いたタイミングでこの関数が読み込まれるので、ここにメニューを追加する処理を定義すればOK。

function onOpen(e) {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Backlog')
  .addItem('プロジェクト作成', 'createBacklogProject')
  .addItem('プロジェクト情報取得', 'getBacklogProjects')
  .addToUi();
}

createMenu("メニュー用文字列")にメソッドチェーン(関数の戻り値にさらに関数をつなげて書ける書き方のこと)でaddItem()で項目を追加する。
追加時の注意として、メニューを選択されたときに実行する関数名を文字列としてセットする。
(createBacklogProjectでなく'createBacklogProject'ということ)

参考: スプレッドシートとGASでTrelloのリストにカードを作成するツール / スプレッドシートのメニューに項目追加

REST APIの実行

RESTの操作で使用するのは、webアクセスを行うUrlFetchApp.fetch()と、JSONをparseするJSON.parse()。

BacklogのAPIを実行するには、APIキーを作成し、リクエストするURLに付加してアクセスすればよい。
(OAuth2も使えるけど、キーの期限切れ時の処理とかの処理とかが増えるので、今回はAPIキーで実装)

認証と認可 | Backlog Developer API | Nulab

APIキーの設定

Backlogの「個人設定」のメニューからAPIキーを作成する。
メモには用途など適当に入力して[登録]を押下。

このAPIキーの文字列を使えば、作成したユーザの権限であらゆる操作ができるようになるので他人に漏れたりしないようにしっかり管理する。
万一漏れてしまった場合は、×ボタンから削除し、再作成を行う。

APIキーをスクリプト内にそのまま書いても良いが、その場合はスクリプトをほかの人と共有設定するとAPIキーもほかの人に漏れてしまうので注意。
(共有する場合は、外部ファイルに設定ファイルとして持たせて、GAS実行時に外部ファイルを読み込む仕組みなどが必要)

参考: GASでテキストファイルの内容を読み取る - Qiita

プロジェクト一覧の取得

まずはお試しで自分が見えるプロジェクトの一覧を取得してみる。
プロジェクト一覧の取得 | Backlog Developer API | Nulab

メソッドはGETでURLは/api/v2/projects、クエリパラメーターは必須項目はないのでまずは省略してアクセスしてみる。

URLのベース部分は、ダッシュボードを開いたときのこの部分。

といっても、これだけ。

  var base_url = 'https://***.backlog.com'
  var endpoint = base_url + '/api/v2/projects';
  var apiKey = '*** api key ***';

  var url = endpoint + '?' + 'apiKey=' + apiKey;

  var resp = UrlFetchApp.fetch(url);

これで、https://***.backlog.com//api/v2/projects?apiKey=********にGETアクセスしたレスポンスがrespに入る。
レスポンスの内容はオブジェクトになっており、ステータスコード(getResponseCode())やレスポンスヘッダ(getAllHeaders())などいろいろセットされているが、APIからの応答であるレスポンスボディを参照するにはresp.getContentText()で取り出せる。
レスポンスの内容はAPI仕様の通りで、JSONの連想配列になっているプロジェクト情報が配列形式になっている。

これをJSON.parse()に通せば、オブジェクトとして操作できる。
プロジェクト名(name)とプロジェクトキー(projectKey)を出力する例。

  var json = JSON.parse(resp.getContentText())

  for(var i = 0; i < json.length; i++) {
    Logger.log("%s (key:%s)", json[i].name, json[i].projectKey)
  }

参考:

• 【Google Apps Script】天気予報をWeb APIで取得する方法
• Google Apps ScriptでREST APIを使って郵便番号住所変換スプレッドシート関数を作る

プロジェクトの作成

プロジェクトの追加 | Backlog Developer API | Nulab

URLはプロジェクト一覧の取得と同じ。
ただし、POSTメソッドを使って作成するプロジェクトのパラメタを付加する。

リクエストパラメーターがContent-Type:application/x-www-form-urlencodedとなっているので、HTTPリクエストヘッダにこれを設定。

そしてリクエストボディに表に記載されている項目を指定する。
curlコマンドであれば以下のような感じ。(APIキーは環境変数${API_KEY}にある前提)

$ curl -XPOST \
  -d 'name=PROJECT_NAME' \
  -d 'key=PJ_KEY' \
  -d 'chartEnabled=true' \
  -d 'subtaskingEnabled=true' \
  -d 'textFormattingRule=markdown' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  "https://******.backlog.com/api/v2/projects?apiKey=$API_KEY"

プロジェクト名などで日本語を使用する場合は、(いろいろ試した結果)UTF-8エンコードの文字列をURLエンコーディングすればOK

GASのコードで書こうとするとこんな感じ。
(プロジェクト名「ぼくのプロジェクト」、プロジェクトキー「PJKEY」で作成)

参考: Google Apps Script UrlFetchApp で Http Header を設定する | Monotalk

  var base_url = 'https://***.backlog.com'
  var endpoint = base_url + '/api/v2/projects';
  var apiKey = '*** api key ***';

  var url = endpoint + '?' + 'apiKey=' + apiKey;

  var params = {
    'name': 'ぼくのプロジェクト',
    'key': 'PJKEY',
    'chartEnabled': 'true',
    'subtaskingEnabled': 'true',
    'textFormattingRule': 'markdown',
  }
  var options = {
    'method': 'POST',
    'contentType': 'application/x-www-form-urlencoded',
    'payload': createQuery(params),
  }
  var resp = UrlFetchApp.fetch(url, options)

key1=value1&key2=value2&...の形式のリクエストボディを作成する標準関数的なものがあるのかどうかわからなかったので、以下のような関数を作成。(上記のpayloadの値に指定している部分)

日本語のURLエンコードについては標準で用意されているencodeURI()が使用できる。

参考: パーセント記号を使ったURL(URI)エンコード・デコード方法 - JavaScript TIPSふぁくとりー

// 連想配列をqueryにする関数
function createQuery(obj) {
  var query = []
  for(var key in obj) {
    query.push(key + '=' + encodeURI(obj[key]))
    //Logger.log(key)
  }
  return query.join('&')
}

これでプロジェクトの作成をAPIで実行できるようになった。

これだけだとwebの画面から手動で登録作業を行うのとあまり変わらないかもしれないけど、たとえば10件まとめて登録したい場合なんかは、登録したいプロジェクトの一覧のリストを用意し、ループで処理すればさくっと10件のプロジェクト作成ができるようになる。

マイルストーンの作成

ここから(「プロジェクト作成時に初期設定として定型のマイルストーンを作成したい」という要望の)本題。
といっても対象プロジェクトに対してマイルストーンを作成するBacklog APIを使用すればよい。

バージョン(マイルストーン)の追加 | Backlog Developer API | Nulab

API仕様をみると、「URLパラメーター」と「リクエストパラメーター」の二種類のパラメーターがあるが、要は「対象プロジェクトのプロジェクトキーをURLの一部に指定」「その他のパラメーターはリクエストボディに指定」という構成。

「URL」の仕様に:が入ってて紛らわしいけど、プロジェクトキー指定時は:は付けずに

'https://***.backlog.com/api/v2/projects/'+ project_id + '/versions'

って指定すればOK

ということで、指定プロジェクトに対して固定のマイルストーンを作成するには…

  var milestones = ["朝起きる",
                    "学校へ行く",
                    "授業受ける",
                    "部活に行く",
                    "帰宅する"]

というリスト形式のマイルストーンがあったとして、GASで指定プロジェクトに対してこの5つのマイルストーンを(必須項目のみで)作成するには以下のような感じ。

  var base_url = 'https://***.backlog.com'
  var endpoint = base_url + '/api/v2/projects/'+ project_id + '/versions'
  for (var i in milestones) {
    Logger.log("milestone: %s", milestones[i])

    var milestone_param = {
      'name': milestones[i]
    }

    var url = endpoint + '?' + 'apiKey=' + apiKey
    var milestone_option = {
      'method': 'POST',
      'contentType': 'application/x-www-form-urlencoded',
      'payload': createQuery(milestone_param),
    }
    var resp = UrlFetchApp.fetch(url, milestone_option)
  }

前述のプロジェクト作成もリスト処理できるようにして、このマイルストーン作成と組み合わせれば、初期設定として同じマイルストーン設定の複数のプロジェクトを、ワンアクションで一気に作成できるようになる。

前提：simplemde とは

SimpleMDE - Markdown Editor

簡単に組み込めるマークダウンエディタとして紹介されてる記事がいくつか上がってるライブラリ。

npm経由で使おうとした

$ npm i simplemde

app.js

import SimpleMDE from 'simplemde'

const simplemde = new SimpleMDE()

ら、

崩れた。

どうみてもスタイルがあたってない。

対処：直接CSSをimportする

app.js

import SimpleMDE from 'simplemde'
import 'simplemde/dist/simplemde.min.css'

const simplemde = new SimpleMDE()

本当に一瞬で実装できました。
esaあたりで見覚えあるこの画面。

おすすめです。

言いたいこと

vue.jsとvuetifyとfirebaseでライツアウトっていうゲーム作ったので遊んでってください。

実物
https://custom-bond-167105.firebaseapp.com/

github
https://github.com/tanakatanao/lightsout

前日談

ある日プログラミングコンテストの過去問を解いていた筆者はライツアウトという問題にぶち当たる。全然解けず仕方なく解法をネットで調べるもさっぱり意味がわからないため「解法がわからないなら作ればいいじゃない」という信条に基づいてvscodeを起動したのであった。

ライツアウトとは

ライツアウトは、5×5の形に並んだライトをある法則にしたがってすべて消灯 (lights out) させることを目的としたパズル。特徴としてはライトを押すと上下左右全てのボタンが押ささってしまう（北海道弁）
(出展wikipedia https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%84%E3%82%A2%E3%82%A6%E3%83%88)

こんな感じ

解法

下記のサイトが詳しいです。
http://www.ic-net.or.jp/home/takaken/nt/light/light2.html

自分が理解に時間がかかった部分だけここで補足すると
ライツアウトの原則として
- 二回押したら元に戻る(初期の状態に対して、押したか押していないかの状態しか存在しない）
- 押す順番は関係ない
という二点があります。

そのため取りうる状態は

みたいな初期状態に対して

押す押さないの組み合わせだけです。

そのため、押す押さないのパターンの組み合わせを全て求めればライツアウトは解けます。
ただこの解法だと状態が爆発するので、今回実装した解法はもう少し簡略化したもの。

今回の解法

ライトを押すと上下左右が点灯するということは、上のライトを消すためには一つ下のライトを押さなければなりません。
一つ上行の押す押さないが決定した場合、その一つ下の行からは上のライトの点灯状態によって押す押さないが自動的に決まります。

というちょっと組み合わせ数が減った解法でやってみたいと思います。
(ちなみにもっと計算数が少なくなる解法もありますけど直感的にわかりやすいこの解法を採用)

環境

• vue.js
• vuetify
• firebase

実装

詳しくは下記にて。
https://github.com/tanakatanao/lightsout

ちょこちょこ解説してきます。

状態を二次元配列でもつ

現在点いているかどうかを二次元配列で確保。

items: [
  [true, true, true, true, true],
  [true, true, true, true, true],
  [true, true, true, true, true],
  [true, true, true, true, true],
  [true, true, true, true, true]
],

押したら上下左右も変化させる

switch_on(y, x) {
  if (this.items[y][x]) {
    //直接値を入力すると変更が検知されないためこんな感じ
    this.$set(this.items[y], x, false);
  } else {
    this.$set(this.items[y], x, true);
  }
},

arround_change(y, x) {
  if (y > 0) {
    this.switch_on(y - 1, x);
  }
  this.switch_on(y, x);
  if (y + 1 < this.items.length) {
    this.switch_on(y + 1, x);
  }
  if (x > 0) {
    this.switch_on(y, x - 1);
  }
  if (x + 1 < this.items[y].length) {
    this.switch_on(y, x + 1);
  }
},

シャッフルする

shuffle() {
  this.dialog = false;
  this.init_guide();
  let i = 0;
  while (i < 5) {
    let j = 0;
    while (j < 5) {
      if (this.random_marubatsu()) {
        this.arround_change(i, j);
      }
      j = j + 1;
    }
    i = i + 1;
  }
},
random_marubatsu() {
  if (Math.random() >= 0.5) {
    return true;
  } else {
    return false;
  }
},

判定する

二次元配列の中に一つもtrueが含まれていなかったらゲーム終了。
二次元配列の中身全部チェックするのの良いやり方が見つからなかったため、とりあえず一列に直してから判定しております。

judge() {
  let judge_array = [];
  // 二次元配列を直列にする
  for (const i in this.items) {
    judge_array = judge_array.concat(this.items[i]);
  }
  // 配列に含まれているかを確認
  if (judge_array.includes(true)) {
    return true;
  } else {
    return false;
  }
},

答えをだす

ようやく今回の本当にやりたかったところ。
今回は全通り試してみて、成功に至る組み合わせの中で一番ボタンを押す回数が少ないものを答えとします。

先頭の押す押さないの組み合わせパターンを作る

correct_answer(now_array) {
  let n = 1;
  let front_array_pattern = [];
  let minimum_push_number = -1;
  let minimum_push_order = [];

  //先頭の組み合わせ作成
  while (n <= now_array.length) {
    front_array_pattern = front_array_pattern.concat(
      this.kumiawase([0, 1, 2, 3, 4], n)
    );
    n = n + 1;
  }

先頭のパターンの数だけ試行してみる

  //先頭のパターン分実施する
  for (let pattern in front_array_pattern) {
    //試行回数
    let push_number = 0;

    //初期化
    now_array = this.$lodash.cloneDeep(this.items);
    //先頭のパターン押下する
    for (let pattern2 in front_array_pattern[pattern]) {
      push_number = push_number + 1;
      now_array = this.math_arround_change(
        now_array,
        0,
        front_array_pattern[pattern][pattern2]
      );
    }
    // 二段目より下をやる;
    // 自分の上の段が光ってたら押下;
    let i = 1;
    while (i < now_array.length) {
      let j = 0;
      while (j < now_array[i].length) {
        if (now_array[i - 1][j]) {
          push_number = push_number + 1;
          now_array = this.math_arround_change(now_array, i, j);
        }
        j = j + 1;
      }
      i = i + 1;
    }

    //最後に判定
    if (this.math_judge(now_array)) {
      if (minimum_push_number == -1 || minimum_push_number > push_number) {
        minimum_push_number = push_number;
        minimum_push_order = front_array_pattern[pattern];
      }
    }
  }
  if (minimum_push_number != -1) {
    return minimum_push_order;
  }
}

これで一番押す回数が少なく済む一行目の押すパターンが手に入ります。
minimum_push_orderの値が-1の場合は解決できるパターンがなかったということです。
そういう日もあります。

ちなみにそれではゲームとしては面白くないので、これでは解けるやつしか出してません。

感想

ようやくライツアウトの解法が分かりました。正直これ作り出してから３０分くらいでわかってしまったのですが、途中でそんなことも言えず最後まで作りきるはめになってしまいました。vueから一年くらい離れていてリハビリがてら久しぶりに書いたんですが全て忘れていました。びっくりですね。もうどうせ全て忘れたのだから次はtypescriptとreactを新たに学ぼうと思います。

数値というのはプログラミングにおいて極めて基本的な対象です。ほとんどのプログラミング言語は何らかの形で数値の操作を行うことができ、もちろんJavaScriptにおいても例外ではありません。

プログラミングにおける数値の特徴的な点は、往々にしてその性質に応じた複数の型¹が与えられている点です。まず、数値は整数か小数かによって分類されます。さらに、値を表すのに使われるビット数、また整数に関しては符号ありか符号なしかという分類ができます。例えば、Rustという言語ではこれらの分類が分かりやすく表れています²。Rustにおける数値の型はi32, i64, u32, u64, f32, f64などがあり、見ただけでどのような特徴を持つ数値なのかが分かりやすくなっています。iというのは符号あり整数、uというのは符号なし整数、fは小数で、その後の数字がビット数ですね。

では、JavaScriptにおいては数値はどのように扱われているのでしょうか。この記事では、JavaScriptの数値はどのように表されるのか、計算はどのように行われるのかなど、JavaScriptの数値に関するトピックを網羅します。

JavaScriptの数値は（今のところ）1種類

実は、JavaScriptの数値は型が1種類しかありません。熱心な方はBigIntの存在についてご存知かと思いますが、まだこれはぎりぎりJavaScriptに入っていないのでここでは1種類とカウントします。（BigIntについてはこの記事の後半で触れます。）

1種類しかないということは、上で紹介した「整数か小数か」「ビット数」などによる区別を持たないということです。結論から言ってしまえば、JavaScriptの数値は64ビットの浮動小数点数です。つまり、JavaScriptの数値は全てが小数なのです。

以下のようなプログラムではJavaScriptで整数を扱っているように見えますが、実はこれも1.0や2.0などのデータを扱っていることになります（整数と小数を区別する言語では1.0のように小数点を明示することでそれが小数データであることを明示することがあり、この記事でもそれに倣っています）。

const x = 1;
const y = 2;
console.log(x + y); // 3

3などと表示されるのも処理系が気を利かせているのであり、内部的には3.0というデータになっています³。

IEEE 754 倍精度浮動小数点数 (double)

より詳細に言えば、JavaScriptの数値型はIEEE 754 倍精度浮動小数点数です（長いので以降はdoubleと呼ぶことにします）。これは何かというと、64ビットの範囲内でどのように小数を表現するかを定めた規格のひとつです。doubleによる小数（浮動小数点数）の表現は極めて広く使用されており、コンピュータにおける小数の表現のスタンダードとなっています。

まず前提として、64ビットという限られたデータ量で任意の小数を表すのは不可能です。それゆえ、プログラムで表せる数値の精度には限りがあります。このことは、以下のよく知られた例に表れています。

// 0.30000000000000004 と表示される
console.log(0.1 + 0.2);
// false と表示される
console.log(0.3 === 0.1 + 0.2);

これは、0.1とか0.2という数が（2進数で数値を扱うコンピュータにとっては）きりの悪い数なので正確に表すことができないことが原因です。なので、0.1と書いた時点で、コンピュータはそれをぴったり0.1という数ではなく0.1000000000000000055511151231257827021181583404541015625という数として認識します。64ビットという限られたデータ量ではこれが精一杯で、これ以上正確に0.1を表すことはできないのです（doubleという規格を用いるならばの話ですが）。0.2についても同様で、コンピュータはこれを0.200000000000000011102230246251565404236316680908203125と認識します。この時点で、0.1も0.2もともに、実際よりもわずかに大きいほうに誤差が発生しています。

0.1 + 0.2という計算の結果は0.3000000000000000444089209850062616169452667236328125です⁴。ポイントは、0.1や0.2と書いた時点で発生していた誤差、そして加算で発生した丸め誤差がこの計算結果に蓄積しているということです。

一方で、プログラムに0.3と書いた場合もやはりすでに誤差が発生しており、コンピュータは実際の0.3に最も近いdoubleで表現可能な数である0.299999999999999988897769753748434595763683319091796875を採用します。

ここで運悪く、0.3をdoubleで表現しようとすると負の方向に誤差が発生しています。0.1と0.2はともに正の誤差を持っていたこともあり、これらが蓄積した結果0.1 + 0.2は0.3から離れすぎてしまいます。その結果、0.1 + 0.2の結果は0.3（に最も近いdoubleで表現可能な数）からずれてしまうのです。このずれはビット表現でいうとわずか1ビットです。実際、0.3にちょうど1ビットぶんの値である$2^{-54}$を足すと0.1 + 0.2になります。

// true と表示される
console.log(0.3 + 2 ** (-54) === 0.1 + 0.2);

結局ここで何が言いたいかというと、このような挙動はJavaScriptとは関係のない浮動小数点数の仕様であり、コンピュータで（固定長のデータで）小数を表そうとする限り避けようのないものであるということです。

ゆえに、JavaScriptの数値型を理解するには、IEEE 754由来の挙動はどれかということも知らなければなりません。というわけで、もう少しだけIEEE 754（double）について見てみましょう。

---

doubleによる小数の表現では、64ビットのうち最初の1ビットを符号ビット（0なら正の数、1なら負の数を表す）、次の11ビットを指数部、残りの52ビットを仮数部として用います。本質的には、指数部と仮数部はそれぞれ2進数で表された整数であると解釈されます。仮数部が$x$という整数で指数部が$y$という整数であるとき、その小数表現が表すのは$x \times 2^y$となります（実際には$x$はいわゆるけち表現を加味して決められることや、$y$は正負をバランスよく表せるように調整されることに注意が必要です）。ここから分かることは、指数部のビット数というのは小数で表せるスケール（どれくらい大きな/小さな範囲の数を表せるか）、そして仮数部のビット数というのは小数で表せる精度（小数を表すのにどれくらいの桁数を使えるか）に関わるということです。

特に、doubleにおける仮数部の精度は53ビットであることは覚えておくに値するでしょう（52ビットからなぜ1つ増えているのかは調べてみてください）。

そろそろ話をJavaScriptに戻しますが、JavaScriptの数値がdoubleによって表されているという話と上記のdoubleの仕様を組み合わせて言えることは、JavaScriptの数値の精度は53ビット分であるということです。

JavaScriptの数値の精度は53ビット

JavaScriptは整数と小数という区別が無いということは冒頭でお話ししましたね。これは、繰り返しになりますが、整数だろうと小数だろうと全部doubleで表しているということです。

ということはJavaScriptの整数の精度も53ビットということです。整数と小数を区別するプログラミング言語では整数の精度は32ビットだったり64ビットだったりしますから、それに比べると随分中途半端に思えます。ただ、それらの言語と比べると、JavaScriptでの整数はdoubleであることに由来する面白い挙動をします。それはだんだん下の桁から大ざっぱになっていくという挙動です。まずこの辺りを見ていきましょう。

整数の精度が53ビットということは、$0$から$2^{53}-1$までの整数は正確に表せるということを意味します。ただし、ここで正確に表せるというのは1つ違うとなりの整数と区別できるということを意味します。次の例は、$2^{53}-1$が両隣の数と区別できることを確かめています。

// false と表示される（2^53 - 2 と 2^53 - 1は違うものと認識されている）
console.log(2 ** 53 - 2 === 2 ** 53 - 1);
// false と表示される（2^53 - 1 と 2^53は違うものと認識されている）
console.log(2 ** 53 - 1 === 2 ** 53);

この範囲を超えると、となりの整数と区別することができなくなります。例えば、$2^{53}$と$2^{53}+1$は区別することができません。両者をdoubleで表すと同一のビット列となるためです。

// true と表示される（2^53 と 2^53 + 1は同じと認識されている）
console.log(2 ** 53 === 2 ** 53 + 1);

$2^{53}$を2進数で表すと100000000000000000000000000000000000000000000000000000（1の後に0が53個）である一方、$2^{53}+1$は100000000000000000000000000000000000000000000000000001です。どちらも整数としての表現に54ビット必要としていることが分かります。doubleは数の精度を53ビットしか確保できませんから、53ビットになるように丸められます（このときの丸めモードは最近接（偶数）丸めです）。これにより、両者はどちらも$2^{53}$に丸められて等しいと扱われるのです。

一方、$2^{53}+2$という数を考えてみます。これは100000000000000000000000000000000000000000000000000010ですから、53ビットに情報が減らされた後も依然として$2^{53}$とは異なります。

console.log(2 ** 53 === 2 ** 53 + 2); // false

この例では、整数として表すのに54ビット必要になったことで整数の精度が1ビット分大ざっぱになりました。さらに数を大きくしていくことで、下のほうからどんどんビットが削られて大ざっぱになっていくわけです。

このような事情から、JavaScriptにはsafe integer（安全な整数？）という概念があります。これは絶対値が$2^{53}-1$以下の整数を指し、計算結果がsafe integerならばずれが発生していない（上述の現象により正しい答えを表す整数からずれていない）ことが分かります⁵。

JavaScriptには与えられた数がsafe integerかどうか判定するNumber.isSafeInteger関数が用意されています。

console.log(Number.isSafeInteger(2 ** 53 - 1)); // true
console.log(Number.isSafeInteger(2 ** 53));     // false

こう真面目に解説するとJavaScriptはアホな言語なのではないかと思われるかもしれませんが（そして整数もdoubleで表さないといけないのが実際アホなことは否定しませんが）、整数を浮動小数点数で表そうとしたときにこのように情報が落ちていくことはdoubleの仕様から来る話でJavaScriptに特有の話ではないということは理解しておくべきでしょう。

NaNとInfinity, +0と-0

JavaScriptにはNaNとInfinityという特別な数値が存在します。NaNはNot a Number（数ではない）の略であることは知られていますが、JavaScriptでは数値の一種なので型を調べると数値型です。

console.log(typeof NaN); // "number"

言うまでもなく、これもIEEE 754由来の概念です。ですから、「JavaScriptにはNaNとかいう意味不明な値がある」などとは思わないでくださいね。

ただ、doubleはNaNを表すビットパターンを大量に（$2^{53}-2$個くらい）持ちますが、JavaScriptにおいてはNaNはただ一種類であり区別はありません。

NaNは数値が必要だけどどうしても無理な場合に表れます。例えば、parseInt（後述）で文字列を数値に変換しようとしたけど無理だった場合はNaNが結果となります。

console.log(parseInt("foobar!")); // NaN

また、0 / 0という計算をした場合もNaNとなります。

NaNの面白い（もちろんIEEE 754由来の）点は、NaN === NaNという比較がfalseとなることです。NaN < NaNなど、NaNを含む比較演算はすべてfalseとなります。ある数値がNaNかどうか判定した場合はisNaN（後述）を使うのがよいでしょう。

Infinityも同様です。これは「無限大」を表す特別な数値であり、IEEE 754由来です。無限大には正の無限大と負の無限大があります。

さらに、doubleは+0と-0という2種類の0が存在し、JavaScriptにおいても2種類の0が確認できます（普通の0は+0です）。+0と-0は===で比較しても等しいのが特徴です。

このように、JavaScriptにおいて広く使われる等値比較演算子である===もIEEE 754の影響を受けています。ES2015以降では、IEEE 754の影響を排除した等値比較の手段としてObject.isという関数が用意されています（cf. JavaScriptの等値比較を全部理解する）。

console.log(0 === -0); // true
console.log(Object.is(0, -0)); // false

以上でJavaScriptの数値型が裏ではどのようになっているか分かりました。これを踏まえてJavaScriptにおける数値に関連する演算を見ていきたいのですが、その前に数値リテラルの話を挟みます。

JavaScriptの数値リテラル

数値リテラルとは、プログラム中で数値を表現する方法です。プログラム中に123とか0.45と書いたら当然123とか0.45という数値になりますが、これらが数値リテラルです。

これはJavaScriptに限った話ではありませんが、0.123のように0.で始まる小数を書きたい場合は最初の0を省略して.123のように書けます。見かけても驚かないようにしましょう。

console.log(.123); // 0.123

また、整数を書きたい場合は123.0の最後の0を省略して123.とできます。JavaScriptではただ123とすればいいので特に意味はありませんが、整数と浮動小数点数を区別する言語では123と123.0が別の意味になるために後者を省略したい場合の記法として需要があるようです。

なお、数値のメソッドを呼びたい場合には注意してください。123のtoFixedメソッド（後述）を呼びたい場合には、123.toFixed()とするとエラーとなります。なぜなら、123.という数値の直後にtoFixedが並んでいる（123 toFixed()と書いたのと同じ）と解釈されるからです。これを回避するひとつの方法は(123).toFixed()ですが、文字数の少なさと見た目の面白さからこれを123..toFixed()とするのをよく見ます。こうすることで、123.が数値、.toFixed()でメソッド呼び出しと解釈されます。もちろん、123.0.toFixed()なども動作します。

さらに、数値リテラルは指数表記をサポートしています。これは1.23e5のように整数または小数のうしろにeと整数を付けるリテラルです。eの後ろは10の指数と解釈されます。よって、1.23e5は$1.23 \times 10^5$、すなわち123000と解釈されます。1e-4（0.0001と同じ）のようにeの後ろは負の整数も可能です。

また、ここまでは10進数表記でしたが、他に16進数・8進数・2進数のリテラルがサポートされています。それぞれ0xabcdef、0o755、0b1010111のようなリテラルです。これらの10進数以外のリテラルは小数点やeによる指数表記はサポートされていません。

また、桁数の多い数値リテラルを見やすく1_234_567のように書ける提案がもう少しで完成しそうです（cf. JavaScriptで数値の区切り文字を使いたい物語）。

以上が数値リテラルの話でした。まあ、特におかしな所はありませんでしたね。では、いよいよ数値演算の話に入っていきます。

JavaScriptにおける数値演算

とはいえ、JavaScriptの数値演算は、それほど特筆すべき点があるわけではありません。まず、普通の四則演算（+, -, *, /及び余り%）と累乗（**）が備えられています。

ただし、+は文字列の連結にも使われるので"5" + 1が"51"になったりする点はやや注意が必要でしょうか。-とかは両辺を数値に変換するので"5" - 1は4です。これらの演算子にオブジェクトを渡してしまったときの挙動はちょっと面白かったりするのですが（cf. JavaScriptのプリミティブへの変換を完全に理解する）、いまは関係のない話です。

やや注意が必要なのはビット演算です。JavaScriptは一般的なビットごと演算（&, |, ~）やビットシフト（<<, >>, >>>）を備えていますが、これらを使う場合は突然数値が32ビット整数に変換されます。このとき小数は0に近いほうへ丸められます。この結果として、32ビットを超える範囲の整数は下位32ビットのみが残されて他は捨てられます。また、負数は普通の2の補数表現によって表されます。

そして、32ビット整数に対してビット演算が適用され、結果が32ビット符号あり整数として再解釈されます（ただし、>>>のみ32ビット符号なし整数として解釈します）。

以上の説明で以下の結果が理解できることでしょう。

console.log((2 ** 32) | 0);   // 0
console.log(2 ** 31);         // 2147483648
console.log((2 ** 31) | 0);   // -2147483648
console.log((2 ** 32) >> 0);  // 0
console.log((2 ** 31) >> 0);  // -2147483648
console.log((2 ** 31) >>> 0); // 2147483648

また、<<などのビットシフト演算の右オペランド（シフト量を指定する数）についても右側は32ビット整数として扱われます。また、対象が32ビット整数ということで32個以上シフトするのは意味がないと考えられることから、32以上の数については32で割った余りが取られます。よって、次のような結果となります。

console.log(1 << 33);   // 2
console.log(1 << (-1)); // -2147483648

数値から文字列への変換

数値の計算に関する話は終わりにして、数値を文字列に変換したいときの話をしましょう。実は、JavaScriptは数値から文字列への変換メソッドを5種類提供しています。いずれも数値が持つメソッドとして利用可能です。

toExponential

このメソッドは数値を指数表現で文字列に変換します。指数表現というのは1.23e+5（$1.23 \times 10^5$を表す）のようにeを用いた表現です。toExponentialはどのような数値でもこの表現に変換します（NaNとかInfinityは除く）。引数で、小数点以下の桁数を指定できます。省略すると数値を表現するのに最低限必要な分を適切に選んでくれます。

console.log(150..toExponential(3)); // "1.500e+2"
console.log(0.1234.toExponential(1)); // "1.2e-1"

toFixed

toFixedは、逆に指数表現を用いない文字列表現を得たいときに使います。引数は小数点以下の桁数で、省略の場合は0（整数部分のみ）扱いです。また、絶対値が$10^{21}$以上の数は諦めてしまいます（後述のtoStringと同じになります）。

console.log(100..toFixed(3));     // "100.000"
console.log(0.000999.toFixed(5)); // "0.00100"

特筆すべき点として、safe integerの範囲を超える（しかし$10^{20}$を超えない）範囲の整数に対してはtoString（後述）よりもtoFixedのほうがより正確な⁶10進表現を求めてくれます。小数についても同様の場合があります。

console.log((2 ** 60).toString());   // "1152921504606847000"
console.log((2 ** 60).toFixed());    // "1152921504606846976"

toPrecision

toPrecisionは、引数で渡した数を有効数字の桁数とする文字列表現に直してくれます。必要に応じて指数表現が使われます。

console.log(1.234.toPrecision(3));        // "1.23"
console.log(1234..toPrecision(3));        // "1.23e+3"
console.log(0.00123.toPrecision(2));      // "0.0012"
console.log(0.0000000123.toPrecision(2)); // "1.2e-8"

toString

toStringは数値から文字列への暗黙の変換の場合に使われる標準的な方法です。結果は数値を普通に（必要最小限の桁数で）表現したものですが、toPrecisionの場合と同様に必要に応じて指数表現も使われます。

toStringには大きな特徴が2つあります。1つ目は、10進表示への変換を適度にサボることです。toFixedの例を再掲します。2 ** 60（$2^{60}$）に対する結果がtoStringとtoFixedで違っているという例でしたね。

console.log((2 ** 60).toString());   // "1152921504606847000"
console.log((2 ** 60).toFixed());    // "1152921504606846976"

$2^{60}$は正確に1152921504606846976ですが、(2 ** 60).toString()は最後の4桁が7000と大ざっぱになっています。

しかし、JavaScriptの整数の精度が53ビットしかないことを考えれば、実は1152921504606847000も2 ** 60になることが分かります。

console.log(2 ** 60 === 1152921504606846976); // true
console.log(2 ** 60 === 1152921504606847000); // true

$2^{60}$という61ビットの数が53ビットに情報を減らされる場合、8ビット分情報が落ちます。こうなると、丸めのことを考えてもその半分（7ビット）程度の違いは意味を成さなくなります。$2^7$は128ですから、6976と7000の間のたった24の差は無視できるのです。

このように、toStringは無視できる範囲で情報を落としてもよいことになっています。ちなみに、小数の場合でもこれは同じです。次の例を見れば分かるように、これはわりと人間に優しい仕様であるといえますね。

console.log(0.3.toString());  // "0.3"
console.log(0.3.toFixed(20)); // "0.29999999999999998890"

この場合、わざわざ0.2999999999999999889と書いても0.3と書いても結果は同じであるため、より少ない桁数で表されるほうが選ばれています。

console.log(0.2999999999999999889 === 0.3); // true

toStringにはもうひとつ特徴があります。それは、引数で基数を指定できる点です。これにより、10進数以外の表現を得ることができます。

console.log(12345.67.toString(16)); // "3039.ab851eb852" (Google Chrome 74の場合）

ちなみに、10進数以外は文字列を生成する具体的なアルゴリズムは実装依存です。

toLocaleString

これはIntl APIの一部で、言語や地域等の慣習に合わせて数値を文字列に変換してくれるメソッドです。詳しく説明するのは別の機会に譲るとして、ひとつだけ例を出しておきます。

console.log(1234567..toLocaleString("ja-JP", { style: "currency", currency: "JPY"}); // "￥1,234,567"

文字列から数値への変換

逆に、文字列をいい感じに解釈して数値に変換するという機能にも需要がありますよね。JavaScriptにはそのための方法がいくつかあります。

parseInt

その一つはparseIntです。Intというのはinteger（整数）のことですから、これは整数を表す文字列を数値に変換してくれます。

parseIntは大きな特徴が2つあり、1つは数値の後ろの余計な文字列を無視してくれることです。数値として解釈できない文字列はNaNとなります。

console.log(parseInt("55000"));   // 55000
console.log(parseInt("123px"));   // pxが無視されて結果は 123
console.log(parseInt("123.45"));  // 小数はパースしないので.45が無視されて 123
console.log(parseInt("foobar"));  // NaN

もうひとつは、第2引数で基数を指定できる点です。2から36まで可能です。

console.log(parseInt("ff", 16));        // abcdef を16進数で解釈すると 255
console.log(parseInt("100zzzzzz", 16)); // 256

ちなみに、16進数の場合はparseIntは特殊な挙動をします。それは、0xで始まる文字列をいい感じに解釈してくれるというものです。とてもいい迷惑ありがたい機能ですね。

console.log(parseInt("0xff", 16)); // 255

では、parseIntの第2引数を省略した場合はどうなるのでしょうか。この場合は先の例からも分かるように10進数として扱われますが、省略した場合はひとつ特殊な挙動があります。それは0xで始まる文字列を渡された場合で、この場合だけ気を利かせて16進数として解釈してくれるのです。

console.log(parseInt("0xff"));     // 255
console.log(parseInt("0xff", 10)); // 0 （第2引数を指定するとこの挙動はオフになるため）

最後に、parseIntは文字列前後の空白文字を無視してくれます。

console.log(parseInt("      123   ")); // 123
console.log(parseInt("   1  2  3  ")); // 1 （1の後の空白以降は全部余計な文字と見なされるので）

ちなみに、グローバル変数のparseIntではなくNumber.parseIntもあります（ES2015で追加）。こちらも同じ挙動となります。

parseFloat

parseFloatは、整数だけでなく小数も解釈してくれる関数です。まず、文字列前後の空白文字を無視してくれたり、後ろに余計なものが付いていても無視してくれるという点はparseIntと同じです。

parseFloatについては、10進の数値リテラルを文字列として表したものを解釈できます。

console.log(parseFloat("    123.45px")); // 123.45
console.log(parseFloat("1.23e4"));       // 12300
console.log(parseFloat("  .456"));       // 0.456

16進など、他の基数のリテラルは無理です。

console.log(parseFloat("0x123")); // 0

加えて、parseFloatはInfinityに対する特別なサポートがあります。

console.log(parseFloat("Infinity")); // Infinity

Infinityと書くとInfinityという数が得られますがこれはInfinityというグローバル変数が存在するからこそなので、parseFloatが"Infinity"に対応しているのはなかなか面白いですね。

実に簡単ですね。なお、Number.parseFloatをグローバルのparseFloatと同様に使えるのもparseIntと同じです。

Number

Numberは渡したものをなんでも数値に変換してくれる関数です。また、+"123"のように数値への暗黙の変換が要求される場合もこの変換が使われます。

Numberは、parse系メソッドと同様に前後に空白文字があっても許容します。ただし、それ以外の余計な文字が後ろにくっついているのはNaNとなります。

console.log(Number("1234"));     // 1234
console.log(Number(" 1234  "));  // 1234
console.log(Number("1234px"));   // NaN

この点を除いて、Numberは全ての数値リテラルを受け付けます⁷。また、parseFloatと同様にInfinityも受け付けます。

すなわち、parseFloatが受け付けてくれた全てのリテラルに加えて"0xff"や0b10101なども受け付けられるということです。parseIntと挙動が揃っていないのはご愛嬌です。

console.log(Number("0xff"));  // 255
console.log(Number("0b101")); // 5

その他の数値関係メソッド

他にもいくつか数値関係のメソッドがあるので紹介します。

isNaN・isFinite

isNaNは引数で与えられた数がNaNかどうか判定するメソッドです。

console.log(isNaN(123));      // false
console.log(isNaN(Infinity)); // false
console.log(isNaN(NaN));      // true

NaNはNaN === NaNがfalseになってしまうため、isNaNがNaNかどうか判定する簡単な方法です。

また、isFiniteは与えられた数がNaNかInfinityまたは-Infifityだったらfalseで他はtrueを返すメソッドです。これは意外と使いどころがある関数です。

console.log(isFinite(123.45));   // true
console.log(isFinite(NaN));      // false
console.log(isFinite(Infinity)); // false

parseIntなどと同様にこれらにもNumberの下にあるバージョン、すなわちNumber.isNaNとNumber.isFiniteがありますが、何とこれらはisNaNやisFiniteとは微妙に挙動が違います。

Numberバージョン、すなわちNumber.isNaNやNumber.isFiniteは、与えられたものが数値でない場合は即座にfalseを返します。一方、グローバルのisNaNやisFiniteはまず与えられたものを（Numberで）数値に変換しようとします。その結果、以下のような違いが現れることになります。

console.log(isNaN("foobar"));        // true （"foobar"を数値に変換したらNaNなので）
console.log(Number.isNaN("foobar")); // false （"foobar"は数値ではないので）
console.log(isFinite("1234"));       // true
console.log(Number.isFinite("1234"));// false

Number.isInteger, Number.isSafeInteger

Number.isIntegerは単純ですね。与えられた数値が整数かどうかを判定します。Number.isSafeIntegerは少し前に話題にのぼりました。絶対値が$2^{53}-1$以下の整数に対してtrueを返します。これらはNumber.isFiniteなどと同様に、数値以外には即falseを返します。

console.log(Number.isInteger(1234));     // true
console.log(Number.isInteger(123.4));    // false
console.log(Number.isInteger(Infinity)); // false

Numberの定数

数値に関連するメソッドは以上ですが、Numberにはいくつか付随する定数があります。

Number.MAX_SAFE_INTEGERは$2^{53}-1$です。つまり最大のsafe integerですね。同様に、Number.MIN_SAFE_INTEGERは$-(2^{53}-1)$です。

Number.MAX_VALUEはJavaScriptの数値型で（すなわちdoubleで）表現可能な最大の数です（Infinityは除く）。

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308

これは約$1.7976931348623157 \times 10^{308}$のようですね。

同様に、Number.MIN_VALUEはdoubleで表現可能な最小の正の数です。

console.log(Number.MIN_VALUE); // 5e-324

Number.MAX_VALUEに比べると有効数字が少ないような気がしますが、それはdoubleの0に近い部分では非正規化数（精度を落とすことで通常の小数（正規化数）よりも絶対値が0に近い数を表現する仕組み）が現れるからです。実際、この5e-324という数は精度を1ビットまで落とすことでぎりぎりまで0に近づけた数です。0より大きく5e-324より小さい数はJavaScript（あるいはdouble）には存在しません。例えば、5e-324 / 2は0となります。

他にはNumber.POSITIVE_INFINITY（Infinityが入っている）とNumber.NEGATIVE_INFINITY（-Infinityが入っている）、そしてNumber.NaNがあります（NaNが入っている）があります。グローバル変数のNaNやInfinityが信用ならないときに使いましょう。

最後に、Number.EPSILONという定数もあります。これは、「1」と「（doubleで表せる）1よりも大きい最小の数」の差です。doubleの仕組みを理解していれば、これが$2^{-52}$であることはすぐに分かるでしょう。

console.log(Number.EPSILON === 2 ** (-52)); // true

以上で、数値に関する話はだいたい語りつくしました。他にはMathオブジェクト以下で提供されるさまざまな数学関数もあります（ES2015でいろいろ追加されたのでまだ調べていない人は調べてみてください）。ここでは全ては紹介しませんが、少しだけ触れておきます。

面白いところでは、Math.clz32という関数があります。これは、与えられた数を32ビット（符号なし）整数に変換してleading zeroesを数える（2進表現における一番左の1よりも左にある0の数を数える）関数です。

console.log(Math.clz32(1)); // 31
console.log(Math.clz32(2 ** 31)); // 0
console.log(Math.clz32(-(2 ** 31))); // 0

また、Math.imulは2つの引数を符号なし32ビット整数に変換したあと乗算を行い、結果の下部32ビット（を符号あり32ビット整数として解釈したもの）を返します。

console.log(Math.imul(2 ** 15, 2 ** 16)); // -2147483648

他は普通の数学関数なので調べてみてください。

BigIntの話

さて、以上で数値の話は終わりました。しかし、この記事はこれだけでは終わりません。JavaScriptにはBigIntがあります。これはまだJavaScriptに正式採用されていないものの現在Stage 3のプロポーザルです。これは要するにJavaScriptにもうそろそろ正式に追加されそうということで、恐らく2020年にリリースされるES2020で正式にJavaScriptの仕様に追加されると思います。

BigIntはこれまで説明してきた普通の数値（number型）とは別の型であり、任意精度の整数を表す型です。ざっくり言えば、ビット数という制限に囚われずに好きなだけ大きい整数を表すことができるという、従来の数値とはまったく異なる特徴を持つ値です。ただし、小数は範疇外です。あくまで整数のみが対象となります。

BigInt型の値を作るには主に2つの方法があります。一つはBigIntリテラルを使う方法です。これは123nのように整数の後にnを付けるリテラルを用います。

もう一つはBigInt()関数を使う方法です。これはNumber()のように、与えられた値をBigInt型の値に変換してくれます。整数を表す数値や文字列をBigInt()に与えることでBigInt型の値を作ることができるのです。

BigInt型の値はtypeof演算子で調べると"bigint"という結果になります。

console.log(123n);                   // 123n
console.log(typeof 123n);            // "bigint"
console.log(BigInt(123) === 123n);   // true
console.log(BigInt("123") === 123n); // true

BigInt型の値は、普通の数値と同様に四則演算が可能です。ただし、これはBigInt同士の計算に制限されています。BigIntと普通の数値を混ぜるとエラーになります。また、BigIntは小数を表しませんので、割り算が割り切れない場合は切り捨てられます。

console.log(2n + 3n); // 5n
console.log(2n * 3n); // 6n
console.log(5n / 2n); // 2n

BigIntが普通の数値とは異なり精度に制限がないことを確かめてみましょう。

console.log(2 ** 60 + 10 === 2 ** 60);      // true （普通の数値は精度が53ビットしかないので）
console.log(2n ** 60n + 10n === 2n ** 60n); // false （BigIntはどんな大きさの整数も正確に表現可能）

このような挙動はたいへんうれしいですね。とりわけ、これまでJavaScriptで扱うのが難しかった64ビット整数がBigIntを使えば自然に表せるのがとても偉いです。BigIntの導入以降は、53ビット以上に大きな整数が必要な場面でBigIntが活用されていくことになります（cf. JavaScriptの日時処理はこう変わる！　Temporal入門）。

また、BigIntは任意精度のビット演算ができるのも嬉しい点です。従来の数値型では32ビットに制限されていたビット演算が、BigIntでは任意の精度で可能です。

console.log((2n ** 60n | 2n ** 55n === 2n ** 60n + 2n ** 55n); // true

BigInt関連のメソッド

以上がBigIntの基本機能です。また、以下の2つのメソッドがBigIntに関連して提供される予定です。

BigInt.asUintN, BigInt.asIntN

BigIntの値を指定したビット数に制限して得られる新しいBigInt値を返します。例えばBigInt.asUintN(64, n)はnの下位64ビットの値を表すBigIntです。asUintNとasIntNの違いは、得られた下位nビット分の値を符号なし整数として解釈するか符号あり整数として解釈するかの違いです。

console.log(BigInt.asUintN(64, 7n * (2n ** 62n)) === 2n ** 63n + 2n ** 62n); // true

BigIntの上限

ちなみに、BigIntはどれくらい大きな整数を表せるのでしょうか。実は、仕様ではBigIntの上限は定められていません。理想的な処理系では、どんなに大きなBigIntでも表せることになります。

ところが、現実にはそうもいきません。最悪のケースでも、コンピュータのメモリを全部食いつぶしてしまえばそれ以上の大きさのBigIntは作れないわけです。

もちろん、現実の処理系はそういう事態になるより前に何らかのエラーを発生させるでしょう。

これについては、BigIntの上限を調べてみた方がいるようです。それによれば、Google ChromeではBigIntの上限$M$は$2^{2^{30}-1} \leq M \leq 2^{2^{30}}$を満たすようです。恐らくビット数で制限されているであろうことを考えると、ChromeではBigIntの最大精度は$2^{30}$ビットと考えてよさそうです。$2^{30}$ビットというのは1GBですから、ChromeはひとつのBigIntに対して1GBまでの使用を許してくれるようです（複数のBigIntを同時に作る実験は行われていないので、複数のBigIntの合計が1GBとかそういう話かもしれません。未検証です）。

もっとも、BigIntの演算というのは定数時間ではないので、実際の1GBのメモリを使って表されたBigIntに対して計算を行うのは非常に時間がかかることでしょう（前述の記事でも実際にそのような結果が報告されています）。

まとめ

この記事ではJavaScriptの数値型について概観しました。

ポイントは、（BigIntではない従来の）数値型は整数と小数を区別せず、IEEE 754倍精度浮動小数点数で表されているという点です。その結果、整数が53ビットという一見中途半端な精度を持っていたり、浮動小数点数に特有の（0.1 + 0.2 !== 0.3のような）挙動が表れます。特に、どの挙動がJavaScriptに特有の話でどの挙動がIEEE 754由来の話なのかはよく考えておくべきでしょう。万一にもIEEE 754をバカにするつもりでJavaScriptをバカにしてしまったら末代までの恥です。

とはいえ、JavaScriptも歴史ある言語ですから、数値周りの挙動も中々面白いものが出来上がっています。そのあたりをこの記事で楽しんでいただけたなら嬉しいです。

---

1. これは静的型にも動的型にも言えることですね。 ↩

2. usizeとかisizeがちょっと厄介なのですが、ここではあまり関係がないので触れるのを避けることにします。 ↩

3. 本当の処理系の内部では最適化して整数として扱われている可能性もありますが、仕様上は全て浮動小数点数として扱われています。 ↩

4. 筆算してみたけど結果が全然違うじゃないかと思われる方がいるかもしれませんが、0.1と0.2では指数部（後述）が異なるのでそれによる丸め誤差が発生しているからです。なので、本当はこうやって割り切れるまで10進展開した値を書くことにはそこまで意味がないのですが、ここでは何となく誤差があるんだよということを認識してもらうのが目的なので大目に見てください。 ↩

5. 複雑な計算の場合は途中の計算もsafe integerになっていないといけませんが。 ↩

6. 正確なというのは、53ビットで表せない範囲の部分をちゃんと最後まで10進展開してくれるという意味です（詳しくはtoStringのところで説明します）。 ↩

7. ただし、前述のnumeric separators（1_234_567みたいなやつ）が導入された場合はNumberはこれを解釈してくれないという仕様になる予定のようです。 ↩

日時の処理は様々なアプリケーションにおいて避けては通れないタスクです。JavaScriptにおいてもそれは例外ではありません。

JavaScriptでは最初期からDateオブジェクトが日時を表すオブジェクトとして存在していましたが、これは非常に使いにくいAPIで知られています。その結果、momentに代表されるような日時処理ライブラリを使うのが事実上スタンダードとなっています。

この記事では、将来的に日時処理の有力な選択肢になると期待されるモジュールであるTemporalについて解説します。Temporalでは、既存のDateによる日時処理のつらい部分が解消されることが期待されています。

なお、例によってTemporalはまだ策定中の仕様です。現在Stage 2というフェーズにあり、APIを鋭意策定中という状況です。よって、この記事にかかれている内容は確定までにまだ変化するかもしれません。この記事でTemporalの雰囲気を理解し、実際に使う際はご自分での情報収集が必要です。覚えていればこの記事もちゃんとアップデートしますが。

Temporalの特徴

Temporalについて詳説する前に、Temporalの特徴的な部分をまとめておきます。具体的なひとつひとつのAPIがまだ今後変わりそうなことを考えれば、この記事で一番重要なのはここです。特に、Temporalについてどのようなデザイン上の決定が為されているのかを知るのはTemporal、ひいては今後のJavaScriptの展望を理解するのに役立つでしょう。

1. 標準ライブラリに含まれている

Temporalは標準ライブラリに含まれるモジュールです。標準ライブラリについては筆者の別記事で詳しく解説しているのでぜひチェックしてください。

• 今からでも追いつける！　JavaScriptの「標準ライブラリ」を学ぶ

外部ライブラリを使うという選択肢はTemporalの登場後も消えることは無いでしょうが、それらと比べたTemporalの利点はTemporalが標準ライブラリに含まれていることです。特にブラウザ環境では、Temporalで事足りるならば外部ライブラリが不要になり、JavaScriptのダウンロードサイズを削減することができます。

標準ライブラリの概念の登場によってこれまで最低限だったJavaScriptの機能を拡充しようという動きがあり、Temporalもその一環だといえます。

2. オブジェクトがイミュータブル

Temporalが提供するオブジェクトはイミュータブルです。つまり、オブジェクトを作成した後でそれが表す日時情報を書き換えることはできません。別の日時情報を表したい場合は別のオブジェクトを作ることになります。

これと対称的に、既存のDateオブジェクトはミュータブルでした。つまり、setFullYearやsetHoursなどのメソッドを使ってDateオブジェクトの日時情報を書き換えることができたのです。

なぜミュータブルなオブジェクトよりもイミュータブルなオブジェクトのほうがよいのかは今さら言うまでもありません。特に今回扱うのは日時情報という「データ」の側面が強いものを表すオブジェクトです。例えば日時データを他の関数に渡すような場合に、その関数の中でオブジェクトが書き換えられてしまわないかどうかをわざわざ心配するのは無駄ですね。

// 日付データを引数で受け取る
function foo(date) {
  // 別の関数に渡す
  bar(date);
  // dateはイミュータブルなのでbarによって書き換えられている心配はない
  console.log(date);
}

そもそも単なる日時データとしてもDateが使いにくかったことがTemporalが登場する動機のひとつとなっています。

3. 意味に応じて異なるオブジェクトを使用

既存のDateオブジェクトの最大の問題点はタイムゾーンの扱いがとても適当であるという点です。Dateオブジェクトは自分のタイムゾーンはどこかという情報を持っています¹。明示していない場合タイムゾーンは環境依存です。また、（特にタイムゾーンが1つしかない日本では）タイムゾーンが特に必要でない日時処理もあり、そのような場合でもDateの仕様上タイムゾーンを意識しなければならないのはバグの元だし残念です。

そこで、Temporalではタイムゾーンの情報を持つデータとタイムゾーンの情報を持たないデータを別々のオブジェクトで表現します。タイムゾーンの情報を持たない日時情報はCivilDateTime、タイムゾーンの情報を持つ日時情報はZonedDateTimeというオブジェクトで表現します。また、詳しくは後述しますが他にもいくつかの種類のオブジェクトが利用可能です。

4. ナノ秒単位のデータが扱える

読んで字のごとしです。既存のDateオブジェクトの時刻データはミリ秒単位の精度ですが、Temporalでは精度が6桁増えてナノ秒単位になりました。

Temporalの使い方

では、いよいよTemporalの使い方を解説していきます。

Temporalを読み込む

Temporalは標準ライブラリに加えられる見込みですので、import文を用いて読み込むことになります。例えばCivilDateTimeというオブジェクトを使用したいときは次のようにします。

import { CivilDateTime } from "std:temporal";

"std:temporal"の部分は未確定です。"js:temporal"とかになるかもしれません。

もちろんこれはまだブラウザ等には実装されていません。公式のPolyfillが存在しますが、仕様が変更されるにつれてPolyfillにも変更が加えられることになっていますので安定したものではありません²。また、現状ではこのPolyfillも少し古い情報（2019年3月以前の仕様）に基づいており、最新の情報を反映していません。以降のサンプルでは可能なものはこのPolyfillで動作を確認しています。

オブジェクトの種類

Temporalが提供するオブジェクトは現在のところ以下の種類があります。

• Civil系： CivilDateTime, CivilTime, CivilDate, CivilYearMonth, CivilMonthDay
• 絶対時間系³： Instant, OffsetDateTime, ZonedDateTime

Civil系オブジェクト

Civil系というのはタイムゾーン情報を持たないデータで、持っている情報によってオブジェクトの種類が細分化されています。例えばCivilDateというのは日付の情報、すなわち年・月・日を持つオブジェクトです、CivilTimeは時計、すなわち時間・分・秒及びそれ以下です。CivilDateTimeは日付と時計の両方の情報を持っています。また、CivilYearMonthというのは年と月のみで日及び時計の情報を持たないデータです。CivilMonthDayも同様に月と日のみで年の情報を持ちません。

重要なのは、これらのCivil系オブジェクトは絶対的な（全世界的に一意の）ひとつの時刻を指し示すものではないということです。Civil系オブジェクトは例えば「2019年5月1日12時0分0秒」のように暦（こよみ）上の情報、すなわちカレンダーや時計の表示を表すものですが、このデータだけでは全世界的に一意の時刻を表すことはできません。例えば、日本とイギリスではこのデータが表す絶対時刻は9時間⁴ずれています。

要するに、Civil系オブジェクトはタイムゾーンあるいはオフセットの情報を持たないデータであるということです。これらのオブジェクトはタイムゾーンと関係ないローカルなデータや、カレンダーの処理をしたい場合に適しています。

絶対時間系オブジェクト

Civil系以外の残りの3つのオブジェクトは絶対時間を表すことができます。Instantオブジェクトはその中でも「生データ」に近いオブジェクトであり、時刻を1970年1月1日0時0分0秒（世界標準時）からの経過時間（ナノ秒単位）で保持しています⁵。

このように1970年1月1日からの経過時間で絶対時刻を表す方法はコンピュータにおける時刻表現として広く使われており、UNIX時間として知られています。InstantはこのUNIX時間を表すオブジェクトであるといえます。

さて、Instantにより絶対時刻を表すことができますが、これは不便です。なぜなら、オフセットの情報が無いと実際にはこれが何月何日の何時何分なのか分からないからです。これも先ほどと同じ話で、例えば「1970年1月1日0時0分0秒（世界標準時）から100秒後」という時刻はイギリスでは1970年1月1日の0時1分40秒ですが、日本では1970年1月1日の9時1分40秒を表しており、ひとつに定まりません。

オフセットは、世界標準時からどれだけ時差があるかということを表す分単位の情報です。例えば日本は世界標準時よりも9時間進んでいるのでオフセットは+09:00です。イギリスは世界標準時と同じなので+00:00となります。

絶対時刻とオフセットの2つの情報を組み合わせることで日時（カレンダー・時計の値）をひとつに定めることができます。例えば「1970年1月1日0時0分0秒（世界標準時）から100秒後」という時刻は+09:00というオフセットにおいては「1970年1月1日9時1分40秒」という日時を表すのです。

逆に言えば、日時とオフセットがあれば絶対時刻を特定することができます。つまり、「オフセット+09:00における1970年1月1日9時1分40秒」というデータは「1970年1月1日0時0分0秒（世界標準時）から100秒後」という絶対時刻を一意に表しています。

前置きが長くなりましたが、このような「日時とオフセット」の情報を持つオブジェクトがOffsetDateTimeです。

最後のZonedDateTimeはOffsetDateTimeと同様に日時の情報を持つオブジェクトですが、オフセットの代わりにタイムゾーンを持っています。

タイムゾーンは地域名により表現されるデータであり、例えば日本のタイムゾーンはAsia/Tokyoです。そして、Asia/Tokyoのオフセットは+09:00であるというデータがtz databaseに保存されているためタイムゾーンからはオフセットを得ることができます。これにより、ZonedDateTimeもやはり絶対時刻を表すことができます。

OffsetDateTimeとZonedDateTimeの大きな違いは、後者はタイムゾーン内でのオフセットの変化に対応可能だということです。日本ではあまり馴染みがありませんが、典型的には夏時間の影響により、時季によって同じタイムゾーン内でもオフセットが変わる可能性があるのです。これにより、ZonedDateTimeに対して日時の操作を行う場合、同じタイムゾーンでもオフセットが勝手に変動することがあります。一方のOffsetDateTimeは常に固定のオフセットを持ちます。一般に、タイムゾーンに寄り添った日時処理を行いたい場合はZonedDateTimeが便利ですね。

まとめると、Civil系オブジェクトは暦により表された情報のみを持ちオフセットやタイムゾーンの情報を持たないオブジェクトで、絶対時刻を表すものではありません。Instant, OffsetDateTime, ZonedDateTimeはいずれも絶対時刻を表すもので、さらにOffsetDateTimeはオフセットの情報を、ZonedDateTimeはタイムゾーンの情報を持っています。

なお、Temporalが採用している暦は先発グレゴリオ暦であり、これは我々が慣れ親しんでいる暦（グレゴリオ暦）をグレゴリオ暦が実際に使われるよりも以前にも適用するようにしたものです。この暦は古い日付も統一的に扱えて簡単であるという利点からプログラミング言語での採用例があり、日時の表記の国際規格であるISO 8601にもこれが採用されています。Temporalは基本的にISO 8601に準拠して作られています。

では、ここからは各オブジェクトを見ていきます。とはいえ、TemporalのAPIはまだ変化の途上にあり、何ヶ月もすればAPIが別物になっているということも普通にあります。ですから以下の話はおまけ程度に考えてください。どちらかといえばここまで説明したコンセプトのほうが重要です。

CivilDateTime

つい先程述べたように、CivilDateTimeは暦の上での日時情報を表すオブジェクトです。具体的には、年・月・日・時間・分・秒・そして秒以下の数値で日時を表します。CivilDateTimeオブジェクトを作る方法の1つはCivilDateTimeコンストラクタを使うものです。例えば、過ぎし2019年5月1日の0時0分0秒を表すCivilDateTimeは次のように作ります。

// 年, 月, 日, 時, 分の順でコンストラクタに数値を渡す
const startOfReiwa = new CivilDateTime(2019, 5, 1, 0, 0);

まず最初に気づいていただきたいのは、月は1始まりということです。古いDateオブジェクトでは月は0〜11の整数で表され、0が1月、1が2月、……11が12月というとても間違えやすい仕様になっていたのですが、Temporalでは1〜12の数値になっています。

上の例ではコンストラクタの引数は5個ですが、最大9個まで数値を指定可能です。意味は順に年、月、日、時、分、秒、ミリ秒、マイクロ秒、ナノ秒です。ミリ秒以下は0から999の数値で指定します。例えば、2019年5月1日の2時34分56.789012345秒という時刻を表したい場合は次のようにします。

const time = new CivilDateTime(2019, 5, 1, 2, 34, 56, 789, 12, 345);

CivilDateTimeコンストラクタの引数は最低5個必要です。つまり、秒以下は省略可能ですが分以上は省略できません。省略したところは当然0になります。

CivilDateTimeのプロパティ

こうして作られたCivilDateTimeオブジェクトからはいくつかのプロパティを通して情報を取得可能です。基本的なプロパティはyear、month、date、hour、minute、second、millisecond、microsecond、nanosecondで、上記のコンストラクタの引数にちょうど対応した情報を持っています。

console.log(time.year); // 2019
console.log(time.day);  // 1
console.log(time.millisecond); // 789

DateではgetFullYear()などとする必要があったのに比べると簡潔で嬉しいですね。

また、いくつか追加の情報を取得できるプロパティがあります。dayOfWeekはその日付の曜日を表す数値であり、1（月曜日）〜7（日曜日）の整数で表されます。dayOfYearはその日がその年の1月1日から数えて何日目かを表す数値です（1月1日は1日目です）。そしてweekOfYearは週番号、すなわちその日を含む週がその年の何週目かを表す数値です。

console.log(time.dayOfWeek);  // 3 （2019年5月1日は水曜日）
console.log(time.dayOfYear);  // 121
console.log(time.weekOfYear); // 18

なお、週番号についてはISO 8601で規定されているものであり、「年の最初の木曜日を含む週がその年の第1週である」とされています。その結果、次の例のように年始の日付が前の年の最終週に属するという判定になることがあります。

const wah = new CivilDateTime(2010, 1, 3, 0, 0);
console.log(wah.weekOfYear); // 52

2010年最初の木曜日は1月7日ですから、1月7日を含む週が2010年の第1週です。dayOfWeekで月曜日が1であることからも分かるように週は月曜日〜日曜日が1つの週という数え方になりますから、2010年の第1週は1月4日（月）〜1月10日（日）ということになります。よって、それより前の1月3日は週番号上は2009年の最終週に属することになるのです。

文字列への変換

日時データというのは頻繁にコンピュータ間でやり取りされます。そのためには日時データを表現する共通の方法が必要であり、それはやはりISO 8601によって規定されています。CivilDateTimeはtoString()によってISO 8601に適合する文字列に変換可能です。toString()は文字列への暗黙の変換の際も呼ばれます。

const startOfReiwa = new CivilDateTime(2019, 5, 1, 0, 0);

console.log(startOfReiwa.toString());        // "2019-05-01T00:00:00.000000000"

ちなみに、ISO 8601では秒未満（.以降の部分はオプショナルで桁数の規定はありませんが、Temporalでは9桁、すなわちナノ秒の精度で文字列化することが規定されています。

なお、日時データを機械ではなく人間が読みやすい形で表示できる機能というのも需要がありますが、それは現在議論中でまだ固まっていないようです。

文字列からの変換

上で紹介したメソッドたちとは逆に、文字列からCivilDateTimeオブジェクトを得るための方法も用意されています。それがCivilDateTime.fromString()です。

CivilDateTime.fromStringの例

console.log(CivilDateTime.fromString("2019-05-01T00:00:00.000000000"));

なお、ISO 8601文字列はもう少しバリエーションがありますが、CivilDateTime.fromStringはそれらの文字列も受け付けてくれそうな雰囲気があります。雰囲気というのはどういうことかというと、正確に何が受け付けられて何が受け付けられないのかは仕様策定者たちの頭の中にしかない（あるいは決まっていないかもしれない）ということです。

plus: 時刻の加算

CivilDateTimeオブジェクトはplusメソッドを持ち、ある時刻に対して加算を行うことができます。CivilDateTimeオブジェクトはイミュータブルですから、結果は新しいCivilDateTimeオブジェクトとして得られます。さっそく例を見ましょう。

const startOfReiwa = new CivilDateTime(2019, 5, 1, 0, 0);

// 12時間足して正午にする
const noon = startOfReiwa.plus({ hours: 12 });

console.log(noon.toString()); // "2019-05-01T12:00:00.000000000"

// 1年戻して5000秒進める
const time2 = noon.plus({ years: -1, seconds: 5000 });

console.log(time2.toString()); // "2018-05-01T13:23:20.000000000"

このように、plusにはオブジェクトを渡します。オブジェクトはyears, months, days, hours, minutes, milliseconds, microseconds, nanosecondsを持つことができます。プロパティ名が複数形である点に注意してください。2番目の例のように、負の数を渡すことで時間を戻すこともできます。

with: 部分的な上書き

withメソッドは、既存のCivilDateTimeオブジェクトの情報を部分的に書き換えて得られる新しいCivilDateTimeオブジェクトを返します。

const startOfReiwa = new CivilDateTime(2019, 5, 1, 0, 0);

// 年を2100年に、日を31日に変更する
const maybeNotReiwa = startOfReiwa.with({ year: 2100, day: 31 });
console.log(maybeNotReiwa.toString()); // "2100-05-31T00:00:00.000000000"

渡すのはやはりオブジェクトであり、CivilDateTimeと同名のプロパティたちを用いて上書き箇所を指定します。

minus: 2つの日時の差を得る

2つのCivilDateTimeの間の期間を得ることができるminusメソッドも用意されています。使い方は多分こんな感じです。

const startOfReiwa = new CivilDateTime(2019, 5, 1, 0, 0);
const startOfHeisei = new CivilDateTime(1989, 1, 8, 0, 0);

const diff = startOfReiwa.minus(startOfHeisei);
console.log(diff);
/*
{
  years: 31,
  months: 3,
  days: 23,
  hours: 0,
  minutes: 0,
  seconds: 0,
  (以下略)
}
*/

多分こんな感じというのは、メソッドの存在だけとりあえず決まっていそうな感じがして具体的な計算方法はまだ決まっていなそうな感じがしていることを意味しています。

CivilDate

他のCivil系のオブジェクトは基本的にCivilDateTimeより情報が少ないバージョンです。CivilDateは年・月・日の情報だけを持ち、コンストラクタの引数は年・月・日の3つです。

const startOfReiwa = new CivilDate(2019, 5, 1);

プロパティとしてはyear, month, dayを持ちます。また、dayOfWeek, dayOfYear, weekOfYearも日付だけあれば計算可能なので持っています。持っているメソッドたちも同様で、with, plus, minusがあります。

注意すべき点は、plusでは渡されたオブジェクトのyears, months, daysのみ見られるということです。次のようにしても日付が1日進んだりはしません。

// hoursは無視されるのでこれはstartOfReiwaと同じ
const tomorrow = startOfReiwa.plus({ hours: 24 });

また、CivilDateは日付の情報のみを持っているオブジェクトでしたが、次に紹介するCivilTime（一日の中の時刻情報だけを持つ）と組み合わせることでCivilDateTimeを作ることができます。そのためにはwithTimeメソッドを用います。

const startOfReiwa = new CivilDate(2019, 5, 1);
const clock = new CivilTime(12, 34, 56);

const dateTime = startOfReiwa.withTime(clock);

console.log(dateTime.toString()); // "2019-05-01T12:34:56.000000000"

文字列への変換

CivilDateで特筆すべき点は文字列への変換メソッドを3種類持っている点です。実はISO 8601では日付の表現方法が3種類規定されています。1つは2019-05-01のように年-月-日で表現する方法、2つ目は2019-W18-03のように年-週番号-曜日で表現する方法、そして最後は2019-121のように年とその年の1月1日からの日数で表す方法です。

この3種類の変換はそれぞれtoDateString(), toWeekDateString(), toOrdinalDateString()で可能です。toString()はtoDateString()と同じになります。

fromString()は3種類の表現の全てを受け付けてくれます。

CivilTime

CivilTimeのコンストラクタは2〜6引数です。最初の2つ、すなわち時と分は省略不可能で、それ以下（秒、ミリ秒、マイクロ秒、ナノ秒）は省略可能です。

また、withDateにCivilDateを渡すことでCivilDateTimeに変換することができます。

CivilYearMonth

CivilYearMonthは年と月だけの情報を持ちます。コンストラクタの引数もその2つです。withDay()メソッドでCivilDateに変換できます。

CivilMonthDay

CivilMonthDayは月と日だけの情報を持ちます。withYear()メソッドでCivilDateに変換できます。

なんだか後半駆け足でしたが、以上でCivil系の説明は終わりです。

Instant

Instantは前述の通り、UNIXエポック（1970年1月1日0時0分0秒（世界標準時））からの経過時間（ナノ秒）によって絶対時刻を表すデータです。よって、InstantコンストラクタにはUNIXエポックからの経過時間を渡します。例えば、UNIXエポックから1556636400000000000ナノ秒後の絶対時刻を表すInstanceオブジェクトを作りたい場合は次のようにします。

const inst = new Instant(1556636400000000000n);

なお、1556636400000000000nというのはBigIntのリテラルです。普通の数値型ではナノ秒単位の秒数を扱うには精度が小さいのでBigIntが使われています。数値型の精度とかBigIntの話は筆者の別記事がありますのでよろしければそちらもご覧ください。

• JavaScriptの数値型完全理解

Instantオブジェクトからは、UNIXエポックからの経過時間を秒・ミリ秒・マイクロ秒・ナノ秒単位で得ることができます。

console.log(inst.epochSeconds);      // 1556636400
console.log(inst.epochMilliseconds); // 1556636400000
console.log(inst.epochMicroseconds); // 1556636400000000n
console.log(inst.epochNanoseconds);  // 1556636400000000000n

マイクロ秒とナノ秒はBigIntになっています。ミリ秒くらいなら普通の数値で行けるだろという判断のようです。ちなみに、ミリ秒をBigIntではなく普通の数値で表した場合、西暦約29万年問題の発生が懸念されます。今からとても心配ですね。

また、InstantにもtoStringとfromStringがありますが、何に変換されるのかはよく分かりません。多分ZタイムゾーンのISO 8601表現とかだと思いますが。

Instantにはオフセットやタイムゾーンの情報がないため具体的な日付や時刻の数値が分からないのでした。そのため、上記のように得られる情報は人間には分かりにくいものとなっています。

そこで、withOffsetやwithZoneメソッドでこれらの情報を付加することでOffsetDateTimeやZonedDateTimeに変換することができます。withOffsetには"+09:00"のようなオフセットを表す文字列を、withZoneには"Asia/Tokyo"のようなタイムゾーンを表す文字列を渡します。

OffsetDateTime

OffsetDateTimeはオフセット情報のついた時刻データです。API的にはCivilDateTimeプラスアルファだと思えば間違いありません。

作り方はInstantのwithOffsetを使う方法やnew OffsetDateTime(instant, offset)のようにする方法があります。どちらにせよInstantのインスタンスが必要ですね。CivilDateTimeにもwithOffsetがある気がするのですがはっきりとは分かりませんでした。また、OffsetDateTime.fromStringで文字列から作る方法もあります。

OffsetDateTimeは自分のタイムゾーンの元で自分が何年何月何日の何時何分かということを知っていますから、CivilDateTimeの機能は全て利用可能です。year, monthなどのプロパティで数値を取得したりplus, with, minusメソッドを使用できます。

加えて、instantプロパティで自分の絶対時刻を表すInstantオブジェクトを取得可能です。また、offsetプロパティはオフセットを表す文字列です。toStringに関してはISO 8601に従ってオフセット情報が付加された文字列を返します。

const inst = new Instant(1556636400000000000n);
const datetime = new OffsetDateTime(inst, "+09:00");
console.log(datetime.year);  // 2019
console.log(datetime.month); // 5
console.log(datetime.day);   // 1
console.log(datetime.offset);// "+09:00"

console.log(datetime.toString()); // "2019-05-01T00:00:00.000000000+09:00"

なお、なぜかOffsetDateTime.fromZonedDateTimeが用意されておりZonedDateTimeからOffsetDateTimeへの変換ができます。

ZonedDateTime

ZonedDateTimeはタイムゾーンの情報を持ったオブジェクトで、OffsetDateTimeのさらに上位互換です。作り方は先ほど説明したInstantのwithZoneか、new ZonedDateTime(instant, zone)です（あとZonedDateTime.fromString）。

OffsetDateTimeの機能は全て使える上に、timeZoneプロパティでタイムゾーンを取得できます。また、toString()の結果は下のようにタイムゾーンの情報が付加されます。

const inst = new Instant(1556636400000000000n);
const datetime = new ZonedDateTime(inst, "Asia/Tokyo");
console.log(datetime.year);  // 2019
console.log(datetime.month); // 5
console.log(datetime.day);   // 1
console.log(datetime.offset);// "+09:00"
console.log(datetime.timeZone); // "Asia/Tokyo"

console.log(datetime.toString()); // "2019-05-01T00:00:00.000000000+09:00[Asia/Tokyo]"

[Asia/Tokyo]のように角括弧で囲まれたタイムゾーン名があるのが特徴的です。また、オフセットの情報もついています。

補足：現在時刻の取得について

古いDateは引数なしでDateコンストラクタを呼ぶと初期値が現在時刻になったり、Date.now()でミリ秒の形で現在時刻を取得できたりします。Temporalでは同様の方針は採用されませんでした。一時期は「JavaScriptの言語仕様自体に外界の情報を得る手段をこれ以上増やすべきではない」との観点から仕様としてはそのような手段を用意しないべきではという議論もされましたが、さすがに何かあったほうがいいだろうという方向に話が進んでいるように見えます（参考）。一案として以下のようなAPIが出ています。

import { now, timeZone } from "std:temporal/now";

now(); // 現在時刻を表すInstantが返る
timeZone(); // 現在地のタイムゾーンを表す文字列が返る

// この2つの情報から現在時刻を表すZonedDateTimeが作れる
const currentTime = new ZonedDateTime(now(), timeZone();

まとめ

というわけで、現在使用策定中のTemporalについて紹介しました。旧来のDateに比べると様々な点で改良されています。日付の計算はplusとminusくらいしかありませんが、結構それで事足りることもあるでしょう。また、記事中でちらっと触れた通り、人間向けのフォーマッティングについても別個に議論されるようです（それ系はIntlという別の仕様の範疇となる可能性が高いです）。

後半のAPIの話をよく読んだ方はCivilDateTimeからZonedDateTimeにどうやって変換すんのこれなどの鋭い疑問を持ったかもしれません。自分も持ちましたが、まだAPIが整理されていないということで勘弁してあげましょう。実はこの記事がベースとしているのはつい2週間ほど前にドラフトが書き上がったばかりの文書で、実際自分も読んでいる途中にいくつもおかしな箇所を見つけました。仕様化が終わるまでには直っているでしょう。

それよりも、おおよそのTemporalの方向性をこの記事で理解していただけたら幸いです。Civil系、Instant、OffsetDate、そしてZonedDateTimeというようにオブジェクトを細分化し、今どの情報を持っていてどの情報を持っていないのかということを明示できるようにしたのはDateからの大きな進歩です。

個人的には、Temporalが実際に利用可能になるには速く進んでもあと2〜3年はかかりそうだと考えています。いざTemporalがブラウザに搭載されたときに解説記事を書こうとした人がn年前に書かれたこの記事を見て悔しがるのが今から楽しみです。

リンク

• Temporal Proposal - プロポーザルの文書です。
• What about Temporal in JavaScript - Temporalを紹介する恐らく唯一の既存日本語資料です。2019年2月のスライドなのでAPIが少し古いです（ZonedTimeZOneではなくZonedInstantになっていたりOffsetDateTimeが存在しないなど）。
• Fixing JavaScript Date - Getting Started - Temporalを作るモチベーションを解説する文書です。

---

1. 厳密にはDateはオフセット（世界標準時からの時差を数値で表したもの）でタイムゾーンを表しています。Temporalはタイムゾーンをそのまま扱うことができる点で進化しています。 ↩

2. このPolyfillは仕様の策定を担当している方が片手間に作った感じのもので、めちゃくちゃしっかり作られているわけではありません。実際、この記事を書いている間に筆者は1個バグを見つけました。 ↩

3. ここでは「全世界で共通の時間軸」や「その上の時刻」という程度の意味で絶対時間と言っています。この言葉で検索すると哲学とか物理学の話題が出てきて怖いのですが、あまりその方面から突っ込みを入れてくださらないようにお願いします。 ↩

4. イギリスが夏時間の場合は8時間ですが。 ↩

5. なお、この情報は閏秒を考慮していないため、その分だけ実際の経過時間（物理的に1970年1月1日0時0分0秒から経過した時間）とはずれがあります。コンピュータにおける時刻表現は基本的に閏秒を考えていないのでTemporalが特別に劣っているわけではありませんが。閏秒を厳密に処理する必要がある場合は閏秒のデータを用意して自分で処理する（あるいはそういう処理をやってくれるライブラリを使用する）必要があります。 ↩

WeakRef、すなわち弱参照は多くの（ガベージコレクションを持つ）プログラミング言語に存在する機能です。ちょっと「weakref」でGoogle検索するだけで、Python, Ruby, PHP, Javaにこの概念が存在することが確認できます。

皆さんもよくご存知の通り、JavaScriptもガベージコレクションを持つ言語のひとつです。しかし、残念なことに弱参照はいまだJavaScriptにありませんでした。

もちろん、そんな状況に置かれているJavaScriptに弱参照を導入しようという動きもしっかりとあります。それがWeakRefプロポーザルです。このプロポーザルは現在Stage 2、つまり方向性はおおよそ定まって絶賛仕様策定中という状況です。それゆえに、この記事で解説することの委細は今後変わるかもしれません。しかし大きな方向性はよほどのことがないと変わらないと考えられます。このことを理解し、ぜひWeakRefの登場に備えましょう。

※記事タイトルに「JavaScriptに弱参照がやってくる」とありますが、実際にやってくるのは多分年単位で先です。なお、node.js（v12以上）は--harmony-weak-refsオプションをつけることで実験的な実装を利用可能です。

WeakRefとは何か

では、いよいよWeakRefとは何かについて解説します。日本語では先程も述べたとおり弱参照ですが、これは参照先のオブジェクトがガベージコレクション対象になってしまうかもしれないような参照です。

参照

ここで「参照」という言葉が出てきましたが、ここでは何らかの方法でオブジェクトにアクセス可能な手段を参照と呼んでいます。この概念を掴むために、次の例を見てみましょう。

let obj = { name: "object 1" };

obj = { name: "object 2" };

変数objに{ name: "object 1" }を入れたあと、次に{ name: "object 2" }を入れました。最初のオブジェクトをオブジェクト1、次のオブジェクトをオブジェクト2とすると、objはまずオブジェクト1が入った後にオブジェクト2が入りました。このとき、オブジェクト2はobjに入っているのでobjを通じてアクセス可能ですが、オブジェクト1はもう変数objに入っていないので、どうやってもプログラムからアクセス不能です。つまり、オブジェクト2へは参照があり、オブジェクト1へは参照が無いという状態になっています。

ところで、オブジェクト1やオブジェクト2がプログラムに登場した時点で、それらの実体がマシンのメモリ上に作成されます。そもそもプログラム中に登場する全ての値（数値とかも）はマシンが覚えている必要があり、覚えておくために情報を置いておく場所がメモリです。

参照されなくなったオブジェクトはもうプログラムにとっては有っても無くても関係ないどうでもよい存在ですから、メモリから消しても構いません。ところが、ガベージコレクションのある言語では、参照されなくなったオブジェクトを即座にメモリから消去することはあまりありません。もう参照されていない不要なオブジェクトがメモリ上に溜まってからまとめて消す処理をするのが普通です。この処理がガベージコレクションです。

上のプログラムの実行後は、ガベージコレクションによってオブジェクト1が消去されるかもしれません。その一方、オブジェクト2は消去されません。なぜなら、変数objを使ったらオブジェクト2を触ることができるからです。参照されているオブジェクトは触られる可能性があるのでメモリ上にデータが無ければいけません。

弱参照

では、話を弱参照に戻しましょう。これはその名の通り弱い参照です。つまり、オブジェクトへの参照はあるけど、弱いので参照先がオブジェクトがガベージコレクションされているかもしれないというものです。よって、いざ参照先のオブジェクトを使おうとしたらもう捨てられていて使えませんという事態になることがあります。

WeakRefの使い方

WeakRefのAPIはとても単純です。まず、何らかのオブジェクトobjへの弱参照を表すWeakRefオブジェクトはnew WeakRef(obj)として作成します。

WeakRefの使用例

let obj = { name: "object 1" };

const wref = new WeakRef(obj);

そして、WeakRefオブジェクトの参照先を得るにはderefメソッドを用います。上の例の直後にderef()メソッドを呼ぶと当然返り値はobjです。

console.log(wref.deref() === obj); // true

もしwref.deref()を呼ぶまでの間にwrefの参照先がガベージコレクションの対象になって捨てられた場合は、wref.deref()の返り値はundefinedとなります。

ただし、上の例でwrefの参照先がガベージコレクションの対象となるには、まずobjを通じた当該オブジェクトへの参照を消す必要があります。

let obj = { name: "object 1" }; // objにオブジェクト1を代入

const wref = new WeakRef(obj);

console.log(wref.deref()); // { name: "object 1" };

// オブジェクト1への（弱ではない）参照を無くす
obj = null;
// ここではオブジェクト1への参照はwrefによる弱参照のみ

// しばらくするとwrefの参照先がガベージコレクトされるかも
// するとwref.deref()の返り値はundefinedになる
console.log(wref.deref()); // undefined

WeakRefの基本はこれだけです。とても簡単ですね。

FinalizationGroup

しかし、実はガベージコレクションに関連してもうひとつセットで提案されているAPIがあります。それがFinalizationGroupです。このAPIを使うと、オブジェクトがガベージコレクトされた（メモリから消去された）タイミングを検知することができます。

これの使い方もそんなに難しくありません。まずnew FinalizationGroup(callback)として新しいFinalizationGroupオブジェクトを作成します。callbackというのは値がガベージコレクトされたときに呼ばれるコールバックですが、これの詳細はあとで説明します。

そして、できたオブジェクトのregisterメソッドを呼ぶことで、ガベージコレクトされたのを検知したいオブジェクトを登録します。

FinalizationGroupの使用例

// オブジェクトが捨てられたときに呼ばれるコールバック（詳細は後述）
const handler = iterator => {
  for (const key of iterator) {
    console.log(key, "がガベージコレクトされました");
  }
};
// FinalizationGroupオブジェクトを作成
const group = new FinalizationGroup(handler);
// 適当なオブジェクトを作成
const obj = { name: "object 1" };
// 監視対象に登録
group.register(obj, "オブジェクト1");

このように、registerメソッドの第1引数に監視対象のオブジェクトを渡します。これにより、objがガベージコレクトされたらhandlerが呼ばれることになります。

ポイントは第2引数です。これは、第1引数のオブジェクトを表す何らかの値です（別のオブジェクトでも構いませんが）。実は、第1引数のオブジェクトがガベージコレクトされた場合に実際にコールバックに渡されるのは第2引数に指定したほうの値です（holdingsと呼ばれるらしいです）。その理由は、第1引数のオブジェクトはそのタイミングでは既にガベージコレクトされており利用不能になっているからです。そのため、代わりに（既にガベージコレクトされて消えてしまった）オブジェクトを識別するためのものとしてholdingsの値を利用します。

では、いよいよFinalizationGroupに渡すコールバックの解説をします。何らかのオブジェクト（複数まとめてかもしれません）がガベージコレクトされて消されたとき、コールバック関数にはそれらのオブジェクトに対応するholdingsたちのイテレータが渡されます。イテレータの詳細な説明は省きますが、for-ofでループしたりArray.from(iterator)で配列に変換できると思っておけば大丈夫です¹。

上の例でいえば、objがガベージコレクトされた場合はhandlerが呼び出されて、最終的にfor-ofループのkeyに"オブジェクト1"が入ってくることになります。今回はconsole.logするだけですが、この得られたholdingsをどう使うかはあなた次第です。

次の例で以上の動作を試すことができます（--harmony-weak-refsに加えて、ガベージコレクションを起動するgc()関数を利用可能にする--expose-gcオプションをnodeに与える必要があります）。

// オブジェクトが捨てられたときに呼ばれるコールバック
const handler = iterator => {
  for (const key of iterator) {
    console.log(key, "がガベージコレクトされました");
  }
};
// FinalizationGroupオブジェクトを作成
const group = new FinalizationGroup(handler);
// 適当なオブジェクトを作成（GCされやすいように1GBのメモリを確保）
let obj = new ArrayBuffer(1024 ** 3);

// 監視対象に登録
group.register(obj, "でかいメモリ");

// objへの（弱くない）参照を消す
obj = null;

// ガベージコレクションを起動
gc();

これを実行すると、（ガベージコレクションの挙動にもよりますが）普通はでかいメモリ がガベージコレクトされましたというログが表示されるはずです。これは、gc()により1GBのArrayBufferがガベージコレクトされて、それに反応してFinalizationGroupのコールバックが呼ばれたことを意味しています。

以上がFinalizationGroupの機能です。ちなみに、registerを取り消すunregisterメソッドもあります（使用するためには取り消し用のトークンを新たに用意してregisterの第3引数に渡す必要がありますが詳細は省略します）。

WeakRefの使いみち

ここまで解説したように、WeakRefの機能は「弱参照を作る」というたいへんシンプルなものです。また、FinalizationGroupも「オブジェクトがガベージコレクトされたら教えてくれる」という同じくらいのシンプルさです。上では別々に紹介しましたが、両方ともガベージコレクションに関わる機能ですからもちろん組み合わせられる場面もあるでしょう。

機能がシンプルな分だけ、その使いみちは幅広いでしょう。とはいえ、WeakRefの典型的な使い道としてはキャッシュを挙げざるを得ません。

WeakRefは「いつ消えるか分からないオブジェクトへの参照」を持つのが基本的な役割ですから、WeakRefで弱参照されているオブジェクトは「あったら嬉しいけど無くてもまあ大丈夫なオブジェクト」ということになります。これに当てはまるのがまさにキャッシュでしょう。例えばネットワークからダウンロードしたファイルをキャッシュしておくことで、そのファイルが再び必要になったときに再びダウンロードする時間をかけずにファイルを利用することができます。もしキャッシュしておいたファイルが消えていても、再びダウンロードすればまあ大丈夫です²。

特に、キャッシュは一般に容量を喰いますから、全てのキャッシュをメモリに溜め込んでおくことはできません。不要なキャッシュは捨てることでメモリ使用量を少なくすることができます。

キャッシュされた値をWeakRefを用いて弱参照で保持しておくことで、このような（メモリが埋まってきたらいらないものを消すという）動作をガベージコレクションに任せることができます。また、FinalizationGroupと組み合わせることによって、キャッシュされたデータ本体に付随するメタデータの掃除などもできるでしょう。

もう少し具体的な実装例がプロポーザルのページにたくさん載っていますので、気になる方は見てみてください。

WeakMap・WeakSetとの関係

実は、JavaScriptの既存機能にも弱参照に関連するものはあります。それはWeakMapやWeakSetです。WeakMapは好きなオブジェクトに対して好きな値を紐付けられるデータ構造でしたね。特徴は、WeakMapからキーとなるオブジェクトへの参照が弱参照であるという点です。つまり、何らかのオブジェクトがWeakMapのキーとして登録されていてもそのオブジェクトがガベージコレクトされることは妨げられません。

WeakMapの例

const wmap = new WeakMap();
let obj = { name: "object 1" }; // objにオブジェクト1を代入

// objに対して"foobar"を覚えておく
wmap.set(obj, "foobar");

// ...

// objに対応する値を取り出す
console.log(wmap.get(obj)); // "foobar"
// オブジェクト1への参照を消すとそのうちガベージコレクトされる（wmapからオブジェクト1への参照は弱いので）
obj = null;

ただし、WeakMap等は自身に登録されているキーを露出するAPIを持ちませんので、「当該オブジェクトを取り出そうとしたけどもう捨てられていた」のような事態は発生しません。これがWeakRefとの大きな違いです。

このように、これまではWeakMap等の内部でのみ用いられていた弱参照の概念を我々が直に利用できるようにする新しいAPIがWeakRefであると言えます。

まとめ

この記事ではWeakRefsプロポーザルで提案されているWeakRefおよびFinalizationGroupというAPIを紹介しました。これらは両方ともガベージコレクションに関するAPIで、オブジェクトがガベージコレクトされるかどうか、あるいはされた場合はどうするかといったことに切り込める面白いAPIです。

使用する場面は限られているかもしれませんが、いざ実用化されたらぜひ一回くらいは使ってみたいですね。

---

1. 配列などではなくイテレータで渡される理由は、全部ではなく途中まで処理する（残りは後回しにする）ことができるようにするためです。 ↩

2. ここではメモリ上にキャッシュする場合の話をしています。ファイルシステム上にキャッシュすることもあるかもしれませんが、それはまた別の話です。 ↩

はじめに

この記事では、「英語を勉強している」という大義によって、他にやるべきことがあるにも関わらず、アニメや映画を見ることを正当化し、一見意識高そうに堕落する方法を紹介しています

やりたいこと

「ねえ、確率の計算って知ってる？」

「かずまが3回連続で勝つとかすごく無茶振りなんですけどー笑」

「スゥー。俺、じゃんけんで負けたことねえから」

みたいな英語のフレーズをスラスラと言えるようになりたい

出典:KONOSUBA -God's blessing on this wonderful world! 2 Episode 7 – An Invitation for This Knucklehead!

※違法サイトは使っておりません。英語ネイティブ向けの有料ストリーミングサービスからの引用です

作ったもの

スプレッドシートに入れた英文を15分ごとにLINEに通知してくれるlinebot

英語を見て、対応する日本語を忘れてしまっていた場合、リンクをクリックする

該当行にジャンプするので、対応する日本語を復習する

15分ごとに通知するようにすれば1日100フレーズ復習できます
これで3ヶ月で最低限冗談言い合いながら会話できるようになりました

夜寝てる間には通知が30ほどたまるので、朝にまとめて復習します
寝る前と寝起きすぐの復習は記憶の定着率がいいそうです。

linebot(Line Messaging API)の登録

Line Developersから登録できます
登録方法は富士通さんの解説がわかりやすかったのでご参考ください
記事の頃から見た目が少し変わってますがわかる範囲だと思います

botのchannel accsess tokenと自分のuser idの取得、botへの友達登録まで済ませてください

スプレッドシート作成

なんでもいいので名前をつけて新規作成しましょう。作れたら1行目はスクショのようにします。

A列は復習したい外国語、B列は対応する日本語、C列は通知がどこまでされたかを表す数字です。
C列は最初は1と記入しておいてください。1つ通知が送られると数字が1ずつ加算されます

タイにいたためタイ語も入ってることご容赦ください。本来はタイ語が話せないという死活問題を解決することに始まり、英語に派生しました。ちなみに、タイ語は会話ができればよかったので発音記号とひらがなで覚えてました

gasの記述

こちらの方のスクリプトを参考にさせていただきました
コメントなど大変わかりやすかったため一部そのままのところもあります。ありがとうございます

Google Spread Sheetは1シートに対して1つのスクリプトを紐づけることができます
海外にかぶれてブラウザが英語設定なのもご容赦ください。

開けたらJavascriptを記述していきましょう

画像を参考にbotのchannel access tokenとuser id、スプレッドシートのリンクの3つを自分のものに変えてお使いください
z,y,zの羅列の部分です

https：//script.google.com/hogefuga

/**
 * @OnlyCurrentDoc
 */

// LINE Developersに書いてあるChannel Access Token
var access_token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// 自分のユーザーIDを指定します。LINE Developersの「Your user ID」の部分です
var to = "yyyyyyyyyyyyyyyyyyyyyyyyy";

function text_message(text){
  return {
    "type": "text",
    "text": text
  }
}

function choose_in_order(arrayData,isChange){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var arrayIndex = sheet.getRange(1,3,1,1).getValue();
  var index = arrayIndex+1;
  if(isChange == true){
    if(index < sheet.getLastRow()){
      sheet.getRange(1,3,1,1).setValue(arrayIndex+1);
    }else{
      sheet.getRange(1,3,1,1).setValue(1);
    }
  }
  return index+':'+arrayData[arrayIndex-1][0];
}

function getEngs() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var range = sheet.getRange(2,1,sheet.getLastRow()-1);
  var values = range.getValues();
  return values;
}

function getJaps() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var range = sheet.getRange(2,2,sheet.getLastRow()-1);
  var values = range.getValues();
  return values;
}

function messagePush(){
//これは皆同じなので、修正する必要ありません。
  var url = "https://api.line.me/v2/bot/message/multicast";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  //toのところにメッセージを送信したいユーザーのIDを指定します。(toは自分のtokenを指定したので、linebotから自分に送信されることされます)

  var eng = choose_in_order(getEngs(),true);
/* 日本語も添えて送りたければこちらコメントアウト外してください
  var jap = choose_in_order(getJaps(),true); */

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var arrayIndex = sheet.getRange(1,3,1,1).getValue();

  var postData = {
    "to" : [to],
    "messages" : [
     text_message(eng+'\n'+'https://docs.google.com/spreadsheets/zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz/edit#gid=0&range=A'+arrayIndex)
// スプレッドシートではurlにrangeというクエリをつけることで指定したセルに飛ぶことができます
    ]
  };


/* 日本語も添えて送りたければこちらコメントアウト外して代わりにお使いください
  var postData = {
    "to" : [to],
    "messages" : [
      text_message(eng+'\n'+jap+'\n'+'https://docs.google.com/spreadsheets/zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz/edit#gid=0&range=A'+arrayIndex)
    ]
  }; */

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}

再掲

15分おきに通知(メッセージ送信)の設定

最後に、あるタイミングでスクリプトを走らせるバッチの設定です

同じように設定してください
15分おきだと多いと感じる方はここで変更することができます

編集リクエスト、解説して欲しいところなどのコメントお待ちしております

参考

事前準備 LINE Messaging APIアクセストークンの取得 | 富士通

LINE Messaging API を使用して、会話の「くっころ」という言葉に反応して「くっころ」してしまうBOTを作成する方法 | Qiita

KONOSUBA -God's blessing on this wonderful world! 2 Episode 7 – An Invitation for This Knucklehead! | Crunchyroll