記事一覧
Migration guide for Storybook 8.0
https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io 翻訳メモ 🩻 新しいビジュアルテストワークフローを提供する「Visual Tests」アドオン 新…
Cookieについて
Cookieとは？
Cookieは、ウェブブラウザとサーバー間で情報を保持するための小さなデータファイルです。ユーザーの情報やセッション情報を保存して、次回訪問時にその情報を使用するために使われます。
Cookieの仕組み
サーバーからの設定
・ユーザーがウェブサイトにアクセスすると、サーバーは特定の情報をCookieとしてユーザーのブラウザに送信します。
・ブラウザはこの情報をローカルに保
配列を更新するならforEachじゃなくてfindIndexな理由
ある配列があります。
type THoge = { id: string; items: { id: string; state: '1' | '2'}[]}type THogeList = THoge[];
THogeList から THoge の items の state を更新することとします。
forEachを使用する場合forEachは、配列の各要素に対して指定された関数を実
Migration guide for Storybook 8.0
https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io
翻訳メモ
🩻 新しいビジュアルテストワークフローを提供する「Visual Tests」アドオン
新しく導入された「Visual Tests」アドオンを使って、視覚的なテストワークフローを実行できるようになりました。
💨 テストビルドが2〜4倍
Webpack 開発終わってるから代替えを検討しよう
調査してたら、Turbopack か Vite かどっちかな気がしてきた。どっちがいいのか決めていこう。
TurbopackについてTurbopackは、Webpackの後継と見なされている新しいオープンソースバンドルツールです。Turbopackは、Rust で作られ、Webpack よりも高速でスケーラブルな設計になっています。Turbo エンジンをベースにしており、キャッシュ、無効化、イン
JIRAを使ってLPをスクラムで回して開発していこう
LPの開発をスクラムで進める際に、エピック、ストーリー、およびタスクをどのように切り分けるかを検討します。
エピックの作成: 最初に、各画面（TOP、ABOUT、SERVICE）をエピックとして作成します。エピックは大きな機能や目標を表し、複数のストーリーやタスクを含む単位となります。各画面が個別のエピックとなります。
ストーリーの作成: 各画面を具体的な機能やユーザー体験として分割します。ス
ApolloClientについて
httpLink = new HttpLink({ uri: process.env.ENDPOINT, credentials: 'include', // => ココ headers: { authorization: `Bearer ${authToken}`, },});
credentials について
credentials は、Apollo ClientのHttpLinkオブ
複数のアカウントで GitHubを使おう
ローカル環境で複数のアカウントを使用する場合、SSHキーまたはHTTPSの認証情報を設定する必要があります。SSHキーの場合は、新しいキーペアを生成し、それを新しいアカウントに関連付けます。
SSHキーの生成RSA（Rivest-Shamir-Adleman）非対称暗号アルゴリズムを使用して公開鍵と秘密鍵のSSHキーペアを生成します。
公開鍵は暗号化に使用され、秘密鍵は復号化に使用されます。
.
NodejsのBlocking vs Non-Blockingについて
ブロッキング
ブロッキングとは、Node.jsプロセス内で追加のJavaScriptの実行が、非JavaScript操作が完了するまで待機する必要がある場合を指します。これは、ブロッキング操作が発生している間にイベントループがJavaScriptの実行を継続できないためです。
Node.jsでは、I/OなどのJavaScript以外の操作を待つ場合は、ブロッキング処理が発生することになります。
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: 'com
GraphQLのSiblingについて
GraphQLにおいては、兄弟要素という概念が直接的には存在しませんが、リレーションシップを持つオブジェクト同士が階層的に入れ子になったGraphQLスキーマを作成することで、似たような構造を表現することができます。
例えば、以下のようなスキーマがある場合を考えてみましょう。
type Book { id: ID! title: String! author: Author!}type A
nodemon をローカルインストールしてPATHを通す
インストールする
npm install --save-dev nodemon
--save-dev オプションを使用することで、パッケージが devDependencies に追加されます。devDependencies に追加することで、本番環境でのデプロイ時にはインストールされません。
PATHを通す
node_modules/.bin ディレクトリが PATH に追加されているか確
React18 にて testing-library/react のrenderHook の wrapper へ Props を更新してテストがしたいんじゃ
React18になり、今まで使っていた testing-library/react-hooks が使えなくなったことはもう周知の事実。しかし、renderHook に wrapper を渡してprops を変更してテストしていた項目を testing-library/react の renderHook で代用するのがむずかったのでここに残す。
/** * hook関数を実行し、返された値を検証
AWS AppSyncって何？
AWS AppSyncは、サーバーレスのプラットフォームであり、モバイルアプリやウェブアプリなどのアプリケーションにリアルタイムなデータ同期機能を提供するAWSのマネージドサービスです。
AWS AppSyncでは、GraphQLと呼ばれるクエリ言語を使用して、アプリケーションが必要とするデータを取得することができます。AppSyncは、データの取得だけでなく、変更や追加も行うことができます。ま
AWS CloudFrontのビヘイビアって何？
CloudFrontのビヘイビア（Behavior）とは、CloudFrontディストリビューションで設定されたリクエストの処理方法を指定する設定項目のことです。
具体的には、以下のようなビヘイビアを設定することができます。
キャッシュの動作（キャッシュの有効期限、キャッシュしないオブジェクトの指定、等）
セキュリティ設定（署名付きURLの使用、許可されたHTTPメソッドの指定、等）
エラー