#typescript タグの付いた Blog styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る 2021/04/07
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できる csstype を使って、Typography, Space, Color などの型付き props を作ることができる 基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる 何がしたかったか こういう Chakra UI みたいな書き方がした
AtCoderに登録して、AtCoder Beginners Selection やってみた 2021/02/06
タイトルの通りで、昨日 AtCoder に登録して、AtCoder Beginners Selection やってみた。久々にコンピュータサイエンスやれた気がして楽しかった。 結果 スコア 無事に全問正解できた。すべて TypeScript で解答。ちなみに言語選択としては競プロには全然向いてない。プログラム起動するだけで 50ms くらいかかってるので。わたし一応 C++ も書ける人なので、あとで C++ で書き直してみようと思う。 おもしろかった A 問題
2020年フロントエンド技術スタック 2020/12/30
suzukalight が 2020 年に使った技術スタックをまとめました。分類はこちらのサイトを基準にしています。 スケルトン生成 create-next-app を Next.js でのスケルトン生成に使用し、 create-react-app を通常の React アプリで使用しています。ブログサイトには Gatsby.js を使っていました（いまは Next.js に置
Jest の test.each で Parameterized test を実行する 2020/10/27
Jest で関数の引数を複数パターンチェックしたい場合、ベタに書く方法のほかに、test.each でテーブルとして記述する方法があります。テストの視認性が良くなるため、オススメの記法です。今回はこちらをご紹介するとともに、いくつかの実践問題も提示します。 Jest の test.each とは https://jestjs.io/docs/ja/api#testeachtablename-fn-timeout
\*\*Jest で Parameterized test を行うこと
apollo-server-testing と SQLite で統合テストを実装してみよう 2020/10/21
apollo-server で GraphQL バックエンド開発をしている際の、統合テスト（Integration Testing）を行うための手法として、apollo-server-testing と sqlite を選択しました。その結果、高速に実行でき、かつ既存 DB にも影響を及ぼさない方法を実践できましたのでご紹介します。 apollo-server-testing とは https://www.apollographql.com/docs/apollo-server/testi
Sequelize+TypeScript による Apollo-Server の実装 2019/12/27
Sequelize+TypeScript による Apollo-Server の実装に関するメモです。 今回実装したリポジトリはこちらです；
https://github.com/suzukalight/study-graphql-apollo-server/tree/master/src/12-ddd セットアップ 下記の環境で実践しました； Node v10 Apollo-Server v2.9 Sequelize v5 SQLite v3 パッケージのインスト
Apollo-Serverにおける認証と認可 (Authentication/Authorization) 2019/12/14
Apollo-Server を使った GraphQL サーバのハンズオン実装シリーズ。今回は\*\*認証と認可（Authentication/Authorization）\*\*を扱います。 前半は、メールアドレス・パスワードによる認証と、サインアップ処理を追加する手順です。JWT(jsonwebtoken)、bcrypt による暗号化、beforeCreate などの Sequelize Hooks などを使用しています。 後半は、JWT + x-token ヘッダ によるユ
GraphQL Apollo-Server ハンズオン 2019/12/08
突然ですが、@suzukalight は来年からジョブチェンジして、バックエンドエンジニアとして働くことになりました！ 弊社の開発環境としては、Node, GraphQL, koa, apollo-server, RxJS などを採用しているのですが、順次キャッチアップするとして、まずは基本中の基本からしっかり押さえておきたいと思い、GraphQL の素振りを始めています。 Apollo-Server を使った GraphQL サーバ
Role-Based Access Control (RBAC) を実践する 2019/11/24
アクセス制御の手法のひとつである Role-based Access Control (RBAC) は、ユーザと権限とを直接紐付けるのではなく、間にロールを挟みこむことで権限管理をシンプルにする手法です。これを React ベースのアプリに組み込むための、簡単な実装例を作成しました。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-rbac-client Role-based Access Control 通常、ユーザに認可
Storybookの最新フォーマット・Component Story Format(CSF)を試す 2019/10/14
Storybook v5.2 で新しいストーリーのフォーマット・Component Story Format(CSF)が導入され、今までの storiesOf から置き換わることが想定されています。今後に備えて簡単に素振りしつつ、その良さについて触れていきます。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-storybook-component-story-format 速攻で試す 何はなくとも、まずハンズオンしてみるの
monorepo環境にJestとStoryshotsのレグレッションテスト環境を構築 2019/09/03
monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Jest のテストと、Storyshots による Storybook ベースのスナップショットテスティングを導入する例です。 まえがき 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/2 ht
Storybookでコンポーネントの型情報を表示する 2019/08/31
monorepo 環境で、create-react-app w/ TypeScript したパッケージのコンポーネントカタログを Storybook で表示し、さらにその型情報も表示させる設定例です。 前提条件 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/1 動作環境 Mac Node.js
Monorepo+TypeScript+React+Storybook環境をつくる 2019/08/24
Monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Storybook を導入する手順です。CLI を使わずに手動で設定していますが、簡単にセットアップは完了できました。 セットアップ Storybook w/React, Addons(viewport, actions, storyshots) をインストール 型情報もインストール
yarn workspaceでMonorepo+TypeScript環境をつくる 2019/08/18
Monorepo 環境で、yarn workspace を使って、create-react-app --typescript した client ワークスペースと、prisma2 で作成した server ワークスペースを共存させる手順のメモです。Lint, Prettier, Husky の設定も行います。 前提条件 完成品 手元で同様の手順を踏んだリポジトリを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/