問題です。自然数を Invert する関数をつくりなさい。

商談の時にコーディングテストがあったのですが解けなかったので復習

function invert(num) {
  let answer = 0 
  while (num > 0) {
    const rightNumber = num % 10 // num 1 の位を取得
    num = (num - rightNumber) / 10 // num を位下げする

    answer = answer * 10 // answer を位上げする
    answer += rightNumber // 取得した1の位を付け足す
  }
  return answer
}

console.log(invert(12345)) // 54321
console.log(invert(12340)) // 4321
console.log(invert(12040)) // 4021
console.log(invert(12000)) // 21

ちなみに最初は下記のように一回文字列にするやり方で回答したのですが、「文字列にしないで解いて下さい」と言われました。要件を満たしているのに何故なんだろう...

function invert(num) {
  return parseInt((num + "").split("").reverse().join(""), 10) 
}

Facebook の fiber が新しい UI components かと早とちりした件

あらすじ

以下のような記事を見つけたので facebook がいい感じの UI components を出したかと思って興味をもちました。

jp.techcrunch.com

で以下の動画を見た。どうやら期待していた話とはちがっている模様。UI component な話ではないらしい。

www.youtube.com

そもそも React.js が今までやってくれている事と fiber で変わる事

いわゆる仮想DOMと呼ばれているのは概ね下記の事なのかな?

• reconciliation: DOM の差分を出すために色々計算する
• update: setState でデータを更新し、最終的に再レンダリングをする

で、fiber は reconciliation の部分を新しいアルゴリズムに変えたらしいです。なので互換性自体は損なわれないはず。

というわけで私が最も気になっていたのは「JavaScript の UIフレームワークを完全リニューアル」がいい感じの UI components が出たの??という事だったのですがどうやらちがった。

結論

• UI components ではないらしい
• Fiber 自体がアルゴリズムを再実装した React.js のことらしい
• 細かい事はさておき、恩恵を受けるには素直に最新 version に追従していればいい

というわけで fiber 自体は非常に興味深いのですが、私がとる選択は「素直に最新バージョンが出たら追従する」で「他に興味がある事柄に注力する」です。

とはいえ

最新のバージョンに追従すると既存のコードに影響が出てしまったり、他のタスクも平行して進めなければならない場合がほとんど。

そんななかフロントエンドを一騎駆けしないといけない状況(援軍が来ない)だとバージョンアップの追従をだんだんやらなくなっていくんだよなあ...

良識のある偉い人のみなさまにはぜひフロントエンドに友軍を送り込んで頂きたい。

curl で JSON をファイルから読み込んで POST する

以下のようのにするとよいでしょう。

curl -X POST -H "Content-Type: application/json" http://localhost:10041/d/load?table=Articles -d @groonga/backup/load.json

Node.js v7.6.0 以降で async と await で逐次処理を書く

Node.js v7.6.0 から async と await が --harmony フラグ無しで使えるようになっています。

以下のような逐次処理を書くときに簡単に書けるようになりました。

async function x() {
  let total = 0 
  for (let i = 0; i < 100; i++) {
    total += await Promise.resolve(i)
  }
  return total
}

x().then(console.log) // 4950

逐次処理ではなくて並列処理をしたい場合は Promise.all を使うとよいでしょう。

function sleep(ms = 0) {
  return new Promise(r => setTimeout(r, ms))
}

// async をつけて Promise を return する
async function y() {
  for (let i = 0; i < 100; i++) {
    await sleep(1)
  }
}

// Promise を return しているので async はつけない
function z() {
  const tasks = []
  for (let i = 0; i < 100; i++) {
    tasks.push(sleep(1))
  }
  return Promise.all(tasks)
}

console.time("y")
y().then(() => console.timeEnd("y")) // 151.229ms

console.time("z")
z().then(() => console.timeEnd("z")) // 10.434ms

react-script build すると process.env.NODE_ENV === "production" になる

title で全ての説明が終わった気がしますが以下のようなコードを書いていて

const apiUrl = (process.env.NODE_ENV !== "build") ? "http://localhost:3041/api" : "/api"

package.json には以下のような記述をしていましたが process.env.NODE_ENV が build にならないので何でだろうと思いました。

"build": "NODE_ENV=build react-scripts build"

console.log を仕込んだところ結果は下記の通り

Object {NODE_ENV: "production", PUBLIC_URL: ""}

最初に出てきていたコードは下記の通り修正して無事動作しました。おしまい。

const apiUrl = (process.env.NODE_ENV === "production") ? "http://localhost:3041/api" : "/api"

hachioji.pm #65 に行ってきた

66回目のはちぴーに行ってきました。

https://atnd.org/events/86804atnd.org

開催された場所: や台ずし 八王子 横山町

割と安くて美味しいいいお店でした。開店～19時迄ドリンク半額なのでちょっとお得。

nintendo switch

みんなでガンマンになったり真剣白刃どりしたり。この会の参加者は新しいモノが好きな人が多いですね。

LT

hkoba: mosh

途切れがちなネットワークで効果があったそうです。

macopy: kuiperbelt と入院

Commiter が特定の人になってきているそうです。 あと鎖骨のお話

myfinder: GVFS

ほかにも MS でのエンジニアの取組みについてなど。

私: フロントエンドのはじめかた

一人でやらずにみんなでやりましょう。https://okamuuu.github.io/talks2

papix: IR kit

エアコンを付けたり消したり

neko_gata_s(shinpei): NekogataDrumSequencer

MVVMの文脈から見る、ViewModelとModelの関係は執筆中 https://shinpeim.github.io/NekogataDrumSequencer/build/

uzulla: PHP7.1 ベンチマーク

wrk doesn't work は英語圏の人にうけたそうです

makamaka_at_donzoko: 同人誌

電子化発表!

フロントエンドのはじめかた

一人でやると色々大変なのでチームメイトと分業して作業しましょうという話をしました。React.js の場合はコーダーさんに components を作ってもらって storybook への commit をお願いするところまでレクチャーするとかなり捗ると思います。

• HTMLコーダー向けの Tutorial: http://qiita.com/okamuuu/items/cc9b86fbac20da27bcee
• サーバーサイドエンジニア向けの Tutorial: http://qiita.com/okamuuu/items/1b94ab69d1bc3fb82d27

あとそういうハンズオンをやりたい気分です。次のステップに進みたがっているHTMLコーダーさんが集まる勉強会どこかにないかな？

Google の QUIC プロトコルは勉強したほうがいいですか？

参加する直前に知り合いのネットワークエンジニアがインフラを QUIC に対応させる云々言っていたのでそれは私(サーバーサイドエンジニア)も勉強する必要あるのか聞いてみました。

Nginx の config いじるとかそういうレイヤーは関係ないそうです。職務的に関係するとしたら HTTP2 のほうではないでしょうか。との意見を頂きました。

ガンマン

こちらからは以上です。

React.js の tutorial (2017 spring)を書きました

github.com

React.js で　SPA しようとすると redux が登場するので学習コストが割と高くなると思ったのでいっその事 redux 使わなければいいんじゃないかと思いました。README.md に手順を書いてあるのでお試しください。

一応日本語で書いたものをなんとなく Qiita に書きました。 http://qiita.com/okamuuu/items/1b94ab69d1bc3fb82d27