#typescript タグの付いた Blog

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でParameterizedtestを行うこと

apollo-server-testing と SQLite で統合テストを実装してみよう

2020/10/21

apollo-serverでGraphQLバックエンド開発をしている際の、統合テスト(IntegrationTesting)を行うための手法として、apollo-server-testingとsqliteを選択しました。その結果、高速に実行でき、かつ既存DBにも影響を及ぼさない方法を実践できましたのでご紹介します。apollo-server-testingとはhttps://www.apollographql.com/docs/apollo-server/testi

GraphQL code generatorで、スキーマからTypeScriptの型情報を自動で手に入れよう!

2020/06/22

GraphQLCodeGeneratorは、シンプルなCLIを使用して、GraphQLスキーマから型情報などのコードを生成することができるツールです。特徴CLIコマンド1つで、簡単に型情報を生成できる状況に合わせた、様々なカスタマイズも可能Java,Kotlin,C#などへの出力も対応どういう人なら使えるか?

Sequelize+TypeScript による Apollo-Server の実装

2019/12/27

Sequelize+TypeScriptによるApollo-Serverの実装に関するメモです。今回実装したリポジトリはこちらです;https://github.com/suzukalight/study-graphql-apollo-server/tree/master/src/12-dddセットアップ下記の環境で実践しました;Nodev10Apollo-Serverv2.9Sequelizev5SQLitev3パッケージのインスト

Apollo-Serverにおける認証と認可 (Authentication/Authorization)

2019/12/14

Apollo-Serverを使ったGraphQLサーバのハンズオン実装シリーズ。今回は\*\*認証と認可(Authentication/Authorization)\*\*を扱います。前半は、メールアドレス・パスワードによる認証と、サインアップ処理を追加する手順です。JWT(jsonwebtoken)、bcryptによる暗号化、beforeCreateなどのSequelizeHooksなどを使用しています。後半は、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-basedAccessControl(RBAC)は、ユーザと権限とを直接紐付けるのではなく、間にロールを挟みこむことで権限管理をシンプルにする手法です。これをReactベースのアプリに組み込むための、簡単な実装例を作成しました。実装したリポジトリはこちらです;https://github.com/suzukalight/study-rbac-clientRole-basedAccessControl通常、ユーザに認可

Storybookの最新フォーマット・Component Story Format(CSF)を試す

2019/10/14

Storybookv5.2で新しいストーリーのフォーマット・ComponentStoryFormat(CSF)が導入され、今までのstoriesOfから置き換わることが想定されています。今後に備えて簡単に素振りしつつ、その良さについて触れていきます。実装したリポジトリはこちらです;https://github.com/suzukalight/study-storybook-component-story-format速攻で試す何はなくとも、まずハンズオンしてみるの

monorepo環境にJestとStoryshotsのレグレッションテスト環境を構築

2019/09/03

monorepo環境で、create-react-appw/TypeScriptしたパッケージに対して、Jestのテストと、StoryshotsによるStorybookベースのスナップショットテスティングを導入する例です。まえがき完成品実装内容をプルリクエストにしたものを、GitHub上に公開していますので、併せてご参照ください。https://github.com/suzukalight/monorepo-react-prisma2/pull/2ht

Storybookでコンポーネントの型情報を表示する

2019/08/31

monorepo環境で、create-react-appw/TypeScriptしたパッケージのコンポーネントカタログをStorybookで表示し、さらにその型情報も表示させる設定例です。前提条件完成品実装内容をプルリクエストにしたものを、GitHub上に公開していますので、併せてご参照ください。https://github.com/suzukalight/monorepo-react-prisma2/pull/1動作環境MacNode.js

Monorepo+TypeScript+React+Storybook環境をつくる

2019/08/24

Monorepo環境で、create-react-appw/TypeScriptしたパッケージに対して、Storybookを導入する手順です。CLIを使わずに手動で設定していますが、簡単にセットアップは完了できました。セットアップStorybookw/React,Addons(viewport,actions,storyshots)をインストール型情報もインストール

yarn workspaceでMonorepo+TypeScript環境をつくる

2019/08/18

Monorepo環境で、yarnworkspaceを使って、create-react-app--typescriptしたclientワークスペースと、prisma2で作成したserverワークスペースを共存させる手順のメモです。Lint,Prettier,Huskyの設定も行います。前提条件完成品手元で同様の手順を踏んだリポジトリを、GitHub上に公開していますので、併せてご参照ください。https://github.com/

Writings

blogsnippetcourse

Contact

Home©︎ suzukalight