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

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

SlackのリンクがChromeでうまく開かれない問題について

Chromeをアップグレードしたら直った www.david-merrick.com

どういうことやねん

ブラウザのJavaScriptコンソール(DevTools)で扱っている値をファイル出力する

まぁ要はスクレイピングに使うんだけど、スクレイピング以外にも応用できたり、ログインしなきゃいけない場合めんどくさいのでこれだと便利。

応用するとコンソール間で別PCと通信できそう(意味ないけど)

↓文字列の配列を与えるとファイルが作られてダウンロードがはじまるやつ

const createFile = (rows) => {
  let csvContent = "data:text/csv;charset=utf-8,"
  rows.forEach(row => {
    csvContent += row + "\r\n"
  })

  const encodedUri = encodeURI(csvContent)

  let link = document.createElement("a")
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my_data.txt")
  document.body.appendChild(link)

  link.click()
}

ちょっとした作業のときに役立つ

data = []
document.querySelectorAll('table#table01 td:nth-child(2) a').forEach(el => data.push(el.innerHTML))
createFile(data)

f:id:haruharu1:20180105150425p:plain

↓このサイトで実際に動かせる(2018/01/05現在)

世界の名目GDP(USドル)ランキング - 世界経済のネタ帳

f:id:haruharu1:20180105150607p:plain

f:id:haruharu1:20180105151627p:plain

text/csvになってるので、気になる人は好きなマイムタイプにかえてちょんまげ🍰

Re-Mixing verbose Actions, Action Creators, dispatching codes in Component, and switching codes in Reducer.

Re-mixing verbose Actions, Action Creators, dispatching codes in Component, and switching codes in Reducer.

When we usually change the state of the store of Redux with React, we write Action, Action Creator, connect them with Container Component, then write codes in reducer.

This way is beautiful and it turns more clear than we struggled in the callback hell before, however it's too long to write. That makes us not enjoy it :(

Even if I want to change some trivial states, I should create an action, an action creator, add some changes in the component, then write codes only to change the state.

The following is the example.

actions.js

import createTypes from 'redux-create-action-types'
export const AT = createTypes('CLICK1', 'CLICK2', 'CLICK3')

action_creators.js

import { AT } from './actions'
export const click1 = () => ({ type: AT.CLICK1 })
export const click2 = () => ({ type: AT.CLICK2 })
export const click3 = () => ({ type: AT.CLICK3 })

the part of reducer.js

switch (action.type) {
  case CLICK1: {
    return Object.assign({}, state, { click1IsClicked: !state.click1IsClicked })
  }
  case CLICK2: {
    return Object.assign({}, state, { click2IsClicked: !state.click2IsClicked })
  }
  case CLICK3: {
    return Object.assign({}, state, { click3IsClicked: !state.click3IsClicked })
  }
}

the part of App.js

import { CLICK1, CLICK2, CLICK3 } from './action_creators'

~~~
const Heavy = ({ click1, click2, click3, reducer }) => (
  <div>
    <button onClick={e => click1()}>Button 1</button>
    <button onClick={e => click2()}>Button 2</button>
    <button onClick={e => click3()}>Button 3</button>
    {Object.keys(reducer).map(s => { if(reducer[s]) return <div key={s}>{s}</div>})}
  </div>
)

~~~
const mapDispatchToProps = {
  click1, click2, click3
}

Is there a need to write codes as such verbosely? Can I make it shorter?

Yes I've done it. Isn't it more clear than that?

import { dispactreducer } from './dispactreducer'

~~~
const Heavy = ({ dispactreducer, reducer }) => (
    <div>
      <button onClick={e => { dispactreducer('reducer', { button1IsClicked: !reducer.button1IsClicked }) }}>Button 1</button>
      <button onClick={e => { dispactreducer('reducer', { button2IsClicked: !reducer.button2IsClicked }) }}>Button 2</button>
      <button onClick={e => { dispactreducer('reducer', { button3IsClicked: !reducer.button3IsClicked }) }}>Button 3</button>
      {Object.keys(reducer).map(s => { if(reducer[s]) return <div key={s}>{s}</div>})}
    </div>
)

~~~
const mapDispatchToProps = {
  dispactreducer
}

This totally equals every codes I mentioned the above, the former codes.

This dispactreducer means dispatch + action creator + reducer.

That is why I use them while writing tiny codes and when I think it's enough to write like a direct access to the store.

And it would never violate the rule of the Redux, there are still in the rules.

How it works

Demo for the former

https://www.webpackbin.com/bins/-L1Fa9XXsqDXyZvAw1xy

Demo for the latter

https://www.webpackbin.com/bins/-L1FhpdeVNre0WTgO0x3

It's the core of the tricks. Enjoy them! :)

const TRIGGER_NAME = 'KERORIN_'

// Action Creator
export const dispactreducer = (reducerName, value) => {
  const ACTION_NAME = TRIGGER_NAME + reducerName + '_' + JSON.stringify(value)
  return ({ type: ACTION_NAME, reducerName, value })
}

// Reducer Enhancer
export const hookReducer = (reducer) => {
  const hooked = (state, action) => {
    if (action.type.startsWith(TRIGGER_NAME)) {
      if (reducer.name === action.reducerName) {
        const nextState = Object.assign({}, state, action.value)
        return nextState
      }
    }

    return reducer(state, action)
  }
  return hooked
}

Of course since it's not completed yet and I didn't use enough times, if it has some deficit, (I presume it has a lot) give me a comment.

If you can do, I'll fix them as soon as possible except for if I can afford to do :)

応用情報技術者試験に合格したのでなんかいろいろ書くよ

ぼく

さっき28歳になった。

プログラミング歴は4年1ヶ月

結果

午前61%・午後61%とかいうギリギリで受かっていた。

応用情報の感想

普通に難しかった。とにかく範囲が広い。なんじゃそれってものが多かった。圧倒的に自分に知識が足りないことがわかって悲しかった。

特にOSのしくみ、ハードウェア、ネットワークとか、なんかだいたい全部やべぇって感じだった。マネジメントの知識?会計の知識?知るか!みたいな

よくこれでプログラマできてるなっていう感じの悲しみを味わった。

6割取れてるけど、マークシートなので、確信持ってこれって選べたのはたぶん2割ぐらい。あとは「たぶんこれかなぁ?」とか「とりあえずこれは無い」とかで選択肢絞った結果。

泣きたい。

勉強時間

全くしなかった。

しいて言うなら3年ぐらい前に2回分ぐらい過去問解いてた(過去にこのブログでなんか言及してる)

対策なしで受かったのは午後にRESTの問題が出て、「うっはああああ完璧にわかるううううう」ってのがあったからだと思う。

資格取った感想

合格発表日に胃腸炎でダウンしてたので嬉しさがなかった。「お腹痛いお腹痛いお腹痛い。うわ合格してた。ギリギリだな。うわお腹痛い。もう発表見たし寝よ……」みたいな。

一応応用情報も基本情報も取る意味はあると思う。バカにできないし、知らないこと多すぎるので自分が知らない点を見つけるという点でかなり意味のある試験。 問題もかなり練られている(まぁ国家資格だし……)

応用情報持ってると警視庁で巡査部長相当の捜査官になる試験を受けることができるらしい。月給低いな……

www.keishicho.metro.tokyo.jp

カーネル周りとネットワーク周りがかなり意味不明なので、ちゃんと重点的に勉強しなきゃなと思った。あとデータベース。もうずっとおろそかにしてる。

とりあえず今年はサボってた気がするから、来年はちゃんと勉強するぞい!

複数選択できるセレクトボックスの高さを調整し、選択肢を全部表示する方法

JS Bin - Collaborative JavaScript Debugging

f:id:haruharu1:20171218121356p:plain

Reference

stackoverflow.com

日本語の勉強をしている外国人をぶち殺す日本語の文章を書いた

文章

ぼくは幸せトイレ、綺麗!
キタナイトをやっているんだ!
ぼくの大切な仕事はなんといってもやっぱりいややっぱりこれはいあいや、あ、でもやっぱ話すね!
きみはいつもブリブリしゅーんってしてるかな?
してる?まぁじか!
したっけぼく幸せわや!
それで、じつはぼくが綺麗といわれるわけは騎士のかっこよさにあるんだよね!木になる?
でも教えてあげないよ、ジャン!
とりまみんな今日もトイレのぼくをつかってね!
んならね!再見!

正しく認識できているかのチェックリスト

  • ぼくはトイレである。
  • ぼくの名前は「綺麗」である。
  • キタナイトは職業。「汚い騎士」という造語。
  • 「いあいや」の「あ」は誤字。「やっぱりこれはいいや」のこと
  • 「しゅーん」は下に落ちる様子。「しゅ」という音が風切り音を想起させるため。
  • 「まぁじか!」は「マジか!」を柔らかく表現したもの
  • 「したっけ・わや」は、いずれも方言。ただ方言であることを知らなくても、したっけが接続詞、わやが語尾の表現であることを見抜ける必要がある
  • 「木になる」は「気になる」の誤変換
  • 「ジャン」は音
  • 「とりま」は「とりあえずまぁ」の略。スラング
  • 「再見(サイチェン)」は中国語。使用はしないが日本人の理解語彙の範疇。

書いた理由

  • きちんと文法が体にまで根付いていないと簡単な文でも読めない場合があることを自分への戒めとして認識しておきたかったこと
  • 「ここが間違っている。でも意味はたぶんこう」と断言できなければいけないこと
  • 語彙が大きくないと一見簡単な言葉に隠されている意味が汲み取れないこと

その他

なお実際に殺すかどうかは不明。ひょっとしたら案外ふつうに読める説もある。

相対パスでパスを解決するのをやめてプロジェクトルートでパスを解決しよう 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下にあるやつと名前がかぶることがあるってことだなあ。誰かなんとかしてくれ