JavaScriptで数値をn進法で表現する

自分用メモ。しょぼい話。
数値を2進法とか16進法とかで表現したいときにべんり。(冪乗を効率的に計算する場合に、指数を2進法で表現したくなったりするのだ)

const i = 256;
console.log(i.toString(2)); // 100000000
console.log(i.toString(16)); // 100
const j = -5;
console.log(j.toString(2)); // -101

Number.prototype.toString() – JavaScript | MDNによると、引数は基数を指定すれば良く、2〜36の整数が許容されるらしい。
気をつけるべきは、負数を2進法で表現しようとした場合は、補数表現ではなく、先頭に-符号がついた正の表現が返される(-5は補数表現するなら8ビットの場合は11111011とかになるはず)。それと、戻りは当然ながらstring(typeof(i.toString(2))stringになる)なので、場合によっては気をつけるべきかも?

Nuxt.jsを使ってみる

参考:nuxtjsでtodo アプリケーションを作成 – Qiita
ま、内容自体はほぼ焼き直しだけど、自分の解釈を加えるって感じ。環境はてきとうなArchLinuxだよ。 まずは環境構築。

# pacman -S nodejs npm
# npm install -g vue @vue/cli @vue/cli-init

プロジェクトの作成。

$ vue init nuxt-community/starter-template todos

nuxt-community/starter-templateはテンプレート名。nuxt-community/starter-template: DEPRECATED: use create-nuxt-app insteadがネタ元か?templateとして使えるリポジトリを指定すれば良いのだろうか。このtemplateはDeprecatedらしいので今やるならリンクが張られているnuxt/create-nuxt-appをどうにかして使うのが良いのかな。

$ cd todos && npm install && npm run dev

起動完了したら、http://localhost:3000にアクセスしてそれっぽい画面が出ればおk。今後はソースを編集すると自動でリロードされるっぽい。 つぎ。ルーティングの追加。pages以下にディレクトリを作成すれば、それがそのままルーティングの設定になる。

$ mkdir pages/todos
$ vi pages/todos/index.vue


<template>
  <div>
    todos
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

そのままhttp://localhost:3000/todosにアクセスすればpages/todos/index.vueの内容が見れる。 さて、Vuexの話。まずは有効化。nuxt.config.jshead:の次に以下の記述を追加。

$ vi nuxt.config.js


  build: {
    vendor: [
      'vuex',
    ]
  },

storeの作成。

$ vi store/todos.js


export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false,
      id: state.list.length + 1,
    })
  },
  remove (state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

ところでVuexとかStoreとかってなんなのだ。 Vuexは状態管理パターン+ライブラリとかいう記述が公式サイトにある。ここでの状態管理とは、ページ上の見た目(内容)・状態・アクション(それぞれView, State, Actions)の管理のことのようだ。単純な場合は利用しなくても良いけれど、複数のViewがStateを共有したりとか、異なるViewのActionsから同一のStateを変更したりとかすると、脳みそで管理するのはしんどいので、使ってくれという事みたい。 Storeは、VuexでのStateを保持するためのコンテナらしい。これはstatemutationsから成っている。mutationsは英単語としての意味は「変化」であり、これを使って状態を変更する。 最後に、index.vueから機能を利用するように変更する。

$ vi pages/todos/index.vue


<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">remove</button>
    </li>
    <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  computed: {
    todos () { return this.$store.state.todos.list }
  },
  methods: {
    removeTodo (todo) {
      this.$store.commit('todos/remove', todo);
    },
    addTodo (e) {
      this.$store.commit('todos/add', e.target.value);
      e.target.value = '';
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

mapMutationsを使っている意味はよくわからない。

toggle (todo) {
  this.$store.commit('todos/toggle', todo);
}

でも意図した動作はするのだけど…何か意味があるんかな? このままだとremoveがどのボタン押しても最新のやつからしか削除されないのでつらい。store/todos.jsの13行目にある{ todo }todoにすれば、押したものから削除されるが、寧ろ波括弧でくくったこの記述はどんなときに使うのだろう?VuexのMutationsについてのガイドを見ると、複数のデータを渡したい場合には、オブジェクトにして送れというような内容が書かれている。あんまり気にしないで良さそうかな。 以上。てきとうにイジればそれっぽく使える気配がしてきた。Node.js+ExpressでWebアプリを作って遊んでいたのだけど、それを作り直してみようかな?と思ったりもする。それか、まるっきり別のものを作ってみるのも良いかもね。
何にしろ、ろくすっぽ勉強せず取り敢えず触ってみるのは、手探りつらいってのもあるけど、やっぱり楽しいね。