最近現場でTailwindを使い始めたので、その導入について
React+Tailwind
 
・npmかyarnでインストール
npm install -D tailwindcss postcss autoprefixer
 yarn add -D　tailwindcss postcss autoprefixer

 
・tailwind.config.js を修正する
contentにTai[…]

APIを投げる際のクエリをオブジェクトから生成してくれるライブラリです。

検索用APIとかってたくさんクエリをつけるのでオブジェクトからパースしてくれるの助かりますよね。

インストール

npm install –save @types/qs

使い方
import qs from ‘qs’;
const query = qs.stringify({
hogeId: 1,[…]

typescriptを使っているとたまに、anyは使いたくないけど色々な型を使いたい時ってあるじゃないですか。

そういう時にGenerics（ジェネリクス）でメソッドをつくると呼び出し側から型を渡せるので非常に便利でした。

以下、引用

 
Genericsは抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラス・関数・インターフェイスを実現する為に使用されます。

 
function t[…]

検索ボックスに詳細検索用のボタンを付けて詳細を押すと詳細検索モーダルを表示するようにしていたんですけど、

inputの自動補完をOFFにしたいなと思い下記のように変えたら

　//←追加

詳細
検索

詳細ボタンをクリックするとページがリローディングされるバグが発生するようになりました。

どうやらの中のはtype=’button’などtypeを明確にしていない場合、全てsubmit扱いになってし[…]

最近、仕事でPC上にたてたTomcatサーバーにスマホから繋ぐってことをする機会があったんですけど、

pingは通るのにスマホからサイトを開くとタイムアウトで何も表示されなくて

絶対ファイヤーウォールだと思って一瞬ファイヤーウォール切ってみたんですがダメで

なんでだろうなー、なんでだろうなーって何時間も色々やってたら

そもそもWi-Fiをプライベートにしてないってことがありました、、、、、

 […]

Cypressでのmockはinterceptを使用します。
このinterceptはいろんな使用方法があり複雑なんですが、最後の引数に返したいレスポンスを渡すことでmockすることができます。
APIの追跡だけならレスポンスを渡す必要はありません。

it(“ダミーデータを返す”, () => {
cy.fixture(‘dummyResponce.xml’).then((dummyResponce) =>[…]

Cypressでは頻繁に使用する処理をカスタムコマンドとして設定することができます。

cypress/support/commands.ts

// 頻出する操作をカスタムコマンドとして定義
// 操作：ボタン要素の特定・テキストエリアの特定・ボタンを押す・テキストエリアを埋める
C[…]

・Cypressでの基本的なテストの書き方

integrationフォルダ下にspecファイルを作成してテストを記述していきます。
context(‘カテゴリ名’, () => {
it(‘シナリオ名1’, () => {
Cypressコマンドによる処理入力
┋
})
it(‘シナリオ名2’, () => {
Cypressコマンドによる処理入力[…]

最近、現場でCypressを使い始めたので導入方法を記しておきます。

⒈Cypressのライブラリをインストールする。

yarn add -D cypress

⒉package.jsonにCypressを起動するためのスクリプトを追加する。

“scripts”: {//追加  “cy:open”: “cy[…]

仕事で「アイコンを変更する」機能を実装した際に使用した手法をまとめておきます。

 
【HTML】

【TypeScript】
const onClick = React.useCallback(() => {
// インプットを作成
const input = document.createElement(‘input’);
input.type = ‘file’;
inp[…]

仕事で「アイコンを変更する」という機能を実装した際にファイルのアップロードを書いたのでやり方をまとめておきます。

今の環境は、React/Next.jsでTypeScriptを使用しており、

独自のアイコン更新APIに画像情報と一緒にユーザーIDやセッションIDを渡す必要がありました。

const imageUpload = (
imageFile: File,
userID:[…]

みなさん、こんにちは

今年ももう終わりですね、、

今年は体調を崩したりして長期のお休みを取ったり、案件が変わったり、

私生活の方では結婚式を挙げたりと色々なことがありました。

新しい家族（猫）も増えましたw

コロナになってから生活が様変わりし、今ではリモートでのお仕事が当たり前になりました。

今年は変異種が猛威をふるい去年よりも厳しい自粛が続きましたね、、

ですが、ワクチンが[…]

最近、useEffectが原因で無限ループにはまったのでその状況と対応策をまとめておきます。

状況：useEffectの依存配列にコンポーネント関数を含めることで無限ループする

コンポーネントの関数はレンダリングされるごとに作成されるためそれをuseEffectの第二引数である依存配列に入れてしまうと無限ループが発生します。

対応策：

・関数を useEffect 内に記述する[…]

みなさん、こんにちは

今月の頭に2回目のワクチン接種に行ってきました。

モデルナの2回目といえば副反応が強いとの噂だったので解熱鎮痛剤や冷えピタ、ウィダーなど寝込んでも大丈夫な備えをしっかりとして挑みました！

1回目と同様に都庁の会場で1時間ちょっと並んで打つことできました。

お昼くらいに行って打った後に昼食を食べて16時くらいに帰宅しましたが、その頃にはなんだか全身に倦怠感があり早々にベッド[…]

みなさん、こんにちは

先月ようやくワクチンの予約が取れたため、1回目のワクチンを打ちに行ってきました！

予約したのは都庁の若者向け接種会場で、予約時間の10分くらい前に到着しましたがなかなかに混雑していて並ぶこと約1時間弱くらいで打つことができました…

副反応ですが、当日の夜くらいから接種部位に筋肉痛のような痛みがし出して、左腕を下にして寝られないくらい痛いのでずっと右向きか仰向きで寝ました（笑）[…]

みなさんこんにちは。
つい先日、都庁と乃木坂に新しくできた若者向けワクチン接種会場にてワクチンの接種予約が、やっと…やっと……取れました！

私達夫婦は20代後半と30代で、特に職域接種も無く（私はフリーランスですし…）なかなかワクチンを打てずにいました。
7月の半ばにやっと住んでる地域から摂取券が送られてきて、これで打てるんだと思っていました。

ですが、全然予約が取れない！！本当に予約が取れないんです！！[…]

今回はマージリクエストを出すとき、コミットを一つにまとめてくれと言われてやったので忘れないようにやり方をまとめておきます。

まずログを確認します。

git log –oneline

次にリベースします。まとめたいところの一つ下のコミットIDを指定します。

git rebase -i コミットID

※HEAD~2とかで範囲指定もできる。

そうするとファイルが開か[…]

皆さんこんにちは

先月から始めたBASEのテーマ作成

今回はヘッダーのところを作成していきます。

前回Developersを開くところまでやりましたが、その状態でプレビューするとこのような感じになっています。

それを下の画像のようにしていきたいと思います。

１．ショップロゴ

まずは中央に配置されているショップロゴを左上に移動していきたいと思います。[…]

皆さんこんにちは

緊急事態宣言は延長され、一体いつになったら感染者数は落ち着くんだろうか…

という今日この頃です。

皆さんはBASE (ベイス)をご存知でしょうか？

ネットショップを無料で簡単に開設できるサービスみたいです。

昨今のコロナ禍で外出が減ったため、通販などのネットショップの需要が高まってきています。

そんな中、簡単にネットショップが始め[…]

みなさんこんにちは

せっかくのGWですが緊急事態宣言になってしまいましたね…

最近はコロナウイルスの変異株が猛威をふるっていますが、「N５０１Y」ってなんだろう？と思ったので調べてみました。

１．感染状況

新型コロナウイルスが感染再拡大しており、その要因となっているのが感染力が強く、重症化リスクの高い変異株の流行です。

厚生労働省によると、ゲノム解析で確定した全国の変異株感染者は4月20[…]