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

あいつの日誌β

あいつの日誌です。

Error: Error watching file for changes: EMFILE

jest が watchman を必要としているらしいので install するとエラーメッセージが出なくなった % brew install watchman

ES6 での range 関数を書いてみた

あらすじ Ruby でいう to_a のアレを JavaScript で書いてみた function range(from, to) { return [...Array(to - from + 1).keys()].map(x => x + from) } console.log(range(0, 10)) console.log(range(3, 10)) 出力結果 [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,…

n コマンドで node の version を 7.x.x にしたら npm error: cannot find module 'internal/fs' と言われる

一度前の version に戻る sudo n v6.x.x npm update をする npm update -g npm もう一度 v7 に戻って npm update する sudo n v7.x.x sudo npm update -g たぶん直る

This module requires the passlib Python library

ansible やっていてこんなこと聞かれたらこんなタスクを追加しましょう - name: install python passlib apt: "pkg=python-passlib state=installed"

Failed to set permissions on the temporary files Ansible needs to create when becoming an unprivileged user

Failed to set permissions on the temporary files Ansible needs to create when becoming an unprivileged user とか言われた場合、ドキュメントには pipelining すればいいと書かかれているようです。 Become (Privilege Escalation) — Ansible Document…

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

あらすじ DB インデックスを知らないエンジニアがいるらしいので啓蒙したいという話です。 DB のインデックス設計は HDD 使っている頃には最重要なスキルだった気がしますが、今の時代、エンジニアに求められる事が増えすぎているのでインデックスの事に関し…

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

商談の時にコーディングテストがあったのですが解けなかったので復習 function invert(num) { let answer = 0 while (num > 0) { const rightNumber = num % 10 // num 1 の位を取得 num = (num - rightNumber) / 10 // num を位下げする answer = answer * …

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

あらすじ 以下のような記事を見つけたので facebook がいい感じの UI components を出したかと思って興味をもちました。 jp.techcrunch.com で以下の動画を見た。どうやら期待していた話とはちがっている模様。UI component な話ではないらしい。 www.youtub…

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…

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…

hachioji.pm #65 に行ってきた

66回目のはちぴーに行ってきました。 atnd.org 開催された場所: や台ずし 八王子 横山町 割と安くて美味しいいいお店でした。開店~19時迄ドリンク半額なのでちょっとお得。 nintendo switch みんなでガンマンになったり真剣白刃どりしたり。この会の参加者…

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

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

react-router@v4 を調査した

あらすじ react-router@v4 にしたら色々な変更が入っていて全く動かなくなったので react-router の機能を確認しました。 追記: 2017-03-23 16:30 withRouter について追記しました。 言及すること <Route> の挙動が v3 と異なる <Switch> と <Route exact ...> の挙動を理解して対処しましょ</route></switch></route>…

クーリエ・ジャポン・ハッカソンに行ってきた

あらすじ 3/18(土)と3/19(日)に人生初のハッカソンに行ってきました。 courrierjapon024.peatix.com 初日 初日は以下のスケジュールで進行しました。 (午前)アイデアソン (午前)個人のプレゼン (午後)ハッカソン (午後)中間発表 初日午前: アイデアソン 最初…

Ansible での provisioning を継続的にインテグレーションしたいので circleci で Docker を使う

あらすじ Provisioning を継続インテグレーションしたくなったのですが、そんな時は CircleCI で Docker を使えばいいんじゃないかと思いました。 コンテナ内で ServerSpec を実行する方法などがあると思いますが、ここではコンテナ内に SSHD を使って外部か…

PORT 22 以外を使用していて WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! と怒られた時に .ssh/known_hosts のホスト情報を消したい場合

例えば port を 40122 にしていた場合はこんな感じ ssh-keygen -R [localhost]:40122 zsh だとこんな感じ ssh-keygen -R "[localhost]:40122"

okamuuu.com を Gatsby と Netlify に移行しました

Gatsby x Netlify netlify.com github.com あらすじ 先日まで okamuuu.com を Google App Engine 上で Go と React.js で運用していましたが github.com の gh-pages に移動しました。Google App Engine を使う案件にアサインされていたので練習のために運用…

完全栄養食パスタ BASE PASTA を調理してみた

2017-03-04 追記あり 懸念点として茹でた栄養素について記述したところコメントを頂いたので追記しました。 あらすじ 実は以前から完全栄養食に関心があったので早速 Amazon.jp で注文してみましたので食感をレポートしました。 BASE PASTAパスタとは 厚生労…

ES2015 でとまどいがちな記法 Object initializer と Spread Operator

あらすじ ES6 の記法を全て覚えてから ES6 を書くよりも、書きながら勉強したほうが効率が良かったりします。 なんですが写経している時に分からない記法が出てきた場合検索しづらくて困ると思います。 というわけで私がどうやって Google に質問すればいい…

npm publish を念頭において React Components 用のプロジェクトを作成する

あらすじ 先日 react-paginators という React components な module を publish しました。 github.com その時に色々調べた事があるので備忘録として残します。 作成手順 create-react-app と storybook を使ってプロジェクトの雛形を作成します。create-re…

react-paginators という npm module を publish しました

github.com どんなの? こんなの 作った経緯 最初は react-paginate を使う予定でした https://github.com/AdeleD/react-paginate なんですが最初のページを指定する機能がどうやら動作しない模様 https://github.com/AdeleD/react-paginate/issues/124 init…

getstorybook で Unsupported Project type. (code: UNDETECTED)

以下のコマンドを実行すると mkdir example-project && cd $_ npm init -y getstorybook 以下のようなエラーが表示される getstorybook - the simplest way to add a storybook to your project. • Detecting project type. ✓ Unsupported Project type. (co…

React Storybook で Material-UI を試す

create-react-app material-ui-storybook && cd $_ getstorybook npm install --save react-tap-event-plugin material-ui npm install --save-dev storybook-addon-material-ui edit `src/stories/index.js import React from 'react'; -import { storiesOf…

Google App Engine の let's encrypt を更新する手順の備忘録

3ヶ月前に okamuuu.com を作った時についでに https に対応させたんですが、忘れた頃に更新しないといけないので備忘録 手元の MacOSX 上で最初にデプロイできるか確認 とりあえず自分のアプリがデプロイできるかどうかを確認します。 この3ヶ月でマシンを新…

webpack.config.js で複数のエントリーポイントを指定する

mkdir practice-webpack && cd $_ mkdir -p src/pages www/pages touch webpack.config.js npm init -y npm install --save-dev webpack create webpack.config.js const path = require('path') const webpack = require('webpack') module.exports = { dev…

Webpack 2: Module not found: Error: Cannot resolve 'file' or 'directory' node_modules/@kadira/storybook/dist/server/addons.js

あらすじ ある日 webpack の version を上げたら extensions に empty な ‘’ を指定するのだめと怒られるのでその指定を削除したら storybook がなんかエラーを吐き出すようになった時のメモです。 状況 React + Redux で既存の Single Page Application で…

redux 使わずに react と react-router で SPA したい

あらすじ redux-form といった ecosystem が要らない場合はこういうやり方もあるんではないかと思います。 やり方 create-react-app practice-react-router-spa && cd $_ touch src/Posts.js src/api.js npm install --save react-router edit src/App.js im…

突然ですがクイズです。 ES6 の module exports の機能として正しいものを選びなさい。

HTML コーダーさんに React components を storybook に追加してもらう作業をしているのですが module exports がわかりづらいので問題をつくってみました。 問題1 関数毎に export されている場合 export const One = () => ( <div>one</div> ) export const Two = () …

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

以下のようなエラーが出た場合 TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor 関数名が変わりました。 webpack.optimize.OccurrenceOrderPlugin

Hachioji.pm #63 に行ってきました

https://atnd.org/events/85292 hachioji.pm #63 に参加してきました。#0から始まっているので64回目です。 Hachioji.pm #37 以来なのでちょうど3年ぶりらしい。そんなに時間経ってるんだ… 八王子の居酒屋で未来を体験する LT一覧 酔っ払いながらメモしてい…

React tutorial (9)

Datetime Picker も使用頻度が高い、というよりもほとんどマストなので記事をひとつ追加します。 Bootstrap 風のデザインの react-datetime を最後に紹介します。 github.com この他にも airbnb/react-dates など沢山モジュールがありますので、各自でいろい…

React tutorial (8)

react-select 前回は redux-form について触れました。 今回は react-select について触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる react router に触れる npm で公開されている components を…

React tutorial (7)

今回は redux-form について触れます。 おそらく React, Redux で管理画面作る場合はこの module を使うことになると思います。 github.com ちなみに react-redux-form という似た名前のモジュールがありますが優劣に関してはここでは言及しません。 やりた…

React tutorial (6)

前回は react での routing について触れました。 今回は HTTP 通信が成功した時などに表示する Notification (Flash Message) に触れます。 Notification も色々あるのですが豊富な機能を備えた reapop を紹介します。 github.com 目次 開発環境を準備 Reac…

React tutorial (5)

前回は React で Single Page Application をするためによく使われる redux-saga に触れました。 今回もよく使われる機能である react-router に触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる r…

React tutorial (4)

あらすじ 前回は redux による state の管理について触れました。 今回は http 通信などによる非同期処理の方法について触れます。 なお外部との通信に https://jsonplaceholder.typicode.com を利用しています。 目次 開発環境を準備 React の基本的な Life…

React tutorial (3)

あらすじ 前回は React の基本的な作法に触れました。 今回は Redux を使ってみます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる <= 今日やること redux-saga に触れる react router に触れる npm で公開されている compone…

React tutorial(2)

あらすじ 前回は開発環境の構築方法を紹介しました。 今回はReact で使われる簡単な記述方法に触れます。 たぶん直感で理解できると思いますので細かい説明は省略します。 目次 開発環境を準備 React の基本的な Life Cycle に触れる <= 今日やること redux …

React Tutorial (1)

追記(2017-02-08) webpack.config.js がエラーが出るので訂正しました。js 界隈は変化が早いのでチュートリアルを試される方はお早めにお願いします。 あと React.js の tutorial というよりも redux の tutorial ではないかという意見を頂戴しましたがよく…

Javascript で複数ある正規表現のいずれかがマッチしているものを取得する

以下のように Javascript の switch 文を使おうかなと思いました。 http://qiita.com/piyohiko/items/a84648599eba7697675f なんですが、判定したいだけじゃなく、マッチした要素を抽出したいのでなんとなく OR 演算子を使いました。 const githubRegex = ne…

MacOSX で複数ファイル一括置換

あらすじ familyName を間違えて famillyName としてしまった時のお話です sed コマンドオプションでちょっと迷ったので備忘録 とりあえず対象となるファイルを検索 この時対象となっているファイルは js ファイルだったので以下のようにして対象となるファ…

App Enigine に deploy しよとすると composite literal uses unkeyed fields と言われた件

Go

あらすじ ある日手元で開発したソースコードを App Engine にデプロイしようとするとエラーが出たときのお話です。 問題と解決策 問題となったのは以下のコード func NewNullString(s string) NullString { return NullString{sql.NullString{s, s != ""}} }…

okamuuu.com をはじめました。

現在 Google App Engine で Golang + React での開発を行っているのですが、学習曲線を高めるために同じ構成で Blog を作ってみました。 いろいろとはまるポイントがあって学ぶポイントが結構あったので折を見て共有したいと思います。とりあえずはてなブロ…

MySQL で sql.NullString なあいつを JSON に Marshalling する

Go

追記: c.Bind とかする時に type error が起きたりするので Unmarshal も追加 あらすじ MySQL で nullable なカラムレコードを入れるために struct の定義をこうしたらレコードには null が入らずに空文字が入ってしまいます。 Something.Code には Unique …

はじめての elm-lang

あらすじ grunt, gulp, webpack ツールは違えど Javascript を bundle する事前準備で疲弊していることに変わりがない今日この頃ですが、elm-lang は何も考えなくても bundle してくれるので意外とアリかもしれないぞと思ったので練習します。 いい感じの動…

Single Page Application の Mock Server を作る 2016

対象読者 以下のワードに興味が無い方はたぶん読まなくても良い記事です。 json-server と jwt browsersync と http-proxy-middleware npm-run-all --parallel 準備 % mkdir practice-mock-api && cd $_ % mkdir -p mock src/components www % npm init -y j…

Using Hot Module Replacement with React

Browsersync と webpack でやってみます。 Goal 少しわかりづらいのですが Live Reload を React Component 単位で行います。 準備 mkdir practice-react-hmr && cd $_ mkdir -p src/components www npm init -y npm install --save-dev browser-sync webpac…

webpack で複数の entry ファイルを出力する

あらすじ ユーザー画面と管理画面を SPA で作りたいんだけど component とか再利用したい時のお話です mkdir practice-webpack-output && cd $_ mkdir -p src/{app,admin} www/{app,admin} npm init -y npm install --save-dev webpack babel-core babel-loa…

golang: gorm で 日付を定義したい

Go

User.birthday や Diary.ymd みたいな date 型を指定したい場合は struct を以下のようにすれば良いらしい。 Update するときは Query に hms つけた状態でも ymd だけ更新されます。 Find するときは ymd 形式に変えてあげればいいと思います。 package mai…