DonTacos

DonTacos

Migration guide for Storybook 8.0

https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io 翻訳メモ 🩻 新しいビジュアルテストワークフローを提供する「Visual Tests」アドオン 新しく導入された「Visual Tests」アドオンを使って、視覚的なテストワークフローを実行できるようになりました。 💨 テストビルドが2〜4倍速くなり、Reactのドキュメント生成が25〜50%速くなり、Webpackプロジェ

DonTacos

    • Webpack 開発終わってるから代替えを検討しよう

      調査してたら、Turbopack か Vite かどっちかな気がしてきた。どっちがいいのか決めていこう。 TurbopackについてTurbopackは、Webpackの後継と見なされている新しいオープンソースバンドルツールです。Turbopackは、Rust で作られ、Webpack よりも高速でスケーラブルな設計になっています。Turbo エンジンをベースにしており、キャッシュ、無効化、インクリメンタルビルドなどの一般的なタスクを処理する再利用可能な Rust ベースの

      DonTacos

      • testing-library/jest-dom version6 について

        testing-library/jest-dom の v6 リリースにて BREAKING CHANGES があったので確認メモです。 新機能 このバージョン6では、ローカルの型定義が導入され、jest、@jest/globals、vitest などのテストプラットフォームをサポートするようになりました。これにより、テストプラットフォームごとに適切な "expect" インスタンスを自動的に拡張するための新しい import パスが追加されました。 新しい import

        DonTacos

        • JIRAを使ってLPをスクラムで回して開発していこう

          LPの開発をスクラムで進める際に、エピック、ストーリー、およびタスクをどのように切り分けるかを検討します。 エピックの作成: 最初に、各画面（TOP、ABOUT、SERVICE）をエピックとして作成します。エピックは大きな機能や目標を表し、複数のストーリーやタスクを含む単位となります。各画面が個別のエピックとなります。 ストーリーの作成: 各画面を具体的な機能やユーザー体験として分割します。ストーリーはユーザーの視点から見た機能を表します。例えば、TOP画面のストーリーは

          DonTacos

        Migration guide for Storybook 8.0

        DonTacos

          ApolloClientについて

          httpLink = new HttpLink({ uri: process.env.ENDPOINT, credentials: 'include', // => ココ headers: { authorization: `Bearer ${authToken}`, },}); credentials　について credentials は、Apollo ClientのHttpLinkオブジェクトの設定の1つです。このオプションは、リクエストを送信する際にどのようにク

          DonTacos

          ApolloClientについて

          DonTacos

          複数のアカウントで GitHubを使おう

          ローカル環境で複数のアカウントを使用する場合、SSHキーまたはHTTPSの認証情報を設定する必要があります。SSHキーの場合は、新しいキーペアを生成し、それを新しいアカウントに関連付けます。 SSHキーの生成RSA（Rivest-Shamir-Adleman）非対称暗号アルゴリズムを使用して公開鍵と秘密鍵のSSHキーペアを生成します。 公開鍵は暗号化に使用され、秘密鍵は復号化に使用されます。 .sshディレクトリがない場合は作成してください。 mkdir ~/.ssh

          DonTacos

          複数のアカウントで GitHubを使おう

          DonTacos

          NodejsのBlocking vs Non-Blockingについて

          ブロッキング ブロッキングとは、Node.jsプロセス内で追加のJavaScriptの実行が、非JavaScript操作が完了するまで待機する必要がある場合を指します。これは、ブロッキング操作が発生している間にイベントループがJavaScriptの実行を継続できないためです。 Node.jsでは、I/OなどのJavaScript以外の操作を待つ場合は、ブロッキング処理が発生することになります。つまり、イベントループがI/O操作が完了するまで待機するため、その間に他のJav

          DonTacos

          NodejsのBlocking vs Non-Blockingについて

          DonTacos

          storybook を v6 から v7 へアップグレードする際にやることをメモ

          対応方法`import { Story } from '@storybook/react/types-6-0'` は `depricated` となり、 `import type { Meta, StoryObj } from '@storybook/react'` を使用していく。 Step1: `Meta` 型を使う Before export default { title: 'components/Hoge', component: Hoge,}; After

          DonTacos

          storybook を v6 から v7 へアップグレードする際にやることをメモ

          DonTacos

          GraphQLのSiblingについて

          GraphQLにおいては、兄弟要素という概念が直接的には存在しませんが、リレーションシップを持つオブジェクト同士が階層的に入れ子になったGraphQLスキーマを作成することで、似たような構造を表現することができます。 例えば、以下のようなスキーマがある場合を考えてみましょう。 type Book { id: ID! title: String! author: Author!}type Author { id: ID! name: String! books:

          DonTacos

          GraphQLのSiblingについて

          DonTacos

          nodemon をローカルインストールしてPATHを通す

          インストールする npm install --save-dev nodemon --save-dev オプションを使用することで、パッケージが devDependencies に追加されます。devDependencies に追加することで、本番環境でのデプロイ時にはインストールされません。 PATHを通す node_modules/.bin ディレクトリが PATH に追加されているか確認してください。以下のコマンドを実行して、PATH の一覧を表示します。 ec

          DonTacos

          nodemon をローカルインストールしてPATHを通す

          DonTacos

          React18 にて testing-library/react のrenderHook の wrapper へ Props を更新してテストがしたいんじゃ

          React18になり、今まで使っていた testing-library/react-hooks が使えなくなったことはもう周知の事実。しかし、renderHook に wrapper を渡してprops を変更してテストしていた項目を testing-library/react の renderHook で代用するのがむずかったのでここに残す。 /** * hook関数を実行し、返された値を検証するための必要な環境を提供するReactコンポーネントを定義し、 * それをラッ

          DonTacos

          React18 にて testing-library/react のrenderHook の wrapper へ Props を更新してテストがしたいんじゃ

          DonTacos

          AWS AppSyncって何？

          AWS AppSyncは、サーバーレスのプラットフォームであり、モバイルアプリやウェブアプリなどのアプリケーションにリアルタイムなデータ同期機能を提供するAWSのマネージドサービスです。 AWS AppSyncでは、GraphQLと呼ばれるクエリ言語を使用して、アプリケーションが必要とするデータを取得することができます。AppSyncは、データの取得だけでなく、変更や追加も行うことができます。また、クライアントアプリケーションが変更したデータをリアルタイムにサーバーに同期す

          DonTacos

          AWS AppSyncって何？

          DonTacos

          AWS CloudFrontのビヘイビアって何？

          CloudFrontのビヘイビア（Behavior）とは、CloudFrontディストリビューションで設定されたリクエストの処理方法を指定する設定項目のことです。 具体的には、以下のようなビヘイビアを設定することができます。 キャッシュの動作（キャッシュの有効期限、キャッシュしないオブジェクトの指定、等） セキュリティ設定（署名付きURLの使用、許可されたHTTPメソッドの指定、等） エラー処理（エラー時の挙動の指定、等） リクエストのルーティング（オリジンサーバーの

          DonTacos

          AWS CloudFrontのビヘイビアって何？

          DonTacos

          Amplify Hosting Computeに移行について

          Migrating a Next.js 11 SSR app to Amplify Hosting compute の翻訳メモ 新しいNext.jsアプリをデプロイする場合、デフォルトでAmplifyはサポートされる最新のNext.jsバージョンを使用します。現在、Amplify Hosting compute SSRプロバイダーはNext.jsバージョン13をサポートしています。 Amplifyコンソールは、Amplify Hosting computeサービスがNex

          DonTacos

          Amplify Hosting Computeに移行について

          DonTacos

          Next.js v12からv13へのアップグレード

          Next.jsのバージョン13にアップデート yarn add next@latest react@latest react-dom@latest eslint-config-next@latest v13 Summary サポートされているブラウザは、Internet Explorerを削除し、モダンなブラウザを対象にするよう変更されました。 Node.jsの最小バージョンは、12.xがエンドオブライフになったため、12.22.0から14.6.0に引き上げられまし

          DonTacos

          Next.js v12からv13へのアップグレード

          DonTacos

          独自TypeScript Library公開へ向けてtsupをチェケラッチョ

          興味があるけど、tsupを聞いたことがない人のために、私たちはこのモダンで堅牢なJavaScriptツールについて説明します。tsupは、人気のあるrollupの代替となる新しいバンドルツールで、JavaScriptライブラリを作成し、他の人が自分のプロジェクトにnpm installできるように、npmレジストリに提出する方法を説明します。この記事は、JavaScriptの拡張機能であるTypeScriptに焦点を当てています。 tsupは、キャッシュを必要とせずに極めて

          DonTacos

          独自TypeScript Library公開へ向けてtsupをチェケラッチョ

          DonTacos