はてなブックマーク

チームのGitHubリポジトリへPRを出すときに毎回ポチポチReviewerとAssigneeをクリックするのがダルすぎたのでなんとかしたくて設定した。 要求事項としては 対象のリストのメンバーの全員をPRが作成されるたびにreviewerに自動アサイン PRのassigneeにはPRの作成者が自動アサイン これを実現したかった。 Auto Assign probot.github.io GitHub - kentaro-m/auto-assign: 🤖 A Probot app that adds reviewers to pull requests when pull requests are opened. Auto AssignはGitHub連携して使用するBotツールで、めちゃくちゃ便利な最高のツール。 使い方はREADMEに書いてあるとおりで、GitHubのリポジトリにApp

時代はhttps https://help.github.com/articles/set-up-git/ GitHubではhttps推奨になっているし… httpsのほうがclone速度はやいし… まとめに書くけどhttpsにすると覚えることが1個だけでラク SSHでアカウントを使い分けるときはどうしていたか ~/.ssh/configを作成して host github.com-main HostName github.com IdentityFile ~/.ssh/id_rsa_github User git host github.com-sub HostName github.com IdentityFile ~/.ssh/id_rsa_github_sub User git みたいなことを書いてssh-add -K ~/.ssh/id_rsa_githubして $ git clo

JSばっかやってて.yml書くことはあまりないのだけど、CircleCIのコンフィグとかはyaml記述なので書いていく必要がある。 それで、CircleCIのコンフィグを書いていると、pathとか、複数のjobでそれぞれ同じようなことばかり書いている部分があってDRYじゃないな〜つらいな〜という気持ちで書いていた。 重い腰を上げてググってたところ、JSONと違ってYAMLは継承ができるっぽいので、これを使うとちょいいい感じにできるっぽい。 anchor &を使うのをanchorと呼んでいるらしい foo: &foo a: 1 b: 2 c: 3 これでfooオブジェクトが参照元になる JSON変換するとこうなる { "foo": { "a": 1, "c": 3, "b": 2 } } extend <<はextendの意味らしい anchorを継承したいときは<<: *アンカー名のように

やっていいかは別として バグの原因になるとか、OOPに反するとかいろいろあるけれど、interfaceをextendsして継承元にあるプロパティを一部だけ上書きして別のプロパティにしたいみたいな気持ちになることがある(と思う)。 おさらい interface Aがあってそれを継承するinterface Bがあるとする interface A { foo: number bar: number baz: number qux: number yo: number } interface B extends A { cha: string } これは普通に通る例 このinterface Bは実質こういう状態 interface B { foo: number bar: number baz: number qux: number yo: number cha: string } OKですね。

2行 独自に生やしたpropsをまるごと渡してはいけない 分割代入でdomのattributesに定義がないpropsを間引く エラーメッセージ なんかこういう2種類のやつを言われる React does not recognize the `isAvailable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isAvailable` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Received `false` for a non-boolean at

TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに const isString = (arg: any): arg is string => typeof arg === "string"; のように「引数 is 型」と書かれたものを見かける。 このコードは引数になんか受け取って、それがstringなのかどうかを判別するくん。 返り値の型に『arg is string』と書かれている。 この記事はこれについてのはなし。 "is" is なに… この"is"というキーワード、ググラビリティがめちゃくちゃ低くてどうググったらいいかわからないし、ググってもあんまりそれっぽいのがヒットしなくて困る。 What is this "is" keyword? という気持ちになる。isがゲシュタルト崩壊。 "is"は型の絞り込みができ

あるfunctionが返す値から型を作りたかった。 たとえば const foo = ()=> { return { foo: 1, fooo: 2, foooo: 3 } } という関数があって、返り値のオブジェクトの内容で型を定義したかった。 この返り値を直接活かして型に変換して type Foo = { foo: number, fooo: number, foooo: number } こんな型を作りたい。 ためしに適当にこう書いてみたりする const foo = ()=> { return { foo: 1, fooo: 2, foooo: 3 } } type Foo = typeof foo ↓ やったか！？ type Foo = () => { foo: number; fooo: number; foooo: number; } やってない、function型だこれ c

結論から fetch(url) .then(res => res.text()) .then(text => new DOMParser().parseFromString(text, "text/html")) 返ってきた値にnew DOMParser().parseFromString(text, "text/html"))する！！ 経緯 XMLHttpRequestと似たものにFetchAPIがある。 developer.mozilla.org Promiseを返してくれるので.thenであれこれしやすくて便利なのだけど、使ってみたところ返ってきたレスポンスの中身をDOMとして扱えなくて困った。 Body - Web API インターフェイス | MDN FetchAPIにはリクエスト/レスポンスのBodyを決めるやつが実装されている これにDOMとしてくれるやつがなくて素直に扱えな

タイトルが長い。 useEffectとかuseMemoとかの第一引数に渡した関数を発火させるかどうかの条件指定とも言える第二引数の配列にオブジェクトをまるごと入れたらどうなるのか というはなし。 勘違いしそうなので最初に説明しておくと、 useMemo(()=> someFunction(), myObject) ではなくて useMemo(()=> someFunction(), [myObject]) です。配列の中にオブジェクトであって第二引数に直接オブジェクトではない。 なお当記事はReact16.8.1でのバージョン時点でのはなしです。 それで、タイトルのことをコードで書くとこう。当記事ではuseMemoを例にその実態を追う。 const myObj1 = { foo: "foo", bar: "bar", baz: { qux: 100, quux: { deepFoo: 'I

3行 MSのTSチームがESLintを推進させ始めた まだ完璧ではないがだいぶ安定してきてそろそろTSでも現実的にESLintできるようになってきた気がする やってみましょう 手っ取り早く動かす設定だけみたい人は 💁🏻‍♀️ My airbnb based ESLint config for "typescript-eslint" with React & prettier · GitHub なぜTSでESLint? Q. TSLintあるんだしTSLintじゃダメなの？ A1. ESLintにある便利なルールがTSLintにない(あるいは実現できない)ことがある 例えばReactのルールをやってるeslint-plugin-reactには(react/no-array-index-key)というルールがあって、配列のindex値をコンポーネントのkeypropsに使うと怒ってくれるも

タイトルが長い。 MojaveにアップデートしてKarabiner-Elementsを入れてから困っていた。例えばブラウザでリンクを新規タブで開きたいナーっていうときに自分はCommand+クリックでやっていたけど、そういうCommand+[some]な組み合わせのショートカットが一切効かなくなっていたからだ。 状況下 USキーボードで日/英キーボード入力の切り替えをCommandキー単体押しでできるように For Japanese（日本語環境向けの設定）(rev 3) (https://pqrs.org/osx/karabiner/complex_modifications/#japanese) このcomplex_modificationsを入れている。けどどうやらこれが原因っぽい。無効化するとCommand+[some]なショートカットが効くようになる. Parameterの値をいじ

主にExpress v4でのはなし。 Expressでのエラー処理全然わからなくて困っていたけど、ちょっとわかってきた気がするのでメモついでに書く。 Expressのミドルウェアのだいたいの挙動はわかっている くらいの人向けを想定して書いている。 便利なモジュール boomはエラーオブジェクトユーティリティライブラリ。 github.com hapijsのモジュールだけどExpressでも使えるので使っていく。 boomはようは『適切なエラーオブジェクト生成君』でエラーを出したいときに何のエラーかを区別する必要があったりするけど、boomを通すとラクになる。 例えば Boom.forbidden('try again some time'); という感じにboomのforbiddenメソッドを呼ぶと { "statusCode": 403, "error": "Forbidden", "m

gitのコミット情報がおかしい git logして履歴みてたりGitHubにpushしたコードをブラウザで眺めたりしてたらサムネイルが出てなかったりメールアドレスがおかしかったりコミッター名が違ってたりしてアレってなったとき。気持ち悪いので修正したい！ 修正 .gitconfigをなおす とりあえず設定みる $ git config --global --list localにgitconfigあってそこでユーザー名指定してるなら --local おかしかったら直す $ git config --global user.name watashinoname $ git config --global user.email hoge@example.com これでグローバルの.gitconfigのユーザー情報がなおった 過去コミットを改変してコミットも直す こちらのブログが非常に参考になった

前提 babel6以降 babel-plugin-transform-runtime をつかってポリフィルしている webpack2以降 自分がこういう構成なので…ほかにもなにか条件下あるかもしれない エラー内容 Cannot assign to read only property ‘exports’ of object ‘#<Object>’ webpackのコンパイルはちゃんと通って、ファイルも生成される。されるのだけど、そのJSファイルをブラウザで実行するとうまく動かなくて、Chromeのdevツールとかでコンソールエラーを見ると上記のようなエラーメッセージが出ている。 状況下 babel module(策定されたESMっぽいけどESMではないbabel独自のimport/export構文)を使ってモジュールを用いている状況下で、CJS(CommonJS)形式のexports構文を

[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と