Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

LINE Payカードを入手したのでレポート

あまりプログラミングには関係ないですが、キャッシュレスに興味があったのでまとめてみました。

LINE Payカードとは?

LINE PayカードというのはJCBプリペイドカードの一種で、LINE Payの媒体となるカードです。

LINE Payにお金をチャージしておくとLINE Payカードでその金額が使えます。

実際にLINE Payでお会計してみる

近所のスーパーにて先程使ってみました。

  1. 店員さんに「JCBカードは使えますか?」と尋ねる
  2. JCBカードを提示する
  3. ポイントカードを一緒に出す(例えばAEONならWAONカード)
  4. 店員さんがカードを通す
  5. お会計完了!

クレジットカードのようにサインや暗証番号を入力する必要もなくとても便利です。また、LINE Payカード自体にもポイントが付与されるので二重でポイントがついて大変オトクです。

LINE Payカードのメリット

LINE Payカードでの支払いにはいくつかメリットがあります。

  1. ポイントがつく
  2. お釣りを計算して小銭を出す必要がない
  3. 硬貨に触れないので清潔
  4. オートチャージなので使い勝手がいい

やはりキャッシュレスで支払いができるのがいいですよね。クレジットカードはどうしてもサインや暗証番号が必要になったりと面倒です。また、アプリの方で設定しておくとオートチャージされるようになるので、Suicaのようにチャージする手間もかかりません。

補足: LINE Payでもらえるポイントについて

LINE Payで支払いをすると、ランクに応じてポイントがつきます。たとえば「ホワイトカラー」というランクの場合は0.5%ポイントが付きます。ランクが上がるほどポイント率も高くなります。

ランクは「利用金額」と「何人以上に送金」という条件があります。詳しくは他ブログを参照ください。

アルゴリズム勉強会 第三回 A*探索

久しぶりにこのシリーズ書きました。シリーズ一覧はこちらから

A*アルゴリズムとは?

「今までにかかったコスト + これから先の推定されるコスト」が最小になるノードを選びながら探索していくアルゴリズムです。

最短経路探索を考えると分かりやすいです。現在地からゴールまでの経路を考えます。

  1. まず隣接した都市を見ます
  2. 隣接都市のうちゴールまでの直線距離が短い(これが推定されるコスト)都市を選びます
  3. その都市を起点にさらに隣接都市を見ます
  4. これを繰り返してゴールまで探索します。

こうするとたとえ障害物が途中にあったとしても最短になります。

どういうときに使うのか

このアルゴリズムは「最短ルート探索」の他に「15パズルを解く」、「NLPで確率論的文法を使用したパース」などにも使えるそうです。後者は英語版wikiに書いてあったのですがサッパリわかりません。

h*関数を適切に設定すればおそらくルービックキューブも解けると思います。

実際のコード

実際にA*を使って最短経路を計算するプログラムを書いてみました。GitHubに置いたのでご覧ください。

GitHub - pandanoir/a-star: A* algorithm in JS

同じ引数のとき新しいインスタンスを生成しない省エネなClassを作る

タイトルはつまり new Hoge(1, 2, 3) === new Hoge(1, 2, 3)を実現するということです。

実装

まず実装をお見せします。

const pool = [];
class Hoge {
    constructor(x, y, z) {
        if (!pool[x]) pool[x] = [];
        if (!pool[x][y]) pool[x][y] = [];
        if (pool[x][y][z]) return pool[x][y][z];
        this.x = x;
        this.y = y;
        this.z = z;
        pool[x][y][z] = this;
    }
};

解説

ポイントはコンストラクタがオブジェクトを返している点です。コンストラクタがreturnをして、返り値がObject型のときはそのオブジェクトが返り値になります。*1

つまり、pool[x][y][z]が存在していた場合は新しいインスタンスは生成されずpool[x][y][z]が返されます。そのため、冒頭でお話したnew Hoge(1, 2, 3) === new Hoge(1, 2, 3)が実現できます。

注意点

この手法には問題点があります。それはプロパティが共有されてしまうことです。(同じ値を指しているのですから当然ではあります)

const a = new Hoge(1, 2, 3);
a.w = 4;
const b = new Hoge(1, 2, 3);
assert.equal(b.w, 4); // true!!!

このように片方で起きた変更がそのまま受け継がれるので、意図しない挙動になりやすいです。そのため、イミュータブルなインスタンスを生成するときくらいしか使いみちがありません。

*1:returnがない、もしくは返り値がプリミティブ型であったら、生成したインスタンスが返り値になります

時代遅れのJavaScript記事を判別する4つのポイント

ES2015が勧告されてからすでに3年近く経っています。IEもほぼ駆逐されモダンブラウザたちが跋扈する時代になったにもかかわらずES2015を使ってない記事はもはや時代遅れです。

というかつい先日ES2018が勧告されたわけですから、ES2017あたりまで含めるべき…と思いきやES2015以降はコーディングに関わるほど深い影響はありません。

varを使った記事

ES2015にてvarは死にました(当たり前ですが、何もつけないで変数を宣言するのはvarよりずっと下等な行為なので論外です)。あなたが考古学者でない限り、constあるいはletを使ってない記事は読む価値はありません

functionを意味もなく使った記事

以前書きましたが、アロー関数とクラス構文の登場によりfunctionを必要とする場面はほぼ無くなりました。もし意味もなくfunctionを使っている記事があったらBADを押してブラウザバック推奨です。

  • 関数内でthisを使っていないケース(アロー関数で十分)
  • その関数に外部からthisをbindしないケース(jQueryのイベントハンドラーはthisをbindされるのでfunctionで書くといいです)
  • クラス構文のメソッド(専用の構文が用意されています)

for-inを使っている

もはや論外ですね。ES2015以前でも論外と言われていましたから。打製石器で料理をするようなものです。あなたは打製石器を使うようなレシピを参考に料理をしますか?

ではどういう記事がいいかというと、for-ofが使ってあるとGOODです。mapやfilterなどの高階関数を使った記事もいいと思います。

そもそもコードが汚い

インデントがバラバラ、スペースがまばらに入っているといった、読者を意識していない記事は読まなくていいと思います。「あなたに向けて書いてるわけじゃないよ」と記事の著者が教えてくれているのですから。

終わりに

タイトルにつられて英語直訳の記事みたいになりましたが別に翻訳記事ではありません。

Ubuntu17.10にHyperとHyper-akari入れてみた

Hyperを導入してみてハマった点などをまとめました。 f:id:panda_noir:20180710113327p:plain

Hyperのいいところ

  • テーマが使える
  • 色がオサレ

Hyperのダメなところ

  • やや重い
  • Ctrl + _が無効化される(このショートカットでコメントアウトするVimのプラグインが動かなくなった)
  • 日本語入力がデフォルトの端末より貧弱

UbuntuにHyperを入れる

How to Install Hyperを参考にしつつ導入します。ただ、wgetで取得してきたHyperがUbuntu 17.10ではうまく動作しなかったので、リンクを公式ホームページのものに合わせます。

$ sudo apt-get install gdebi
$ wget https://releases.hyper.is/download/deb
$ sudo gdebi linux_deb

するとHyperがアプリ一覧に追加されるはずです。

Hyper-akariを導入してみる

VTuberのミライアカリのテーマを導入してみました。

$ hyper i hyper-akari

f:id:panda_noir:20180710112254p:plain

Tmuxのステータスバーの文字色が消える

このテーマを導入するとなんとTmuxのステータスバーの文字色が消えてしまいます。正確にはrgba(136,192,208,0.1)という非常に薄い水色になっているようです。

f:id:panda_noir:20180710113440p:plain
tmuxにてステータスバーの文字が消えている

この問題を(とりあえず)解決する方法としては、hyper-final-sayを導入するという方法があります。

$ hyper i hyper-final-say

このプラグインはプラグインの設定よりユーザーの設定を優先するためのプラグインです。今の所Hyper-akariを上書きする手段が存在しないのでこのプラグインで強制的に上書きします。

Hyper-akariが上書きする設定項目は以下の通りです。

  • backgroundColor
  • foregroundColor
  • borderColor
  • selectionColor
  • colors
  • cursorColor
  • termCSS
  • css

このうちTmuxの文字色が消える原因となっているのはcolorsのbackというプロパティです。

  1. ~/.hyper.jsの上記項目のうちcolors以外をコメントアウト
  2. ~/.hyper.jsのcolorsの内容を以下のとおりにする
        colors: {
          black: '#000000',
          // red: '#C51E14',
          // green: '#1DC121',
          // yellow: '#C7C329',
          // blue: '#0A2FC4',
          // magenta: '#C839C5',
          // cyan: '#20C5C6',
          // white: '#C7C7C7',
          // lightBlack: '#686868',
          // lightRed: '#FD6F6B',
          // lightGreen: '#67F86F',
          // lightYellow: '#FFFA72',
          // lightBlue: '#6A76FB',
          // lightMagenta: '#FD7CFC',
          // lightCyan: '#68FDFE',
          // lightWhite: '#FFFFFF',
        },

これでひとまず問題は解決されます。今現在Issuueで取り上げられているのでそのうち解決されるかもしれません(開発者によるとこうしないと別のところで問題が起きるとのこと)。