#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 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/