デザイン的にスクロールバーを表示したくない時ってあると思うので、その備忘録に記しておきます。

 
.textarea{
/*要素の高さを指定*/
height: 300px;
/*上下方向にはみ出した要素ををスクロールさせる*/
overflow-y: scroll;
/*スクロールバー非表示（IE・Edge）*/
-ms-overflow-style: none;[…]

typescriptのデフォルト引数の書き方がたまにわからなくなるので備忘録として残しておきます。

JavaScriptのデフォルト引数は、引数の右に=とデフォルト値を書きます。

// 関数宣言
function 関数名(引数 = デフォルト値) {}
// アロー関数
(引数 = デフォルト値) => {};

TypeScriptで、型注釈とデフォルト引数の両方を書く場合は、型注釈[…]

みなさま、こんにちは

フリーランスになってからふるさと納税の恩恵が大きくなり、節税対策として今年もふるさと納税の返礼品を注文しました。ふるさと納税の返礼品といえばお肉やフルーツなどちょっと贅沢なものが目を惹きますが、私は圧倒的コスパ重視で選んでいます、、！そこで今までで買ってよかった返礼品をご紹介します。

・トイレットペーパー（静岡県富士宮市）

エリエールのトイレットペーパーです。トイレットペーパー[…]

みなさまこんにちは

null判定をする場面というのが良くあると思うのですが、論理否定演算子でのnull判定ってのが結構忘れがちだったのでメモしておこうと思います。

 
論理否定演算子とは、「真偽値」で評価したものを反転して返す時に使われるもので、真偽値で評価する値の前に「！」をつけるだけで使用できます。
 

論理否定演算子の便利なところは、空文字も引っかかるとこだと思います。null、undefind、空[…]

SourceTreeでプッシュやプルをしようとした時に、authentication failedになることありませんか？

アクセストークンの有効期限[…]

みなさん、こんにちは

4月から新しい現場になったこともありかなりバタバタしていて、何も投稿する内容考えていませんでした、、

4月27日からゴールデンウィークのお休みをとっていて、今年は茨城のネモフィラ畑に行こうかなと考えています。リモートワークばかりで家に引き篭もりがちなので、自然の感じられる場所でゆっくり過ごしたいですね。

マスクも緩和されましたし、数年ぶりに外で楽しく過ごせそうです！

それではみなさ[…]

こんにちは

今回は多言語対応に使えるライブラリー「hi18n」についてお話しします。

お客さんの方から多言語対応したいという要望がありまして、色々ライブラリーを探したところ、React＋Typescriptの環境なら「hi18n」が良さそうかなと思い導入してみました。使い方としては、日本語や英語など言語毎にcatalogを用意して、それを一つに纏めたbookを使いたいファイルから呼び出すような感じになります。[…]

こんにちは

たまにrebaseとかした拍子に自分のコミット消えちゃうことあるととっても焦るのでメモしておきます。

1.git reflogで元に戻したいコミットIDを確認

git reflog
(コミットID) HEAD@{0}: pull: ~~~~~~~~~~~
(コミットID) HEAD@{1}: che[…]

こんにちは

新年一発目の投稿なので今年の抱負を述べようと思うのですが、

今年は英語で会話ができるように勉強を頑張っていこうかなと思っています！

と言うのも、今の現場では外国人の方と一緒に作業していて、もちろん日本語を話せる方ではあるんですけど、私も英語を話せたらいいなと感じる場面が多々ありました。私はエンジニアではありますが、学生の頃からそういった勉強をしていた訳ではないので、英語が本当に本当に苦手でほぼ中学[…]

2023年ももう終わりですね。

今年は引っ越しをしたのでネット環境が改善され、大分仕事がしやすくなりました。

リモートワークしてると自宅の環境を整えるのが結構大変ですよね、、、

フリーランスになってからもう３年が経ち（コロナになった年？）この仕事にもなれてきました。

私は元々会社という組織に属することが合わないタイプの人間だったので、フリーランスになったことで色々リスクを負いはしたものの悠々自[…]

最近現場で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[…]