あいつの日誌β

あいつの日誌です。

第69回青梅市納涼花火大会に行って来た

あらすじ とある友人が「夏の思い出作りたいわー」と言い出したのでみんなで花火を見に行くことになりました。そして引率するのが私になったのですが、都内の花火大会は人が多いから引率するの大変そうなのでどうしたものかと思ったら地方で花火を見るという…

MacOSX: ターミナルで複数ファイルの文字列を一括置換する

もう何度も同じ事を繰り返すのでMEMO MacOSX に入っている sed コマンドは Linux のとは少し違うので brew install brew install gnu-sed --default-names でこんな感じで実行 find ./src -name '*.html' | xargs sed -i 's/xxx/yyy/g'

Gatsby v1.3.0 を試す(3)

前回のおさらい Gatsby は Node.js 製の Static Site Generator です。JSON ファイルのようなデータ構造からも静的ファイルを生成する事ができます。 今回は WebAPI から fetch する方法を紹介します。 前々回、前回と違い外部API から resouce を取得して G…

Gatsby v1.3.0 を試す(2)

前回のおさらい React.js の component を使って Blog などを生成できる Gatsby という Node.js 製の Statice site generator を紹介しました。 Markdown だけでなく JSON ファイルのようなデータ構造からも静的ファイルを生成する事ができるので今回はその…

Gatsby v1.3.0 を試す(1)

あらすじ React.js と Vue.js のどちらが優れているかはどちらでも良いと思っています。なんですが React.js のエコシステム のほうが一歩先を歩んでいると思っています*1。私が React.js のエコシステムを推す理由に一つになっているツールがめでたくメジャ…

夏らしさを求めておじさん2人が南伊豆へ旅した記録 2017

あらすじ 夏らしい事をしたいが、7月8月の週末は今回(7月22日の時点)を逃すと今年は最大でも6回しかない。チャンスは少ない。ならば俺たちは今すぐ行かねばならない。 どうしてそうなった? あんまり覚えてないんですが確かこんな感じの話をしたんだと思いま…

Failed: Cannot create property '__creationTrace__' on string '__zone_symbol__optimizedZoneEventTask'

どうした? Angular なアプリを開発していたのですが CirlceCI 上でいきなりテストが通らなくなった あと TypeError: Cannot create property '__creationTrace__' on string '__zone_symbol__optimizedZoneEventTask' とか言われます。 どうする? 調査した…

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("">

もう何度も同じメッセージを目撃し、時間を無駄にしているのでメモ src/app/app.module.ts に FormsModule を追加する import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { FormsModule } fro…

qs v6.5.0 以降からちょっと便利になったのでメモ

addQueryPrefix と ignoreQueryPrefix が使えるようになりました。 assert.equal(qs.stringify({ a: 'b', c: 'd' }, { addQueryPrefix: true }), '?a=b&c=d'); var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true }); assert.deepEqual(prefixe…

chart.js v2.6.0 の tooltip を React.js でカスタマイズして使う

追記 そういえば tootlitp のデザインは下記URL から拝借しています。書き忘れていたので追記します。ちなみにこの CSS にドロップシャドウを追加したらシャレオツな感じになった気がします。 【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作って…

MacOSX で Node Sass does not yet support your current environment と言われたら

npm rebuild node-sass すると直るかもしれません。

ng test で Can't bind to 'routerLink' since it isn't a known property of 'a'. のような事を言われる場合

xxxx.component.spec.ts に以下のような追記をすると良いかもしれません。 + import { RouterTestingModule } from '@angular/router/testing'; beforeEach(async(() => { TestBed.configureTestingModule({ ... + imports: [RouterTestingModule] }) .compi…

Port が is already in use. と言われた時にどのプロセスの事を言っているのか MacOSX で調べる

もし Port が 4200 だった場合は以下のようにすればOK % lsof -n -i4TCP:4200 | grep LISTEN node 36069 okamuuu 17u IPv4 0xce7dba5cd8807a8b 0t0 TCP 127.0.0.1:4200 (LISTEN) おしまい

インディー系テックカンファレンス、Y8(通称ヤパチー) で登壇しました

y8

というわけで渋谷のマークシティに行ってまいりました。会場の雰囲気はこちらを参考にしてください。 togetter.com インフラエンジニアのWEBアプリ入門のススメ by おざしゅー 書くと動くので楽しい。楽しいのでもっと動かしたい。もっと知りたい。そんない…

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…