Kyoto.js 15 で「CSS in JSでメディアクエリをパッとやる」というトークをした

Kyoto.js 15に参加した。 発表枠で応募してLT枠という形で出た。けど5分じゃなくだいたい10分位というざっくりした感じで喋った。たぶん10分位で喋れてたと思う(計るの忘れてた)。 しゃべった内容 CSS in JSと書いてから気づいたけど主語が大きすぎると思っ…

React Hooks使って『Hooks can only be called inside the body of a function component.』って怒られる問題

まだalphaリリース(v16.7.0-alpha)のHooksを使っていたらハマった。 『Hooks can only be called inside the body of a function component.』とエラーバウンダリーの画面で怒られてしまう。 状況 親プロジェクトでHooksを用いたライブラリコンポーネントを…

yamlのanchorで継承(extend)して繰り返し書いている部分を減らすメモ

JSばっかやってて.yml書くことはあまりないのだけど、CircleCIのコンフィグとかはyaml記述なので書いていく必要がある。 それで、CircleCIのコンフィグを書いていると、pathとか、複数のjobでそれぞれ同じようなことばかり書いている部分があってDRYじゃない…

VS Codeでたまに見えないスペース文字らしきものが混入して文字化けする問題、一時解決した

たまにVS Codeで文字打ってるとエディタ上では可視できない謎の1文字分のスペースらしきものが混入してしまうバグに悩まされていた。 混入していることをしらずにgit pushしたりして、GitHub上で見てみると文字化けしていたりして完全に怒り心頭でとなってい…

TypeScriptで関数の返り値を型に変換する(ReturnTypeを使う)

あるfunctionが返す値から型を作りたかった。 たとえば const foo = ()=> { return { foo: 1, fooo: 2, foooo: 3 } } という関数があって、返り値のオブジェクトの内容で型を定義したかった。 この返り値を直接活かして型に変換して type Foo = { foo: numbe…

ターミナルでBrace(波括弧)を展開する

あいかわらず自分はfish-shell使っていて、よくわかってないのでよく困ったりしている。 きょうはBrace…波括弧{}の展開をしたかったけどfish: Mismatched bracketsといわれて困っていた。 どういうことをやりたいのか $ echo x{boy, girl, man, lady} xboy x…

.(js|ts)拡張子のReactファイルだとVS Codeでシンタックスハイライトや補完が効かない問題、あるいは.(jsx|tsx)で書くべきか否か

タイトルが長い。 VS CodeでReact書いてるとき、ファイル拡張子が.jsではシンタックスハイライトや補完が効かない問題がある。.jsx にするとちゃんと補完が効いてくれるようになって助かる。 でもみんながみんなVS Code使ってるわけじゃないし、GitHubみてる…

VS Codeでcommand+D(⌘+D)で文字選択しすぎてしまったとき戻る方法

エディタで⌘+Dで単語選択するけど、同じ単語5つのうち4つまでを選択したいような場面がたまにある。でも⌘+D押しすぎてしまって、5つ全部選択してしまった〜みたいなことが起こっていて地味に困っていた。 カーソル操作のUndoをやりたい 自分は主にVSCodeを使…

React Hooks(proposal)の予習をしたので自分用のメモをさらす

Hooksのalphaがきてやいのやいの言ってるので自分も追っておきますかということで予習。 この記事はReact v16.7.0-alpha時点の仕様と学習メモなので、Stableリリースされた時点でこの記事を参照にするのはよくないです。おそらくAPI変更が行われるはずなので…

VS Codeでjsx,tsx書いてるとformatOnSave(保存時にフォーマットするオプション)が効かない問題

現象 Prettier走ってほしいのに、React書いててファイルがjsxあるいはtsxだとなぜか効かなくて困った。 原因はデフォルトでformatOnSaveをfalseにしていて、言語ごとにtrueにしていたからだった。 解決方法 VS Codeのsettings.jsonでこう書いていたのが原因…

fish-nvmだけ使ってたらenv: node: No such file or directoryと怒られた

気づくまで fishシェル環境にするついでにnodebrew使うのをやめてnvmに移行した。nvmはそのままでは使えないので自分はfish-nvmを使っていた。 ふとしたときからVSCodeのGit連携機能が使えなくなってしまったり、ターミナルでwhich nodeとかやってもenv: nod…

Pixelaを使って生存記録をつけている

Pixelaというグッドなウェブサービスがある。 pixe.la GitHubの草と同様のコントリビューショングラフを作れるサービス。ユーザ登録からグラフの作成、グラフに草を生やすまで全部cliで完結できていい。 基本的に草のグラフは日々の継続の可視化するために使…

Alfredのクリップボード機能で不要なものを単体で消す

AlfredのPowerPack買うとクリップボード拡張がついてきて、まあ要するにクリップボードの履歴が使えるようになる。 使っているとたまに ミスってコピーした 別にいいけどできればあんまり残しておきたくないようなものをコピーしてしまった 設定からアプリ拒…

https時代のgitアカウントを使い分ける方法のメモ

時代はhttps https://help.github.com/articles/set-up-git/ GitHubではhttps推奨になっているし… httpsのほうがclone速度はやいし… まとめに書くけどhttpsにすると覚えることが1個だけでラク SSHでアカウントを使い分けるときはどうしていたか ~/.ssh/confi…

Karabiner-elementsでFor Japanese(日本語環境向けの設定)を使うとCommandキー組み合わせのショートカットが効かなくなる問題解決した

タイトルが長い。 MojaveにアップデートしてKarabiner-Elementsを入れてから困っていた。例えばブラウザでリンクを新規タブで開きたいナーっていうときに自分はCommand+クリックでやっていたけど、そういうCommand+[some]な組み合わせのショートカットが一切…

fishシェルでhub browseができない問題解決した

状況 github.com hubをbrewで入れている。 シェルはfish. gitリポジトリ上でhub browseすると exec: "google-chrome": command not found といわれてブラウザが開いてくれない。google-chromeなんてそんなコマンドはない。本来はopenコマンドが呼ばれるはず…

MacのMissionControlの速度をSierra/High Sierra/Mojaveでも高速化する方法

Mojaveに上げた。そしたらMissionControlとExposeのアニメーション速度が激遅に戻ってしまった。 僕は4本指トラックパッドの上下スワイプでこれらを切り替えるようにしているけれど、激遅になった上にかなり大きく指を動かさないとMissionControlあるいはExp…

過去のgitコミットのCommitとAuthor情報を修正する

gitのコミット情報がおかしい git logして履歴みてたりGitHubにpushしたコードをブラウザで眺めたりしてたらサムネイルが出てなかったりメールアドレスがおかしかったりコミッター名が違ってたりしてアレってなったとき。気持ち悪いので修正したい! 修正 .g…

fishでrange(範囲指定)展開したかったけど諦めた

$ echo {1..200} みたいなブレースで囲うrange展開をしたかったんですよ自分は。 結論 fishではシュッとやるの無理っぽいので echo (seq 200) でやる。自分はシュッとやりたかった。 そういうわけで例えば連番フォルダをfishでつくりたいときは mkdir hoge(s…

fishシェルでmkdir hoge && cd $_したかったけど面倒だった

結論 bashにはこういう文化があって便利。 shuzo-kino.hateblo.jp fishでもやりたかったけど、なんだか面倒だったので&& cd $_形式でやるのは諦めた。 qiita.com のでこの方のQiita記事のものを使わせていただいてこれからはmkcd hogeでやっていくことにした…

fishシェルでrbenvのPATHを通す

zshからfishに移行していて、rbenvの移行で手こずったのでメモ 結論 fisher rbenv は使わない このプラグインメンテ止まってるっぽい ので、公式のreadmeに従って ~/.config/fish/config.fish に # rbenv set -x PATH $HOME/.rbenv/bin $PATH status --is-in…

react-virtualizedでTwitter/FBみたいな無限スクロールのタイムラインをつくる知見

を書いたんですよ qiita.com DEMO そういうわけでなんとなくこっちにもリンクを貼っている次第です。 余談 モバイルアプリによくある引っ張って更新するPulltoRefreshという文化があるんですが、アレ実装しようとしたらRVの仕様に足元を取られてとにかく厳し…

TypeScriptでReact.createRef()に型定義をわたす

React Refsとは https://reactjs.org/docs/refs-and-the-dom.html ReactでDOMを参照するアレ. この記事ではv16.3から実装されたReact.createRef()を使うrefsのことを指している。 そんなプロパティないとか怒られる 型がない 例えばこういう風にinputタグにr…

.envファイルで配列ライクな環境変数を持ってJSでArray展開する

3行 .envファイルで 配列ライクに環境変数を持って JSで配列として展開したい .env書く CLIENT_ORIGIN='http://localhost:3000 http://192.168.0.99:3000' localhostとIPアドレスの2種類を持った環境変数を例に 文字列で半角スペース空けでもつ。 これをJSで…

TypeScriptのmapped typesでネストされた型もすべてオプショナルにする

partial<T> TSのmapped typesを利用して提供されている便利な型partial<T>がある type Partial<T> = { [P in keyof T]?: T[P]; }; これが提供されているので 例えば以下のようなfoo型のプロパティをすべてオプショナル(?:の形式)にしたかったらこうすればよい。 inter</t></t></t>…

axiosのparamsに階層の深いネストしたオブジェクトを渡したい

表題どおり paramsにネストの深いオブジェクトを設定してGETメソッドでサーバーとやりとりしたかった。 普通にやるとJSONにされるのでサーバーで受け取ったとき string になってしまってオブジェクトとして取り扱えない。 qsを使ってparamsSerializerに設定…

Node.js Expressのエラーハンドリング&next()の知見

主にExpress v4でのはなし。 Expressでのエラー処理全然わからなくて困っていたけど、ちょっとわかってきた気がするのでメモついでに書く。 Expressのミドルウェアのだいたいの挙動はわかっている くらいの人向けを想定して書いている。 便利なモジュール bo…

npm link なにが便利か

tl;dr 手元で開発中のモジュールをローカルの別のプロジェクトで使いたいときに便利 いまあなたは『my-great-module』というすごい便利なモジュールを作っているとする すごい便利なモジュールなのだけど一部未完成なのでnpmにパブリッシュするのはまだため…

TypeScriptのコンパイル時に『Cannot find name 'EventListenerOrEventListenerObject'.』と怒られる

Firebase Cloud FunctionsをTSで書いて使おうとしていて $ firebase init functions したあとにとりあえずHello Worldしようと思ってハマった。 以下のgetting-startedをのindex.tsをコピーして github.com $ firebase deploy --only functions したところts…

JavaScriptでオブジェクトの分割代入をするとき変数名を別の名前にする

オブジェクトの分割代入(Destructuring assignment)をするときに、変数名を自分の好きな名前に変更したいと思って調べたら、方法があった。 MDN developer.mozilla.org 異なる名前を持つ変数への代入 var o = {p: 42, q: true}; var {p: foo, q: bar} = o; c…