Javascript

1分でプログラミングの練習ができるサイトを作った

1分でプログラミングの練習ができるサイトを作った。 30-seconds-of-code Training データはオープンソースの 30-seconds-of-code を使っていて、それぞれのスニペットを問題にした。 JavaScript なのでコードの実行はブラウザ側で行っている。サーバーサイ…

【Node.js】return await の紛らわしい注意点

Eslint には no-return-await というルールがある。Standard JS にも採用されているルールだ。このルールは、return await に警告を出す。 async function foo() { return await bar() } しかし、常に return await しないべきかというとそうでもなくて、必…

JSでプライベートコンストラクタを実現する小技

JavaScript は言語レベルでプライベートメソッドをサポートしていないので、プライベートコンストラクタを実現しようとしたら自分で工夫しないといけない。 通常のコンストラクタを隠蔽して、自作の static メソッドからのみインスタンス作成を許すようにす…

【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする

JSON を拡張して Date 型とかも使えるようにしたい。 そういうライブラリはすでにある(ejson)けど、標準の JSON.stringify() の第二引数を上手に使えば、ライブラリに頼らなくても自前で簡単にできる。 JSON.stringify() - JavaScript | MDN JSON.stringif…

【JavaScript】オブジェクトをmap()とかするにはRamdaが便利

lodash みたいな便利関数のライブラリ Ramda はちょっと変わり種だけどけっこう便利。 特徴としては、 関数型の思想に基づいている なので関数に副作用がない ほとんどの関数が配列とオブジェクトの両方に適用できる というのがある。 JavaScript は配列の操…

ヘッドレスChromeでスクレイピングする例

ヘッドレス Chrome でスクレイピング。かなり手軽にやれることがわかった。 簡単な例をいくつか書いてみた。 準備は npm install chromy するだけ。 Google 検索して、タイトルとURLを取ってくる Amazon 検索して、本のタイトルを取ってくる Instagram ハッ…

【JavaScript】reduce(Object.assign)で失敗した

コレクションの配列をオブジェクトにしようとして、こんな感じのコードをよく書くのだけど、 const users = [{ id: 1, name: 'suzuki' }, { id: 2, name: 'sato' }] const usersById = users .map((user) => ({[user.id]: user})) .reduce((obj, userObj) =>…

【JavaScript】配列のreduce関数の可読性を少し上げるテクニック

JavaScript の話題です。配列の reduce 関数、書きやすいけど可読性が低いですよね。 たとえば以下のようにコレクションを変換して id をキーとしたオブジェクトにするという操作。慣れてくれば普通に読めますけど、なんとなく読みにくいんですよね。 const …

Node.jsでOption型を学ぶ

Option 型というものがある。 Option type - Wikipedia 概要部分を Google 翻訳に突っ込むと、 プログラミング言語(関数型プログラミング言語ほど)と型理論では、オプション型または多分型は、任意の値のカプセル化を表す多型です。 例えば、それが適用さ…

【最小構成】React + Firebase で認証つきリアルタイムDBアプリ

Firebase の練習。 リアルタイムDB 認証 を使ったミニマムな Web アプリケーションを React で実装してみる。 成果 GitHub https://github.com/FujiHaruka/react-firebase-simples アプリ https://test-app-dd4f5.firebaseapp.com/ 1. 準備 [create-react-ap…

【JavaScript】class構文で宣言したクラスのメソッド名を取得する

結論としては、prototypeに対して Object.getOwnPropertyNames()を使えばよい。 class Person { sayHello () { console.log('hello') } } let methods = Object.getOwnPropertyNames(Person.prototype) console.log(methods) // > [ 'constructor', 'sayHell…

ReactでMarkdown Editorを爆速で作る

n番煎じだけど気にしない。完成品。 React Markdown Editor Github 1. create-react-appでひな型を作る create-react-appを使う。 $ yarn global add create-react-app $ create-react-app react-markdown-editor 待つこと数十秒。yarn が速いので助かる。 2…

【JavaScript】Arrayのreduce関数を自由に使いこなす

配列の reduce 関数は、配列から一つの何か(オブジェクト、数値、文字列)を作りたい時に使います。 いつものように具体例から。 let array = [1, 2, 3, 4, 5] let sum = array.reduce(function (sum, num) { return sum + num }, 0) console.log(sum) // 1…

【JavaScript】深さ優先探索をジェネレータで書く

深さ優先探索をジェネレータファンクション function * () で書いてみよう。 深さ優先探索の素朴な例 まず、深さ優先探索が必要になる課題を考える。 【課題】 ネストされたオブジェクトを deep freeze せよ。 Object.freeze はオブジェクトをフリーズしてく…

Reactでベンチマークテストするならreact-addons-perf

React でパフォーマンスが気になった時にレンダリングの時間をどうやって計測するんだろうと思ったら、公式にあった。 Performance tools react-addons-perf というツールで計測できる。 以下、簡単なサンプルコード。 import React, { Component } from 're…

JavaScript で動的にメソッド/プロパティを生成する

JavaScript で動的にメソッドやプロパティを生成するには、 Proxy を使うという方法がある。 Proxy - JavaScript | MDN - Mozilla Developer Network 例えば、あるメソッドをあらかじめ定義せずに実行したい。とりあえずメソッドを実行したら、そのメソッド…

Node.js 8.0.0 から promisify が使えるようになった

Node.js 8.0.0 から util.promisify が使えるようになった。 これで、外部ライブラリを使わなくても promisify ができる。 const { promisify } = require('util') const { readFile } = require('fs') const readFileAsync = promisify(readFile) async fun…

【JavaScript】Arrayのmapメソッドは習うより慣れろって感じ

JavaScript で Array の map メソッドが使いこなせるようになると人生が楽しくなってくる。 map の簡単な例 map が何をするのかという説明は後回しで、次の例を見てください。 var array = [1, 2, 3] var newArray = array.map(function (value) { return 2 …

ブール値を関数で定義する(ラムダ計算)

以下、 型システム入門 −プログラミング言語と型の理論− の P.44-45 を参考にした。 ラムダ計算を使って、ブール値を関数で実装する。言語は、Node.js (バージョン 6 以上)。関数型プログラミングに興味あるなら Haskell とか使えよって感じですが、許してく…