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

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

相対パスでパスを解決するのをやめてプロジェクトルートでパスを解決しよう in create-react-app

相対パスでインポートするのまじだるお

今いる場所とか考えるのだるくね?ファイル移動したら死ぬぞ

import Header from '../../components/Header';
import Grid from '../../components/Grid';
import TransactionForm from '../TransactionForm';
import TransactionSummary from '../TransactionSummary';
import * as AppActions from '../../actions';

だからプロジェクトルートから見に行けるようにする!!!!

import Header from 'components/Header';
import Grid from 'components/Grid';
import TransactionForm from 'containers/TransactionForm';
import TransactionSummary from 'containers/TransactionSummary';
import * as AppActions from 'actions';

べんり

moduscreate.com

↑webpackだけを使ってる人はこれ

↓create-react-appを使ってる人はこれ

medium.com

プロジェクトのルートディレクトリに.envってファイルつくってNODE_PATH = 'src/'とか書いたらおわり(src/のところは自分のソースがあるパスに適宜かえてください)

めっちゃべんり。すごい。捗る

注意点としてはnode_modules下にあるやつと名前がかぶることがあるってことだなあ。誰かなんとかしてくれ

「パルスのファルシのルシがコクーンでパージ」についてしっかり調べてみた

コクーンとパルスという都市がある。

コクーンはパルスの上に浮かんでいる。

地球と月みたいな感じ。

コクーンが上にあってパルスが下にある

コクーンとパルスには、ファルシという存在がいる。

ファルシとは人間にとって神的存在。

ファルシはマジやべぇ!!!!!

ファルシは人間をルシというものに変えることができる。

ルシにされてしまうと使命を達成しなければいけない。

もし達成しなければシ骸と呼ばれる化物にされてしまう。

達成してもクリスタルという石にされてしまうのだが(意味ないやんけ)

ルシにされるとマジでやべえ!!!

コクーンにいるファルシと、パルスにいるファルシは互いに嫌っている。

コクーンに、パルスが作ったルシが入ると追放されてしまう。

追放されるのはなんかそういう政策のせい。

追放されることをパージという。

パルスのファルシのルシがコクーンでパージ

全然やってないんだけどストーリーもネタバレしちゃう

ねたばれ

主人公の妹がパルスのファルシに勝手にルシにされてしまい、コクーンでパージされたから追いかけたけど、妹がクリスタルにされて主人公ブチギレ

なんか主人公たち一行もルシにされる。コクーン聖府に喧嘩売りに行く。

コクーン聖府を統括したり動かしたりしているのもファルシ。このファルシ倒すとコクーンは崩壊して大変なことになる

そこで主人公がとった行動とは……

でもそんなの関係ねえ。ファルシは死ね

そしてコクーンはパルスに墜落する。

墜落中、主人公の仲間がなんか使命果たしたとかでクリスタルになる。

クリスタルになると、なんと、コクーンを支えることができた。墜落せずにすんでよかった!

あと妹もなんかクリスタルから復活した。

妹と妹の婚約者が結婚しておわり

NANJASOREHA

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の部分はおまけ