$shibayu36->blog;

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

tech

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…

「エンジニアメンター制度の効果的な運用を目指して」という発表をEngineering Manager Meetup #5でしました

「エンジニアメンター制度の効果的な運用を目指して」という発表をEngineering Manager Meetup #5でしました Engineering Manager Meetup #5で「エンジニアメンター制度の効果的な運用を目指して」という発表をしてきました。自分も久々の発表で緊張しました…

採用手法の良し悪しを判断するための基礎知識を身に付ける - 「人事と採用のセオリー」を読んだ

今後採用に積極的に携わることになったので、じゃあ基礎知識を自分が身につけておかないと人事の人にも信頼されないよなと思い、社内の人事の方に紹介された「人事と採用のセオリー」という本を読んだ。人事と採用のセオリー 成長企業に共通する組織運営の原…

入門 考える技術・書く技術を読んだ

人に分かりやすく伝える技術が不足していると感じたので読んだ。入門 考える技術・書く技術――日本人のロジカルシンキング実践法作者: 山崎康司出版社/メーカー: ダイヤモンド社発売日: 2011/04/08メディア: 単行本(ソフトカバー)購入: 15人 クリック: 71回…

Gotanda.EM #1 で「グレードイメージ具体化のため昇格理由を公開する」という発表をしてきました

Gotanda.EM #1 - connpassというイベントが開催されたので、「グレードイメージ具体化のため昇格理由を公開する」という発表をしてきました。発表内容を要約すると グレード役割定義だけでは、グレードごとに期待される具体的な行動やスキルが分からないとい…

notify-issues-to-slackをdockerhubに公開しました

先日notify-issues-to-slackを公開しました。 blog.shibayu36.org本日それをdockerhubに登録したので、docker pullするだけでご利用いただけます。 $ docker pull shibayu36/notify-issues-to-slack $ docker run --rm shibayu36/notify-issues-to-slack -he…