$shibayu36->blog;

株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。

tech

Next.jsのドキュメントを全部読んでみた

最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/…

Next.jsでNot FoundページやISEページをカスタマイズする

https://nextjs.org/docs/advanced-features/custom-error-page を見て設定したが、特にstatusCode周りでハマったのでメモ。 pages/_error.tsxを作ると、SSR(Server Side Rendering)時やCSR(Client Side Rendering)時に例外が起きるなどした時やルーティング…

Next.js利用時の静的画像配信の方法

静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。https://github.com/zeit/next-plugins でも紹介されている。 このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。file-loader…

エリック・エヴァンズのドメイン駆動設計読んだ

エリック・エヴァンスのドメイン駆動設計作者:Eric Evans出版社/メーカー: 翔泳社発売日: 2013/11/20メディア: Kindle版 読んだ。 エンティティ、値オブジェクト、集約など、自分の中でなんとなくの理解になっていたところを、より具体的に言語化出来たこと…

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,尾崎沙耶,あんどうやすし出版社/メーカー: オライリージャパン発売日: 2019/11/1…

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は以下のようなものがメインの機能のフ…

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

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

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

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

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について学ぼうと思い、0. 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…

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

採用に強い会社は何をしているか ~52の事例から読み解く採用の原理原則作者: 青田努出版社/メーカー: ダイヤモンド社発売日: 2019/04/11メディア: 単行本(ソフトカバー)この商品を含むブログを見る採用について学習をするために読んだ。この本良かった。以…

Hatena-Textbook 2018 学習日記(4)

Hatena-Textbook 2018 学習日記(3) - $shibayu36->blog;の続き。https://github.com/shibayu36/go-Intern-Diary/pull/2 で、ダイアリー作成とダイアリー一覧まで作った。記事作成系は出来てないけど、とりあえずここまでやれば次のGraphQLやReactあたりの学…

Hatena-Textbook 2018 学習日記(3)

Hatena-Textbook 2018 学習日記(2) - $shibayu36->blog; の続きです。今回は https://github.com/shibayu36/go-Intern-Diary/compare/01b1518eb0159b4a6d410188fd70ca1901a0e0ef...dca88a611ca9bf338f7fc901a11c1ebbe063ec56 あたりまで。ユーザー名からユー…

Hatena-Textbook 2018 学習日記(2)

Hatena-Textbook 2018 学習日記(1) - $shibayu36->blog; の続きです。今回は https://github.com/shibayu36/go-Intern-Diary/compare/ddef40c003464b410ea73cfd6787995c2484136f...01b1518eb0159b4a6d410188fd70ca1901a0e0ef あたりまで。とりあえず登録ペー…

GolangのHTTP Middlewareをテストする

ほぼ Unit Testing Golang HTTP Middleware – Kyle Purdon – Medium のまんまだけど、自分用にメモ。GolangのHTTP Middlewareというのは Goで始めるMiddleware - Qiita に紹介されているようなもの。PerlだとPlack Middleware、RubyだとRack Middlewareと概…

Hatena-Textbook 2018 学習日記(1)

最近Webアプリケーションを開発していないこともあって、最近のモダンなWebアプリケーション開発についていけていないことに危機感を感じたので、2018年のHatena-Textbookを使って再学習している。今日は以下の3つのcommitをした。 https://github.com/shiba…