hammhikoの投稿 - Crieit

BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い

2021-01-26T20:25:54+09:00

環境

nuxt: 2.14.6
nuxt/content: 1.9.0
prism-themes: 1.5.0
nuxt-buefy: 0.4.3

デザイン大崩れ

Nuxt/Contentを使っていて、かなり苦戦した。特にNuxt/Contentが内包している、Prism.jsでコードのハイライトを出そうとしたときが辛かった。

これ、酷くない？

最初、何か設定をミスったのかと思って、prismの導入あたりのドキュメントを見ても問題ないし、じゃあ、何かのバグかっていうと、突拍子もなさすぎて訳わからん。
しばらく悩んで気がついた。
Bulmaのスタイルが当たってるんだ。
どうやらnumberというクラスが競合しているようだ。
（正直、このnumberクラス、ドキュメントにもないし、初めて見た。そして、何というか、今後使うことなさそう……）
他にもtagというクラスが競合するらしい（未確認）。

cssに関しては大の苦手なので、具体的な施策を提示する自信がないのですが、
とりあえず、Bulmaのスタイルより優先度上のセレクタで上書きする感じで無理矢理やりました。

結構いました。

調べてみたら同じ理由で困った人がちらほら。
Bulmaをやめてしまった人までいる。
みんな困ってるんだね。

他にも

Nuxt/Content側の話で、見出しがやけに右に寄るなあ、てのもあった（画像2行目）

見出しのリンク（h2 > a > span）にiconというクラスが割り当てられていて、そこにBulmaのクラスが当たって幅を持ってしまっていた。
まあ、そもそもNuxt/Contentは「こういう感じで生成するから自分でデザインしてね」なので良いのだが（自分ではなくBulmaが勝手にやってしまった、というのはあるけど）

感想

Nuxt/Contentもprismも自分の預かり知らないところでHTMLを構成するので、意図せずCSSフレームワークと競合するのはしんどいなあという感想です。
Nuxt/Contentは上記の通りなんだけど、prismは元々のデザインがあるから辛いなあと。
あと、これでBulmaを辞めるという決断になると、同時にbuefyを辞めるという事になるので、結構辛いなあ。

Nuxt/Contentで日付による範囲検索をしたい

2021-01-06T08:13:26+09:00

ハマりにハマった。

Nuxt/Content

最近、Nuxt/Contentというものをお試しで触っている。
Markdownとかでコンテンツをゴリゴリ書いていける、GitベースのヘッドレスCMSとかいうものになるらしい。「GitベースのヘッドレスCMS」とか言われてもよくわからないが、DBではなくGitで管理するということだと思う。
検索とか、なんなら全文検索もできるし結構便利そう。
ただ、公式ドキュメント以外に日本語の記事が乏しくて、ちょっと苦戦する。
ちょっと、というか、どハマりしてしまった。

ハマった環境

Nuxt: 2.14.6
nuxt/content: 1.9.0

日付でコンテンツを絞りたい

作成日でコンテンツを絞りたかったので、ドキュメントを参考にクエリを書いた。
ただ、日付の扱い方がよくわからなかったので嫌な予感はしていた。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01")
const monthEnd = new Date("2020-11-30")
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

これで11月に作成した記事の最新5件が取れるはずだった。

けど取れない

変数articlesの中身は空でした。なんで？
もしかしてDateじゃないのかなとか思って日付形式っぽい文字列にしてみてもダメ。
公式ドキュメントを探し直したけど、特に記述はなく……。
なんなら

createdAt: DateTime

とか書いてあるし、どう考えたってDateでしょ。

調べた

先述の通り、日本語の記事が乏しいうえ、公式ドキュメントに記載がないので苦戦したのだけど、調べて、見つけた。
あったよ。
ていうか、GitHubのissueだったよ！
まあ、内容としてはissueそのまんまなんだけど、

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").valueOf()
const monthEnd = new Date("2020-11-30").valueOf()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

valueOf()なんて初めて使ったよ。てか、初めて知ったよ。
と思って調べてみたら、getTime()の方が正しい気がしてきたぞ？

このメソッドは、Date.prototype.getTime() メソッドと機能的に同等です。
このメソッドは、JavaScript によって内部的に呼ばれ、コード内で明示的に呼ばれることはありません。

// 例）2020/11の記事を検索したい
const monthStart = new Date("2020-11-01").getTime()
const monthEnd = new Date("2020-11-30").getTime()
const articles = await $content('articles')
    .sortBy('createdAt', 'desc')
    .limit(5)
    .where({
        createdAt: { $and: [{ $gte: monthStart }, { $lte: monthEnd }] },
    })
    .fetch()

うん、これでも動いた。

あー、UNIXタイムスタンプだったかー。ドキュメントに書いてて欲しいなー。

おわりに

issuesにはあったけど、日本語の記事があっても良いと思ったので書きました。
探し方が悪いだけかもしれませんが。

辞めないこと

2020-12-16T07:00:10+09:00

Crieitのなんでも Advent Calendar 2020の16日目の記事です。
ちょっと、今年を振り返ってみます。
純度100%のポエムです。

あ、やべー。今年何もしてねえ

っていうのが今年の総括になってしまいますね……。今年の振り返り、以上。
いや、ちゃんと仕事はしていたんですけど。プログラマのアウトプット的な意味で、何もしていない。
Crieitにも記事を一つ書いただけですし。

でも、誰にも怒られない

だって、好きでやっているだけだもの。仕事じゃないもの。
自分の場合は、ゆるーくやっていければそれで良いかなーとは思っています。
似たようなことは去年の今頃も言ってますけど。

とはいえ、好き勝手やっているともちろん悪いこともあって。
それは、「辞めてしまう確率が上がる」ことだと思っています。

大事なのは辞めないこと

僕の好きな言葉に
1番になりたかったら続けなさい。周りが勝手に辞めていくから
というのがあります。
（実は、昔twitterで見かけた言葉で、誰が言ったのかもわからないのですが）
「継続は力なり」とか言われると教訓じみていて少し嫌ですけど、もっと俗っぽい言い回しなので好きです。
1番になれるかとか、なりたいかとかはともかくとして、続けるって大事。辞めないって大事。
さらに言えば、続ける事というか、辞めない事が大事。ちょっとしたニュアンスの違いだけど。

一度辞めてしまうと、再開する時のエネルギーってものすごく必要になると思うんですよね。
再開する資格があるかとか、再開できる環境かどうかとか、そして何より再開する気力が湧くかどうか。
そして結局、再開できない。

「好きでやっているだけだから」と言って、この辺りの事を見失ってしまうと、あっさりと辞めてしまう気がするんです。すると、もう戻って来られない。
だから、好きでやっているだけでも良いけど、これを肝に銘じて続ける。どんなにペースを落としても良いから辞めない。
これが大事なんじゃないかなと思います。

というこの記事を書く事で、僕は今年何もしていなくても、超スローペースでも、何も辞めなかった事にします。

続・ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2020-07-15T21:42:59+09:00

かなり雑な考察ですのでご注意ください。

今は昔

かつてブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？という記事を書いたのですが。
こちら、タイトルが疑問文であることからもわかる通り、単なる疑問を書き殴った記事で、解決していません。
ですが、私が書いた他の記事の3倍、4倍ものアクセスがあり、心苦しいというか、「なんだよ、結局わからなかったじゃねえかよ、XXX」みたいに思われてるんだろうなあ、みたいな被害妄想をする日々でして。
なので、もう少しだけ頑張ってみようと思います。

先に結論（推測）

もはやchromeにデフォルトエンコードというものはない。（たぶん）
何もエンコードに関する指定がない場合に採用されるのは、自動判別の結果（の内のどれか）である。判別できなかったらデフォルトエンコードになる、みたいな挙動ではない。（おそらく）
ぶっちゃけ、ちゃんとWEBサイトを作っていれば直面しない問題なので、わかってもあまり意味はない

とりあえず

もぎゃさんの提示してくれたソースを読もうと思ったんですけど……。
なんだろう、これ。C++かな？僕、C++やったことないんだよねえ……。
これを機に覚えるというのも手ですが、正直そこまでの気力も時間もないし、機というほどのものでもないし、いきなりこのコードを読むのは辛いので、エンジニアらしからぬ感じで調べていこうと思います。

とりあえず、ソースを落としてきます。
で、調べます。
状況としては、「UTF-8になって欲しいものがShift_JISになってしまっている」ということなので、Shift_JISでgrepかけます。
馬鹿みたいで、期待薄ですが、とりあえずかけます。
VSCodeとか駆使しても良いですが、C++の拡張とかよくわからないので原始的にいきます。

$ grep -Ir Shift_JIS .
./platform/text/TextEncodingDetector.cpp:    // a child frame in Shift_JIS and both frames do NOT specify the encoding
./wtf/text/TextCodecICU.cpp:    registrar("shift-jis", "Shift_JIS");

……お？
下のはshift-jisを正しくShift_JISにしている感じ？　ちょっと関係なさそう。
では、上のを見てみますか。TextEncodingDetectorなんて、いかにもそれっぽいじゃないですか。見るとなんか、コメントっぽいですね。

    // If no match is found so far, just pick the top match.
    // This can happen, say, when a parent frame in EUC-JP refers to
    // a child frame in Shift_JIS and both frames do NOT specify the encoding
    // making us resort to auto-detection (when it IS turned on).
    if (!encoding && matchesCount > 0)
        encoding = ucsdet_getName(matches[0], &status);

とりあえずGoogle翻訳にかけます。
これまでに一致するものが見つからない場合は、一番上の一致を選択します。
これは、たとえばEUC-JPの親フレームが
Shift_JISの子フレームで、両方のフレームでエンコードが指定されていない
自動検出機能がオンになっている場合。
ふむふむ。たぶん、「一番上」ってのは

matches[0]

のことでしょう。では、matchesを入れてるのはというと、ちょい上に

const UCharsetMatch** matches = ucsdet_detectAll(detector, &matchesCount, &status);

おー。……なんでしょうucsdet_detectAllって？
grepかけても出てこないので、何かのライブラリかな？
ということでググります。

どうやらICUというもので、文字コード判定ができるもののようです。
なんかそれっぽい。
ただ、100%の精度ではないようで、複数の結果が返ってきたりすると。つまり、UTF-8だとかShift_JISだとかが配列になって返ってくるのかな。

で、

WTF::TextEncoding hintEncoding(hintEncodingName);
// （中略）
const char* matchEncoding = ucsdet_getName(matches[i], &status);
//（中略）
if (WTF::TextEncoding(matchEncoding) == hintEncoding) {
    encoding = hintEncodingName;
    break;
}

んー、hintEncodingは引数で受け取ったhintEncodingNameからゴニョゴニョした感じっぽい。
こいつ自身は/core/html/parser/TextResourceDecoder.cppから呼ばれてるっぽいな。

if (detectTextEncoding(data, len, m_hintEncoding, &detectedEncoding))
    setEncoding(detectedEncoding, EncodingFromContentSniffing);

それっぽい。

そろそろ限界

そろそろ雰囲気だけで読むのは限界です……。
何となく、metaタグやwebサーバーのレスポンスヘッダなどで指定されたエンコードと、ICUの判定結果を突合して一致したものをエンコードとしてるような気がする。
で、一致しなかった場合、ICUの判定結果の0番目を採用する感じかな。
これ以上は限界。

遊んでみる

こんなコードを書いてみます。で、いろんなエンコードで保存します。

UTF-8

たぶん、UTF-8もShift_JISも検出してるけど、Shift_JISの方が先って感じなのかな？　アルファベット順かな？

Shift_JIS

なるほどそうなるよね

EUC

おっと？　一応表示されたけどGBKって何？
と思ったら簡体字用のエンコードなのね。まさかの中国語判定。

ちなみにutf-8のファイルをwebサーバー通さずにファイル表示すると

なんで？
きっとhintEncodingに何か入ってるんだろうけど……。確かに、ファイルを直で見れるので、Webサーバー通すより何かしらの情報はありそう。ただ、調べるにはちょっと力量の限界。

その他

前の記事のコメントで、apacheでは文字化けしてIISでは文字化けしなかったみたいなこと言いましたけど、改めて検証したらIISでもちゃんと？文字化けしました。（この調査結果だとそりゃそうなんですが）
たぶん、何か環境構築とか検証方法を間違えてたんだと思いますが……。
もちろん、nginxでも文字化けします。

まとめ

結論としては最初に言った通り
雑な考察なので信用に足るかは怪しい
わかる人は優しく教えてください
metaタグ等でエンコードはちゃんと設定しよう

localhost監獄

2019-12-18T23:20:07+09:00

ここはlocalhost監獄。様々なwebアプリやスマホアプリが投獄されて日々を過ごしている。
あなたはアプリを監獄(localhost)にぶち込んだ、検察官であり、裁判官であり、看守(アプリの開発者)である。
今のあなたの仕事は、囚人(アプリ)を更生(完成)させ外の世界(インターネット)に旅立たせる(リリースする)ことだ。
ところがこの囚人(アプリ)たち、なかなか厄介で、思った様に働いてくれない。
彼らが日の目を浴びる日はいつくるのやら。

さて

crieitのなんでも Advent Calendar 2019の18日目の記事です。ぎりぎりまだ18日です。
前日はHataさんのプログラミングが好きでずっとプログラミングしていたい。2019でした。
ハートフルでなんかこう、好きなことに打ち込むっていいな、と思わせてくれる記事でした。
そんな記事の翌日に、こんな意味のわからんポエムから始まる記事をぶっ込んで申し訳ない。懺悔します。
（あと、たぶん、赤っぽいジャケットの長髪のカツラの人は彦じゃなくて、…きみま…）

localhostになんかいる。いっぱい

さてさて。去年、公共HP検索というサイトを作って以来、実は色々とwebアプリを作ってきました。
そいつらがみんな、ローカルホストで鎮座している。
上記のサイトですら閑古鳥が鳴く状態なのですが、それ以外は世に出てすらいない。
まあ、理由ははっきりしているんですけど。

理由1.完成させようとしている

個人開発の先人方はみんな言っていると思うので、今更なんですが。
完成させようとしたらいつまでも完成しない。個人開発は締め切りがないのでパーキンソンの法則にしたがって、仕事量が無限に膨れ上がる。
ある程度見切りをつけてリリースしないとダメ。
わかってます。それでもリリースできないのは他にも理由があるからです。

理由2.localhostで十分

これが結構マズい。
そもそも、僕が何かを作る時って、
こういうの欲しいな、どっかにないかな？→ないなー→よし、作るか！
こんな感じなので、一番の利用者は自分。自分が使うならlocalhostで十分ってなりがちです。出先で使いたいってなっても、最低限で作ってherokuやfirebaseにデプロイして、不安なら認証もかければ十分。
そうやって完成度4割5割のアプリがどんどん増えていく。

とはいえ、作りかけのものを友達に見てもらうと（お世辞かもしれないけど）褒めてもらえるので、やっぱり他の人にも使ってもらいたいなという欲はあるんです。
それでもリリースできないのは他にも理由が(ry

理由3.個人開発に対する優先度が低い

いや、割と致命的だよね。
平日はフルタイムで働いて、定時後はジム行って汗流して、週末はクラブチーム所属でスポーツしてるんだもん。そりゃあ個人開発に時間取れないよねーって。
（個人開発の話じゃないけど、完全にこれですよね）
まあ、そういう風に物事の優先度を設定しているのは他ならぬ自分なので、致し方ないというか。
第一、みんな他にやることある中で、時間見つけて個人開発しているはずですから、条件一緒のはずなんですよね。

それでも良くね？

例えば、
プロ野球選手が草野球をやっている人に対して「真面目にやれ！」と怒ることはないと思います。
逆に、草野球の人がプロ野球を見てレベルの差を見て「自分が野球をやるなんておこがましい」と卑屈になる人もいないと思います。
あたりまえですよね（たぶん）。

個人開発だって一緒で、いろんなスタンスの人がいるはずです。
これを読んでいる人も「何を当たり前のことを」と思っていると思います。
けど、twitterとかで個人開発にすごい熱量を注いでいる人を見ると、卑屈になってしまう自分がいて、その気持ちを落ち着かせるために文章にする必要があって、今書いているわけです。

結局のところ、自分が楽しいとか面白いとか思えればそれで良いのでは、って思ってます。
（うまくいかないとか、辛いとかの試行錯誤とか諸々含めての「楽しい」）

面白ければ良いんだ。面白ければ、無駄遣いではない。子供の砂遊びと同じだよ。面白くなかったら、誰が研究なんてするもんか。¹

森博嗣「冷たい密室と博士たち」より

とはいえ

全然何も世の中に出さずにこんな事を語るのも居心地が悪いので、新しいwebアプリをリリースしようと思います。（小規模なやつだけど）
本当はこの日に間に合わせるはずでしたが、色々諸事情でできなかったので、年末年始でリリースします。

頑張ります

明日はshigeさんです！

ドラマ化したときにこのセリフが採用されなかったのが本当に納得できない。このシーンあったのに ↩︎

コンディションを保つために

2019-12-10T00:03:23+09:00

プログラミング・コーディング以外のノウハウ・ティプス Advent Calendar 2019 の10日目の記事です。

ところで、プログラミング・コーディング以外のノウハウ・ティプスということでネタを考えたら、本当にプログラミング・コーディング以外の話になりそうだし、なんならプログラマとかクリエータとかもはや関係ない内容になりそうなんですが、誰に謝れば良いんでしょうか？　だらさん？　まんじゅさん？

と、そんなことばかり考えても先に進まないので、気にしないことにします。

はじめに

さて、僕は常々コンディションというものを大事にしています。

先輩方には「若造が何を言っとるか」みたいに言われそうですけれど、
* 二日酔いで極端にパフォーマンスが落ちる（以前より、という意味です）
* なんなら6時間睡眠が2日続くだけでももうダメ（7時間は欲しい）
* 筋肉痛が3日4日引かない（初日に来たうえでの2日目の追い討ち、からの治らない）
* 風邪を引くと病院で薬をもらわないと治らない（昔は寝れば治ったのになあ……）
* フィジカルとメンタルが密結合しだした（疲れるとすぐネガティブになる）

みたいなのを如実に感じるようになってきまして……。
あと、メンタルボロクソになって働けなくなった経験もあるので、とにかく、フィジカル・メンタルのコンデイションにはそこそこ気を使っているわけです。
とは言っても、基本方針としては、
* 食え
* 寝ろ
* 動け

みたいな脳筋筋トレ社長が言いそうなことで、意見終了してしまうのですが……。
ただ、これらってシンプルで全くもって正しいので、足りてないなと思ったら意識してやってみるようにしてください。
特に運動。皆さん、ちゃんとやってます？　仕事で疲れてるのに運動なんてできない？　
それ、逆かもしれませんよ？
「現代人の疲労の原因は運動不足」って話もありますから。

ここから本題

これだけで終わってしまうと、「1+1は2です」くらいの情報しかないので、もう少し、雀の涙程度の情報は付加したいと思います。
そうですね、ネガティブな状態を霧散させる方法 とかどうでしょうか？

前提条件

今回の「ネガティブな状態」とは、なんかダルい・無気力、みたいな慢性的な状態を指すこととします。
漠然とした不安とか、原因はあるけどすぐには解決できないようなものとします。
~~（5000兆円欲しいけど、どう頑張っても手に入らない、悲しい。とか）~~

特定の事象に対する短期間なネガティブな感情にも使えないことはないですが、その原因を取り除く努力をした方が早いかもしれません。

下準備

手帳を買いましょう。
別にアプリとかでも良いです。僕は電話中にスケジュールが確認できないのが嫌なので、物理で持ってますが。

すること

予定を入れましょう。詰め込みましょう。
以上です。

どういうこと？

ネガティブな状態って、ネガティブな事を考える時間的余裕があるからこそ陥ってしまうと思うんですね。
なので、スケジュールを入れて、考える時間をなくします。~~脳筋です。~~

この手法自体は僕の経験談からくるものですが、同じような事を言っている人はいます。

例えば、オードリーの若林は「ネガティブを潰すのはポジティブではない。没頭だ。」と言ったとか言わないとか。
当該の本を読んでいないので、詳細は分かりませんが、似たようなことではないかなと想像しています。

メンタリストDaiGoも著書の一つでそんな感じの事を言っています。（正確にはカーネギーの著書の一部を紹介）

医者から寝たきりになることを宣告されたこの女性は、事故から3カ月後は車椅子に乗って聴衆に向かって講演をしていました。その後も講演活動を精力的に続けて、大成功を収めたのです。
（中略）
頑張れた理由を聞かれて、彼女は「悲しんだり苦しんだりする暇をなくすためにそうした」と答えています。

FAQっぽい何か

Q. 入れる予定が思い浮かびません。
A. なんでもよいと思います。
　「映画を見る」とか、「散歩をする」とか。
　「twitterをする」は個人的には避けた方が良いと思いますが。

Q. スケジュールを入れた結果、逆に疲れてしまいました。
A. 予定の内容がまずいか、詰め込みすぎです。
　「予定=人と会う」みたいなイメージで、パリピのような予定を入れる必要はないです。多少、強制力のある予定があった方が良いとは思いますが。
　予定の詰め込みすぎで疲れるのは本末転倒なので、うまく調整してください。予定を詰め込むことが目的ではありません。
　何もしない時間はもちろんあって良いと思います。僕も意図的にそういう日を作ります。僕は「『何もしない』をする」と表現しています。

おわりに

万人に通じる様なものではないと思いますが、誰かの役に立てば幸いです。

JavaScript:オブジェクトが中に入った配列をコピーする

2019-11-29T22:48:04+09:00

はじめに

こんなの、絶対みんな直面していると思うんだけど、調べても出てこないのは、ググり方が悪いのか、需要がないのか、みんな余裕でやってしまうのか、なんなんだ？

想定読者

下記の挙動を理解している人

const array = [1,2,3];
const array2 = array;
console.log(array); // → [1,2,3]
array2[1] = 4;
console.log(array); // → [1,4,3]

配列をディープコピーしたい

配列をコピーして別物として扱いたいとき、 = で代入してはいけないのは流石に分かるのだけど、殊更JavaScriptになると「あれ、どうやるんだっけ？」と毎回調べるハメになる。
しかも、やれsliceを使え、concatを使えだの、やれArray.fromを使えだの、様々な方法があって、かつ、そいつら、ディープコピーのメソッドじゃないよね？ cloneとかないの？¹ という状況なのですが、文句を言っても仕方がないので、愚直にやるわけです。

配列の中身がオブジェクトだとうまくいかない

で、こんなコードを書いたわけですが、

const array = [{a:1},{a:2}];
const array2 = array.slice();
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2[1].a = 3;
console.log(JSON.parse(JSON.stringify(array)));
// ???
// Array(2)
// 0: {a: 1}
// 1: {a: 3}

目を疑った。あれ、実はsliceはダメなのかな？　とか思ってconcatもArray.fromも試したけどダメ。
1時間くらい悩んで、「ああ、配列はディープコピーされたけど、中のオブジェクトが参照のままなのか」と気がついた。

const array = [{a:1},{a:2}];
const array2 = array.slice();
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2.push({a:3});
console.log(JSON.parse(JSON.stringify(array)));
// 配列はディープコピーされている
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
console.log(JSON.parse(JSON.stringify(array2)));
// Array(3)
// 0: {a: 1}
// 1: {a: 2}
// 2: {a: 3}

解決策

え、これどーすんの？　と少し悩んで、下記の様にした。

const array = [{a:1},{a:2}];
const array2 = array.map((obj) => Object.assign({},obj));
console.log(JSON.parse(JSON.stringify(array)));
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2.push({a:3});
console.log(JSON.parse(JSON.stringify(array)));
//　配列はOK
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
array2[1].a = 4;
console.log(JSON.parse(JSON.stringify(array)));
// 中のオブジェクトもディープコピーしている
// Array(2)
// 0: {a: 1}
// 1: {a: 2}
console.log(JSON.parse(JSON.stringify(array2)));
// Array(3)
// 0: {a: 1}
// 1: {a: 4}
// 2: {a: 3}

Array.map()の中でオブジェクトをObject.assign()でディープコピーして返している。mapは新しい配列を返すので、配列のコピーもOK。

ところで、オブジェクトのディープコピーって

オブジェクトのディープコピーも調べるといくつか出てくる。
Object.assignってのがあるんだけど、Object.assignはシャローコピーなのでJSON.parse/JSON.stringifyって人もいれば、JSON.parse/JSON.stringifyは安易に使うな、Object.assignがディープコピーだからそっちを使えっていう堂々巡りで、というか読んでいるとどっちもどっち感が強くて、状況に合わせて自力でどうにかするしかないじゃんっていう……。

おわりに

もっと正しいスマートなやり方を教えてください。

phpのcloneが配列に使えない（そして使う必要がない）のは知っているのだけれど、良い例が思い浮かばなかったのです。 ↩︎

Vue + Buefyでサーバーからファイルを受け取ってファイルアップロードにセットする

2019-10-31T08:02:37+09:00

そんな需要がどこにあるのか知らんが。

動作環境

OS: macOS High Sierra 10.13.6
ブラウザ: Chrome 77.0.3865.90
vue: 2.6.10
buefy: 0.8.4

はじめに

やりたいこととしては、タイトルの通りです。

需要があるとは到底思えないのだけれど、思いついてやってみたらそれっぽくできてしまったので。

無理やり使う場面を考えるとすると、例えば電子申請伝票に添付ファイルを（領収証とかをpdfで）つけたいのだけど、申請前に一時保存する機能をつけたい。保存時に添付ファイルはサーバーに送られるのだけど、再編集時にファイルアップロードにセットしたい、とか。でもそんな業務チックなシステムをvue + buefyでやるとは思えないので、やっぱり使う場面が思い浮かばない。

普通のファイルアップロードだと無理

普通のファイルアップロード(input type="file")だとセキュリティ上の理由で無理。まあ、そうだよなって感じではありますが。
別に、valueに端末のパスを指定して悪さしたいわけじゃなくて、直にfiles[0]にFileオブジェクトを突っ込んでおきたいのだけど。。。

Buefyならなんとか

Buefyのb-uploadなら、VueのdataにFileオブジェクトを保持して、擬似的（？）にファイルアップロードを作っているっぽいのでできそうです。
やる場面があるか知らんが。

要は、VueのdataにFileオブジェクトを突っ込めれば良いので、サーバーからのファイルのデータをFileオブジェクトに変換するというのがメインの作業になります。

~~面倒なので~~前回のソースに手を加える感じにします。

と、その前にサーバー側。
よしなにやれば良いと思いますが、今回は簡単にLaravel使ってこんな感じでStorageでgetして返してます。

return Storage::get('PUBLN-S-logo.png');

でフロント側

fetchだとレスポンスをblobをブジェクトに変換するblobメソッドがあるので、それを使います。
blobだとb-uploadが受け付けないのでFileオブジェクトにする必要がありますが、コンストラクタでblobを渡すことができるので、難しくありません。配列で渡す必要があるのをうっかりしそうですが。

ボタンを押すと

サーバーから取ってきてセット（ついでにプレビュー）

終わりに

細かいところは検証してないですが、とりあえず動いたので。
たぶん、色々セキュリティとかも含めちゃんとしなきゃいけないとは思います。
そもそも使いどころはわかりませんが。

FTPコマンドは半端な入力を補完して実行してくれる？

2019-10-28T22:45:05+09:00

はじめに

/^[^S]*FTP[^S]*$/の話なので、他はわからないし、今さら使うこともないのでは、と思わないでもないですが。
FTPであることについては、言いたいことを全て飲み込んでください。お願いします。

あ、あと環境。
OS: macOS High Sierra 10.13.6
ftp: 1.9.4

発端

僕ってしょっちゅうslコマンドだとかdcコマンドを実行してしまうんですが、そんな感じでこの間も

$ ftp
ftp> passiv

こんな感じでeが~~押ささんなくて~~押せなくてEnterしちゃったんですね。
そしたら、

$ ftp
ftp> passiv
Passive mode on.
ftp>

ちょっと目を疑った。俺、ちゃんと打ててないよ？
で、ちょっと試してみた。

$ ftp
ftp> passive
Passive mode on.
ftp> passiv
Passive mode off.
ftp> passi
Passive mode on.
ftp> pass
Passive mode off.
ftp> pas
Passive mode on.
ftp> pa
Passive mode off.
ftp> p
?Ambiguous command

まじかー。
Invalid じゃなくて Ambiguous なあたり、
これってコマンドの候補が一つに確定したら途中でも実行してくれるってことかなー。つーことはpがダメなのはputがあるからかー。
と想像した。

ということで、

$ ftp
ftp> ope
(to)

なるほどこうなるよなー。

みんな知ってんの？

これって常識なのかな？　と疑って隣の人に聞いてみたら、知らなかった。少なくとも自分だけではなかった。
軽くググってみた。
けど、
ftp 補完
とかだとファイル名のTab補完の話になるし、
ftp コマンド　途中
とかだと通信が途中で切れた場合の挙動の話になるし、
調べ方がよくわからなかった。
うーん。

まとめ

確定しているし、間違った実行とかはないだろうけど、一応、普通に打った方が良いと思う。

Vue + Buefy で画像ファイルのプレビューを実装しようとしたらonChangeが効かなくて少しだけ困った話

2019-10-04T08:03:30+09:00

まあ、自分のやろうとしたことが、正攻法じゃなかっただけかもしれないけど。

動作環境

まずは、一応
OS: macOS High Sierra 10.13.6
ブラウザ: Chrome 77.0.3865.90
vue: 2.6.10
buefy: 0.8.4

はじめに

vue + buefy でwebサイトを作っていて、画像ファイルのアップロードとプレビューを実装しようと思った。
それ自体は調べれば色々出てくるので難しいものではなかった。（ちょっと疑問は残ったけど¹）

だいぶ雑に書くけど

こんな感じでできる。
（ほんとは、ファイルがないときはimgタグ隠すとか、fileは画像ファイルだけ受け付けるとか色々必要だけど）

ところがこれを

buefyのb-inputに変更したら途端に動かなくなった。
どうもonChangeが発火していないみたい。

解決策

原因がはっきりしないのだけど、（というか調べていない）とりあえずなんとかする方法はある。

1. b-inputをやめる

そもそも、元々動いていたのだから素直にinputを使う。で、bulmaなり素のcssでデザインをなんとかすれば良い。

2. b-inputではなくb-uploadを使う

こっちの方が正攻法のような気がする。
そもそもbuefyにはb-input以外に、アップロード用のコンポーネントb-uploadがある。
（正体は input type="file" っぽいけど）
こっちだとv-modelでfileオブジェクトをバインドできるので、onChangeイベントも要らず算出プロパティでできたりする。
※ちなみにinputでv-modelを使おうとすると、type="file"の場合、vueのエラーになる。b-uploadも最終的にはinputになるのに、何故……？

（雑にやったせいかアイコンが出てないけど……）

番外編 b-inputでv-modelを使う（ダメでした）

この記事を書いていて、「あれ？　最終的にinputになるb-uploadがv-model使えるのなら、b-inputのtype="file"でもv-model使えるんじゃね？」って思ってやってみたけどダメだった。
vue側ではエラーにならないけど、バインドされるのがFileオブジェクトではなくファイルパスの文字列だった。
b-uploadはコンポーネントの中で色々よしなに頑張ってくれているんだろうなあ。

終わりに

個人的には、いかにも「ファイルアップロードです！」みたいな見た目が嫌いではないし、対応としてはどっちでも良いと思うのだけれど、まあ、状況に合わせて対応すれば良いと思う。

みんなonChangeでFileオブジェクト取得してFileReaderでonloadしてreadAsDataURLでimgのsrcに入れてるんだけど、今回やってるみたいにFileオブジェクトからwindow.URL.createObjectURLじゃダメなの？ ↩︎

何も考えず手癖で書いたり、眠いなーって思いながら書いた、なんかパッとしないコードたち

2019-08-28T22:16:53+09:00

はじめに

とりあえずググろう。特にPHPは関数が充実してるから、なにかしらある。
という自分への戒め。
beforeがパッとしないコードたち、それを改善したのがafter。

配列Aのi番目と配列Bのi番目を同時に操作したい

初心者の頃から時が止まっていた。
言語：PHP
参考：【PHP】複数の配列を同時に while で回す

before

$arrayA = ['a', 'b', 'c'];
$arrayB = ['1', '2', '3'];
$count = count($arrayA);
for ($i = 0; $i < $count; ++$i) {
    $a = $arrayA[$i];
    $b = $arrayB[$i];
    hoge($a, $b); // aとbでなんかする
}

after

$arrayA = ['a', 'b', 'c'];
$arrayB = ['1', '2', '3'];
foreach (array_map(null, $arrayA, $arrayB) as [$a, $b]) {
    hoge($a, $b); // aとbでなんかする
}

CSVをN件ずつバルクインサートorマルチプルインサートしたい

こんなクソダサい実装嫌だとか思ってたけど、クソ眠くて何も思い浮かばなかった。
言語：PHP
参考：array_chunk

before

$csv = hoge(); // SplFileObjectとかでCSVファイルを配列に
$records = [];
$arrayByInsertUnit = [];
foreach ($csv as $row) {
    // 空行の処理は本題と逸れるので省略

    $records[] = ['cd' => $row[0], 'name' => $row[1]];

    if (count($records) === 1000) {
        $arrayByInsertUnit[] = $records;
        $records = [];
    }
}
// 余り
$arrayByInsertUnit[] = $records;

foreach ($arrayByInsertUnit as $unit) {
    //トランザクションとかは割愛
    Model::insert($unit); // LaravelとかのORMとかでインサート
}

after

$csv = hoge(); // SplFileObjectとかでCSVファイルを配列に
$records = [];
foreach ($csv as $row) {
    // 空行の処理は本題と逸れるので省略

    $records[] = ['cd' => $row[0], 'name' => $row[1]];
}

$arrayByInsertUnit = array_chunk($records, 1000);

foreach ($arrayByInsertUnit as $unit) {
    //トランザクションとかは割愛
    Model::insert($unit); // LaravelとかのORMとかでインサート
}

あれ、でも、これ、綺麗にはなったけど、一度配列に全部入れてから分割してるから、beforeより遅い？？

それと、insertのところ、laravelでやろうとするとバルクなの？　マルチプルなの？

取得したDOMをループで回したい

手癖とか眠いとか関係なく普通に知らなかった。JavaScript難しい
言語：JavaScript
参考：Crieit プログラミングチャレンジ

before
最初、普通にforEachしようとしたらエラーになったので、仕方なくforにしてた。

const li = document.getElementsByTagName("li");
const count = li.length;
for (let i = 0; i < count; i++) {
  const val = li[i].value;
  hoge(val); // なんかする
}

after

Array.from(document.getElementsByTagName("li")).forEach(li => {
  const val = li.value;
  hoge(val); // なんかする
});

forEachよりmapとかfilterとかの方が多いと思うけど、たぶん一緒。

おわりに

何か思いつけばまた生き恥を晒すかもしれない

apacheのconfigtestは"Syntax OK"でもエラー扱い

2019-07-12T19:35:42+09:00

最初に。ごめんなさい

タイトル盛りました。
正確には、
apacheのconfigtestは"Syntax OK" を標準エラー出力する。戻り値はちゃんと0が返る。
です。

調べてもあまり情報出てこなかったし、誰も気にしていないんだろうけど。

確認したバージョン

Server version: Apache/2.2.34 (Unix)

Server version: Apache/2.4.33 (Unix)

経緯

定期的に（結構な頻度で）apacheのエイリアスを増やさなきゃいけない不思議な環境がありまして。
いい加減、手作業がダルいので、シェルで自動化しようと考えまして。

# 色々処理をごにょごにょ
doSomething1
doSomething2
doSomething...

service httpd configtest >> logfile
RET=$?
echo $RET >> logfile
if [ ${RET} = 0 ]; then
    service httpd graceful
fi

（今、そらで書いたのでだいぶ怪しい）

で、動かして見たらconfigtestのところがログになかった。
あれ???ってなって、構文ミスったかな？　とか、いろいろ見直した。
最終的にやっと気が付いて、

# 色々処理をごにょごにょ
doSomething
doSomething2
doSomething...

service httpd configtest >> logfile 2>&1
RET=$?
echo $RET >> logfile
if [ ${RET} = 0 ]; then
    service httpd graceful
fi

これでちゃんとログに出た。

ちょっと待って

Q. これってapacheの仕様うんぬんの前に……。
A. はい。何らかのエラー出力があった場合もログに出ないので、最初のプログラムはただの僕が作ったバグです。

まあ

戻り値はちゃんと出し分けてるのに（当たり前だ）
出力は出し分けずに標準エラー出力で統一ってのも、なんか不思議な気はする。
まあ、だいたい2>&1するし、実害はないんだけど。

ハッカーな気分

2019-06-26T23:27:43+09:00

今は昔

むかーしむかし、僕がまだ、小学生とか中学生とか、とにかく、パソコンとかプログラムとかよくわかっていなかった頃の話だ。
アニメやドラマ、映画を見ていると、たまにハッカーみたいなやつが出てくることがある。それは時にはハッカーだし、時にはクラッカーだったりするのだけれど、今はとりあえず、どちらでも良い。
とにかくだ。彼らはすごいのだ。
何がすごいって、ダダダダダッってキーボードを淀みなく叩き続けて、画面には理解不能な文字列がバババババッって表示されて、ッターンって仕上げにキーボードを叩くと、何かすげーことが起きる。
何か、すげーのだ。
別に憧れたりはしなかったけど。

少し昔

とか言いながら、僕は新卒でSIerの企業に入った。
扱ったのは、Windows Server で動くC#製のWebアプリだ。

Windows Server ってGUIだから普段のPCの延長みたいなものだし、普段の開発もだいたい手はそんなに動かない。悩んで調べて動かなくて……。
おおよそ手はキーボードの上じゃなくて、マウスの上か頭の上（頭抱えてる）にある。時々キーボードって感じだ。
昔見たハッカーはやっぱりフィクションなんだなーと、ふと思ったりした。
別に憧れて入った訳じゃないから、何も問題ないのだけれど。

ちょっと前

転職した。その話は今は関係ないので省く。
扱うものがWindowsからLinuxに変わった。
最初はCUIがすげー辛かった。ファイルを探そうにもエクスプローラすらないのだもの。
最初はTab補完すら知らなくて、ファイル探すだけでこんな大変だなんて、どうかしてる、とさえ思ったりした。
そのうち慣れていったけど。

ある時

自分が、ダダダダダッってキーボードを淀みなく叩き続けて、コンソールに文字列をバババババッって表示させているのに気が付いた。

あ、ちょっとハッカーっぽい。

少し思って、すごく虚しくなった。

だって。

cdとlsを打ち続けて、ログを見つけてgrepかけただけだもの。¹

「エクスプローラをポチポチクリックして、サクラエディタのgrep機能でログを検索する」とwindowsに置き換えて書いてみると虚しさが倍増する。 ↩︎

参照の値渡しがわからなかったのだけれども

2019-06-24T00:26:52+09:00

ちょっと前に、参照渡しが盛り上がりましたね。
参照渡しというか、参照の値渡しがどうもしっくりこなくて。

ちょっとPHPで書いてみます。

①オブジェクトを渡してプロパティを変える

これを最初に見た時の感想は、
「プロパティが変わってる！　そうか、これは参照渡しなんだ！」では断じてなくて、
「なんで値渡しなのに関数の外で変わってんだよ！」だったのですが。

$a = new stdClass();
$a->hoge = 5;
$a->fuga = 10;

var_dump($a);

func($a);

var_dump($a);

function func($a){
    $a->hoge = 6;
}

class stdClass#1 (2) {
  public $hoge =>
  int(5)
  public $fuga =>
  int(10)
}

class stdClass#1 (2) {
  public $hoge =>
  int(6)
  public $fuga =>
  int(10)
}

②オブジェクトを渡してオブジェクトごと変える

$a = new stdClass();
$a->hoge = 5;
$a->fuga = 10;

var_dump($a);

func($a);

var_dump($a);

function func($a){
    $a = new stdClass();
    $a->hoge = 6;
    $a->fuga = 11;
}

class stdClass#1 (2) {
  public $hoge =>
  int(5)
  public $fuga =>
  int(10)
}

class stdClass#1 (2) {
  public $hoge =>
  int(5)
  public $fuga =>
  int(10)
}

むしろこれが普通だろ、値渡しなんだから。と思っていたけど、そうすると、なんで①は変わってしまうの？？？　って状態だった。

参照の値渡し

色々な記事をみて、「参照渡し」と、「参照の値渡し」というのがあるってのはわかって、なんとなく、ぼやーっとはわかったような、わからないような。

②が普通だと思っていたのに、①を見てから②を見ると、なんか変というか、
まるで、newした瞬間に何かが起こったような、突然変異でも起きたの？　みたいなもやもやがあった。
けど、下のコードを思い至って、少しスッキリした。
とどのつまり、実際、結局、newした瞬間に何かが起こったわけだ。
参照値が変わった、ということなのかな？

$a = new stdClass();
$a->hoge = 5;
$a->fuga = 10;

var_dump($a);

func($a);

var_dump($a);

function func($a){
    $a->hoge = 0;

    $a = new stdClass();
    $a->hoge = 6;
    $a->fuga = 11;
}

class stdClass#1 (2) {
  public $hoge =>
  int(5)
  public $fuga =>
  int(10)
}

class stdClass#1 (2) {
  public $hoge =>
  int(0)
  public $fuga =>
  int(10)
}

なんで、みんな①と②だけ説明して、このコードを書いてくれなかったんだろう。（見つけてないだけで書いてるのかな？）
……みんな①と②だけでわかるのか。俺の頭がわるいのか。

逆にこれを見て、何がわかったのかわからない、という人の方が多いのかも。
なんというか、これをうまく言語化できない。
うまく言語化できそうになったら書き直す。（かもしれない）

fetchがよくわからなかったのでオレオレfetchを作って雰囲気を掴む

2019-06-09T23:58:56+09:00

前回、こんな記事を書きました。
上の記事のそもそもの発端は、fetchを使おうとしたけども、よくわからなかったからというものでした。
根本的には、fetchがわからないというよりはPromiseがよくわかってなかったという方が近いので、前回Promiseの雰囲気を掴んだ時点で7割方解決しているのだけれど、そもそもの発端を解決させようと思います。

そもそもの発端

超絶ざっくり書くと、fetchというのは下記のようになるかと。

fetch(url)
.then((response)=>{
    return response.json();
})
.then(()=>{
    //json使って何か処理
})
.catch((error)=>{
    //エラー処理
})

まあ、こんな感じのものを見て、非同期をよくわかっていなかった僕はちんぷんかんぷんになって、どうにか、fetchというのは非同期で動くものらしい、というところまではわかった。
なのでどうにかして非同期を勉強しなければいけない。
そこでググったら出てくるわけです。

const hoge = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('wait 3 sec!')
            resolve('wait 3 sec!')
        },3000)
    })
}

……。さっきまでPromiseとかresolveとかrejectとか出てこなかったじゃん。
ってなって挫折していた。
今思えば至極単純で、Promiseとかresolveとかrejectとかはfetchの中で勝手にやっていることなので、fetchを使う分には登場しない。
もちろん、理解する必要はあって、そのために今回もオレオレfetchを作ることで雰囲気を掴もうと思う。

注意

あくまで雰囲気を掴むだけです。実際の実装は微塵も知りません。
いろんなドキュメントを読んだ上での筆者の解釈（を筆者の実装レベルでできるとこだけ再現したもの）です。とんちんかんかもしれません。
妥協しまくりです。
あまりにもとんちんかんなこと言ってたら教えて下さい。
信用しないでください。
レベル不足でクソコードです。

まず呼び出すコードから

こんな感じのjsonを作ります。
json-serverとかで適当にapiを作ります。

{
    "wizards":[
        {
            "id":1,
            "name":"Arietta",
            "feature":"monster"
        },
        {
            "id":2,
            "name":"Relum",
            "feature":"fool"
        },
        {
            "id":3,
            "name":"Elise",
            "feature":"poor"
        }
    ]
}

で、呼び出し側


    
        
        
        
        
        
    
    
        hello async
        
        
            
                id
                name
                feature

const getData = () => {
    const url = 'https://localhost:3000/wizards'  //json-serverとかでよしなに
    fetch(url)
    //oreoreFetch(url) //これに置き換えても動くようにするのが目標
    .then((response)=>{
        return response.json();
    })
    .then((json)=>{
        const tbody = document.getElementById('tbody');
        json.forEach((wiz)=>{
            let tr = `  
                            ${wiz.id}
                            ${wiz.name}
                            ${wiz.feature}
                        
            `;
            tbody.insertAdjacentHTML("beforeend",tr);
        });
    })
}

まー、動くよね

で、fetchのコード

const oreoreFetch = (url)=>{

    return new Promise((resolve,reject)=>{
        httpRequest(resolve,reject,url)
    });
    //最終的に前回のオレオレPromiseで動いてほしい
    //けど、Promiseチェーンが実装できなかったんだよな…
    //return new oreorePromise((resolve,reject)=>{  
    //    httpRequest(resolve,reject,url)
    //});
}

const httpRequest = (resolve,reject,url) =>{

    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        switch ( xhr.readyState ) {
            //めんどいので4以外省略
            case 0:
                break;
            case 1: // データ送信中.
                break;
            case 2: // 応答待ち.
                break;
            case 3: // データ受信中.
                break;
            case 4: // データ受信完了.
                if( xhr.status == 200 || xhr.status == 304 ) {
                    const data = new oreoreResponse(xhr.responseText);
                    resolve(data);
                } else {
                    reject(xhr.statusText);
                }
                break;
        }
    }
    xhr.open( 'GET', url, true );
    xhr.send(null);
}

class oreoreResponse{
    constructor(data){
        this.data = data;
    }

    json(){
        return JSON.parse(this.data);
    }
}

fetchができればいいのでResponseクラスは適当です。
（実際はコンストラクタに引数はないし、jsonメソッドはPromiseを返す）
Promiseの勉強で出てきたresolveとかrejectは（たぶん）fetchの中にあって、よしなにやってくれるので、fetchを使う分には意識しなくていいよ、ってのがわかる。

ということで動かす。

const getData = () => {
    const url = 'https://localhost:3000/wizards'
    //fetch(url)
    oreoreFetch(url) //これに置き換えても動くようにするのが目標
    .then((response)=>{
        return response.json();
    })
    .then((json)=>{
        const tbody = document.getElementById('tbody');
        json.forEach((wiz)=>{
            let tr = `  
                            ${wiz.id}
                            ${wiz.name}
                            ${wiz.feature}
                        
            `;
            tbody.insertAdjacentHTML("beforeend",tr);
        });
    })
}

まー、それっぽく動く。

まとめ

みんな、async/await使おうぜ！

PromiseがよくわからなかったのでオレオレPromiseを作って雰囲気を掴む

2019-06-07T00:25:00+09:00

非同期がわかりません。
「この関数はPromiseを返します」
Promiseって何だよ。
非同期やってもコールバック地獄にならないらしいけど、
結局引数に渡すのはコールバックだし、
僕からするとまーまーわからんのです。

というわけでPromiseを自作して雰囲気を掴むことにしました。

注意

あくまで雰囲気を掴むだけです。実際の実装は微塵も知りません。
いろんなドキュメントを読んだ上での筆者の解釈（を筆者の実装レベルでできるとこだけ再現したもの）です。とんちんかんかもしれません。
妥協しまくりです。
Promise.allとかやりません。それどころかPromiseチェーンすらできません。
catchは実装したけど試してません。
（要はほとんどできてないじゃないか）

あまりにもとんちんかんなこと言ってたら教えて下さい。
信用しないでください。
レベル不足でクソコードです。

とりあえずコード

とりあえずよく呼び出す側のコードです。


    
        
        オレオレPromise
        
        
    
    
        hello async

const wait = ()=>{
    const start = document.getElementById('start');
    start.style="";
    start.innerHTML += "start:" + new Date();
    hidouki().then(finish).catch(dispError);

}

const hidouki = ()=>{

    return new Promise(wait1);
    //return new oreorePromise(wait1); //こっちに書き換えても動くようになるのが目標

}

const wait1 = (resolve,reject) => {
    setTimeout(() => {
        const async1 = document.getElementById('async');
        async1.style="";
        async1.innerHTML += "wait3 sec :" + new Date();
        resolve('succeeded async');
    },3000);
}

const finish = (value) => {
    setTimeout(()=>{
        const finish = document.getElementById('finish');
        finish.style = "";
        finish.innerHTML += value + " :" + new Date();
    },5000);
}

const dispError = (error) => {
    alert(error);
}

ちゃんと待ってる。

さて、new Promiseしているところを自作Promiseに書き換えても動くようにするのが目標です。

わからんなりの実装

正直、Promiseのコンストラクタの引数はコールバック関数で、そのコールバック関数の引数はresolveとrejectで……、
って言われてわかる？　みんなすごいね！　僕はわかんないです。そのresolveとrejectはどこから来たんだよ。
ってのを試行錯誤しながら理解しようとした結果、以下のようになりました。

class oreorePromise{
    constructor(callback){
        this.value = null;
        this.state = 'pending';
        this.thenTimer = [];
        this.catchTimer = [];

        callback(this.resolve.bind(this),this.reject.bind(this));

    }

    resolve(value){
        this.value = value;
        this.state ='fulfilled';
    }

    reject(value){
        this.value = value;
        this.state='rejected';
    }

    then(nextCallback){
        this.thenTimer.push(setInterval(function(){
            if(this.state === 'fulfilled'){
                this.value = nextCallback(this.value);
                clearInterval(this.thenTimer.shift());
            }
            else if(this.state === 'rejected'){
                //待機やめる
                clearInterval(this.thenTimer.shift());
            }
        }.bind(this),100)); //テストだし100ミリ秒くらい待とう

        // https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises#Chaining
        // then 関数は元の Promise とは別の新しい Promise を返します。
        // らしいけど、もう力尽きた…。
        return this;
    }

    catch(errorCallback){
        this.catchTimer.push(setInterval(function(){
            if(this.state === 'fulfilled'){
                //待機やめる
                clearInterval(this.catchTimer.shift())
            }
            else if(this.state === 'rejected'){
                errorCallback(this.value);
                clearInterval(this.catchTimer.shift())
            }
        }.bind(this),100));
    }
}

JavaScriptのthisがわかんなくて、ただでさえわからないのにコールバックしまくってthisが迷子になって結構しんどかった。一応動いたけど。
Promiseよりthisの方が難しかった。
だれかthis教えて。

resolveとrejectはPromiseオブジェクトが持つメソッドで、
「コンストラクタに引数として渡したコールバック関数を実行するときに、resolveとrejectを引数として実行しますよ。
なので、実行したい関数を定義するときにresolveとrejectが引数になるように定義してくださいね」
というお約束だということが自分で書いてようやくわかった。

わかってからだと、ちゃんと書いてあることがわかる。なぜ最初から見つけられないのだ。

どこかの解説記事で、
「resolve関数を実行するとthenメソッドが呼び出される」
とか書いてあって腑に落ちなかったんだけど、たぶん、正しいのは、
「thenメソッドは即座に呼ばれていて、オブジェクトの持つ状態（oreorePromiseではプロパティstate）がfulfilledになるまで、引数として渡されたコールバック関数の実行を待つ」
なんだと思う。
（自信はない）
resolveは状態を変更しているだけで、別にthenに渡された関数を実行しているとかはない、と思う。（ここは特に自信ない）

最初にそう言う説明を見てしまったのでthenメソッドが魔法のように見えてしまっていたのだけれど、
（MDNで「さあ魔法の時間です。」とか言ってるしね！）
よく見ればobject.method()という至極基本的な文法だし、即座に呼ばれて当然だよなと。

このコードでは、状態が変わるまでsetIntervalでループしてるのは最高にダサいと思うけど、本質とずれるのであまり凝ってない。

できたので書き換えてみる

const hidouki = ()=>{

    //return new Promise(wait1);
    return new oreorePromise(wait1); //こっちに書き換えても動くようになるのが目標

}

動いた。

まとめ

ドキュメントを見返して、ソースを見返す度に「あ、ここ違うな」ってなる。
ただ、重ね重ねだけど、雰囲気を掴んでPromiseを使えるようになるのが目的で、Promiseのコピーを作りたいとかではない。
せめてPromiseチェーンは実装したかったけど、費用対効果が薄すぎてやめた。
個人的には

resolveとrejectはPromiseオブジェクトが持つメソッドで、
「コンストラクタに引数として渡したコールバック関数を実行するときに、resolveとrejectを引数として実行しますよ。
なので、実行したい関数を定義するときにresolveとrejectが引数になるように定義してくださいね」
というお約束だということが自分で書いてようやくわかった。

どこかの解説記事で、
「resolve関数を実行するとthenメソッドが呼び出される」
とか書いてあって腑に落ちなかったんだけど、たぶん、正しいのは、
「thenメソッドは即座に呼ばれていて、オブジェクトの持つ状態（oreorePromiseでは変数名state）がfulfilledになるまで、引数として渡されたコールバック関数の実行を待つ」
なんだと思う。
（自信はない）

ここが理解できた時点でもういいかって感じ。おまけで完成させた。

まとめ2

みんな、async/await使おうぜ！

まとめ3

だれかthis教えて

ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2019-03-28T19:12:26+09:00

まー、困ることはないんだけど、気になって気になって

発端

よく、jsとかの挙動で「あれ、どうだっけ？」ってなった時、