Panda Noir

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

同じ引数のとき新しいインスタンスを生成しない省エネな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で取り上げられているのでそのうち解決されるかもしれません(開発者によるとこうしないと別のところで問題が起きるとのこと)。

東北大の情物の奴は黙ってMarkdownでレポート書け

東北大学の情物のレポートはWordで書かないといけません。(コースにもよりますが)仮にも情報学科の人間がなぜWordを使わないといけないのでしょうか?????Markdownで書きたいですよね?????

※はじめに行っておくと東北大用に書いたので、東北大生以外には有用でないTipsが混ざっています

東北大の情物の奴はMarkdownでレポート書け

使い方

  1. 東北大の情物の奴はMarkdownでレポート書けにMarkdownで書いたレポートをアップロード
  2. 「。」を「.」、「、」を「,」に変換したWordファイルがダウンロードされる
  3. ダウンロードしたファイルの見出し以外を標準にする(ここは全選択して標準にして見出しを変えるほうが早いかもしれないです)
  4. 実験のテンプレートのファイルにコピペする(「貼り付け先のテーマを使用」で貼り付ける)

これでいけます。レポートの保存、変換したファイルの保存等は行っていません。

Markdownでレポートを書くコツ

Markdownといいましたが、サーバー側で変換に使っているプログラムは拡張版Markdownとして変換するようになっているので、レポートに使えるTipsをまとめてみました。

見出しを書く

見出しは#を使って書きます。

# 大見出し
## 中見出し
### 小見出し

上付き文字を書く

引用の際に「引用部分[1]」のように書きますよね?これはこう書けます。

引用部分^\[1\]^

式を書く

LaTeXの数式を組み込むことができます。

$x^2 + y^2 = z^2$

10秒で使えるようになるSpacemacs

10秒で(Vimmerだった人が最低限)使えるようになるSpacemacsです。※環境構築は10秒に含まれません

f:id:panda_noir:20180630233353p:plain

Spacemacsは「VimにEmacsを組み込んだエディタ」という感じのエディタです。狂気のマッドエディタです。しかしなぜか入門記事が見当たらなかったので、自分で書いてみました。

10秒で新規ファイルを作って保存・終了する

環境構築はできているものとします。

まずEmacsを起動します。

$ emacs

次に以下を入力してください。

SPC b N
i
hoge
fd(素早く)
SPC f s
SPC q q

(SPCはSpaceです。)それぞれ説明します。

  1. 新しい空のバッファ(≒新規ファイル)を生成する(SPC b N)
  2. インサートモードにする(i)
  3. hogeと入力する(hoge)
  4. インサートモードを抜ける(fd)
  5. 保存する(SPC f s)
  6. Spacemacsを終了する(SPC q q)

たった10秒で「新規ファイルを作成して保存して終了する」という最低限の操作ができるようになりました。

Spacemacsを更に知るために

最低限の編集はできるようになりました。しかし、これだけではSpacemacsを使いこなせているとは言えません。ここでは更にSpacemacsを使うための学習法について説明します。

まず、Spacemacsの操作はほぼVimなので、Vimの操作について学びましょう。これはネットに記事がたくさんあるのでそちらを参照してください。

Vimとの違い

次に、SpacemacsとVimの違いについて学びます。SpacemacsのどこがVimと違うかというと、

  • 挿入ステートでCtrl-fCtrl-bが使える(dotspacemacs-editing-styleという設定をhybridにすると他のキーバインドも使えます)
  • fdを素早く入力すると挿入ステートから抜けられる(ほぼVimのESCとして使えるので他のところでも使える)
  • SPC f sで保存
  • SPC q qでSpacemacsを終了

このあたりが大きく違う点です。設定を書き始めるともっと違う部分が出てきますが、操作する上で大きく異なるのはこのあたりです。

SPCを使いこなす

SPCはキーバインドをカテゴライズするためのキーです。例えば

  • SPC f ファイル操作関連のキーバインド
  • SPC b バッファ操作関連のキーバインド
  • SPC q 起動関連のキーバインド
  • SPC w ウィンドウ関連のキーバインド

例えばSPC b nなら次のバッファへ移動します。SPC b pは前のバッファへ移動します。このように、カテゴライズされているので操作を直感的に行えるようになっています。

特に便利そうなものをいくつかピックアップしてみました。

  • SPC f f 絞り込み検索でファイルを探して開く
  • SPC f s 現在のバッファを保存
  • SPC b b バッファ一覧を表示
  • SPC b d 現在のバッファを削除
  • SPC b N 空の新規バッファを作成
  • SPC n + カーソル下の数字を1加算
  • SPC n - カーソル下の数字を1減算
  • SPC i U 4 UUID ver4文字列を挿入
  • SPC i l p 1段落分lorem ipsumを挿入