$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

2019-01-01から1年間の記事一覧

yarn workspaceを使っている時でもvscodeでeslintプラグインが動くようにする

例えばyarn workspaceを使って、 packages/hoge/ packages/fuga/ のようにワークスペースを二つに分けて開発したいときがある。この時、ワークスペースごとでeslintの設定やインストールするpackageが分かれてしまっているのでESLintプラグインがうまく動か…

Next.jsのpages/ディレクトリ以下にはページ用のファイル以外は置いてはならない

Next.jsではpages/ディレクトリ以下にページ用の実装ファイルを置く規約となっているが、それに追加して、このディレクトリ以下にはページ用以外のファイルは置いてはならないということが分かった。ページ用以外のファイルとは、例えばテストのファイルや共…

MySQLのALTER TABLEでTEXT NOT NULLなカラムをエラー無しで追加する

課題 MySQL :: MySQL 5.6 リファレンスマニュアル :: 11.6 データ型デフォルト値によると、 MySQLのTEXTカラムにはデフォルト値を設定できない 厳密な SQL モードを有効にした場合、NOT NULLなカラムがINSERTに含まれていないとエラーが発生する そのため、…

Next.jsのrouterをモックして、ページの単体テストをする

課題 例えばこのページにあるような例をテストしたいとする。 import { useRouter } from 'next/router'; import Layout from '../components/MyLayout'; const Page = () => { const router = useRouter(); return ( <Layout> <h1>{router.query.title}</h1> <p>This is the blo</p></layout>…

「初めてのGraphQL」読んだ

最近は開発でGraphQLを使うようになってきたので、一度基本から勉強しようと思い、読んだ。初めてのGraphQL ―Webサービスを作って学ぶ新世代API作者:Eve Porcello,Alex BanksオライリージャパンAmazon 基本の部分が一通り学べて良かった。サンプルコードも多…

Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけた

Next.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。 LinkではクリックするとsingletonRouterのpushを呼んでいる pushはchangeメソッドを呼んでいる next/…

vscode-powertoolsを使って、VSCodeの挙動を自分好みに変える

VSCodeを使っていると、より便利にするために挙動を少し変えたいと思うときがある。ほんとにちょっとした変更の場合、拡張を書くまではしたくないので、いい方法がないかなと思っていたところ、vscode-powertoolsを使うと自分好みにできそうだった。 今回僕…

TypeScript 3.7.2でjsonをimportした際に、json構造によっては二度目の代入が型エラーになるバグを踏んだ

表題のとおり。TypeScript 3.8.0-dev.20191126では直っていたので、3.8.0が来るまで気長に待ちましょう。 再現コードはこちら。 https://github.com/shibayu36/typescript-json-module-bug/blob/master/test.ts import data from "./data.json"; type Data =…

Next.jsチュートリアルやった

SPAをやるにあたって、Server Side Renderingの仕組みも知っておいたほうが良いと感じ、Next.jsについて学んでみた。チュートリアルがよく出来ていたので、これをベースに学んだ。 チュートリアルをやった感じ、Next.jsは以下のようなものがメインの機能のフ…

「エンタープライズアプリケーションアーキテクチャパターン」を読んだ

ソフトウェア設計に関する知識が昔のままで止まっていて、最近の設計のためのワードはぼんやりと理解できるものの、はっきりと分かっていないなと感じていた。そこでまだ読んでいなかった設計に関する本を読もうと思い、まずは「エンタープライズアプリケー…

0になるくらいなら0.1でもいいから学ぶ

以前は、学習するときはきちんと頭に入ることを重視しようという考え方をしていて、パソコンに向かえる時に集中して勉強するようにしていた。最近はその考えを変えようとしていて、0になるくらいなら0.1でもいいから学ぶと思うようにしている。この考えに変…

vscodeのFiles ExplorerのショートカットをEmacs風に

vscodeを触っていて、Files Explorerを素早く操作できないことにストレスを感じていた。そこで素早く操作できるようにキーバインドを調整してみた。新しいキーバインドを覚えられないので、Emacs風になるようにセットアップしてみた。 // Files ExplorerにC-…

第二子のための4ヶ月間の半育休生活振り返り

6月の第二子の出産に伴い、1歳9ヶ月 + 0歳という子供の構成になった。これは絶対に大変だろうということで、出産と同時に4ヶ月の半育休(僕の場合は育休を取りながら週1日働く)を取ることにした。今回は育休の振り返りを書いてみる。 どんな形態の育休を取っ…

git commit時に自動perltidy & emacsからperltidy実行

最近業務で久々にPerlを書いている。最近社内ではperltidyをちゃんと使っているようで、自分の開発環境が追いついてなかったので、git commit時に自動perltidy & emacsから手動でperltidyを実行できる環境を整えてみた。 git commit時に自動perltidy git pre…

React + Apolloを使ったコンポーネントのテストをする

Reactを使ったコンポーネントのテストのやり方を知らなかったので、やってみた内容をメモ。hatena/go-Intern-Diaryをお試し環境として利用した。結果は https://github.com/shibayu36/go-Intern-Diary/pull/5/files テスト概要 – Reactを最初の資料としなが…

Nodeのイベントループを理解するために遊んだ & Apolloのテストでawait wait(0)するとなぜデータがロードされるか

Apolloを触っていて、テストをするために https://www.apollographql.com/docs/react/development-testing/testing/#testing-final-state を読んでいた。その文章の中で、 MockedProviderをrenderした時はloading状態になる データがロードされた最終状態に…

React Hooksを学んだ

React学習メモ - $shibayu36->blog;にてReactを学習したので、続いてReact Hooksを学んだ。Reactのドキュメントはわかりやすくて良い... 以下メモ書き。 全体を通して感じたこと 基本React Hooksの方が非常に見通しが良くなりそうだけど、今後クラス型コンポ…

我が家のイヤイヤ期の子供の着替えテクニック

最近は息子がいわゆる「イヤイヤ期」に入っていて、とにかく全てのことに嫌というようになった。例えば自転車に乗って帰るのも嫌だし、お風呂場から帰ってきた後着替えるのも嫌で裸で走り回るし、起きた後着替えるのも嫌で地面でバタバタしている。それでも…

TypeScript + Apollo ClientでGraphQLのデータに型を付ける

TypeScript + Apollo Clientで、useQueryなどを用いてGraphQLのクエリを発行する際に、クエリのvariablesやレスポンスのデータに型を付けたい。やり方が少々分かりづらかったのでメモを残す。 型をつけるためにやることは以下の通り。 apollo.config.jsを定…

Apollo platformのチュートリアルをやった

Hatena-Textbook 2018学習日記(5) - GraphQL編 - $shibayu36->blog;のようにHatena-Textbookを用いて最近のモダンなWebアプリケーション開発の学習をしているのだけど、TypeScript + GraphQL + Apollo Client + Reactの部分でそれぞれの技術の基本知識を理解…

GraphQLのクエリについて学んだ

Apollo Clientについて学ぼうと思い、Introduction - Apollo Basics - Apollo GraphQL Docsをやっていた。しかし、これをやる中でGraphQLのクエリ言語についてあまり分かってないことに気づいたので、Queries and Mutations | GraphQLを見て、クエリについて…

Hatena-Textbook 2018学習日記(5) - GraphQL編

Hatena-Textbook 2018 学習日記(4) - $shibayu36->blog;の続き。https://github.com/shibayu36/go-Intern-Diary/pull/3 で、GraphQLを使って以下の操作ができるように実装した。 現在のログインユーザーの取得 user_id指定でユーザーを取得 diary_id指定でダ…

React学習メモ

最近のWeb開発わからん...って思って勉強してる。Reactは公式のチュートリアルやドキュメントがわかりやすく、そちらを進めると入門しやすかった。 チュートリアルやったレポジトリ https://github.com/shibayu36/react-tutorial/tree/84f44577d4bc29efe41ca…

Emacsで現在開いているファイルを一瞬でVSCodeで開く方法、そしてその逆

Reactを最近勉強し始めたのでVSCodeも使ってみるかと思っている。そうはいってもEmacsを使いたいときもあるので、 Emacsで現在開いているファイルをVSCodeで開く(カーソル位置も保持) VSCodeで今開いているファイルをEmacsで開く(カーソル位置も保持) の両方…

「男の子のしつけに悩んだら読む本」読んだ

言うこと聞かない!落ち着きない! 男の子のしつけに悩んだら読む本作者:原坂一郎すばる舎Amazonそろそろ一人目の子供のしつけが始まる時期だな〜と思ってきたので読んだ。男はこう、女はこう、のような決めつけが結構多くて嫌なところは結構あったが、いく…

「住宅ローン 借り方・返し方 得なのはどっち?」読んだ

boo

住宅ローン 借り方・返し方 得なのはどっち?作者:平井美穂河出書房新社Amazon数年後にローン借りる可能性もあるので読んだ。 ローン合計額はどの程度に押さえておくと良いか マンションの管理費・修繕積立金の話 頭金や諸費用を用意すると、どのような効果…

「プロだけが知っている!中古住宅の選び方・買い方」読んだ

数年後にもしかしたら住宅を購入する可能性もあるので、今の段階から知識を溜めておこうと思い読んだ。新耐震基準、瑕疵保険、インスペクション、中古物件価格の決まり方、不動産会社選び、リフォーム関連など幅広く必要な知識を学べたので良かったです。プ…

アピールすることの大切さを学ぶ - 人生は、運よりも実力よりも「勘違いさせる力」で決まっているを読んだ

人生は、運よりも実力よりも「勘違いさせる力」で決まっている作者:ふろむだダイヤモンド社Amazonこの本がスゴい!2018: わたしが知らないスゴ本は、きっとあなたが読んでいるで見つけて読んだ。思っていた以上にめっちゃ良かった。スラスラ読めるので、みん…

「小児科医のぼくが伝えたい 最高の子育て」読んだ

小児科医のぼくが伝えたい 最高の子育て作者:高橋孝雄マガジンハウスAmazon大体これまで読んだ本と同じようなことが書いてあったが、「子供に何より大事なのは、共感力、意思決定力、自己肯定感」という話は面白かった。 「共感力」は「1人でできる子になる…

実践的な採用施策の具体的な事例を学ぶ - 「採用に強い会社は何をしているか」を読んだ

採用に強い会社は何をしているか ~52の事例から読み解く採用の原理原則作者:青田 努ダイヤモンド社Amazon採用について学習をするために読んだ。この本良かった。以前読んだ人事と採用のセオリーは採用の基礎知識を学べたのに対して、この本では実践的にどう…