読者です 読者をやめる 読者になる 読者になる

あいつの日誌β

あいつの日誌です。

DB のインデックス設計できますか?

あらすじ

DB インデックスを知らないエンジニアがいるらしいので啓蒙したいという話です。

DB のインデックス設計は HDD 使っている頃には最重要なスキルだった気がしますが、今の時代、エンジニアに求められる事が増えすぎているのでインデックスの事に関して知らない人(DBインデックスが起因する問題に出会ってない人)がいても不思議ではない気がします。

というわけで何故 DB インデックスを知らない人がいるのか?という事に関しては我々のようなおじさんエンジニアが伝えないといけいない事をちゃんと伝えていないからなんじゃないかと思いペンをとりました。

といいつつ

詳しい事は過去にそういう記事を書いたのでこちらを見てください…

http://okamuuu.hatenablog.com/entry/2013/02/23/005046

そういえば

昔とある企業でいつも同じクエリーが遅いとインフラエンジニアから苦情が来るので解消してくださいと言われたので調べたら掲示板の全件取得にインデックスが効いてなかった事があります。

どうやら最初は index が効いていたようですが、後から delete_flg を追加するタスクが発生し、そのフラグのせいでフルーテーブルスキャンに変わってしまったようです。日時の経過にともないデータ量が増えてある日インフラチームから警告が発生した。という事だと思います。

上述のエントリーはそのタスクを解消したときの方法を紹介しています。

割とあるあるな話ではあると思いますが、こういう昔ながら話をもう一度してみると誰かの役に立つかもしれませんね。近年のWEB開発者は覚える事が多すぎて以外と知らない事が多いでしょうし。

そういえば 2017/5/27(土) にアットホームなカンファレンスが開催されるようです。昔あなたが困った事を発表したりすると誰かの役に立つかもしれません。

http://y8-2017-spring.hachiojipm.org/

問題です。自然数を 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回目のはちぴーに行ってきました。

atnd.org

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

f:id:okamuuu:20170325190021j:plain

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

nintendo switch

f:id:okamuuu:20170325180959j:plain

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

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コーダーさんが集まる勉強会どこかにないかな?

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

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

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

ガンマン

こちらからは以上です。