へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

Reactで毎回同じclassName書くのありえないしComponent作ってたら似たComponentばっかできたのでまとめるモジュール書いた

デモ

↓ここで動く

WebpackBin

webpack.bin めっちゃ便利。無いと生きていけない

説明

import React from 'react'
import classnames from 'classnames'

const createClassnamesComponent = (CustomTagName, classnamesList) => {
  const accumulator = {}
  classnamesList.reduce(
    (accum, className) => Object.assign(accum, { [className]: true }),
    accumulator
  )

  const ColumnElement = (props) => (
    <CustomTagName className={classnames(
      Object.assign(accumulator, props.className))} {...props} />
  )

  return ColumnElement
}

export default createClassnamesComponent

こんなかんじで書いてみた。クラス名を配列で渡すと、<CustomTagName className={"クラス名"} />ができて、さらにpropsで拡張できるというだけのモジュール

使い方

import React from 'react'
import ReactDOM from 'react-dom'
import createClassnamesComponent from './createClassnamesComponent'

const Button = createClassnamesComponent('button', ['this-is-class', 'another-class'])
const BoldText = createClassnamesComponent('span', ['bold'])

ReactDOM.render(
    <Button onClick={() => alert("Hello!!")}>
      <BoldText>Hello</BoldText>
      <BoldText>Boy</BoldText>
    </Button>,
  document.getElementById("root")
)

こんな感じ。クラス名がうまく隠蔽されたので明らかにノイズが減って見やすい。便利。

この例だと明らかにボタンの中にBoldTextが入っていることがわかる。

↓隠蔽する前

<button className="this-is-class another-class" onClick={() => alert("Hello!!")}>
  <span className="bold">Hello</span>
  <span className="bold">Boy</span>
</button>

「buttonがあって、classNameがあるな。spanがあって、これはboldか。だからこれはボタンの中にboldクラスがついたspanタグがあるのか」ってなる

そんなの考えたくない。どうしたんだclassName、なんのためのReactだーーーーーー!!!ってなる

感想

こういうメタっぽいことが手軽にできるJSはやっぱりナンバーワン!!!!!!!

探せばすでにnpmにあるような気もするけどこまけえこたあいいんだよ

JavaScriptのfetchでAPI叩いてjson取得時に、camelCaseとsnake_caseの変換マジだりぃわラップした話, yarn!

概要

nodeで書くとこんなかんじ。

whatwg-fetchなどを絡ませたい場合やES6で実装したい場合はこれを参考におのおの作ってください。

暇だったらnpmでインストールできるようにするかもしれないです(たぶんしない)

必要なもの

  • node-fetch
  • humps

Input

const emitMessage = (message, obj) => {
  console.log(`------------${message}----------------`)
  console.log(obj)
}

const fetch = require('node-fetch')
const humps = require('humps')

const Response = fetch.Response
Response.prototype.camelJson = function() {
  const json = this.json()
  return json.then(j => humps.camelizeKeys(j))
}

const humpsFetch = (uri, options) => {
  const isCheck = !!(options && options.headers)
  if (isCheck && options.body && options.headers['content-type'] === 'application/json') {
    options.body = humps.decamelizeKeys(options.body)
  }
  emitMessage('request', options.body)
  return fetch(uri, options)
}

const body = {
  'fooBar': 1,
  'mogeBar': {
    'sA': 1,
    'sB': 2
  }
}

const headers = {
  'content-type': 'application/json'
}


humpsFetch('https://raw.githubusercontent.com/harukaeru/KaeruTimer/master/package.json', { headers, body })
.then(response => response.camelJson())
.then(json => emitMessage('response.camelJson()', json))
.catch(e => console.error(e))

Output

------------request----------------
{ foo_bar: 1, moge_bar: { s_a: 1, s_b: 2 } }
------------response.camelJson()----------------
{ name: 'kaerutimer',
  version: '0.1.0',
  private: true,
  dependencies:
   { lodash: '^4.17.4',
     react: '^16.1.0',
     reactDom: '^16.1.0',
     reactRedux: '^5.0.6',
     reactRouter: '^4.2.0',
     reactRouterDom: '^4.2.2',
     reactScripts: '1.0.17',
     redux: '^3.7.2',
     reduxThunk: '^2.2.0',
     styledComponents: '^2.2.3',
     'timer.js': '^1.0.4' },
  scripts:
   { start: 'react-scripts start',
     build: 'react-scripts build',
     test: 'react-scripts test --env=jsdom',
     eject: 'react-scripts eject' } }

感想

  • なんだかんだprototype便利っていう
  • パフォーマンス落ちる気がする。あまりにもひどかったら別の手段考える

Asについて混乱してたので、いろいろ調べた(備忘録)

接続詞🐹

as [時] 〜するとき, 〜しながら, 〜したとたんに(whenやwhileよりも同時)

Mary often hums a tune as she works in the kitchen.

as [原因・理由] 〜だから

As I have a car, we won't have to walk.

seeing as [原因・理由] 〜だから

I'll leave soon, seeing as you're busy.

as long as [条件] 〜である限り, 〜でありさえすれば(=only if, provided that)

Any book will do as long as it is interesting.

as(so) far as, in so far as [制限・範囲] 〜の限りでは

As far as I know, Bunin is the most brilliant pianist in the world.

as long as [時間的限度] 〜する限りは

I'll never forget her as long as I live.

You can stay here as long as you want to.

as [譲歩] 〜だけれども (Darkの部分は形容詞でも副詞でも動詞でもいい)

Dark as it was, we were still able to see the sign.

as ~ as ... [比較] ...のように〜

He is as tall as his father.

The days are almost as long as the nights now.

倍数詞/分数 as ~ as ... ...はAのX倍の~である

The U.S. is about twenty-five times as big as Japan in area.

※ size, length, number, size, weightのときは別の表現もある👻

This room is ten times the size of mine.

倍数詞/分数 as ... a A as B [論文調]

Nonverbal information is 13 times as potent a data bearer as merely verbal information.

not as ~ as ... [比較] ...ほど〜ではない

The building isn't as high as the tower.

as [比例] 〜につれて, 〜に従って -> according as

As he grew older, he feared death more.

She always does as her husband tells her.

as [様態] 〜のように

Do as you think fit.

as if, as though [様態] まるで〜のように (米ではlikeをas ifのように使う)

The man looked as if he hadn't slept for a week.

He walked around as though he was in a daze.

She looks as if she is getting better. (単なる推量のときは直説法になる)

as soon as ~ [時] 〜するとすぐに

The motor began to purr as soon as I switched it on.

I want to go ASAP.

疑似関係詞🐹

such A as B [疑似関係代名詞的] BするようなA

I gave Sarah such money as I had with me.

as A as B [疑似関係代名詞] Bと同じくA

He is as wise a man as ever lived.

the same A as B [疑似関係代名詞] Bと同じA

He goes to the same school as I do.

as [疑似関係代名詞] (全体を先行詞とすることもある👻)

She is very careful, as her work shows. [She is very carefulを修飾]

As everyone knows, it is harder to write interestingly about a good person than about a bad one.

as it seems, as it appears, as it happens, as I see it, as I interpret it [付言] コメント的なas (itが省略されるときもある👻)

As it happened, I was at home when he called.

This is English as it is spoken in the South.

As it appears from what you say, you are quite mistaken.

🐹

as + 補語

The plan struck me as excellent.

I regarded the plan as excellent.

as [冠詞の省略] 〜資格で, 〜として のときは冠詞が省略される

Who will act as principal?

As publisher, I have the final say as to how many copies are printed.

群前置詞🐹

as for ~ 〜はどうかといえば

As for me, I find no game more interesting than soccer.

as to ~ 〜について

He said nothing as to the time.

よく使う使い方🐹

as such, as one

He's a good man and is known as such to everyone.

such as to

His illness was not such to cause anxiety.

such as it is たいしたことはできないが, …というほどでもないが

He won't refuse to give you his help, such as it is.

as many, as much それと同数の, それと同量の

He made ten mistakes in as many lines.

as so many(much) それと同数(同量)のように, まるで〜のように

We work hard as so many bees. 

as many ~ as ... ...だけの〜

I would like to buy as many books as I like.

A as well as B BだけでなくAも

The princess, as well as the princes, has learned to ride.

as if, as if to 〜らしい, 〜らしく, 〜っぽく

It looks as if it's going to snow.

She made as if to throw a shoe at me.

The dying man nodded his head as if to say yes.

It isn't as if ~ 〜というわけじゃあるまいし

It isn't as if she didn't know anything.

As if [無関心]

She's gone. As if I cared!

As if! [驚き] (= I very much doubt it.)

I'll marry Beth. As if!

as ~ as any, as ever [最上級]

He is as clever as any person alive.

He is as clever as ever lived.

as is often the case with, as is usual with 〜にはよくあることだが

As is often the case with young people, he was overconfident.

as ~ as one can

Speak as slowly as you can.

as ~ as ... can be この上なく〜

The weather is as fine as can be.

may(might) as well ~ 〜してもいいんじゃないか(他にもっとマシなものがないから)

We may as well have something to eat.

might as well ~ (as ...) (...するのは)〜するようなものだ, (...するくらないなら)〜したほうがいい

I might as well drown as starve.

not so much ~ as ... (〜よりもむしろ...)

He is not so much a scholar as a journalist.

挿入句

as a rule 概して

As a rule, business is slack in summer.

as it is, as it were いわば

What is shown is, as it were, a reflection of what society is like.

ぼくのコメント

AsがねぇーAsに使われてもっおんなじやおんなじやおもてっ!!
Asエッエッアッハッハッハーハァ!!!!!!!!
この日本ンンあっひゃひゃひゃああああ↑ ああああああああぁぁぁあ スー あああああああああっああああああああず!
この日本っ!あっひょひょこの世の中をあず変えたいっ!!!!!!!

とりあえずAsは「おなじ」「ぽい」「そんな感じ」がコアな意味なのかな?そこから派生してる感じ。

短文だと雰囲気でわかるの多いけど、長文だとasがどういう意味になるのか行方不明になるので、体に染み込ませたい。

ミスがあったり、「これ無いよ!」ってやつあったら教えてください。

和訳がないのは仕様です。

As I see it, as I searched as to "as" as such as if "as" lover, so it might as well improve me as fluently as can be as soon as possible, such as it is.

nginxでリダイレクトの設定を変えたのにChromeでずっと同じリダイレクトされる問題

nginxが悪いんではなくて、Chromeがリダイレクト先をキャッシュしてるっぽい。その証拠にSafariとかだと普通に動く。

Developer Toolsで Disable Cache をしててもうまくいかなくて、 Preserve log にチェックを入れると治る

stackoverflow.com

かなりハマった。

Promiseで、thenよりも先にcatchを書いてみる

const handleError = (e) => {
  console.error('Error', e)
}

const wrap = (func) => (...args) => {
  let promise = new Promise(resolve => resolve(func(...args)))
  let onRejected = handleError

  const promiseWrapper = {
    all: (onResolveds) => {
      onResolveds.forEach((onResolved) => {
        promise = promise.then(onResolved)
      })
      promise.catch(onRejected)
    },
    // catch: (handler) => {
    //   onRejected = handler
    //   return promiseWrapper
    // }
  }

  return promiseWrapper
}


const plus = (a, b, c) => {
  return a + b + c
}

const promisedPlus = wrap(plus)


promisedPlus(2, 1, 3)
.all([
  x => x * 4,
  () => { throw 'err' }, // handleErrorでハンドルできる
  x => console.log('x')
])

本当はthen.then.thenってやりたかったけど、thenってやると作れないので諦めた。おそらくPromiseの実装自体を変えないといけないっぽい

catchの部分はおまけ

引っ越したのでNURO光を契約して開通しました

[11/29 追記しました]

情報

  • 都内から横浜市に引っ越しました。ゴミの分別めんどくさすぎわろた。
  • 集合住宅ですが部屋が少ないのでホームタイプです。(重要)

タイムテーブル

日付 できごと
2017/10/05 申込み
2017/10/19 引っ越し
2017/10/21 1回目の工事が行われる(宅内工事)
2017/10/26 2回目の工事の情報について催促する
2017/10/28 2回目の工事の情報について再び催促する(返事がないので)
2017/10/28 ネットがないことに耐えられず、SIMロック解除のためにdocomo来店予約する
2017/10/29 So-netから「フォームから再度問い合わせしてくれ」と言われたのでフォームから問い合わせ
2017/10/30 2回目の工事の予定が決まったら連絡してもらえることが確定
2017/11/01 docomoSIMロック解除しに行く。3240円取られる
2017/11/01 IIJ 申し込み
2017/11/03 不信感のあまり別のSo-netサポート窓口に連絡する。11/13までに連絡をもらえるよう約束をとりつける
2017/11/05 IIJSIMカードが届く。テザリングでネット生活を凌ぐことを決意。「いつ工事になってもいいや」と心の平穏を取り戻す
2017/11/08 最速で11/14に工事ができるという連絡が来る(13:00〜17:00に工事することに)
2017/11/09 docomoのパケット制限に到達したのでIIJに乗り換える。docomo解約。一時的にネットが使えない状態になり精神が不安定になる
2017/11/14 18:00頃に工事はじまる(この間にもいろいろあった)ネット開通
2017/11/25 ルータ変更を申し出る
2017/11/29 ルータ到着。ルータ交換

総括

・回線速度は4Gの50倍以上は速いからまあ妥当といった感じ。ただ120MbpsなのでNURO光じゃなくてもよかったのでは……と若干もにょる。時間帯もあるんだろうけど。

  • 120Mbps だったのはルータの設定で 802.11 a/n だったためだと思われる。 802.11 n に変えたら 200Mbps になった。
  • ルータを交換したあと(最初は古いのをくれて、交換したい場合はあとで申し込んでねという方式らしい)は 450Mbps になった。有線は使ってない。
  • So-netやNTTの関連会社の対応がひどすぎる。横の情報連携ができてないし、敬語もちゃんと使えてない。工事の人たちもかなり自由で、礼儀とかそういうものは一切ない。催促しなかったらもっと遅くなってた気がする。
  • 契約して概ねよかったけど、その前に代替の回線ないと死ぬ

つらかったこと

  • 工事まで長過ぎる。フレッツ光とかと違ってNTTの工事を待つのでくっそ遅い。
  • 家でPCが使えないというしんどさ。Web系のエンジニアなのに家でネットできないとか笑えない
  • ドコモだと1GB追加で1000円するので解約せざるを得なかった(おかげで解約の違約金とか端末代で8万円飛ぶことが決定。引っ越しで100万飛んだのに更にドーン)

  • MVNOIIJへの乗り換えの際に一時的に完全にネットが使えなくてワラエナカッタ。制限のせいで通信速度が1Kbpsみたいな感じになっててなにもできなかった。

どうやって解決するか → 検索できない
近くのWiFiがあるカフェは → 検索できない
仕方ないからご飯作るか → レシピ検索できない
オフラインでプログラミングするか → もちろんググれない
とりあえず移動しよう → Apple Payにチャージできない
Hey Siri! 今の天気は? → オフライン
勉強するか → 辞書引けない
暇潰すか → ネットできない

もし過去の自分にアドバイスするとしたら

  • 引っ越しのだいぶ前にさっさとドコモを解約して乗り換えておくべき

これからNURO光を契約しようという方に

  • 工事が終わるまでに何かしらの代替回線を持っておかないとつらい。ほぼ1ヶ月待つとは思わなかった。ほんとにつらい。
  • 運が悪い人は半年とか待ったりするらしいので、契約しようと思ってる人は「へーそうなんだ」って捉えずちゃんと用意しとかないとストレスがやばい。たぶんぼくは早い方
  • とりあえず普通の回線よりは速いと思う
  • なんか工事が特殊なので賃貸だとビス打たれたりしてめんどくさいことになるかもしれないので注意
  • 工事費高い

速度が速くなったことによる恩恵とかいろいろ

  • YouTubeが固まらない。常に見れる。え?動画が止まるって何????みたいな感じ。たぶんこれが最大の恩恵。
  • サイズの大きいファイルを落とすときすぐ終わる。前住んでたときは「あ〜10分かかるのか…」だったのが数十秒ぐらいでおわる。下手すると数秒。
  • どのサイトも体感可能なぐらいレスポンスが速くなる。

速度が速くなったとしても変わらなかったこと

  • 重いサイトは重い。完全にサーバやレンダリング部分のJavaScriptの問題。ただボトルネックの切り離しが楽。「このサイトはこのサイトのせいで重い」というのがすぐにわかる。

通信してないとき、帯域もったいないから何かに使えないかなー

シェルスクリプトでstartとかstopとかコマンドを作りたいときのテンプレート

foo.sh

#!/bin/sh
case "$1" in
"start")
  echo "Start!!"
  ;;
"stop")
  echo "End!!!"
  ;;
*)
  echo "Usage: $0 start|stop"
  ;;
esac
exit 0

これを叩き台にして作ると便利。知ってる人には普通のことなんだろうけど……

使い方

f:id:haruharu1:20171030115641p:plain